Is Your Style Guide Ready to Grow Into a Design System?

Your company may not have a design system but it's probably does have a brand guide meant to govern the design and usage of brand identity elements like your company logo. This guide may or may not get updated regularly or used as often as it should.

Style guides are an important and helpful starting document. However, when a company establishes an eCommerce presence, the need for consistent visual design, tone, and communication increases exponentially. Suddenly, the rules for logo placement and font selection are not nearly enough to cover all of the pieces and parts that make up a robust eCommerce site. Enter the need to create a design system.

What is a Design System? 

When you build a design system, you’re assembling a collection of reusable components, guided by clear standards, that can be utilized together to create any number of applications.

This system will ultimately form your digital brand and beyond.

Using a systematic approach, a design system is a game-changer for a company’s digital product strategy, allowing them to scale up faster and more impactfully. By establishing pattern libraries and other reusable and combinable product designs, this system will influence everything from the user interface and user experience to web design, and more. 

Essentially, the system becomes a singular referral point from which all team members can draw when creating product or material designs. It also helps eliminate repetitive work, thanks to its reusability, ensures consistency, and most significantly, eases communication struggles.

Often, many large teams are collaborating to deliver product designs, and a design system can help minimize overlaps or miscommunications between teams. This unified approach also trims down on associated issues, such as tools that don’t integrate from team to team. 

Atomic Design Systems Methodology

One of the most comprehensive and effective versions of this concept is the Atomic Design Systems methodology. This approach considers all of the details that go into creating and maintaining robust design systems while providing a precise way of explaining itself using well-known chemistry properties. Brad Frost explains it this way:

All matter in the universe can be broken down into a finite set of atomic elements. As it happens, our interfaces can be broken down into a similar finite set of elements.

The elements of an Atomic Design System

Using the language of science, Frost's theory breaks up design elements into a cohesive system. Starting from the smallest, standalone elements, to the a whole piece. To that end, he defines the design elements like this:

• Atoms: basic HTML elements, including form labels, inputs, buttons. These are defined by being so small that they cannot be broken down further without losing functionality.
• Molecules: simple groups of elements that work together as a unit. For example, a search form "molecule" could be made up of the following "atoms:  a form label, search input, and button.
• Organisms: relatively complex components made up of groups of molecules and/or organisms. These organisms form distinct sections of an interface. For example, a header can be an organism, comprised of a search molecule, button and text atoms.
• Templates: page-level objects that organize components in a layout. A header organism can be part of a homepage template.
• Pages: designed templates with representative content in the design. For example, a homepage template could be filled with representative images, text, and media to make up a page.

Factors of a Successful Design System: 

In a Creative Design System, the design is the “what.” The system is the combination of who, when, where, why and how the design is intended.

A design system alone is not what will improve your eCommerce site. It is the process of how you implement, utilize, and maintain that system that drives success.

• Easily Reusable - All components should be things that you can use again and again, ensuring scalability.
• Robust - When using the system, you should wind up with solid end results that need minimal tweaking. The system alone should be able to provide you with a product or platform that can stand on its own.
• Compatible - Different parts of the system need to be compatible with each other. It’s not useful to have a design setup that doesn’t integrate with other pieces.
• Clearly and Consistently Documented - People need to be able to find, follow, and update the documentation for the system. If it’s not stored in an accessible place and continually maintained, it won’t be useful for long, or even used by many. 
• Still Allow for Freedom - The system is simply that - a system. While it should govern all designs, it should also leave room for creativity and input from team members
• Cost and Time Effective - If your system is truly effective, it will cut down on costs and team member time taken to execute a design. 

When all of these factors are present, your design system will help your teams build better solutions, build them faster, have consistency across all touchpoints, and even expand.

The ultimate goal is that the design is defined for both design and development team members. When your system addresses every element of design (i.e. design language, layout, spacing, typography, photography, iconography, etc.), it goes beyond how the designers use it to become documentation to direct the back and front end developers in designing and coding. Two examples are Lightning Design System and Carbon Design System.