the-what-how-and-why-of-design-systems

The what, how and why of design systems - Part 1

In this series of design systems, we're going to be exploring what they are, how they are used and why they are crucial to building a base of loyal, engaging customers that take your business to the next level.

What is a Design System?

Part 1: Introduction

Think of every single thing that makes up your product: layouts, typography, grids, colors, icons, coding conventions, voice and tone, etc. All of these interrelated independent parts can be used in other areas. For instance, a button can be used in a page layout, a form, an overlay, etc. It’s all about how these components can work together and the rules that guide them.

Key Terminology

Styleguide

The documentation for the visuals. Includes all of the things that you think a designer would use: typography, icons, color, illustrations, etc.

Terminology

An overarching guide to what the brand feels like (versus a style guide, which shows how to accomplish that). Also called a “component library.” Includes forms, form elements, images, navigation, overlays, etc.

Brand Guidelines

Non-aesthetic parts of a design. Includes principles, tone and voice, grammar, etc. This tells both the users and the company who you are and what your narrative is.

CSS Framework

Front-end code that developers use to build a product.

Visual Language

A design system is ALL of these things! It’s a complete collection of components and guidance (in both design and code) for organizations to build products.

I really like how Kim Williams described what a design system looks like in the DesignBetter.co podcast. She explained that you can normally see all of the different seams that are working on different parts. If you’re able to remove the seams, it seems like one cohesive effort. You can really tell as you move from one experience to the next who is working on what. But instead, it should be a seamless journey. So a design system is the glue to remove the spaces between products so everything feels holistic.

Components of a Design System

The diagram to the right explains the various parts that make up a design system:

What’s Needed

  • A UI Kit or pattern library

  • The brand guidelines and principles

  • The code or framework

  • Guidance for the components

Design systems aren’t all the same, nor do they need to be because every company is different and has different needs, but these are the usual items included. So it’s not just a single illustrator file; in that case, you’re missing all of the guidance!

Implementing and Maintaining a Design System

I think the only way for a design system to really be implemented and continue to be used is to treat it like a product. And this isn’t a new idea, lots of people have been treating their design systems like this in order to keep them integrated. So it should be a product serving your main product.

For more information on components, check out our component library and our article on UI/UX design for SaaS.

Click Here for Part 2

Chat to our team today