Atomic Design – methodology for UX/UI design

There are many examples of modular principles in the history of our industrial evolution; from Ford’s first mass-produced cars, via IKEA’s flat pack furniture, to design systems for web designers.

These principles are simple, and they speed up production and create a framework for the construction of complex products.

At Platform29, we have adopted and evolved a fair deal of the methodology described in Brad Frost’s book Atomic Design. It is based on designing workflow systems comprising components that fulfil specific tasks to create a whole, seamless experience of digital interfaces. Let us quickly go through the five pillars of the atomic design principles.

Anyone who remembers the chemistry lessons from high school will be familiar with the first three parts here. Organisms consist of a number of molecules which in themselves consist of a number of atoms. When we build web-based content hubs we use these modules (or components) to create a system that allows for a coherent user experience. What we should keep in mind is that this system is not abiding by rules of linearity. All five pillars should be considered during all stages of the development phase; from conceptualising to content designing and production.

A1@2x

Atoms

The smallest elements in our toolbox are what Brad Frost calls atoms. (Of course, we could call them anything we want, but the idea behind the comparison to chemistry is that most of us know that atoms are the building blocks of molecules and molecules are the building blocks of organisms.) The atoms are object such as labels, inputs, buttons and the like. These are elements that, in context and conjunction, create a desired functionality.

A2@2x

Molecules

When we put these elements together in a contextual frame, they will become a component that has an allotted task. We call these components molecules.

A3@2x

Organisms

An organism is when several molecules and atoms are grouped to create a larger whole. The masthead of a website is a good example of a commonly recurring organism that most of us are familiar with.

A4@2x

Templates

Here’s where Brad Frost leaves the chemistry analogy and uses more conventional labels, such as ‘templates’ and ‘pages’ (although he also argues that ‘pages’ is an obsolete title for something that never really was a page in the first place). As I mentioned above: call it whatever you like, the principles are still the same. In the template we determine the layout of our website. Here’s an example.

Pages

Once we fill our template with contents, we’ll be a lot closer to our final design. This is the stuff we present to our clients. It’s also where we check if our modules work as we intended them to, and where we decide what and how many exceptions to our system we can and will allow for. This is why it’s important to consider all five pillars from the very start of the project.

Advantages of atomic design

In what way does the atomic design principles make the user experience better? We have to assume that a visitor to a website is looking for something, be it information about a certain product or company, price comparisons, reviews, physical addresses, etc. The list could go on ‘to infinity and beyond’ (thanks Buzz Lightyear!). With the principles touched upon in this article, what we achieve is consistency. This means that a user can easily find menu items, identify buttons and in general feel at home with the layout.

Another great advantage for our clients is that it speeds up development and design without compromising the quality of the user experience.

Atomic design and brand communication

Every brand is, or should be, unique. Me-too brands seldom succeed in getting any traction in the market. When applying modular principles to your UX/UI work it is important to keep in mind that UX/UI is not brand communication – it is a way of creating a framework that aims to take the user on a journey of least resistance, where every click responds to the user’s expectation. Atomic design is not meant to determine the design and communication of your website, that’s a job for designers and communicators. So, in addition to eminent UX/UI designers and strategists, you need great graphic designers, communicators and brand ambassadors to ensure that your brand retains its full personality and uniqueness.

At Platform29, we have just that. Contact us.

Further reading:  atomicdesign.bradfrost.com

To order the e-book:  shop.bradfrost.com