By
Atomic Design, a methodology created by Brad Frost, is based on the idea that a series of coexisting building blocks define a design system. In his book Atomic Design, Frost defines Atomic Design as “a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner.”
A design system is a collection of modular design components intended to manage design at scale with the use of reusable components and patterns. These are assembled and used to create a reusable library of designed elements across your website.
As web design continues to evolve, Integrity has recognized the need to apply Atomic Design methodology by creating design systems rather than creating an assortment of web pages. There are five levels in atomic design:
In the context of UI, atoms represent the basic building blocks and foundations of a website. Some examples of atoms are text styles, colors, icons, shadows, borders, etc.
A molecule consists of several atoms which are built to be reusable and can be combined in order to form a function. Buttons, form labels, menus, and search boxes are some examples of molecules.
Organisms are made from groups of atoms and molecules. For example, a header of a website may contain a logo, a search bar, and a menu. Each of those molecules are the foundation of an organism: the header. Other examples of organisms are sidebars, forms, content cards, and footers.
Templates combine organisms into a website layout and is the final result of a UI design. Wireframes (the skeleton of a page) would be considered a template.
Pages represent templates and are the highest level of fidelity, meaning you can view the UIs in their final form. Pages are considered instances of templates since they provide a total representation of what is viewed by users.
Each stage builds on the previous, acting as an aggregate of items from the preceding stages. Frameworks like atomic design allow us to ensure that our UX designs are consistent and manageable.
If your organization has not applied the Atomic Design methodology, you’re probably facing some challenges. Perhaps your websites have complex design interfaces and interactions that lead to higher learning curves and more development time. There are likely inconsistencies in your static design mocks, because there are different internal departments involved.
Maybe you have updated your brand guidelines, and your development team now has to rework several individual pages, which will take a significant amount of time. Since you are not reusing your components across your sites, you also need more testing for accessibility, browser support, and device support. All of this means higher costs and expenses.
There are many benefits to using Atomic Design.
Once a design system has been created, designers no longer have to design from scratch since they are able to pull existing components from pattern libraries. This allows designers to focus on solutions and not individual components, which eliminates decision fatigue.
Since the design system is a single source of truth that holds all components, it substantially decreases the amount of rework. Only one primary component needs to be updated and the change can be pushed to other instances across the site. Alternatively, if the company’s brand guidelines change, unwanted elements can also be easily removed.
Developers are able to work faster since they can work from the same library and repurpose existing atoms, molecules, and organisms. This also means that they can work from a smaller codebase since components are being reused. Development and testing is also more efficient since UI inconsistencies are eliminated, resulting in lower project costs. Additionally, cross-browser, performance, and accessibility testing are easier, allowing for faster launch.
Both designers and developers will have a shared language of communication. With everyone speaking the same language, there are less misunderstandings and better implementation of designs. There is also less time spent with back and forth conversation and meetings and more time is spent getting work done.
Because your website is cohesive and consistent, this means that the users master your UI faster, leading to more conversions. Less time is spent creating components from scratch and since the components have been predefined and the standards are clear for when they are used and how they function, meaning that less time is spent from unnecessary meetings about implementation. Less time means more money saved!
Atomic Design isn’t just about colors or fonts. It’s a philosophy that guides the visual and technical construction of websites. It will ensure that your content is consistent across all pages with best practices in accessibility and responsiveness, regardless of how users are viewing your site.
Your brand isn’t static, it’s a living thing that responds to your environment. Changes happen all the time. If you have a website with hundreds of pages and multiple brands, making changes is time consuming, and it’s easier to deviate from brand consistency.
Because Integrity follows this methodology, this means that when we build your website, we can continue to modify and improve elements over time, giving us the ability to always adapt to meet your future needs.
