The Design System is an increasingly common tool in the world of digital design and for a number of good reasons. If you don’t know what a Design System is or when to use one, this article will give you the answers.

What is a Design System?

A Design System is a set of all the UI componentsassociated with a digital product, developed along a common UX strategy. A UX strategy is a detailed plan that defines the vision and main goals of a product and ensures that business needs and user needs meet. In a Design System, when new UI elements (buttons, input fields, tables, etc…) are created for an application, they are created based on the same principles, colour schemes and patterns. As a result, the overall design of the application can remain consistent, development time is shortened and the user experience is improved.

The Design System includes, for example, typography, colour palette, style of the different elements or the icon set of the application. It is fair to say that all of these are included in a well-designed brand book, which is basically designed to define the colour schemes, fonts and patterns that are associated with the brand. However, a Design System is much more than a brandbook, primarily because it contains UI elements developed according to the principles and styles defined in the brandbook, and also explains how they are used in context.

Why use a Design System – Consistency

Design Systems have two big advantages. One is that they reinforce brand awarenessbecause they can guarantee that each UI element under the brand will always look the same. If you look at an advertisement that shows the magenta colour of Telekom, it doesn’t even necessarily have to have a phone on it, you immediately associate it with the telecom company. Magenta is central to Telekom ‘s brand, and because we consistently see it everywhere next to the Telekom name, we now identify magenta with Telekom. It works the same way for an app, because an app is just an interface where our brand meets our customers. If anyone wants to read more about this, there has been a lot of research on the cognitive aspects of branding in psychology. So, with the consistency provided by Design Systems, our product or brand will be stronger and more recognizable.

Of course, consistency is not only important for the brand. The usability of your application is greatly improved when elements with the same function work in the same way and look the same. In the physical space, everyone recognises a doorknob, knows how to use it and what it does. This is in no small part because most doorknobs look almost exactly the same, and they also function the same, depending on the type. It’s the same with an application, because if you look closely, if there’s a menu item on one page, you’ll find it in the same place on another interface, and you’ll almost expect it to work in the same way.

Why use Design System – Time

But there is another big advantage of Design Systems. Namely, it can significantly shorten the time needed for future design (and, in a good case, development) work. If you have a library of how each UI element in your application works, in what context it should be used and what visual appearance it has, you can simply take the UI element off the shelf when designing a new feature. Such a user interface can be tailored to the requirements of the specific context with only minor modifications.

It is up to a product manager how far he is willing to go in implementing a Design System. Ideally, components should be accompanied by a “ready-made” version of them compiled into code. This also has the advantage that, if a new development need arises, you don’t have to develop all the elements from scratch, you can just drag one of the ready-made components into your project. Some people call it a Design System, i.e. a combination of design and code, and refer to the design itself as a “design pattern”.

​​When not to use Design Systems?

Building and maintaining a Design System takes time. The larger the application, the more components in the Design System, the more time it takes. We can also look at this as an investment that pays off in the medium to long term. If you only have a small application, where it is not a problem to create a consistent design without a Design System, it probably does not make sense to invest several days, weeks or even months of planning time in creating a Design System. Similarly, if your application is complex and has many components, but you don’t plan to work on it for a long time, it is often easier to create a single screen than to develop a complete Design System.

How is Design System made?

Design Systems are typically created in Figma or Sketch. Of course, you can build the whole thing yourself, but it is often faster and more useful to start from an existing one (e.g. Material). The former is more common when your application is built from specific UI components that you are not likely to find ina standard UI kit. Pre-built Design Systems can be purchased online and are easily customisable, helping to shorten the time to build your Design System.

—–

If you don’t have experience in creating a Design System and need help, feel free to contact us! We can help you make the best possible decisions about developing your business.

Interested in more UX/UI design topics? Then stay tuned for more blog posts coming soon!

If you are interested in our other blog posts:

• The Human Mind and Usability: Cognitive Biases
• The Human Mind and Usability: Problem Solving & Decision Making
• How we redesigned our operation successfully in two weeks and what we would suggest
• How to run a specification workshop series with 40 stakeholders?
• Marketing Automation Basics: How to Use it in Your Business
• How to use personal effectively
• Marketing Automation Trends in 2023

Sources:
https://meldrumconsulting.ch/category/innovation/
https://www.divami.com/blog/the-build-or-buy-consideration-in-ux-design
https://lumentanfolyamok.hu/webfejleszto-tanfolyamok/ux-design-figma-tanfolyam
https://www.secretstache.com/blog/ui-design-system/
https://www.toptal.com/designers/ux/design-system