The Design System — how can you benefit from it?
A comprehensive guide with real examples.
Design System is definitely a buzzword that has been used in the digital design world for quite some time and not without reason. The key to building an easy to use digital product is maintaining design consistency, and the easiest way to do this is through a good set of rules and documentation.
A Design System is here to help.
How is Atomic Design connected to Design Systems?
Brad Frost’s influential Atomic Design methodology is a good starting point to understand what a Design System is. The methodology consists of atoms, molecules, organisms, templates, and pages. The idea is that smaller elements are the part of the bigger ones and everything is tightly linked. It means that atoms (buttons, inputs) make molecules (search box that is made with button and input) and molecules make organisms (top navigation that includes the search box).
During a conference I attended 4 years ago, Vitaly Friedman from Smashing Magazine gave a talk where he said that it’s very hard to start designing with atoms because you don’t know the context of the elements yet. That’s why you have to first focus on experiences — with e-commerce you have to rock the checkout experience or product detail page and think of the flow between those pages (and you will probably start with some lo-fi wireframes at this point). Once you know what the key elements for these pages are you can focus on them.
Here comes the phase of key UI elements explorations — you don’t really need to start your design with the final artboard size, specific grid, or getting all breaking points, your first task will be to explore the typography, colors and core UI elements — for each project it will be something different, for e-commerce the checkout page will be crucial, so it’s good to focus — for example on inputs that will build these pages, for a lifestyle magazine it could be the typography and an article page.
Here’s an example of elements exploration shown by Vitaly: http://rif.superfriend.ly/designs/round2/
As I mentioned — it is a good starting point because it shows us how to think component-wise, but it’s definitely not something that I would call a Design System on its own. This concept focuses on grouping common UI elements together which would rather cover the idea of creating subsidiary components, but it kind of skips the bigger vision and there might be a risk of losing the context of the product. People very often confuse the Design System with the collection of visual rules, despite the fact that it’s way more than that.
So what is a Design System?
I’d say that a Design System is a framework for making design decisions, but more significant is what it actually does:
Design systems bring order and consistency to digital products. They help to protect the brand, elevate the user experience, and increase the speed and efficiency of how we design and build products.
– Laying the Foundations by Andrew Couldwell
The elements in the Design System can differ or interfere and in my opinion, there’s no one “golden recipe”. It’s because every product and brand is different and may need some tweaks to convey the vision and serve teams in the organization well. Elements a Design System might consist of:
Design Principles
This is where all of the foundations can be found like brand personality, philosophy — values, mission; language — writing style, tone of voice.
Its role is to guide the team towards keeping cohesion and help them understand the approach and solve problems when building a product, but in a very abstract way, because there are no specific visual solutions yet, just general guides.
At Mudita our design principle emphasises minimalism not only in our philosophy but both in all our tangible products and the digital design. In this case we focus on main USPs for the product, not overwhelming with tons of features. This guides us to many design decisions like sticking to a very limited color palette — we use mostly black and white with some addition of pastel blue and grey. And thanks to this we can convey the spirit of minimalism in our products.
Product Styleguide
Styleguide is a set of visual rules for the product that doesn’t show the relationships between elements nor any context. The styleguide usually includes:
- Colors
- Typography
- Imagery (photos, illustrations, icons)
- Grids and Spacing System
Components (design and code) and Patterns Library
I merged these two into one point because usually these two sections interfere with each other. Quite often the description of how the component works and how it should be used (design pattern) is an introduction on the component page (component library), you can also find some Dos and Don’ts there.
Components are the set of reusable elements designed based on the style guide that can be used within the app. Each element also has an equivalent in the code. These might be buttons, inputs, modals, cards and other elements.
Good practices:
Material design
It’s the easiest one to relate to because almost every UI designer has learned how elements work and look to make a decent material design app. This one is a masterpiece that is very easy to work with. Imagine how hard it would be without these guides!
Shopify Polaris
Atlassian Design System
Hubspot’s Canvas
For more check out this DS repo
Why would I ever make one?
Design Systems are crucial when it comes to some of our everyday touchpoints:
1. Being on the same page with the marketing team
While building a product it’s very easy for the design and marketing team to accidentally go their own way. Having rules that are set in stone can make this journey way easier. Not only is it about the common vision and the idea of reaching goals, but also making sure the marketing team is very up to date when it comes to the stylistic, design rules, available assets like illustrations, renders, icons etc.
2. Collaborating with other designers and speeding things up
In our team of six designers it’s very common for us to work on large-scale projects together. Sometimes, the division of work is very easy — the UX designer gets the UX part, UI gets the UI, Visual does some illustrations etc. But when the project is bigger and more complex we have to work together on one thing to speed things up, so for example, three people work on the UI part. Here come all the problems… Because once you’re a designer responsible for one particular thing it’s pretty easy to be consistent, but when you’re working simultaneously with some other people you really need a guide.
The Design System helps us:
- handover projects to other designers with no extra explanation
- work simultaneously and keep the consistency
- create new screens and functionalities faster, once you have ‘lego blocks’ that you can be easily put together
3. No need to build tons of individual RWD pages anymore!
This is definitely a thing that saves a lot of time (and frustration *wink wink*). We take advantage of thinking in blocks and create responsive versions of components, not subpages — each element should be shown in typical RWD breakpoints. The number of components are finite, and very often the number of subpages are not. 😜
4. Handling the designs to the development team, keeping the consistency and elevate user experience
The main goal here is to provide the development team with the finished list of elements that are used within the application and the description of how they work, what they do, their states (active, filled, hover) etc. It helps them (and also designers) to stick to the elements that are already designed (and developed) and prevent them from creating new ones. It is not only about our time, but also about the user’s time, who is used to some UX patterns — every datepicker or modal should look and work the same so it will be flawless to use it anywhere in the app. So it’s a win-win(-win) situation for designers, developers and users.
If you’re not convinced yet, here are a few very inspiring articles about the larger players experiences with Design Systems:
From Hubspot
From Uber
Threats, are they real?
There are always great excuses to avoid creating documentation, but every excuse can get a counterargument 😇
Creating a design system for a small project is too time-consuming and won’t be availed
When working in a software house/agency it can get really hard to get a chance to design or use the design system. Very often, the given time and little scope of the work doesn’t give any chance to create anything more than a style guide. Sometimes the client is not ready yet to take the time and money to create the Design System. The reason might be that at the very beginning, during the initial stage of the product, they’re not even sure if they will get any users, funds and if they will be developing the project in the future.
In this case, a well-prepared Sketch/Figma/Adobe xd file can be a great foundation for a Design System subsequently. In my opinion, having everything organized, named and symbolized can be a great guide in the future and within small projects is substantial.
Thankfully here in App’n’roll, we are also working on our ventures — Mudita and Vooom, where we can truly focus on doing it the right way.
Designers can feel limited and not creative
Actually, designing based on a Design System can be even more challenging and creative than designing from scratch! It’s not that the elements are done and set in stone forever. If you have a good reason to change and improve something (having in mind that particular element location is multiple in the whole app), that’s great!
Making a small change might affect and improve the system easily because it’s interdependent. You can make a big difference with little effort. 😄 You will be sure that it has changed *everywhere* in the app, and you don’t need to manually check all the screens. The main focus can finally be on solving problems, not pushing pixels.
Once the Design System is done the designer is no longer needed
Design is never done! (If you don’t believe see this post with the evolution of google home screen and navigation 🔥 ) Once it’s done the right way, using the system, it’s way easier to maintain and improve it in the future.
What are your thoughts on this? Are you creating and using a Design System in your organisation? How are you benefiting from this? Let me know in the comments below!
Thanks for reading! ❤️
