Big companies like IBM, Uber, Salesforce, Airbnb and many others have one thing in common when it comes to design. Their digital products are created and maintained by their individual teams that leverage their own design systems. They are using modular components and atomic design principles based on their design systems allowing them to build products and innovate at a rapid pace.
Despite the trend and chatter in the design community, Design Systems are not only desired by the design and development teams but have a business impact as well. The benefits of the design system are too significant to ignore. An estimated $1.5M+ in annual savings or around 21.25% of the time is saved for a typical product development annual budget (based on an on-shore/offshore team of 100 resources).
Let’s dive into what a design system is, the advantages of using a design system and atomic design principles and how to use a design system.
What is the design system?
A design system is not a Style Guide or a Pattern Library — though those are very useful and a necessary tool for any large organization. Those are aspects of a design system, but a design system is so much more than that as a Style Guide focuses on the visual application of pre-defined design rules while a Pattern Library is a collection of reusable functional components.
In his book Atomic Design, the author Brad Frost uses basic science terms to define a design system using a principle he calls Atomic Design. Brad defines Atomic Design as “a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner.” To put it another way, design systems are a collection of modular designed components that can build upon or be used separately to create a reusable library of designed elements across your products and across your organization.
The five stages of Atomic Design are:
- Atoms
- Molecules
- Organisms
- Templates
- Pages
Atoms, the smallest form of the design system are the building blocks for all user interfaces. They are represented by basic elements like buttons, inputs, or form labels, for example. These can’t be broken down further as they wouldn’t function otherwise.
Molecules are atoms bonded together, i.e. two or more simple UI elements that function as a single unit such as the pairing of a search field and a button to create a search form.
Organisms are complex UI components that consist of molecules, atoms, and can consist of other organisms. They form the whole sections of the interface such as a website header consisting of the navigation, search field, logo, and so on.
Moving from chemistry terms to design idioms, templates are composed of organisms, molecules, and atoms. Templates place components into a defined layout. They focus on a content structure like text length, image sizes among other things.
By adding real content into a template (text, images, videos, icons, etc.), you will arrive at the last stage of Atomic design — Pages. Pages are the only concrete stage of the design system, where all the stages come together to create the final output.
Why you need a Design System
From what you have read in the first part of this article, you might think that creating a design system is much more time consuming than designing the “old-fashioned way” where you just make it up as you go. While that approach might work if you have a small design team of 1, that approach falls apart at scale. Design systems have a lot of business advantages that you may appreciate in the long run. So the answer to your question: “Do I really need a design system?” is without any doubt YES!
Design systems save time and money
The time you spent on creating a design system upfront will undoubtedly payout in dividends the first moment you need to create a new page from scratch. As your company grows, so does your product offering, team, and website. Designers and developers working with reusable components don’t waste time re-creating them from scratch. With predefined components and a known definition of how they are used, when they are used and how they function, time is also saved from eliminating unnecessary meetings to discuss how things should be implemented.
Design systems create consistency
Reusable components create consistency across all platforms, products, and teams. When a new product, website or design is created by one person or one team, you can be assured that it will look, behave and be implemented like the same type of content you’ve created elsewhere. Teams can focus on solving the business challenges and making the user experience even better instead of spending time trying to keep up with different implementations of the same types of components. Aside from the benefits that the team will have, your customers and site visitors will also benefit. Having a consistent look and feel is the key to making the users comfortable and have confidence in your products and services.
Design systems are easy to update
Whether redesigning your site or product, updating your latest branding and style guide or making system-wide changes based on performance testing discoveries, Design Systems allow you to make those changes more easily and across your ecosystem. Because Design Systems are modular, if you decide to make a change at an atomic level — say update your Primary Button CTAs to be a different color, you can make that change and have it update everywhere that element is used without having to change the whole system.
Design systems allow for easy knowledge transfer
With a functioning design system, your external design or development teams and vendors can create without having to worry about whether the design matches what you’ve created, or worse yet — recreating something you already had but didn’t know. With the reusable components from a design library, they can create new sections really fast without spending hours in meetings or on their own trying to figure out what exists, what doesn’t exist and how to apply designs based on what you already have.
Do you like what you are reading? Finish the rest of the article on our blog.
