As I noticed from my own experience, there are a lot of companies working with a design system. But how do you set these things up? Where do you begin? And how do you maintain it. These are some of the questions that I will try to answer. So let’s start!
A good starting point! What exactly is a design system? The definition could be; a design system is a ruleset for a digital product and/or brand. That sounds like it could be quite complex, but in reality it can be simple. To clarify, you and your team document the rules about how to use fonts, colours, buttons etc., but also how to use them on different devices and platforms. You can make it as expansive as you like.
A lot of UX/UI designers are working for company’s that have a design team, which is nice and collaborative. It has a lot of benefits but it also has some down sides. The design team will work on the same projects and probably run into the same issues and therefore each person of the team will come up with a different solution. Probably a good one, but if everybody does this, the overall product will like not get a consistent user experience. (That’s something that you don’t want!) The trust of users is based on the credibility of a digital product or service, so consistency and predicability is key to a good user experience and in the end, happy users!
The purpose of a design system is to ensure design and development consistency across the entire brand ecosystem. As you can imagine, if your design team grows or there is a change in the team, it can become difficult to keep everybody up to date about the design decisions, so another good purpose it that is a time saver! Save time on those situations you when you up tackling design challenges over and over again! And remember, it is a live system, so make sure to keep it up to date.
My personal presence is to use Abstract for versioning and Invision Design System Manager to document decisions that have been made together with the team.
I would suggest that you start small and simple. The minute you start too big, the chance that it will fail are bigger. Another important thing to remember is to get your team involved. Make sure that everybody is contributing to the system. (With enthusiasm!) If you are the the only one active and no one else is involved, there is a big chance that your team won’t adopt it. Create ownership where necessary to ensure full engagement from the team.
You are almost ready to start your own design system! In these steps I describe in a general way how to start.
Start your design system with an inventory of reusable elements. Think of:
Now the fun starts! Get your team together and make sure that all the team members are involved. Think of UX designers, UI designers, Stakeholders and development.
This is the groundwork for a good design system; define rules and principles. Think of how to document all of your decisions as a team. But also which tool you are going to use in order to document this. And another thing to keep in mind is how to name everything accordingly. (Naming conventions)
The first part of your design system setup is the colour palette. This is such an important part of your brand identity that it’s good to start with it. Define your primary and secondary colours, the accent colours and so on.
A big part of the brand identity is the use of typography. Think of font, font sizes, white spaces, scalability for desktop, tablet and mobile. But also think of accessibility and paragraph styles.
Icons can make it easer for the user. But if the design team do not use the icons in the same way as each other, it can create confusion for the user. So it’s important to make clear rules about how and when to use certain icons.
Set up, your grid styles, white spaces, breakpoints for tablet and mobile, but also think of animation, use of sound and micro-interactions.
Combine the different elements; colour, typography, icons and style properties, and build some patterns. Some elements are used all over the website, think of a header, footer, article or from. By setting up these basic elements you can design quickly and efficiently whilst maintaining consistency throughout the whole website.
..and you are good to go! As you can imagine this is quite a basic setup. Every company, brand or team is different. So investigate what works for you!
Good luck and if you have questions about design system, don’t hesitate to contact me!
