Brad Frost on How (and Why) to Use Pattern Lab
Now more than ever, web designers are tasked with creating user experiences that render across numerous devices, browsers, and operating systems. This can result in repetitive and time-consuming manual work and a lack of cohesion in design across different interfaces. Enter Pattern Lab, an open-source tool created in part by Gymnasium instructor Brad Frost to help designers create and maintain pattern-driven user interfaces using the principles of Atomic Design.
Frost, one of the original minds behind both the methodology and the framework, has established a way to ensure a consistent user experience through scalable code. Read on to learn more about Frost’s brainchild — and be sure to check out his free Gymnasium course, Working With Atomic Design and Pattern Lab, for a hands-on tutorial on how you can use it to update and optimize your design workflows.
The Power of Pattern Lab
As Frost shared with us, Pattern Lab allows users to make a static website by “creating reusable components that save time so it’s no longer 500 percent work.” These components, repeatable HTML snippets called “patterns,” do more than just speed up workflows. They promote consistency and serve as an adaptable foundation that teams can build and improve on over time. When you break it down to the basics, patterns ensure you never have to code the same thing twice.
Through Pattern Lab, these patterns can be nested and linked together to form a fully-functional prototype. Within the nested patterns, you can modify a module like a header or footer and see it updated in every instance across your website. Frost explained that some designers fear that their creativity will be stifled by the implementation of these reusable patterns. Although the patterns do impose constraints, he says it’s well worth it in the long run; they ultimately save time and give designers the opportunity to focus on higher-level tasks like micro-interactions that further improve the user experience.
Breaking Down Atomic Design
Pattern Lab’s approach is fueled by the methodology of Atomic Design, which takes cues from chemistry because “as complex as our world is, it’s all built from the same stuff, and that parallel holds very true for interface design.”
This approach separates a website into five basic patterns: atoms, molecules, organisms, templates, and pages. Atoms are the simplest elements on a webpage — think text boxes, buttons, and input fields. They aren’t functional on their own, but they can bond together to form molecules that serve a specific purpose. For example, a form label, search input field, and button can join together to create a search form molecule. As Frost told us, the result is “a simple, portable, reusable component that can be dropped in anywhere search functionality is needed.”
Organisms, the next piece of the pattern, are made when one of the molecule components combines with other molecules or atoms. A sidebar organism may include a text box (atom) and a molecule (search form) for visitors to look up keywords and phrases. Organisms like sidebars can then be applied to templates, which are page-level elements that arrange components into a layout.
On the majority of websites, the homepage template contains header, footer, and sidebar organisms. When content like text or images is inserted into these templates, pages are created. Pages represent what users will see and interact with when they visit the website, making it the final and most concrete stage of Atomic Design.
By guaranteeing consistency and scalability, the method’s “build once and reuse everywhere” approach simplifies both the process of web design and the ongoing maintenance of the finished product.
Create Your Own Design Systems
Ready to add Pattern Lab to your skill set and apply the Atomic Design approach to your work? Learn straight from the source and sign up for Frost’s free Aquent Gymnasium course, Working With Atomic Design and Pattern Lab. This class takes a deep dive into the tool, the concept of Atomic Design, and how developers and designers can fuse the two to optimize their workflows and create more adaptable websites.
