1. Conduct a visual audit

The first step in building a design system is to do a visual audit of your current design, whether that’s the design of an app, a website, or some other digital product. Taking inventory of the CSS you’re using and the visual qualities of the elements can help you gauge how much of an undertaking this process might be.

  1. Create a visual design language

The visual design language is the core of a design system. It’s made up of the discernible components that you’ll use to construct your digital product. Your visual design language is made up of four main categories, and you should consider the role each of these design elements plays in every component on the screen.

  • Color

Common colors in a design system include 1–3 primaries that represent your brand. You may want to include a range of tints—a color mixed with white—and shades—a color mixed with black—to give your designers a few more options.

  • Typography

Most design systems include just 2 fonts: 1 font for both headings and body copy, and a monospace font for code. Keep it simple to avoid overloading and confusing your user. Keep the number of fonts low; it’s not only a best practice of typographic design, and it also prevents performance issues caused by excessive use of web fonts.

  • Sizing and spacing

The system you use for spacing and sizing looks best when you have rhythm and balance. A 4-based scale is growing in popularity as the recommended scale due to its use in iOS and Android standards, ICO size formats, and even the standard browser font size.

  • Imagery

The key to success with imagery in your visual design language is having a plan and sticking to it. Set guidelines for illustrations and icons, and use the best image format for the situation.

  1. Create a UI/pattern library

Unlike the visual audit you’ve already conducted (which looked at the visual qualities of your design elements), this step in the process looks at the actual components of your UI. Collect all of the parts and pieces of your UI currently in production. That means every button, form, modal, and image. Merge and remove what you don’t need.

  1. Document Each Component

This step is important. Document what each component is and when to use it. Documentation and standards are what separate a pattern library from a true design system.

WhatsApp WhatsApp us