What is Atomic Design?
Designing for the web has evolved. And with good reason. Creating strong, consistent and flexible designs for responsive sites comes with unique challenges. How do we craft a responsive site with tons of different content needs and keep it unified? Enter atomic design.
Pattern-based design systems (or pattern libraries) aren’t a new idea. But atomic design gives this old concept a new framework. It helps us think about how to build from the bottom up to create a final web site.
Atomic Design is the brainchild of Brad Frost. His initial article on the subject is a great place to get an overview of this mental model. His analogy relates a smart design system to principles of chemistry.
See a video overview here.
Atoms
Atoms are the fundamental elements of your design. It doesn’t get smaller than this! They are the tiniest components of a site. These patterns establish the ground rules that everything else builds on. Atoms are a combination of the concrete and the abstract. Atoms are basic HTML elements like headers, paragraphs, and form fields. Alternatively, they are visual elements of your brand guidelines, like colors and fonts.
Molecules
Molecules are simple combinations of our design atoms. Just a few of them. Again, the emphasis is on incremental complexity. Some good examples are a photo and its caption, an article teaser block, or a search form.
Organisms
This is when things get interesting. With molecules in our toolbox, we can start to create organisms which represent larger sections of a site. Headers, footers, and grids of articles are examples of organisms.
For our clients, the site design starts to come to life with organisms. The larger layout components are a complete thought on their own, and we mix and match them to create templates.
Templates
The chemistry analogy falls away at this point, but not the benefits of the approach. Templates aggregate organisms into layouts that contain placeholder content. They establish whole layout patterns that we can apply to different types of content on the site.
Pages
Pages let us stress-test our templates by adding real content to the layouts. We create several pages that use the same template but different content. Pages help us see if our molecules don’t work in the real world and need adjusting. This feedback cycle helps create a tight, flexible site design that responds to the true needs of our clients.
Need help designing your site? Contact us.
Benefits of Pattern-based Design
Kanopi specializes in Drupal and WordPress CMS development. In this context, pattern-based design methodologies really shine. Content management systems like Drupal and WordPress are inherently component driven. They use and re-use “building blocks” in different contexts throughout the system. An atomic approach enables us to reconfigure and repurpose molecules. It creates a consistent but flexible site architecture. This in turn is an efficient and scalable way to build a CMS-driven site experience. These patterns makes your site consistent. They give you the tools you need to evolve your site as the needs of your organization change.
Atomic Design at Kanopi
Kanopi takes two different approaches to pattern libraries based on the needs of our clients. Both follow the atomic design philosophy. One is an interactive design approach using clickable wireframes and modern design tools. The other is a living, breathing design that is purely code-based, using the Pattern Lab tool.
Interactive design
Strong designs start with strong strategic and UX thinking. Wireframing is a key step early in this process. Wireframes are the “bones” of your site. They give an idea of information hierarchy for your templates. They can also help understand what user interaction with the site will feel like. We create interactive, clickable wireframes. Using this tool, stakeholders and users interact with key features of the site interface early on. This way we catch usability issues before we ever get into visual design.
Kanopi’s experienced design team takes the wireframes and layers on the look and feel. They define patterns, or symbols, using web-centric design tools like Sketch. These symbols build upon one another in a way that maps beautifully to the atomic design process. These are static files, but they are built with a developer’s eye. How? Our web designers are front-end developers! As a result our designs start with the fundamental elements of HTML and grow and evolve from there.
In-browser design with Pattern Lab
In-browser design can feel strange and unfamiliar at first. But embracing it means faster design iterations. It gives a better real world picture of the site. And it serves as a foundation we can leverage in theme development to make the rest of the project go faster.
Pattern Lab is an open-source tool created to help designers architect efficient atomic design systems. It is our preferred tool for creating pattern libraries for our clients. Wireframing starts in this interface, in simple grey and white. This ensures we have identified all the patterns needed for the functionality and features of the site.
We take the established “bones” and flesh them out with established colors, typography, and visual elements. At the end, we can see templates that respond to your browser. Interacting with Pattern Lab feels like pages in a finished site. It eliminates the guesswork and misalignment that come from static, traditional mockups. The final experience gives you a link that you can share with stakeholders. They see what they need to see, on their device of preference.
To see a Pattern Lab design system in action, check out the demo on the Pattern Lab website.
