Year round learning for product, design and engineering professionals

Direction 16: Art Directing Web Design – Andy Clarke

Following on from our Video of the Week on Friday, a couple of people have asked whether we published a Wrap magazine summary of Andy Clarke‘s keynote presentation at Direction 16. We sure did!

In fact, we plan to continue publishing summaries of all of our future conference presentations in the digital-only Wrap magazine. They will also form part of a future venture we have in mind – but we can’t say too much about that yet. Note that you can subscribe to Wrap – for free – whether you attend an event or not.

So, here’s how Wrap summarised Andy’s talk.

Art Directing Web Design

Andrew Clarke, Stuff and Nonsense

Direction 16: Andy Clarke

Key points / Takeaways

Andy is a repeat visitor to Australia over many years for Web Directions conferences and workshops.

He’s been talking at conferences about his disappointment in the current state of design on the web, and its lack of originality and personality.

This is not about nostalgia for how the web used to be, but disappointment we haven’t made it what it could be.

Not everyone agrees with Andy’s suggestion that web has been stripped of its soul. Some feel it is only about speed, access and functionality.

Andy believes the web is not simply a platform for the digital products.

Direction 16: Andy Clarke

We’ve forgotten that the web is a medium for communication that’s outside applications.

What we do as web professionals should be so much more than just execution. The web should be both a creative melting pot and a proving ground for new ideas.

Our infatuation with processes like atomic design and tools like pattern libraries and style guides can mean that sometimes we lose sight of what we’re ultimately making.

Art direction can improve what we make for the web.

Developers might say art direction is about responsive images, alternative crops, using the picture element to manage image sizing and orientation, but there’s more to web design than tools.

Designers might think art direction is about adding images, managing how the page is laid out and which fonts are used, but images and layout and typography are only the result of art direction, not the meaning of it.

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

Art direction is well established for media like newspapers and magazines, but even they have trouble art directing their content for the web.

There are exceptions. Independent, non-profit New York newsroom ProPublica ran an article about a series of rapes and used page layout to establish the different voices of people involved in the story.

Another ProPublica article about Mexican drug lord El Chapo used specially commissioned illustrations to communicate violence with an intensity difficult to achieve with photography.

Direction 16: Andy Clarke

ProPublica’s article Busted focused on false drug arrests and used art direction to emphasise story points, manipulating the size of images and page layout for specific effect.

In all three cases, ProPublica’s house style is intact: they use the same fonts on the same grid, they’re visually consistent – but the art directions gives each one its own feel, related directly to the article content.

As web designers, we can go beyond the day-to-day of what a company does, and think about what it actually means for people.

Art direction is about understanding those messages and then deciding how best to communicate them through the organization and presentation of words and visuals.

That applies to the web as much as to magazines. In fact, the basic principles of art direction haven’t changed between print and digital.

Typography is absolutely key to a website’s visual identity, because it involves a collaboration between design and content to affect the reader, for example in the way pull quotes are presented to emphasise selected content.

Layout tools like Flexbox and CSS Grid enable us to place content like quotes visually, while maintaining appropriate source order.

Direction 16: Andy Clarke

Varying the size of type can emphasise and help to create focal points that enhance understanding of meaning.

Headlines demonstrate hierarchy and signal the importance of content but they can do so much more than just demand attention. Font, size, line height, spacing and positioning can help set content priorities.

Paragraphs can be manipulated to stand out. Drop caps can be used to great effect and the space they create can also be used to highlight content.

“The web can be a vibrant medium for creative expression, in just the same way as film, print and other media.”

To make inspired design decisions, we need to feel inspired and there’s no better place to start than by looking at designers we admire, especially those from outside the web.

Whitespace and columns bring more of an editorial feel to a design.

Grid systems allow us to place content on the page just as we want it, but a lack of imagination and knowledge about how to use grid systems creatively limits what we do with them.

Design decisions do not have to be based on guesswork. The Golden Ratio – and other ratios – offer mathematical bases for how content is aligned and placed on the page.

We can turn 12 into six more manageable columns, like the grid that was the foundation for our redesign of WWF UK’s Fundraising pages.

Whether we work mobile first or desktop down, we can make layouts creatively responsive.

Combining two grids to create a compound grid is an established design technique that’s rarely used on the web.

Irregular shapes can help to draw attention towards parts of the layout and, most importantly, towards calls to action.

Direction 16: Andy Clarke

We can use CSS shapes to extend a feature image into the content space and then overlay a caption using SVG to create an irregular background.

We can use CSS shapes with the ghost of type elements to literally sculpt unusually shaped columns of text.

We can use horizontal fields with grids, where the intersection of columns and fields create modular grids, another great way to create imaginative layouts.

Figure captions offer readers a meaningful explanation of an image – great for accessibility and SEO – but captions don’t always have to be below an image, nor do they have to be unstyled.

Art direction and design and editorial should be equal partners.

“Art direction is essential to creating cohesive experiences across multiple channels.”

Strong art direction means trusting the judgement of an individual art director, but we’ve become so risk-averse that our judgement now takes second place to testing.

Pattern libraries help designers improve efficiency, and living style guides help maintain better consistency in user experiences and visual identities across channels.

A cohesive experience needs more than a guide to a library of patterns, it needs a singular creative vision, and that can come from art direction.

Atomic design, pattern libraries and style guides are not incompatible with art direction – they need art direction to make them meaningful.

Art direction is the gravity that pulls atoms together.

Direction 16: Andy Clarke

Resources

@Malarkey
slides
website
ProPublica (An Unbelievable Story Rape)
ProPublica (Devils, Deals and the DEA)
ProPublica (Busted)
Gridset
WWF UK
Dalton Maag (typefaces)

Tweets

Direction 16: Andy Clarke

Direction 16: Andy Clarke

Direction 16: Andy Clarke

Direction 16: Andy Clarke

Direction 16: Andy Clarke

Direction 16: Andy Clarke

delivering year round learning for front end and full stack professionals

Learn more about us

Web Directions South is the must-attend event of the year for anyone serious about web development

Phil Whitehouse General Manager, DT Sydney