Art Directing Web Design

For years we’ve been told that websites shouldn’t make people think, that they should be accessible, easy to use and fast. But what if that isn’t enough?

In this talk, art director and designer Andy Clarke explores how art direction can make designs that are visually distinctive and more effective by using design to communicate the essence and purpose of our our content.

Slides at

The web needs to be things like fast and reliable and accessible, but that is not enough. It can and should be a vibrant medium for creative expression. Andy is not saying things used to be perfect back in some brighter past either… he remembers the guestbooks, hit counters and little men constructing things in gifs.

Somehow we’ve forgotten that the web is a medium for communication outside of applications. We’re letting things like atomic design distract from the need for great art direction.

So what do you think of when you hear the term ‘art director’? Perhaps as a dev you think of creating responsive images. Perhaps you think of bloggers who used to create bespoke images and design for every post. But if it’s not quite those things, what is it?

Art direction is the art of distilling an essential, precise meaning or purpose from a piece of content.

Art direction isn’t strong on the web, but we can look to magazines for inspiration – there is so much amazing material. People have struggled to bring the same level of art direction from print to their web process. Propublica did a good job.

Examples: reporting an admittedly very confronting story, telling a tale from two points of view backed up by different designs and writing. Using intense illustrations for an article about violence. Using white space around a roadside drug testing kit to emphasis the disproportionate impact these small objects can have.

So how does this apply to all of us? We are all telling stories. We may simply be telling the story of our company – the who, the history, why does it exist. Go beyond that and think about what the company and its products means to people in their lives?

Art direction is essential for communicating across devices and channels.

Typography is key to a website’s visual identity, because it conveys personality and sets the tone.

How can you use type to emphasise the meaning of content?

Example: block quotes. You can mark them with different symbols, pull them out of the grid, lead the reader out to the pull quote and back again. We can allow the quote to subtly interrupt the reading experience by indenting them into the body. You can vary type size to emphasise key words. Great pull quotes rely on collaboration between design and copywriting to produce really strong results.

Headings can be set large, small, layered and even in the middle of the page – turning the first paragraphs into a prologue.

A heading and standfirst can be set with a large area of whitespace before the body copy begins, to give the reader a moment to digest the standfirst. Standfirsts can precede headings.

Readers will reward you for your time spent designing type with their attention.

The web supports drop caps and initial caps. Using drop caps in multiple locations can help break up blocks of text, to make it easier to read.


Jean-Jacques Halans @halans

.@Malarkey showing examples of CSS supported art direction #Direction16

2:37 PM – 11 Nov 2016

Twitter Ads info and privacy

To make inspired design decisions we need to feel inspired.

We should look to great designers in any field, not just within the web. We need broad inspiration to avoid making endless pastiche of the same things.

Currently a vast number of people start their design on top of Bootstrap’s 12 column grid. If we have an infinite number of possible combinations and variations, why does every site look precisely the same?

View image on Twitter


Gaith Bader @Gaithb

If we’ve got an infinite No. of layout combinations, then why is this what we always get? its a lack of imagination! #Direction16#design

2:34 PM – 11 Nov 2016

Twitter Ads info and privacy

Frameworks are an easy target for criticism, but it’s not their fault – it’s a lack of knowledge of how to use grid systems properly. They are a decades-old principle, yet many people are just choosing grid layouts via guesswork… and it doesn’t need to be guesswork.

We can use ratios – and not just the well-known golden ratio. Look at the tool called “Gridset” to see what’s possible. We can use fibbonaci numbers to work out how to lay things out.

In reality Bootstrap’s 12 columns are rarely used for more than overall spacing. So why not turn things into a 6 column grid? What if you need an oversized column, perhaps you split the first column and add that space to the last. Andy did this for the WWF’s recent website redesign.

There’s no good reason why so many websites are indistinguishable from each other.

You can handle ads too – Smashing Magazine needed a compound grid: a 6 column grid to lay out the editorial content combined with a 4 column grid to accommodate the ads they needed to run.

The second dimension of grids is obviously the horizontal. This sets up the compound grid, which in turn makes it easy to determine how elements like images and captions should be sized and placed.

We’ve become too dependent on process and testing, too risk averse to make decisions without stopping to get data to support it.

A cohesive experience needs more than a guide to a library of patterns, it needs a singular creative vision.

Pattern libraries and style guides are not incompatible with art direction. Without art direction the atoms and molecules will have little more than superficial beauty.

Art direction is the gravity that can pull atoms together.