What's the Difference Between Atomic Design and Pattern Libraries?

What's the Difference Between Atomic Design and Pattern Libraries?

Header image of Atomic Design vs Pattern Libraries blog
Leigh Anderson
Thought byLeigh Anderson
Solutions Analyst
October 30, 2017

Atomic design is something our team gets a lot of questions about. Our clients want to know what an atomic design is, and whether it's right for them.

Atomic design has become a catchall term that can refer to any one of several things. Atomic design can refer to a series of principles that guide the creation of design systems… or, it can refer to a library of patterns that are used to form the structure of a site’s pages.

Regardless of whether someone is referring to atomic design as a framework, or atomic design as a design methodology, the core principles are the same. Atomic design provides a framework for constructing an ecosystem that will in turn evolve over time.

What are the principles of atomic design?

Atomic design is a straightforward approach to unifying a web platform’s visuals. Rather than designing big items in a top-down way, atomic design begins with taking a holistic view of an organization’s needs, constructing an ideal design concept, breaking that concept down to its smallest principles, and building back up from there. An atomic design philosophy guides the appearance of pages by providing base-level components and guidelines. These guidelines and components can be combined and organized in different ways to deliver increasingly complex structures using an atomic design library.

An atomic design library, also called a pattern library, is a tool or set of standards that is compiled through a design process that utilizes atomic principles In an atomic library, each component has been tested piece by piece, and every item has been checked against its context in larger templates to refine the design. This is what preserves visual integrity in a platform, and helps organizations standardize their branding across all of their digital touchpoints.

How does a pattern library work?

An pattern library provides content authors with a series of components that can be used to construct pages and content. Rather than designing pages one-off, the pattern library underpins the entire project, leading to greater visual consistency and evolutionary growth. Atoms and smaller elements allow organizations to create larger systems more effectively and consistently, and helps platforms to experience organic growth based on need, rather than trying to define an entire design system up front.

To learn more about atomic designs and pattern libraries, download the webinar from FFW and Acquia: Learn How to Use Atomic Design to Make Your Site Manageable and Adaptable. To get started with an atomic design, contact the FFW team, and one of our atomic experts will be in touch right away.

Digital Strategy

Fill out the form to learn how FFW can support your needs.

Read next:

Nouveau site web pour FFW

Come see the new FFW look and platform

Teaser image of UX blog part 2

How good and bad user experiences affect your reputation

Teaser of Eastern bank blog

New Case Study: Eastern Bank and Join Us For Good

Teaser of 7 Things Before Starting a Drupal Project blog

7 Things to Think About Before Starting a New Drupal Project