What is a design System?

A visual identity system is a collection of design software, templates, color palettes, type kits, icons, logos, and images that are usually hosted in the cloud for design departments to access at any time.

Visual identity systems ensure universally consistent graphics for a brand's digital and physical presence.

Due to its reusability among designers and developers, a good visual identity system will also be equipped with clear usage guidelines. These guidelines showcase how to implement existing components in order to avoid branding inconsistencies.

Why is it important?

One of the biggest problems we see with high-growth SaaS companies is a lack of a robust design system created specifically for their marketing websites. Often, marketing departments will piggyback off their software products’ style guides because it feels efficient at the moment.

Although these guides provide some degree of direction, the fact remains that user experiences and journeys inside a software product are completely different than those on the products’ marketing website.

Hence, for marketing websites to grow and evolve quickly and efficiently, designers need access to a design system that’s made specifically for marketing website experiences.

How designers benefit from design systems:

A design system is a single source of truth for design and development teams. In our decentralized world of remote work, this has become increasingly important.

When done correctly, design systems provide a multitude of benefits:

• Increases design consistency across teams (e.g. graphic, video, development, etc.)

• Improves cohesiveness from design to design

• Shapes brand perception

• Decreases onboarding time of new designers

• Speeds up the design process with reusable elements

If education is the great equalizer, design is the great communicator.  When brands put systems in place, they observe benefits across the company.

How developers benefit from design systems:

For developers, the atomic approach gives them the guardrails they need to take existing components and implement them properly.

Because design components follow an approach like atomic design, developers have an established language and structure that is universal.

What is Atomic Design?

Atomic Design is a visual identity system methodology that separates the entire process when developing design systems in a more organized way using atoms, molecules, organisms, templates, and pages.

Who introduced the atomic design methodology?

The atomic design methodology was introduced by designer Brad Frost to help designers craft reusable UI systems seamlessly. He is a web designer, speaker, writer, and consultant. His book, "Atomic Design," introduces the methodology for creating and maintaining effective visual identity systems.

“As the craft of web design continues to evolve, We’re recognizing the need to develop thoughtful design systems, rather than creating simple collections of web pages. Atomic design is a methodology for creating design systems.” - Brad Frost

The five atomic design phases

1. Atoms

Atoms are the smallest building blocks of a website page. In atomic design, atoms refer to basic HTML elements that provide the smallest units of a web page, such as buttons, labels, and input fields. Fonts, color palettes, and animations are also considered atoms.

2. Molecules

Atoms are bonded together to create molecules, representing the second smallest groups of a website page. An example of a molecule is a blog subscription box made up of a field label, an input field, and a button.

3. Organisms

Organisms are groups of molecules that are joined together to form more complex beings. In interface terms, the organism is any design sequence that appears on website pages.

The header and footer of a website page consist of two or more molecules, making them both organisms. The search bar is an example of a molecule used to build a header component.

4. Templates

Website pages start to take shape in the fourth phase of the atomic approach. Templates are groups of organisms combined to form the structure of a page.

If we look at a homepage, the header and footer organisms we started with are found in the homepage template. These organisms join others to make up the homepage template, as shown in the image above.

Templates are effective because they ensure components of a visual identity system are crafted to look and function together. Atomic design templates can be viewed as a skeleton of a page.

5. Pages

After the first four phases, designers have all the elements they need to build out pages for the UI of a website.

If the previous four steps were done correctly, then the final step gives designers the freedom to drop in images, text, and all that good stuff to give them an idea of what the UI will look like.

The final appearance of the pages dictates whether the site is ready to launch, or whether the developer needs to loop back and make changes to earlier design elements.

Why Atomic Design?

Breaking down big projects into templates, organisms, and molecules is efficient in itself. Atomic design will not only let the designer focus on small details but allows them to see the bigger picture—the web application’s user interface. Doing so allows designers to avoid creating a component more than once, saving designers time and promoting a culture of reusability.

Mix and Match Design Components

By breaking down components into basic atoms, it's easy to see what parts of a website can be reused and how they can be mixed and matched to form other molecules and even organisms.

Above, you’ll notice there are three different pages: a homepage, a blog page, and an article page. Each is using the same components created from the atomic design process. This allows designers to build pages faster all while remaining consistent.

Website Code is More Consistent

For developers, the atomic approach gives them the guardrails they need to take existing components and implement them properly.

Because design components follow an approach like atomic design, developers have an established language and structure that is universal.

Atomic design is also great for any developer that is assigned to a new project. Since all design components are organized and should match any mockups for new website pages, development teams can easily differentiate from component to component.

Fewer Design Components to Manage and Organize

The issue many teams run into before implementing a visual identity system that follows the atomic methodology is the creation of duplicate components.

It’s easy for designers to fall into the habit of creating net new components when a similar one already exists. This is because:

1. The designer forgets about existing components.

2. There is no documentation tracking existing components.

By using the atomic approach, designers keep track of every single atom they begin with and document each instance that each is used to create a larger being or organism.

Faster Speed-to-Market

Visual identity systems make cross-browser/device, performance, and accessibility testing easier; vastly speeding up production time and allowing teams to launch higher-quality work faster.

This is because all teams are speaking the same visual language. The common workflow for building new website pages looks something like this:

1. Marketing teams suggest a new page using the components found in the atomic design system.

2. Designers take the request and build the mockup using the same components.

3. Developers take the design mockup and launch the page.

In addition, baking things like accessibility into a living visual identity system scales those best practices, allowing your interfaces to reach more users and maintaining brand consistency across all digital channels.