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.
Examples of Successful Design Systems
Companies like Airbnb, Uber, and IBM have revolutionized their digital product design by incorporating unique design systems. These systems, comprised of repeatable components and guided by clear standards, have accelerated innovation within their teams.
Importance of Design Systems
Design systems provide a centralized and evolving map of a brand’s product territories, helping teams explore new regions effectively.
Building a Design System
Key Steps and Benefits:
Conduct a Visual Audit: Inventory your current design elements.
Create a Visual Design Language: Define colors, typography, sizing, spacing, and imagery.
Create a UI/Pattern Library: Collect and document all UI components.
Document Each Component: Provide standards and guidelines for usage.
Building a design system is a significant undertaking. Tools like InVision DSM can help streamline the process, ensuring teams stay in sync and iterate with confidence.