What is a Design System and why it’s so important? | by Julia Gale

[ad_1]

I’ve been working on more than 7 projects during my time in an agency and every one of them was connected to the subject of a Design system. Working with UI kits, creating a system from scratch or helping a team to structure an existing system so it will work better, were one of the many responsibilities during each project.

Let’s start from the beginning and define what is a design system. Some so many people call themself experts on this matter but truthfully so many people don’t have an idea about what is truly working design system is. I’m not an expert with decades of experience, but I like this topic and was blessed with opportunities to work with professionals.

What is a design system?

For the last decades, UI design evolved with great speed and creating complex applications or websites could be a problem without consistency and shared language.

Nielsen Norman Group defines a design system as a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels.

If to say it simpler, it’s a single source of truth for the whole team that is working on the project. This system combines not only a style guide, component library, UI kit and guidelines but also behaviour and scale rules, governance and code.

You should think about your design system as a convenient, centralised, evolving map of existing areas in your product that will help you to explore new features.

We are living in an era where new ideas growing so fast and some becoming extremely successful very quickly. I bet you know a few examples yourself, but in general, a lot of these startups after fast rise find themself in a mess of design components and find out that they using too many fonts or there are 3 different primary buttons or too many colours. This situation reflects badly on business, becoming annoying to customers, expensive and time-consuming for the team.

So that’s where a design system will shine. You would be able to fix all inconsistencies, fix UX processes and create scalable UI language.

What are the benefits of the design system?

First and foremost, design and development could be created and replicated much quicker which is great when the team needs to illuminate problems in the product by using pre-made UI elements that lower inconsistency. Also, nearly 80% of the design efforts could be focused on large or more complex problems in the product that previously was tweaking the visual appearance of each screen.

Unified language and consistency could be the other benefits in favour to use a design system as there are so many stories from designers and developers about their debates about the functionality of an element, but when you have one source of truth it wouldn’t be necessary as all of it would be described in the documentation of a design system. Plus, you will have a place for future colleagues to get familiar with usage guidelines and style guides of your product.

Elements of a good design system

Brand identity and language — main elements are colours, fonts and illustrations if there are any used by the brand but it should also include any part of the brand and remember to include rules and examples of good practices on how to use these elements.
component library — these are your UI re-usable elements for the product that helps designers and developers build new screens.
pattern library — they define how and where to use specific components for the best consistent result.

Why is a design system so important?

The main reason is that you will create a better product much faster.

By using a design system you can guarantee consistency across all teams and throughout all the products from mobile to web and platform with the same patterns and components.
When every person in the team knows their next step and what they have to do their work becomes efficient and they spend less time thinking and trying to follow unwritten rules from one screen to the next.
Scaling becoming simple and fast without compromising the quality of UX as the team already have pre-made UI components.

When to enforce a design system?

It’s a simple answer, the sooner the better by postponing the decision about the implementation of a design system it will take a long time to audit all the inconsistencies and implement all the changes, but once you have your system in place it will start paying off right away.