Art Direction for the Web

Andy Clarke

In this video course, I teach you how art direction can connect customers with product and website designs and keep people engaged. I show you how art direction can improve someone’s experience and maintain brand values and design principles by connecting marketing and products.

What you’ll get

  • Video course (9 episodes, 1hr)
  • eBook (ePub, PDF) Available early 2019
  • PDF worksheets
  • 30+ highly original, responsive HTML/CSS examples
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)

Video course

A Hardboiled Web Design video shot

This new video course, by the author of Hardboiled Web Design and Transcending CSS, 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

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..


Get 30+ highly original, responsive HTML and CSS examples from the eBook included with this video course.

Download free sample

A new book

Buy this video course and get the forthcoming ebook free

This new book, by the author of Hardboiled Web Design and Transcending CSS, is for web designers and developers who want to understand art direction and how to make digital products and websites better for businesses and their customers.

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.

Art Direction for the Web book cover Editor: Owen Gregory
Technical: Rachel Andrew
Publisher: Smashing Mag
Available: Early 2019

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