Lessons from deep space: How atomic design can optimize your workflow

One of the biggest lessons that the crew of the Enterprise taught me was the importance of cross-team collaboration for a seamless workflow between officers. But, what does that mean for the web-developing Terrans (earthlings) of the 21st century, and how do we harness that streamlined experience for a better product?

Enter atomic design, one of the most important developments in optimized digital workflow in years. Sounds starship-level scientific, right?

Pioneered by designer/developer Brad Frost, atomic design’s principles rest on creating modular systems, made of smaller and smaller elements that come together to form a cohesive, working product. Frost breaks these elements down into parts that you may vaguely remember from your high school chemistry class: atoms, molecules and organisms. Let’s explore how they work within user interface terms:

• Atoms are the smallest units of atomic design. They cannot be broken down any further without ceasing functionality or losing their meaning. For example, a form field or a button would be a type of atom.
  
• Molecules are the next level up, consisting of two or more atoms. Think of a search bar, which consists of a label, form field and a search button. It is a simple and functional unit made up of smaller, coexisting parts

• Organisms are more complex UI components that rely on several functioning units to work on their own. Think of a page header, which could consist of a search bar molecule, several top links and a logo.

When these components have been defined within our design system, it’s time to draft the template, which is essentially a blueprint, for our future page. This is a rough mockup that determines where these components should exist within the page layout, and it tests the page’s underlying structure to make sure that it is (foreseeably) as sound as it can be before the actual page is designed. When the components are finally styled within the template, the finished project is a brand new, shiny page.

How can a modular system improve your workflow? Let’s break it down:

• Faster Workflow: While these elements depend on each other to exist, the beauty of having a modular design system is that elements are easily changed and manipulated without compromising the entire system, which speeds up workflow and makes designers and developers equally happy.Need to change a button color? Instead of having to look through pages and pages of variations, a simple tweak in the CSS can implement a site-wide change. Working within a design system with templates allows for faster and more consistent output, which means more pages get built in less time, saving resources and money.
• Consistency: Design systems create a global language that is understood by all sides of the project by implementing consistent elements throughout the site. In the 24th century, humans and Vulcans can speak their native languages and still understand each other thanks to a handy device called a Global Translator. Think about your design system as a global translator between all members of your team, internal and external.Designers won’t have to worry about creating inconsistent and redundant elements on every page, developers don’t have to generate pages and pages of unique code, and users won’t get distracted by inconsistent elements that have them guessing at intent and meaning. Everybody wins.
• Future-Proof Foundations: In the same way that modular design systems allow for faster and easier modifications across the board, future-proofing ensures that as your site grows and changes over time, your site will never feel dated or left in the dust.

Incremental changes are key for evolving your site without overwhelming your users. This also applies to ensuring accessibility and cross-browser compatibility. When designing from the atom up, it’s easier to test components in the beginning, rather than to be stuck with an entire website full of problems at the very end of the project.

The most successful and sophisticated websites come together when all teams involved are collaborating seamlessly, not when each team is working in a vacuum, praying that the end-product will look great.

Agencies (and starship crews) of the future will see fewer boundaries between practices and a more fluid workflow between all team members. While designers and developers, like the bridge crew and engineering, may not always see eye-to-eye, a modular system allows a greater understanding between practices and provides a mutually-understood dialogue that was not present before.