Art Direction for the Web

On the web, art direction is rare, partly because much of the work is about guiding users rather than telegraphing concepts, but also because few design schools teach art direction.

‘Taking Your Talent to the Web,’ by Jeffrey Zeldman 2001

Almost two decades later, ‘Art Direction for the Web’ by Andy Clarke has finally changed that as he explains art direction, what it means, why it matters, and who can do it.

  • Connect your brand with customers
  • Create connected experiences
  • Improve engagement and conversions
  • Bring personas and user stories to life
  • Take design beyond frameworks
Art Direction for the Web example
Art Direction for the Web example
Art Direction for the Web example
Art Direction for the Web example
Art Direction for the Web example
Art Direction for the Web example
Art Direction for the Web (Hamm) Art Direction for the Web (Hicks)

The new book

Modern web technologies like CSS Grid, Flexbox and Shapes have made it possible for us to implement print’s often distinctive designs, and the web’s now full of tutorials on how to use them.

But the most important question is not “how” we can use art direction techniques to improve our designs for the web, but “when” and “why?”

Based on Andy Clarke’s twenty years’ experience of working with clients, plus the expertise of the art directors and designers he interviewed.

Andy explores the work of some of the most influential art directors, luminaries like Alexey Brodovitch, Bea Feitler, and Neville Brody.

Andy doesn’t encourage us to merely mimic work from a previous era and medium, but to understand their thinking and learn how to apply that knowledge to art direction for the web.

Art Direction for the Web book cover

344 pages, hardcover
Available: March 2019
ISBN: 9-78-3-945749-76-0

Editor: Owen Gregory
Technical: Rachel Andrew
Publisher: Smashing Mag

Now, with ‘Art Direction for the Web,’ Andy provides a framework for harnessing the web’s potential. With historical context and real-life examples, Andy inspires each of us to be more purposeful about the choices we make. And true to form, he follows up all that inspiration with demos and the practical knowledge needed to see our ideas manifest online.

From the foreword by Trent Walton

1. Explaining art direction

  1. What art direction means
  2. 100 years of art direction
  3. Art-directing experiences
  4. Art direction and creative teams

2. Designing for art direction

  1. Principles of design
  2. Directing grids
  3. Directing type
  4. Directing pictures

3. Developing for art direction

  1. Developing layouts with CSS Grid
  2. Developing components with Flexbox
  3. Developing typography
  4. Developing with images

Video course

A Hardboiled Web Design video shot

This Art Direction for the Web video course is for web designers and developers who want to understand art direction and how to make digital products and websites better.

What you’ll learn

Course 1: Available now. 9 episodes (58m)

1 Introduction 3:24
2 Understanding Art Direction 9:18
3 Brand Values and Art Direction 6:48
4 Deciding Your Design Principles 7:16
5 Creating Audience Personas and User Stories 8:07
6 Designing a Customer Journey 7:58
7 Deciding How You Want People to Feel 7:07
8 Creating a Narrative 6:38
9 Conclusion 1:53
10 Bloopers 1:13
Andy Clarke

My name’s Andy Clarke and I’m a well-known website designer, consultant, speaker, and writer on art direction and design for products and websites. For 20 years I’ve helped businesses improve their website and product designs. I’ve written three popular books on website design and development and am a popular speaker at industry events world-wide.

Inspiring examples

Art Direction for the Web desktop example Art Direction for the Web desktop example
Principles of design: The principles of balance, contrast, proportions, scale, and symmetry are relevant for every screen size.
Art Direction for the Web desktop example Art Direction for the Web desktop example
Grid design: Grids do more than align content. They bring cohesion to a composition and helps people understand the stories you’re telling
Art Direction for the Web desktop example Art Direction for the Web desktop example
Layout tells a story: Layout informs people what to read first, then next, and how much attention to give your content.
Art Direction for the Web desktop example Art Direction for the Web desktop example
Visual weight and balance: Every element on a page exerts a visual force which attracts a reader’s eye.
Art Direction for the Web desktop example Art Direction for the Web desktop example
Playfulness with type: Typography can be expressive as well as readable. Each typeface has unique combination of tone, texture, and timbre.
Art Direction for the Web desktop example Art Direction for the Web desktop example
Designs which stand out: Be bold when you want to make a strong statement. Look for inspiration in other media which are great at telling stories.
Art Direction for the Web mobile example
Art Direction for the Web mobile example
Art Direction for the Web mobile example

To help me describe how to art-direct designs for products and websites, I made Wheel Man—an app for booking a fast car and a getaway driver—plus a companion website, full of advice on how to ensure you get away clean..


Book available in hardcover and digital editions.

Example chapter