Source: unsplash.com

What are design systems? How do they help designers be more productive? What inspires their creation, and what to consider? This is the information I share in this publication.

What is a design system?

In brief, a design system is a set of rules and tools, components and manuals, and a company’s digital resources for managing design at scale. It is a knowledge base with components and templates that reflects the product philosophy, constantly evolving and allows for visual consistency across projects.

What is the difference between a design system and a style guide?

Since a design system is a reusable component database built around rules for its use, it is not equivalent to a style guide, a library of standard elements in Sketch or a pattern library.

Source: unsplash.com

Brad Frost, who wrote Atomic Design, is tired of many people understanding a design system as a template in Sketch or another design tool. In his blog, he explains:

“This may sound obvious, but it’s important to understand that you can’t build working software out of screenshots and Sketch files. It’s not that static design tools and documentation aren’t important (they are!), but they can’t create functioning UI components that can be used to build real software applications. Static design files, pattern documentation, guidelines, and the rest of it all help tell the story of how your organization designs and builds products, but recognize that at the heart of any great design system is a reusable set of UI components that product teams can reach for to build essential software”.

Why use a design system?

Source: unsplash.com

Design systems make life easier for users by standardizing UI and operating logic.

As far as companies are concerned, design systems increase brand awareness through a uniform visual style across all their projects.

Design systems can also bring many benefits to the design team. I would highlight the following in the first place:

• The work of designing, designing a project can be done quickly at the correct scale. Why? Because you can use ready-made components and user interface elements. And ready-made patterns speed up testing.
• Designers can spend less time on routine, template-driven tasks. This allows them to focus on larger, more complex problems requiring creativity and out-of-the-box solutions. The burden on design resources is reduced, and productivity is increased.
• Misunderstandings within and between different teams disappear thanks to a common language and visual consistency.
• The design system becomes a great guide and reference point for new hires, designers, and content creators. The thing is that although design systems follow general UI design methods, they have a valuable set of custom patterns such as typography, colour, forms, banners, documentation basics etc., that will be useful for newbies and help them develop the right skills faster.

The general structure of design systems

Source: unsplash.com

Have you ever thought that design systems are a vast untapped resource for learning? Learning how to create better user experiences and interfaces just by studying them!

Below you’ll find several examples to learn from. But for it to be effective, I suggest you first become familiar with the structure of a design system. It usually consists of 6 elements:

• Overview: this includes log updates, the principles behind the design system structure and the shared values.
• Basics: these cover the core components (colour, typography, iconography, images, sound, movement and more).
• Components: a library of reusable interface components with rules or guidelines on how and when they should be used.
• Design patterns: methods of organizing components that solve user problems.
• Content: spelt out in terms of voice.
• Brand guidelines: a description of brand values, brand personality, and a demonstration of how to use the brand.

If you choose a different methodology, however, there may be differences. For instance, Brad Frost’s Atomic Design methodology divides all elements of a design system into five categories:

1. Atoms. The smallest building blocks of a project: are text styles, buttons, icons, input fields, checkboxes, etc. All components cannot be divided into smaller parts without losing meaning (like a button without labels).

2. Molecules. Molecules become fully functional elements, but they need to be part of an organism to be of practical value. More complex elements consist of several atoms — for example, input fields with buttons.

3. Organisms. Fully functioning parts consist of groups of atoms and molecules. Many organisms can function entirely without relying on other components. For example, the main menu of an application or a pop-up window with lots of data. Organisms can be pretty complex and made up of smaller organisms.

4. Templates. These are essentially templates (matrices) with no actual content. Templates combine organisms into a complete layout.

5. Pages. Specified instances of templates. What is filled with actual content? The concrete view of the page reveals all the errors of the previous steps, and the design system, formed on the principle of atomic design, allows you to painlessly, precisely and quickly fix them at the level of atoms, molecules or organisms. At this stage, all the effectiveness of the design system is visible.

(If you’re wondering how the atomic approach is used in practice, use the Pattern Lab tool by Brad Frost and his development team. There you can try to document your atomic library.)

Now that you know what to look for in design systems, you can take the examples apart into bricks to create your unique system.

9 sample design systems for inspiration

Source: material.io

1. Google’s Material Design

Google’s Material You is a unified design system that combines theory, resources and tools to create a digital experience on Android smartphones.

2. Apple’s Human Interface Guidelines

Apple’s Human Interface Guidelines — contain guidelines and best practices to help you create a user-friendly interface for any Apple platform.

3. Mozilla Firefox’s Photon design system

Mozilla Firefox’s Photon Design System allows you to create modern, intuitive and attractive interfaces for products on all platforms — from mobile to desktop, from “TV to the next big thing”.

4. HUDL unified design system

The HUDL suitable design system is created to unify Hudl products through design and code implementation. It includes components, visual guides, languages and additional resources to help you make more consistent product interfaces.

5. IBM’s Carbon design language

Carbon is IBM’s open-source design system for product and digital interaction. It is based on IBM Design Language and consists of working code, design tools and resources, user interface guides and an active community of contributors:

“By using Carbon’s pre-built and universal assets, the time teams spend designing, and building is minimized.”

6. Audi user interface

Audi’s user interfaces are as varied as the purposes for which they are used — from inspiring websites to service-specific applications. The AUDI user interface aims to develop diverse solutions and a well-balanced user interface for the entire system — from the app to the car.

7. BBC Global Experience Language (GEL)

GEL is the BBC’s overall design framework. A system of reusable interaction templates is used to assemble all BBC online products. It creates an enjoyable user experience when interacting with online content. For project teams, GEL increases efficiency and productivity. And as a shared system, it supports collaborative working.

8. HubSpot Canvas design system

HubSpot Canvas is the design system used at HubSpot to create all products. When it came out, it helped small autonomous teams work more efficiently.

9. Polaris from Shopify

Polaris by Shopify helps Shopify sellers and entrepreneurs collaborate to create outstanding experiences.

Bonus: A collection of Design Systems for Figma from all over the globe.

Books on design systems for those who like to nerd out

Source: unsplash.com

I don’t have a complete list, so I’d be happy to add to it.

1. A Pattern Language — Towns, Buildings, Construction by Christopher Alexander, Sara Ishikawa, Murray Silverstein, Max Jacobson, Ingrid Fiksdahl-King, Shlomo Angel
2. Atomic Design by Brad Frost
3. Design Patterns — Elements of Reusable Object-Oriented Software by Erich Gamma, Richard Helm, Ralph Johnson, John Vlissides
4. Design Systems by Alla Kholmatova
5. Design Systems Handbook by Marco Suarez, Jina Anne, Katie Sylor-Miller, Diana Mounter, Roy Stanfield
6. Designing Interfaces by Jenifer Tidwell
7. Expressive Design Systems by Yesenia Perez-Cruz
8. Front-End Style Guides by Anna Debenham
9. Frontend Architecture for Design Systems — A Modern Blueprint for Scalable and Sustainable Websites by Micah Godbolt
10. Mobile Design Pattern Gallery, 2nd Edition by Theresa Neil
11. Web Anatomy — Interaction Design Frameworks that Work by Robert Hoekman Jr., Jared Spool
12. Laying the Foundation by Andrew Couldwell
13. Modular Web Design — Creating Reusable Components for User Experience Design and Documentation by Nathan Curtis
14. The Little Book of HTML/CSS Coding Guidelines by Jens Oliver Meiert
15. The UX Reader by Jason Beaird and Federico Holdgado
16. The Yahoo! Style Guide by Yahoo!
17. Working with brand & design guidelines by Rachel Shillcock