An extract from Designing Atoms and Elements

If that’s happened, did you dig a little deeper and discover that it wasn’t the details of your design they objected to? I’ll bet it wasn’t the typefaces or type treatments you chose. They went unremarked. It wasn’t the way you’d used colour, either. Nor your finely crafted line work, borders or shading. Perhaps it was, “The sidebar should be on the left, not the right?”

In other words, your client was commenting on layout but expressing their criticism of the design.

It’s not unusual for people to include layout in the same conversation as other aspects of design:

• Typography
• Color
• Texture

Designers do it, too, because for years we’ve been making and demonstrating the fixed-width static visuals we’ve made in Photoshop or Fireworks that’ve included all these things. Now we should accept that design and layout can be treated and discussed separately from each other.

To be clear; the design of individual components and their arrangement horizontally and vertically on a grid are now two different issues.

Whereas the layout’s arrangement of components will undoubtably be different across screen sizes, the design of those same components will almost certainly transcend (damn, I hate that word) layout.

Designing components first

Think for a moment about the components that you place in almost every design. Your list will almost certainly include:

• Boxes;
• Data tables and other data panel types
• Images (content and iconography)
• Interface elements (carousels or scrollers, and so on)
• Navigation (several levels)
• Type

Design in the absence of layout becomes the styling of these components. How these parts look is now what we mean by a design. More specifically, the look and feel of these parts is what designers can and should work on first, long before any thought is given to layout. I like to think of the approach as designing page components at an atomic level.

Now, I know that the idea of designing components like this, out of context and without layout, might sound strange—particularly if, like most of us, you’ve been used to designing Web pages the traditional way. But, truth be told, we’ve been abstracting design ideas like this for the longest time, for example in our use of mood boards and even the cropped designs we find on sites like Dribbble.

In Content Choreography, Trent Walton wrote:

“Web designers will have to look beyond the layout in front of them to envision how its elements will reflow & lockup at various widths while maintaining form and hierarchy.”

This separation of design from layout that we achieve when we design at an atomic level is important because it helps everyone — the designer and their boss or client — focus on the details in a design while setting no expectations for how components will ultimately be arranged across various screen sizes or devices.

Design Atmosphere

For some people, designing elements first, even in a browser, comes easily. For many reasons it’s not so easy for everyone. Even if we create full-page static visuals, we can still extract the component design and use it across screen sizes and devices. Let’s break down a design, any design, into its components:

• Typography: typefaces, type treatments and white space
• Color: evoking mood and highlighting actions
• Texture: decorative aspects, including borders, shading and shapes
• Layout: elements arranged on a grid, horizontally and vertically

Now let’s separate layout from those other constituents. What remains — the color, texture and typography — I call the atmosphere of a design.

Atmosphere describes the feelings we get that are evoked by colour, texture and typography. You might already think of atmosphere in different terms. You might call it “feel”, “mood” or even “visual identity.” Whatever words you choose, the atmosphere of a design doesn’t depend on layout. It’s independent of arrangement and visual placement. It will be seen, or felt, at every screen size and on every device.

Further reading

• Atomic design by Brad Frost
• Constructing the Rock Hammer pattern library using these principles