By definition a design system is a complete set of standards intended to manage design at scale using reusable components and patterns. When properly implemented, a design system provides a lot of benefits not only to design teams but development teams as well.
Imagine you are tasked with baking a cake. You know what it looks like from the outside and from your extensive experience eating cakes you know that cakes have layers, frosting and, sometimes, decorations. But do you know just from looking at it what ingredients were used to make it? To successfully make your cake you will need to know more than just the experience of eating cake. You need to know the ingredients and how to use them. Creating a design system is a lot like creating a recipe.
Taking this very relatable scenario one step further, you are now a cake baking superstar. Customers love you, you’re getting very busy and you need to hire staff. As you look to expand your cake baking enterprise you know you want scalability, consistency, to maintain productivity, and to share your cake knowledge with the new bakers so they can follow the recipes. So what do you do? You create a recipe book.
In designing digital products, as in establishing your very own cake shop, the overarching goal is to be able to build for scale. Having to produce digital products (or cakes) without any clear guidance on how to do it isn’t very helpful.
When creating a design system one method that I like to reference is Brad Frost’s Atomic Design. Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner. Frost defines the five stages of Atomic Design as:
- Atoms: The foundational building blocks that comprise all user interfaces. “Atoms” include basic HTML elements like form labels, inputs, buttons, colors, fonts and others that can’t be broken down any further without ceasing to be functional.
- Molecules: In interfaces, molecules are relatively simple groups of UI elements functioning together as a unit. For example, a form label, search input, and button can join together to create a search form molecule. Creating simple components helps UI designers and developers do one thing and do it well. Burdening a single pattern with too much complexity makes software unwieldy. Therefore, creating simple UI molecules makes testing easier, encourages reusability, and promotes consistency throughout the interface.
- Organisms: Organisms are relatively complex UI components composed of groups of molecules and/or atoms and/or other organisms. These organisms form distinct sections of an interface.
- Templates: Page-level objects that place components into a layout and articulate the design’s underlying content structure.
- Pages: Specific instances of templates that show what a UI looks like with real representative content in place.
The Atomic Design method is not a linear process, but rather a mental model to help us think of user interfaces as both a cohesive whole and a collection of parts at the same time. While this method is appropriate for designing and developing evergreen design systems for digital products, there are plenty of other existing design systems that designers often use such as:
So far, we’ve primarily focused on the methods of understanding the value of creating and following a design system for digital products, but the practice of design systems also extends to how a brand is expressed through other communication touchpoints. Similar to design systems for digital products, designers create traditional “Brand Guides” which focus on the overall strategy and consistency of a brand as it relates to a logo, colors, and brand personality, which include visual examples of how the brand should be executed in various communications.
It’s been common practice to create brand guidelines ahead of website design in order to ensure that the brand look and feel is in place first. The problem is that these brand guidelines often don't include guidance for digital products. With the digitization of work, products, and communication, this is now changing.
The practice of creating Design Systems for digital products is still relatively new and rapidly evolving. In 2005, Jenifer Tidwell published her book Designing Interfaces followed by Yahoo! publishing their open source Yahoo User Interface Library (YUI) in 2006. In 2008, phrases such as “CSS Libraries”, and “pattern portfolios” paved the way for the creation of “Front End Style Guides” and “Style Tiles”. In 2011, Twitter shared their own open-source framework around design patterns, Blueprint (later renamed Bootstrap), and Google's Material Design followed in 2014.
Since then we’ve seen design systems from IBM, AirBnb, and Uber that encompass not just their brand guidelines, but also full-scale design systems.
Whether you’re a small design team or a large enterprise business, defining, scaling and streamlining your design ensures a more holistic user experience, saves money and prepares you for the future. To quote former IBM president Thomas J. Watson Jr., “Good design is good business”, and there is no easier way to bring value to your business than establishing a strong design system.
When developing design systems at The Gnar, we take a holistic approach to ensure that all aspects of your unique brand seamlessly integrate into your digital experiences. From website content to software error messages, each touchpoint with your customer is an opportunity to reinforce your brand values alongside a consistent look and feel.
After establishing your design system, the work doesn’t end there. Technology is rapidly evolving and so are the needs of your users. Thinking back to our super star baker, the original cake that won over customers years ago may not be as good as it is today, or perhaps you’ve added a lot of new desserts as a result of customer requests and the products are longer as consistent as they once were.
In my next post, I will break down why it’s important to reevaluate your current design system in order to see what is and isn’t working through an analysis commonly referred to as a “Design Audit”.
Learn more about how The Gnar builds design systems.