What are design systems? (Part 1)

1 minute read

This is part 1 in a blog series about our approach to creating a shared design system for myHAZ-VCT PLATFORM.

What are design systems?

Design systems are collections of reusable components. In web and software development those components are usually color schemes, fonts, buttons, icons, page layouts, etc. Below is an example of how a design system/styleguide might look like.

An example from Duolingo design system Some elements from Duolingo design system. Source

Many organizations and projects are adopting this so called component driven development approach where they assemble their digital products from smaller components. Those component libraries they use range from simple to elaborate. Simpler ones could be called - styleguides, and the detailed ones - design systems.

Styleguides usually answer the question ‘what’ (what are the main components - the building blocks of an app or a website). Design systems go a bit further and provide more details on when and how to use the component and possibly the related research that explains why the component is designed this way. For the sake of simplicity I’ll refer to these component libraries as design systems.

Design systems are used by organizations such as Government Digital Services, TED, Airbnb, BBC, Atlassian, Yelp, etc.

Their aim is to:

  • reduce duplicate effort (create same components only once)
  • help app/websites look more consistent and professional (there shouldn’t be five different success buttons)
  • make things quicker to build (make all the low level decisions at the beginning so you can focus on the big picture)
  • improve usability (common elements and patterns are more recognizable and new interactions easier to learn)
  • improve performance by removing duplicate code
  • allow designers and developers to cooperate more easily
  • create brand unity

Since they seem to provide so many benefits, it would seem unwise not to use them.

Part 2 - Many ways to create a design system

comments