What is a design system and when do we need one?‍

A design system isn’t only a collection of design elements such as typography, colours, spacing, and patterns that are used consistently across a product or brand. The purpose of a design system is to maintain brand consistency and improve the user experience by creating a unified look and feel across all platforms. In order to achieve such consistency, we need to keep proper documentation on how the assets are used across the platform. This is the main difference between a Design System and a Style Guide.

So, when do you need a design system? If you’re designing a product that will have multiple designers, developers, or stakeholders working on it, a design system can be helpful in maintaining consistency and ensuring that everyone is on the same page. If you’re working on a smaller project with a single designer, a design system may not be necessary.

In my personal experience, if you’re working on a smaller project with a single designer, a design system may not be necessary, rather having consistency among typography, colours and spacing (just a simple style guide) . In this way you’ll still achieve the desired consistency among the platform.

How much time do you need to spend on creating?

Creating a design system can be a time-consuming process, especially if you’re starting from scratch. However, in the long run you will reap the benefits of having one. Creating a design system takes time, don’t expect to happen over night. Be patient, there is not specific formula to measure how much time do you need to create one.

Once you have a solid design system in place, it can save you time and effort by ensuring consistency and making it easier to create new designs in the future.

Maintaining a design system

When it comes to maintaining a design system, it’s important regularly to set aside time for updates and revisions. This heavily depends on the size of your team and how fast your product is growing. As your product or brand evolves, your design system will need to evolve as well. Regular updates can help you maintain brand consistency and keep your design system up to date. The important note here is that you must always spare time on going back and forth within your design system and keep it up to date. I know it might sound quite an intimidating and tedious task to do but it is worth the effort.

How to create a design system from scratch?

If you’re a junior designer starting with a new project or a company that has not created a design system yet, creating a design system from scratch may seem daunting. I’ve been in such situation a while ago and I know how frustrating such task can be but here are some tips that might help you get started:

Define your brand guidelines: Before you start designing your design system, define your brand guidelines. This includes elements such as your brand voice, messaging, and target audience. This will help you ensure that your design system is consistent with your brand’s overall vision. As a rule of thumb, you can always talk with the marketing team and clarify this issue.

Create a style guide: A style guide is a document that outlines the design elements of your brand or product. It includes typography, colours, spacing, and patterns that will be used consistently across all platforms. Creating a style guide is an essential first step in creating a design system.

Start small: You don’t need to create a complete design system all at once. Start with a few key elements, such as typography and colours, and build from there. Rushing the process will lead to confusion and inconsistency. It’s better to try out different scenarios rather than creating something that will not fit the product.

Break it Down with Atomic Design: Probably you’ve already heard this a thousand times but consider utilising the atomic design methodology, introduced by Brad Frost. Similar to chemistry, atomic design breaks interfaces down into five hierarchical levels: atoms, molecules, organisms, templates, and pages. Atoms are the smallest components, such as colours, buttons, icons. Molecules combine atoms to form more complex components like navigation menus. Organisms are groups of molecules that create functional components like headers or footers. Templates combine organisms to create consistent page layouts, and pages are the final product.

Involve your team: As I mentioned above creating a design system is not a one-person job. Involve your team in the process, gather feedback, and make sure everyone is on the same page. Communication among teams will significantly improve your end product (which is the ultimate goal). Don’t be afraid of sharing your ideas across the organisation even if you receive some negative feedback (this might be more helpful than always hearing yes).

Tools to streamline the process: There are many tools available that can help you create and maintain a design system. Personally, I use Figma as a design tool which includes features such as shared libraries, which make it easy to share and update design elements. Additionally, there are a few plugins that can speed up the process but I’d rather have it for another time.

Test and Refine: Finally, as you create your design system, it’s important to test it across various platforms and devices. Gather feedback from users, stakeholders, fellow designers, and your team to refine and improve the system. Iteration is key to ensure usability and effectiveness. We are designers after all, we do this all the time.

Take inspiration from the big guys

It’s always a good idea to look up to the big companies and see how they are dealing with design systems. There are plenty of free resources such as Google’s Material Design, Apple’s Human Interface Guidelines, Uber’s Base Web and many more. It is worth spending some time and going through a few of these as you can learn a lot. Such resources can be beneficial for outlining your path towards a consistent and solid design system.

In conclusion, creating a design system can be a tedious and daunting task, but it’s an important step in maintaining brand consistency and improving the user experience across all platforms. There is much more behind a design system but I don’t want to annoy you straight away. Each side can be explored more in-depth and I’ll do my best in the future to do so. Hopefully this guide can help you create and achieve such consistency and build an amazing product.