How to Create a Design System from Scratch

Design

2021-09-17T18:24:52.272Z

Zigzag

Understanding how to create a design system from scratch is the first step towards a cohesive digital property.

Whether you’re redesigning a website or practicing some housekeeping on your current app, a design system can save time and money while improving your app’s user experience.

Why Should You Care About Design Systems?

Anyone who creates digital assets should care about design systems. This includes not only your UX and UI professionals but also marketers, project managers, and sales teams. Here’s why:

  1. Interface Consistency: There’s a reason Coca-Cola has a trademark on their iconic red. It’s because things like colors, fonts, and messaging are recognizable. They add value every time someone interacts with an element.
  2. Streamline Process: Having a single source of truth can reduce the amount of work that it takes to create a page or digital asset.
  3. Faster Prototyping: Streamlining process affects your product’s bottom line. If more individuals can prototype faster, you can get a leg up on competitors.
  4. Improved time to market: Faster prototyping means faster deployment, which means faster time to market.
  5. Easy to Test: Again, streamlining the design phase allows tests to focus on the tech.
  6. Tech Agnostic: Having a dedicated design system makes it easier for rewriters. Your design system should include basic HTML and CSS so your designs don’t become obsolete.

Difference Between Brand & Design System

“A design system sounds a lot like a brand identity. What’s the difference?”

Ideally, a design system includes general instructions as you build your app or webpage. How should the page be constructed? What interaction should be considered?

Brand managers create and manage brand guidelines and they rarely include all the necessary elements a UX/UI designer would care about. By placing more responsibility on UX/UI designers, you’ll have a robust document that can act as both a design system and brand standards.

How to Create a Design System From Scratch

If you’re starting from scratch, it’s wise to start with the most basic, generic components of a page. This includes

  1. Logo. This is your anchor point. Everything starts here. it’s the cornerstone of your design system.
  2. Colors. Branch out into your colors, with your logo colors being the most prominent and possibly separated.
  3. Typography. Not only fonts, but sizing of fonts across devices, for headings, paragraphs, and any non-standard uses. For example, we have a style called “Big Old Text” that’s neither a heading nor a paragraph.
  4. Sizing & Spacing. Define your unit increments (padding, spacing). The most commonly used grid size is 8px. Here's a great resource to learn more.
  5. Icon styles. If you use icons, define a set or style.
  6. Interface elements. What will your UI elements look like? This includes things like toggles, buttons, and dropdowns.
  7. Photos. Define your style of photos. Common guidelines might be things like “always have people in photos, add \[brand color] overlay, and no stock photos.”
  8. Detail of layouts. For your templated pages, include detail of layouts for easy future builds.

After you’ve got the elements above, the rest of your design system falls into place. This includes things like link style, forms, global header and footer, captions, alerts, line breaks, lists, checkboxes, tables, and more.

An example of a killer design system is Code for America. View their design system here.

If you already have a brand identity, but not a system…

First, you’ll want to get buy-in from company stakeholders. Use the “why you should care” section up there ☝️ for ideas.

Once you have buy-in and approved time/budget, do an audit of everything that currently exists in your digital ecosystem. The more departments that participate, the better, because you can build a full collection of existing assets.

Finally, set up a style guide webpage in a subfolder or subdomain. Make it easy to remember and access, something like www.website.com/design-system

How to Maintain Your Design System

Maintaining your design system is critical. If it becomes obsolete, it doesn’t help anyone. Our recommendation is to have a designated team, not a single person review and update your system once per quarter. A collection of people and functions (for example, someone from marketing, someone from design) is ideal to make your design system useful, especially in times of stress or product prototyping.

If you need help creating a design system from scratch, contact the UX/UI designers at Devetry! Our team can help you strategize, create, and manage your system or product.