Disclaimer: Everyone has different working methods. We give you an example, a guideline for building your own Design System. You don’t have to copy it – but you can if you want to. Find out your own style of work and fit your system into it.
Part One – Design System: Beginning
Why do we make the Design System in the first place? The answer is rather simple and obvious. Chaos. There is no doubt that most designers have chaos in their files. Different button sizes, random icon weights, 400 shades of red, not to mention text styles or should I say – lack of them. For you that might be no problem at all. But think about others.
Who is influenced by this chaos?
Clients – time and cost efficiency is the most important thing for them. Because of the chaos, creating new views and functionalities takes much more time. With a Design System, it gets easy. With its help, we can reduce the hours needed to finish the project. Implementation will be much faster and the quality of the project will be much higher. Not like designing without any guidelines whatsoever.
Developers – for them, the Design System can be very important. Keeping the integrity of the project will be much easier. Thanks to Zeplin, they will have access to concrete color palettes, info about even distances between elements and much more. They won’t have to waste their time wondering if this blue button should have a bolded font or a shadow. Additionally, if the Design System is built based on tree-like naming (we will explain this method below), the programmer will be able to download needed assets with a correct name without the designer’s intervention. There are so many advantages that can help us and developers collaborate.
UX – creating wireframes is not that hard but sometimes it can be problematic. Some look awesome and clear, but others are missing views or functions. Introducing a Design System into the UX process is a one-time operation – and then it can be used forever. With a well-thought Design System, we can use premade components, text styles and icons which makes all our wireframes look good and consistent.
Testers – Using the Design System helps them to determine if everything has been done correctly or not.
Seems simple but it’s the key to building an effective Design System. Most designers don’t really care about the names of their styles, components, layers or artboards. But it is crucial to introduce order into our files. If you work in Sketch, the tree-style of naming will be very helpful.Part Two – Design System: Naming
So how to name your things? Start with the general description and get more detailed afterwards. Here are some examples:
To achieve the best usability of styles, we recommend to name your typography as follows:
[Size name] / [Alignment] / [Color] / [Style]
If the system includes more than one font:
[Font family] / [Size name] / [Alignment] / [Color] / [Style]
H1 / Center / Error / Bold
SF Pro / H1 / Center / Primary / Left
Segregating your components according to views is one way to go. If I create a component that is used only in contact, the name will be:
Component / Contact / Further name
It’s a clear division of components depending on their functionality. From the general category to the details, the last part is a description of a concrete state, for example, Card / Inactive.
Icons and colors
This one is similar to components.
Icon / [Type of icon] / [Color] / [State]
Color / [Type of color] / [State] or Color / [State] / [Concrete color]
Part Three – Design System: Atomic Design
The most popular framework for making a Design System is Atomic Design. It is not such a complicated philosophy but rather a simple methodology that consists of creating small particles and building bigger templates and projects out of them.
Before we even start with basic system elements, we need to determine what kind of atoms we will use. Here are the examples of atoms we use daily at iteo.
After the research is done and we have a vision of the product in our head, we can start with colors. It is a good idea to begin with establishing what will be the main color, additional color, text color, as well as success and error colors.
We used to create 2 or 3 screens before even thinking about paragraph styles but that’s not always necessarily a good approach. It is possible to pick typography before the first screen design. Assembling text will be much easier if we produce enough styles and sizes beforehand.
When it comes to colors, what you should keep in mind is: black, white, basic (main color of the app), grey, error, success. These color variants of your fonts will give you enough flexibility and consistency for future work.
Now let’s talk about scale and size. There are many ways to define this attribute in the typography system. We can try to use Type Scale, find out the right settings and then roundup picked fonts to a full number. Sticking to either even or odd numbers is considered a good practice. For example, don’t use size 14 and 15, instead use 14 and 16. Of course, that’s just a suggestion.
When our sizes are already defined, we can put them on an artboard. Then we add basic and bold options and duplicate. Align them to the left, right and center. Now we can save them as text styles for each group using the correct name.
Another very important step is to design a set of basic functionality icons that we are sure will be needed for the project. While creating them, we can use the ready color styles made beforehand. This way, we won’t have any problem with a quick color change of the icon – without a need to create more options in our components.
Buttons and inputs
These elements are present in almost every app. But we often forget to design all of the required states for them. When doing that, we need to remember about the shape that should be based on the color scheme and the text that should be based on the paragraph style. That’s a helpful trick for when a problem or an inconsistency occurs – then we can exchange any element and apply it to a whole project.
Let’s come back to the states. We need to remember all the possible combinations and create buttons for them. Here is the usual set:
- Focus on and off (useful for keyboard navigation or other devices)
- Disabled or Inactive
For inputs, we also need to remember all the needed options. The usual set for them is:
- Focus on and off
- Disabled or Inactive
- Validation error
If you are wondering what is a “Focus” state, let me explain. It appears when we use a website without a mouse but with a “TAB” key or when we use computers with touch screens. The first click is a “Focus” state and the second one is a confirmation.
Part Four – Design System: Let’s Rock!
After we are done with determining our atoms, we can start building our Design System. No matter what we design – a mobile app, a desktop app or an ordinary responsive website – we need to keep a couple of rules in mind.
Remember to create new components with the ones that you made previously. For example, a chart can be done with the following symbols: an icon, a shade, a shape, a state and a text. How complex organisms you design with your atoms depends just on you.
We hope this small guide will help you to create your own Design System. This way you can give your chaos a dash of organization and clarity. Using it will make your work faster and better.
If you need seasoned UX and UI designers to give an original touch to your project – let us know what you have in mind. We offer complex web and mobile development services with stunning design to complete them.