First Things First: Atomic Design and Pattern Libraries
Just in case you’ve heard of atomic design, but you’re not really sure what people are talking about, here’s a basic overview:
Atomic Design is a development methodology created by Brad Frost. The concept, if you think back to chemistry class, is that atoms can be combined to create molecules, which in turn come together to create more complex organisms.
Imagine those small pieces, atoms, as snippets of code, such as a button or a headline style. Those atoms combine to create functional components of a website, or molecules.
And from there, you are able to combine and recombine these different components to create templates and pages.
Components can be combined and recombined on different pages in different ways, but they are still consistent and functional because they were developed as individual pieces in this system.
Pattern libraries are a way to contain and organize all of the different elements created through atomic design. They can be passed on as a resource to new developers on the same project, or even to developers working on a new project using a new variation of the same elements. The library not only creates a repository for snippets of code, but in the end, it serves as documentation on the construction of the site for future use.
Why do we use atomic design?
Design systems make it easy to create a consistent, predictable user interface. That’s really one of the main goals of this approach — to improve and simplify the user experience.
Pattern libraries help with consistency in other ways, too. For example, if you are working with other people who are spread across different teams or departments, creating a design system can also help you maintain brand consistency by creating a defined set of styles and readymade components that adhere to those styles.
And it’s much easier to hand off a project to a new team member when there is already a pattern library in place.
Establishing design systems helps you create a shared vocabulary that makes communication much easier, whether it’s across your own team between developers and designers, content managers, whoever; across different departments; or with vendors and third parties.
For example, even within our own team, our designers, developers, and user experience architects might call the same item four different things:
“That thing that moves”
If you have a pattern library you can refer everyone to, all your team members have a shared context. Even if you’re a one-person team, a shared vocabulary helps educate anyone who’s involved with your project. It helps stakeholders understand and visualize the process when they can see what things are called and how they fit together.
Another benefit of a defined pattern library is that developers have less code to maintain. The organizational philosophy of atomic design means that and are are fewer one-offs and unique instances. That means less stuff to break, simpler product testing, and faster bug fixing.
The biggest benefit that a design system gets you is modularity. Having defined building blocks makes it much easier to know what you can build and how you’re going to build it. As you build your your pattern library, you can easily see and incorporate the organizational decisions already made. As a result, new modules are easier to make and fit naturally into the design and rhythm of the site.
This all sounds pretty great, right? But where do you start? How do you determine what these pieces are and how to break down designs into components to build your pattern library?
Well, that’s part of what we are going to dig into during our mini-workshop, Getting Crafty with Components: Breaking Down the How and Why of Atomic Design. Hope to see you there!
About the Authors
A lot of people are surprised when they learn John was an English major, given his mad development skills. But it’s actually his interest in the humanities that drove him to the web. John learned HTML in college in 1993 and quickly realized that the web would be a communications revolution, along the same lines as the Gutenberg Press. So he set aside his plans for advanced English studies to participate.
Since then, he’s worked for several media companies, government agencies, and associations — including AARP, the Discovery Channel, and the Library of Congress. Then he moved to NewCity, where he practices front-end web development with a special interest in data visualization.
Maker of things and fixer of problems, Jenny made her first website in sixth grade. She started freelancing in high school, and by college she was building her own CMS (though she didn’t say whether that ended up being a good idea). She studied web design at Radford University, where she designed, developed, and directed the student-run online magazine. And before she came to NewCity, she worked as the sole web designer/developer at Ferrum College during a site redesign and implementation. For NewCity, she puts that same crazy-awesome drive to good use taking ideas and making them go.