Everybody’s talking about design systems! Is it all just hype, or are they something you really need? What do they do? Do they do things? Let’s find out!
Doctor Belka
Digital Product Design Dog
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
This is some text inside of a div block.
This is some text inside of a div block.
Do you have questions about product design? Doctor Belka has all the answers.
Doctor Belka! What is a design system?
Excellent question! I’m only a simple dog, but I’ll try to answer. Woof!
A design system is really just “a set of rules to help designers and developers work together to build great digital products.”
These are rules about things like:
Typography:what fonts you use, in which sizes and combinations
Palette: what colors you use, and how you match them
Iconography: your icons, their style and use
Layout: how the elements of your app fit together on a screen
Component libraries are the other essential part of a design system. They are collections of readymade, reusable design components that your designers and developers can use when they need.
That’s all fine and good, Doctor. But how does a design system actually help me improve my product?
Ah, another excellent question!
Let’s say you’ve been working on your product for a while. Maybe it’s grown from a little minimum-viable product into something more, with a bunch of new features added over time. Maybe you’ve had many different designers working on it, or maybe even no designers at all.
That’s where a design system can be very helpful!
If your digital product is starting to look a little rough around the edges, creating a design system can help give it a consistent look and feel, and help you align it with your brand.
A robust design system will also help you scale your product faster and more efficiently. With solid ground rules and a set of ready-made components, adding new features becomes much easier, and you can do it without sacrificing visual consistency and user experience! Woof!
So, is that it? Design systems are just rules and libraries?
No!
That’s what many people think, but they are wrong.
It’s true that design systems are about rules and libraries, but for us at Belka, the most useful thing about design systems is that they get people barking — I mean talking!
Because a design system is a really great communication work tool. It helps the people on your teams — designers, developers, dogs, CEOs and everyone else — talk to and understand each other.
And in fact a design system does more than help them talk. It kind of forces them to talk!
This aspect of design systems is very helpful for everybody on your team — not just designers and developers. It helps you deliver better products, on time and on budget, but also makes for a more positive culture of communication.
Is it magic? Well, I’m just a dog and I don’t always understand humans, but maybe there is something a little magical about it.
So you’re saying everybody should have a design system?
Woof! Absolutely not.
Not every product and every company needs a design system!
My owners at Belka have worked on a lot of design systems, and the biggest lesson they’ve learned is that they’re not for everybody!
A design system is like an avocado plant or a human marriage: To grow and flourish, it needs the right climate, the right context and the right people.
The right time to build a design system? If you answer yes to all of the questions here below, you will probably benefit most from building a design system:
You’re a scaleup! You’ve left the early startup phase and you’re ready to grow! Fast!
You’ve got a digital product! It’s in reasonably good working order and has at least some design maturity.
You’re not tiny anymore! There are about 15 to 100 people on your company team.
You have structure! There’s a design team with a UX lead, a dev team with a tech lead, a product owner, a CTO, a CEO, and a marketing & sales team.
If you’re a bigger company than that, a design system can also help (drop us a line, nudge, nudge), but if you’re still in the early startup stages, you’re probably better off waiting a bit.
When the pandemic hit, Subito, one of Italy’s top 10 online destinations, switched overnight to working in the cloud. Belka helped them rebuild their design system from scratch in Figma. Case study
Spiagge, Italy’s “Airbnb of the beach” asked Belka completely revamp their B2C mobile app, and create a design system for their team. Case study
Our CEO talked about design systems with Giacomo Mollo and Niccolò Sanarico last autumn at Tech Chill. Here’s the video
Do you like dogs and have questions about product design? Email the doctor at doctor@belkadigital.com or tweet at us with the hashtag #doctorbelka!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
What’s a Rich Text element?
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
What’s a Rich Text element?
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
What’s a Rich Text element?
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
What’s a Rich Text element?
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
What’s a Rich Text element?
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
Bullet point 1
Bullet point 2
Bullet point 3
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
quote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
What’s a Rich Text element?
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
Static and dynamic content editing
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
How to customize formatting for each rich text
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
