3 Steps to Scalable Website Design Using Atomic Design Principles
Website redesigns are complex technical projects and can be messy from a design perspective. How we structure, organise and connect our design files will greatly impact the relaunch project and how well the system we create will serve the content-driven website as it grows, advances and expands during its operational phase. Our answer is constructing a Single Source of Truth (SSOT) following the principles of Atomic Design.
A site relaunch often takes months of work, requires many iterations during the design phase, and is followed by the inevitable tweaks, changes, and corrections. The latter, even if they are “small” changes, can sometimes feel like they take longer and more energy than the bulk of the project. If we build our design foundation well, we will, instead, be able to make changes quickly, consistently and easily, reducing stress and our workload. Using Atomic Design, each element in a project is defined once, included in our Single Source of (design) Truth, and applied consistently throughout our entire site—or even multiple projects and properties. In information systems theory, the SSOT is the practice of structuring informational models so that each data element is managed in only one place.
1. Create a Single Source of Truth
In order to create your Single Source of Truth, Atomic Design starts with the smallest, most basic elements of design, called “atoms.” These atoms are combined into “molecules,” and the hierarchy continues to ever-larger structures: “organisms,” “templates,” and “pages.” This hierarchy creates a model of design element dependence and inheritance that makes management of the site design efficient and elegant.
At the beginning of a project, we first create a file to define all of the atoms. These are the smallest “units of design” and would define, for example, that H1 text is bold and large. This definition of an H1 then would be universal throughout the entire project.
In the design practice at b13 we work with Adobe XD and cloud-based design files. This combination allows us to build an Atomic Design system, linking design files and reusing elements at any level of the hierarchy. This network of design files provides consistency and scales easily as a website grows and expands.
Following atomic design principles, we start with the basics:
- Define the main color, supporting colors and the font.
- Building on that, we declare headlines, links and buttons.
Those are styles that are going to be consistent throughout the website, and could even provide universal definitions across multiple websites of the same client.
- We create one primary component for each defined element.
- Each time we use or reuse that component, a new instance is created.
All changes made to the primary component will be inherited by its instances.
For example, we define a button as a component and make it blue. After placing it in ten different places on three different pages, we decide the button actually needs to be red. Instead of changing every button manually, we simply change the primary component and all other instances of it instantly inherit the change. You can immediately understand how this can save you time and hassle: When you are 500 (or 10,000) pages into building your site, with a SSOT, you can make one change that will change all the buttons. Without that central definition, you’d need to make 500 individual changes.
This file with our global design tokens serves as the backbone of our library of design components. All global changes must be made in that file. It is our Single Source of Truth.
2. Create a file for every new feature or page
After defining those basics, we create a new file for every new feature or page:
- We start with global elements that are going to be reused across the entire website. We create a file for navigation, for example, which will be used on every page of the website. The navigation will inherit the basic elements we’ve already defined, such as color and font.
If we then change those basic elements in the original file, they’ll be changed in the navigation as well. We will use this same concept for all of the additional files for other pages and features. Each will inherit the characteristics of the elements in our SSOT file.
This inheritance-based approach helps to ensure that we will avoid mistakes and inconsistency. It also saves us time and effort when creating design variants. For example, let’s say that we design a teaser element for the start page. If we also want teasers on another kind of content page, we can import the teaser element into the file for our new page type. Hey, presto, it’s identical! But if we want the teasers on the new content pages smaller, we can change the design atom (or molecule) for the new page type. The initial component, however, won’t be altered. The teaser on the startpage will remain in its original format. And the new pages will inherit and reproduce all of the main design, except the properties overridden in their specific design file. We can now save our alterations of the teaser as a new state of the original component in Adobe XD. It now has two different appearances that can be used as needed throughout the project.
3. Grow your library of elements, do better work faster!
As the project expands, we create files for new pages and design new elements within those files. In that way, our library of elements expands. At some point in the process, we may be able to rely completely on the library of elements we have created. This reduces our workload and let’s us create new features and pages faster and with less effort, recombining our comprehensive library of design components.
With global design atoms and components that can be imported into new files, we can expand that system with basically no limitations. Every new feature will have its own design file. We will not have to struggle with confusing design files that are very large and overly complicated.
If we add a new feature—even a year or two after the site redesign is launched—it will be easy to ensure the new feature is based on the same design principles as the rest of the project by simply importing the existing design tokens and elements.
Following this approach, combining Atomic Design, a Single Source of Truth, and helpful tooling, I can work faster and more reliably for our clients. Each project you work on will have a consistent and scalable network of design files. This allows you to implement new designs consistently, adapt existing designs quickly, and create new features and pages that fit seamlessly into your projects, reusing existing elements wherever possible. Freed of tracking too many details across too many files or sites, I can deliver my best work, focusing on creative solutions to delivering value for our clients at b13.
Get in touch with us
Find out more about how we deliver client value in digital experiences with listening-driven, design- and UX-focused work for clients like you!