UX London: Brad Frost’s Atomic Design Model

The Atomic Design model from Pattern Lab

I love that Brad Frost’s Working with Atomic Design UX London talk included the following quote from Daniel Mall:

As an industry, we sell websites like paintings. Instead, we should be selling beautiful and easy access to content, agnostic of device, screen size, or context.

If Karen McGrane looked at how we could design output-agnostic content systems, then Brad took on the design challenge of designing a UI that can be easily mixed and matched for different outputs.

For Brad, the print metaphor has been baked into the web from day one. It’s so baked in, in fact, that clients still expect to see full pixel-perfect mockups of how a design should look on multiple devices. However, the device ecosystem is so big nowadays that it’s simply not feasible to even consider designing for even 1/10th of the screens your site or platform could potentially be accessed from.
A snapshot of *some* of the devices that may be designed for.

A new approach being taken is to create a design style guide to follow for any new elements or platforms. There are several issues with this approach. Among other things, they are typically put together after project launch, are time-consuming to produce, and seen as ‘only’ a designer or developer tool, and there’s a lack of clear methodology to creating them.

To counteract the down sides of these trends, Brad proposes a different approach to visual design. Rather than using print as the metaphor to drive design, he draws from chemistry to come up with a system of ”atomic’ web design.

Just as organisms are made up of molecules which in turn are made up of atoms, online design systems consist of small ‘atomic’ reference elements, that sit within broader ‘molecular’ groups of these elements, that are then grouped together for a UI ‘organism’.

Designing for a responsive interface can involve designing the atomic elements, using them as the basis for a style guide for designers and developers alike. From there, you could use the atoms as a springboard to design the broader ‘molecules’ and ‘organisms’ that clients can then feedback on. To test out the designs, the organisms sit on templates from which they are output output to multiple device ‘pages’ or screens.

The Atomic Design model as a continuum from abstract atomic elements to the concrete page/screen

The benefits of this approach should be pretty clear. It doesn’t assume a single design for a single interface. It allows for different molecules or organisms to be used as necessary for different devices, inputs and viewports. It lets the client to interrogate various elements of the final design(s) while they are in progress. It lets a style guide develop naturally alongside the design. Also, it encourages better collaboration between all involved parties.

The Atomic Web Design model mapped to design, build and review stages

It’s important to keep in mind that this approach does require a lot more interaction and conversation between designers, developers and other stakeholders than the ‘traditional’ print-focused web design model. Many organisations may initially balk at this approach, as it doesn’t give executives that ‘one glance sign-off’ that a lot of them crave and expect. Instead, it encourages ongoing communication about what works or doesn’t work with an evolving design.
Keeping that in mind, and being honest about it with your (internal or external) clients from the beginning of the process ensures that you can set the right expectations for this newer, truly responsive approach.

[Brad Frost: Atomic Web Design]

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.