Inside a Design System: What You Need to Know and Why
If you’ve been paying attention to the world of design, chances are you’ve heard about design systems. They are the latest trending topic in the world of design perhaps to the dismay (or delight) of designers everywhere. “Another thing to learn?” some designers may cry but design systems have great benefits.
To demonstrate the relevance of design systems let’s imagine a typical scenario when designing a new interface for a product.
To start, you first gather requirements, talk with your team, begin brainstorming, and eventually you sit down and start designing. But wait, what font did we decide on? What color do we need to choose, and what is the tone the design wants to convey? If I choose blue the tone is different than if I choose red, did we decide on the tone of the website? How about the components itself, did we agree on the dimensions of the card elements?
As you can see, when it comes to designing products, many different pieces of the whole product must be taken into consideration.
This is one of the problems design systems aim to solve.
Other than streamlining the design process for everyone involved, design systems provide many more benefits.
What is a design system?
Jeremy Keith, a web designer and author, defines a design system as:
“…it encompasses pattern libraries, style guides, and any other artifacts. But there’s something more. Just because you have a collection of design patterns doesn’t mean you have a design system. A system is a framework. It’s a rule book. It’s what tells you how those patterns work together.”
In this context, a design system can be understood as the name for an infrastructure that defines a product’s entire design tools and processes. It’s more than the colors, fonts, images, layouts, and style guides. A design system is the philosophy and language which direct the product designers to create designs in an intentional way.
Benefits of design systems
a. Empower developers
Implementation of user interaction can be a slow process for developers. Sometimes designs aren’t clear or there are edge cases that aren’t addressed. For example, a designer may only have a page designed but the developer also needs the loading and error screen designs too. If the developer can reference the design system for any of these missing design elements, they can implement codes with confidence. This is because the source of truth of the application design is in the design system which can be viewed by anyone. The developer doesn’t have to message the designer for confirmation if the design is the correct way of implementing, because the team agreed on the elements of the design system.
b. Centralize knowledge
Depending on your team and how your product works, the knowledge in how the design works can be all within one member’s head. Extracting that knowledge then requires people asking that one person for their input on the design decisions. This can be a tedious process which slows down productivity and is risky. What if that member leaves on bad terms? Their knowledge becomes inaccessible.
By extracting the design knowledge from people’s minds and into a document like a design system, you’ve made the design knowledge easily accessible by anyone at any time.
c. Prestige and marketing for the company
Design systems get press. If you build a design system for your company, open-source it, and write about it, you will get people talking about you.
Most large companies like Shopify, Google, IBM, Atlassian, etc. have their own design systems which are open-sourced and presented in a fashionable way like this one.
Do you need a design system?
Everything has its tradeoffs and building a design system is not an exception. One of the main tradeoffs will be opportunity cost.
If you’re a part of a small project where only a few people are working on the design, it may not be time well spent to build a design system.
If you’re part of a large company with many different teams, all working on one product, then a design system could be a great investment for everyone involved.
Being part of a large team does not always mean a design system is the right answer though. For example, Shopify’s team may be regretting their decision to build Polaris, their design system for the reason they explained in this article: “The effort required to build a design system is tiny compared to the effort required to maintain it.” The rest of the article outlines the design team’s struggle with maintaining their large project which is Polaris.
Nevertheless, if you have decided to build one, after much deliberation, then here’s how to go about it.
How to implement a design system
Step 0. Get buy-in from your organization
The prerequisite to building a design system for your product will be getting everyone in your organization on board with the idea. This can be a difficult task as large companies are notorious for making decisions slowly.
The first step to take note of everything you’re designing with. This means all the fonts, icons, colors, layouts, components, cards and any piece involved in the design of your product should be organized and gathered.
This makes understanding your needs easier by placing all your assets in one location. Part of building a design system is organizing all of your assets for easy access.
Step 2. Create principles for your product
What is the direction of your product? How should you design every piece? What is the intent of every element?
Creating principles that your team can agree on is crucial and a pillar of design systems. The principles can be thought of as directions for where to go with your design.
An example of a principle is in Medium’s content management system. Medium’s principle for the content editor is to provide an easy to publish tool rather than customization.
Rather than having many options to customize the text with colors and endless font sizes, Medium has chosen 7 key options for your text. This is a deliberate design decision which helps writers finish their content faster rather than customizing everything.
Step 3. Choose the language and tone
Everything visual conveys a message. Whether it’s a white page with black text, or a landing page, or an enterprise SaaS product, you’re communicating your language and tone with your visuals.
Comparing the landing pages for dinosaur.design and the iPhone XS, you can see what tone and message each company is trying to convey. Dinosaur.design has bright colors, illustrations, and casual fonts to give a light-hearted vibe. The iPhone XS landing page is dark, with high-resolution photos and business-like font which offers a more serious and prestigious tone.
Step 4. Create components and patterns
This is the step your developers will care about. Creating reusable components and patterns in your design system is the final form and is what your end-users will see. All of the steps previously created lead to this point, which is creating the components that will be used throughout the application.
Patterns are the instructions for how to implement components. For example, if you have a card which shows a blog post, the pattern could describe how to structure and write the title, subtitle, where the image should go and overall guide the total implementation of the card.
Final thoughts
Design systems are a large step forward in the world of design. Companies that have a design system can position themselves as a leader and reap the benefits from saved productivity hours, coordination and marketing.
It’s important to consider the pros and cons of investing the time and energy into creating a design system though.
Whether or not a design system will be around for the next 10 years is unclear. What is clear is that they’re here and the momentum isn’t slowing down anytime soon.
