Design Systems Part 2

download.jpeg

Summary of design systems

Design systems are meant to solve the problem of keeping design standards consistent across multiple platforms and teams. This post we will take a look at some design systems and correlated design methodology. If you haven't already, I would recommend reading Atomic Design by Brad Frost to familiarize yourself with modular design concepts.

What they look like

Remember that a design system is more than just an online style guide, it can encompass multiple platforms and is evolving with every new code release. The navigation within these design systems needs to be broad enough to encompass design assets at a high level but then grills down to provide a high level of detail on those assets. The design system may have articles and general design principles on the home screen then have a “guidelines” section that goes into a layer that contains components and colors. Once you get to this Second layer, you will likely have a tertiary layer of details that covers the nitty-gritty details like hex values margin and padding between components and integration patterns.

Levels of navigation:

  • High - Website, mobile apps, voice & marketing tone.
  • Medium - Components, colors, templates, navigation, logo usage.
  • Low - Hex values, margin and padding standards, heading sizes, design tokens, code snippets.

Real world Examples

 

Design system maintenance

There are two ways that you maintain a design system. One is called an overlord approach - someone whose job it is to maintain this system as a source of record and acts as a gatekeeper (not ideal). The other is to have a federation approach where each of the managers or design leads get together as often as needed and discuss changes they would like to have added to the design system. They then make concessions or agreements about UI elements until they come to a consensus.

Sources:

https://uxdesign.cc/resources-links-references-and-articles-on-design-systems-e8ab898e0ab5

https://blog.prototypr.io/how-to-build-a-design-system-86e6ee5cf201

https://www.uxpin.com/studio/blog/design-systems-abstraction-layers-model-better-understanding-implementation/

https://www.uxpin.com/create-design-system-guide

http://bradfrost.com/blog/post/atomic-web-design/