Art Direction for the Web
summary
Argues that art direction intentionally moves readers emotionally and shows how to implement it, not just theorize it. Demonstrates specific layouts used on The Atlantic vs ProPuplica and a ProPuplica story that wins a Pulitzer, explains Carl Gerstner’s 58 columns compound approach, and breaks implementation down to three elements markup. Builds examples with CSS Grid (fr units), flexbox, clip-path and mix-blend-mode, uses a 4+6 compound grid for a Vespa layout, and reports the minimal HTML and CSS successfully reproduce flexible, magazine‑like pages.
AI-written summary · about
chapters (12)
- 0:00Titles
- 0:24Intro
- 3:52What is Art Direction?
- 7:13Case - News Stories - The Atlantic vs ProPuplica
- 12:35Case - Harper's Bazaar/Alexey Brodovitch
- 15:40Case - Harper's Bazaar/Bea Feitler
- 18:33Case - The Face/Neville Brody
- 21:01Digital Layout - Compound Grids/Karl Gerstner
- 33:43Compound Grid Markup - Example - Vespa
- 37:02Application/Flexible Design
- 42:22Summary Thoughts/JDI
- 44:40Q&A
