Gone are the days of designing a collection of web pages! Digital design is developing at such a rapid pace with more users accessing content through various devices, browsers and screen sizes, which means designers are tasked with creating interfaces for more contexts. Web design is evolving with an emphasis now being placed on creating thoughtful design systems.
Atomic design is a methodology to create and maintain robust systems in response to the new demand for consistency, allowing digital designers to release higher quality and more consistent UIs. The atomic design methodology is composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner.
Atoms
Atoms are the basic building blocks of all matter. In the context of a pattern library, atoms demonstrate all your base styles at a glance, which can be a helpful reference for designers to keep coming back to as they develop and maintain the design of a system. But like atoms in the natural world, interface atoms don’t exist in a vacuum and only really come to life with application. Examples of atoms include buttons, colour pallet, typography, search bars and other form elements.
Molecules
Molecules are groups of two or more atoms chemically bonded together to take on distinct new properties; they are relatively simple groups of UI elements functioning together as a unit. Creating simple components helps UI designers and developers adhere to the age-old computer science precept that encourages the ‘do one thing and do it well’ mentality. 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 functioning together as a unit to formulate distinct sections of an interface. Building up from molecules to more elaborate organisms provides designers with a more important sense of context. Organisms demonstrate those smaller, simpler components in action and serve distinct patterns that can be used again and again. For example, the product grid organism can be employed anywhere a group of products needs to be displayed from category listings to search results to related products.
Templates
Templates are groups of organisms stitched together to form pages. This is where the design really comes together with page-level objects that place components into a layout and articulate the design’s underlying content structure. When crafting an effective design system, it’s critical to demonstrate how components look and function together in the context of a layout to prove the parts add up to a well-functioning whole. By defining a page’s skeleton a designer is able to create a system that can account for a variety of dynamic content, all while providing needed guardrails for the types of content that populate certain design patterns.
Pages
Pages are specific instances of templates that show what a UI looks like with real representative content in place. Pages also provide a place to articulate variations in templates, which is fundamental for establishing robust and reliant design systems. Here are just a few examples of template variations:
- Different user types – a user has one item in their shopping cart and another user has ten in their cart.
- Recent activity – a web app’s dashboard typically shows recent activity, but that section is suppressed for first-time users.
- Content examples – one article headline might be 40 characters long, while another article headline might be 340 characters long.
- UI elements – users with administrative privileges might see additional buttons and options on their dashboard compared to users who aren’t admins.
The page stage is the most important and concrete stage of atomic design and for the obvious reason: this is what the user sees and will interact with when they visit. Additionally, the page design is what stakeholders will sign off and this is where the designer see all those components come together to form a beautifully functioning user interface.
What are the advantages of atomic design?
The five distinct stages of atomic design have now been summed up with an explanation of how they work concurrently together to produce effective user interface design systems. But why bother with the structure, what’s really the point of it all? Here are 5 clear benefits of following the atomic design methodology:
1. The part and the whole – one of the biggest advantages atomic design provides is the ability to quickly shift between abstract and concrete. Designers can simultaneously see our interface broken down to its atomic elements and also see how those elements combine together to form final experiences.
2. Clean separation between structure and content – a well-crafted design system caters to the content that lives inside of it, and likewise, well-crafted content is aware of how it is presented in the context of UI. The interface patterns designers establish must accurately reflect the nature of the text, images, and other content that lives inside them.
3. What’s in a name? – the issue with terms like components and modules is that a sense of hierarchy can’t be deduced from the names alone. Atoms, molecules and organism imply a hierarchy that anyone with a basic knowledge of chemistry can hopefully wrap their head around.
4. For user interfaces – it’s important to understand that atomic design applies to all users, not just web-based ones. You can apply the atomic design methodology to the user interface of any software; Microsoft Word, Keynote, Photoshop, your bank’s ATM, anything!
5. In theory and in practice – atomic design allows us to see our UIs broken down to their atomic elements, and also allows us to simultaneously step-through how those elements join together to form our final UIs.
The atomic design methodology stems from the book Atomic Design by Brad Frost. It enables creative teams to work in sync across projects and easily adapt to emerging devices and screen sizes. With this process, there is more consistency throughout the design and build with UX specialists now collaborating in the initial stages, including designing the atoms. Plus, pages with stylesheets are easily handed over to developers, fuelling a more straight forward coding process to reach a more reliable final product that’s flexible to evolve with the digital landscape.
