A Guide to Design Systems for UX

For all designing nuts out there here is a term that you’d better get familiar with – ‘design system’. And for those of you who like to work technical jargon into conversations, here are a few more terms for it, Pattern Library, Modular Design, Component Design, Design Language and User Interface library. Some of you might be thinking ‘I just got the hang of the whole designing process a week ago and now I have to learn this as well?’ Well, according to experts apparently you do for better user experience.

So, what are Design Systems?

Design Systems are basically libraries comprised of components that can be recycled and reused in different combinations. It is not unlike arranging a puzzle with the same pieces but in your own pattern. This is particularly handy when designing at scale. Using a predefined set of basic components UI/UX designers can create unique designs. Again scalability is the key appeal for design systems. Today most large companies use design systems to meet their large scale requirements and a wide variety of audience they cater to.

Why Design Systems?

To answer this question we have to break down design systems to its basic applications.

• Scalability: This is the most common reasons why designers turn to design systems. For multinational corporations, it is quite the norm to produce products that are cross-platform, to develop products that attract a multicultural audience and so on. Systems design surprisingly have been around for eons. Analog examples of this have been around for even longer, but the idea is always the same and the way people go about applying it is often confined to this particular aspect. Design systems allow for a uniform style of designing. This is quite handy when following a particular template with which your brand is associated. Inconsistencies in products during production, packaging, and shipping could be avoided by using Design Systems.

 

• Productivity: The use of templates save a lot of time for designers. The cohesion created between designers using the same designing systems and updating each other about their own application methods could prove quite valuable. However, each designer applies his/her own ideas to the product they are creating. The possibilities here are pretty wide and the only constant here would be the brand template.

Types of Design Systems

When it comes to design system scale and integration are the key factors that influence them. There are two prominent ways to go about creating design systems.

Atomic Design

As suggested by Brad Frost in his book ‘Atomic Design’ this type of design system follows a logic building block approach. Much like in chemistry the basic elements are combined together in combinations to create a compound component and so on. This method of creating templates gives more leeway for variety in design and the process itself affords a certain level of simplicity. This is as straightforward as designing can get.

Full Stack Design

This design system draws from the Atomic design model in the fact that the latter explores the fundamental aspects associated with design systems. The only difference would be that Full Stack Design is much more comprehensive and allows for a deeper level of

coordination between designers. It would be better to say that Full Stack Design System is defined by its application levels rather than the components. In such a system, designers will conform to certain objects for particular purposes. This creates a clear line of communication within the team as they share the system. This conformity is further brought down to the consumer level to pitch the product. So, in whatever context the system is applied there will be a certain level of ease in the process along with uniformity while scaling.

Limitations of Design Systems

• The most obvious limitation of the design system is the lack of versatility. Having a single predefined set of components limits the scope for creativity. There is only so much that can be done along the lines of experimentation. Even from a UI/UX perspective, this is a huge negative.

 

• Following up on the previous point, even though the options are limited, the concept behind design systems doesn’t limit the designer from getting creative in his/her own way which ultimately could lead to a great deal of incoherence.