Design is more important than ever, and design systems have become a huge piece
of what makes a company or product successful, especially in the hyper-competitive
global software market. These companies have historically relied only on user
experience as a key differentiator. This demand for better experiences puts immense
pressure on designers across the globe. They are compelled to take up more projects
and work faster, while delivering higher-quality products.
This can create problems if there is no standardized design language to pull from.
Why Companies Need Design Systems
Design doesn’t scale easily. Efficiency doesn’t emerge from thin air. Scaling
design through hiring, without putting standards in place, is a myth. With every
new hire, new ideas for color palettes, typography, and patterns appear in the
product, growing the inconsistency and increasing the maintenance cost. Every new
hire increases the design entropy. There’s only one way to stop the growth of the
chaos. Committing to running a design system process. Gradual growth of a design
system equals a gradual increase in consistency and speed of software development.
Design scales. But it scales only with a design system.
What Is A Design System?
A design system is a set of standards for design and code along with components that unify both practices. Think of it as the same set of instructions and Lego kit for everyone. If you’re a designer or a developer, then this guide to building your own design system is for you.
-
Create the UI Inventory for the Design System
-
Get Organizational Buy-In for the Design System
-
Build a Multidisciplinary Design Systems Team
-
Establish Rules and Principles for the Design System
-
Build the Color Palette for the Design System
-
Build the Typographic Scale for the Design System
-
Implement an Icons Library for the Design System
-
Standardize Other Style Properties
-
Build the First Design System Pattern
-
Run a Sprint Retrospective
-
Conclusion
-
Recommended Resources
Start by building a catalogue of all the reusable components in your product. This includes patterns, colors, text styles, icons, and even grid systems. Creating an inventory of UI components will reveal inconsistencies in your design language and pave the way for a design system.
It is important to get stakeholders and the design team on board before you start building a design system. Explain the inconsistencies that you discovered from your inventory building and how they adversely affect the user experience.
You need a team to implement and manage a design system through the entire cycle of product design. Most design systems team need designers and front-end developers. Start by identifying the skill sets you need and then decide on the people who have them.
Design principles are the shared value system across the entire design system. This includes the technology - CSS in Javascript or something else - that you are going to use for writing the design system; how you are going to distribute the design system; and if you are going to use one of your digital products as the starting point for the system.
Colors can impact all areas of your design system. Hence, finalize a color palette first. Decide on primary colors, naming convention, and the system for building accent colors. Refer your design patterns for fixing problems you might encounter when testing the color palette in the product UI.
Visual design is as much about colors as it is about typography. Decide the typefaces you want to use and the typographic scale for consistent information architecture across all products. Typographic scale also influences the UI. Be sure to test against it.
Icons in web design or mobile design can be useful for mitigating language barriers. They can also influence user behavior, such as a download button accentuated with a 'downward arrow' icon, reinforcing the intended action. Finalise your icon library and the technology you are going to use to implement it.
Design decisions also include finalizing grid styles and other properties that are not covered in the previous sections, such as white space. Like with other components of your design system, here, too, standardization is meant to eliminate inconsistencies.
Building design system patterns is an iterative process. Do not focus on building all the patterns in one go. Start by identifying the best architecture for your pattern library and build it one by one.
All product teams should organize regular retrospective sprints to analyze progress and make necessary improvements. Sprints can be a great way to ensure quick learning across the entire team.
All the steps listed here should give you a set of design guidelines that promote a consistent design language. Don't think of a design system as a project. Instead, treat it like an ongoing process that feeds on quick iterations.
Want to take a deep dive into the world of design systems? We have compiled an exhaustive list of best resources on the subject. There are webinars, books, articles, and case studies of the biggest brands.
Frequently Asked Questions About Design Systems
What is the purpose of design systems?
The primary purpose of design systems is to increase efficiency in product development. With a consistent design language in place, it becomes easier to design products at scale that are consistent in aesthetics, user interface, and user experience. Design systems also promote collaboration, since handoffs across distributed teams become easier.
What companies use design systems?
Some of the biggest brands out there use design systems for more efficient product development. These include the likes of Salesforce, Shopify, WeWork, Mailchimp, and even Apple.
How are design systems different from pattern libraries or style guides?
Pattern libraries, together with style guides, toolkits, and design principles form an entire design system. In other words, pattern libraries and style guides, both, are important parts of a design system.
What makes a good design system?
Irrespective of the tools used to create it, a good design system is one that is reusable, robust, and well-documented. Most importantly, a good design system helps make the design process more efficient, and ultimately, more cost-effective.
Get Your Design System Started
It takes just one committed person to kick off the process and change the way
your organization builds software.
Want a head start? Get the free Design Systems Starter Kit. It includes this guide
as an actionable checklist, a deck for evangelizing design systems, and an ebook
on why design systems matter.