A page on the Web isn’t like a printed page. Many of us learned that the hard way when we abandoned fixed-width layouts and embraced the web’s inherent flexibility and responsiveness. Read the excerpt chapter.

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 instead “when” and “why”.

This is the reason why Andy Clarke wrote his new book Art Direction for the Web. This is a book about why art direction matters and how you can art-direct compelling and effective experiences across devices and platforms.

Andy explores the work of some of the most influential art directors, luminaries like Alexey Brodovitch, Bea Feitler, and Neville Brody. He 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.

Andy writes,

“You needn’t have been to art school to learn and apply the principles I teach you. Just like art direction itself, they’re something which everyone — no matter what your background and current area of expertise — can use every day to improve the effectiveness of a product or website’s design.”

Andy’s goal is to teach people about the importance of art direction for the web and explain how art direction can help people tell stories by using design. That way, products and websites will connect with audiences and also manage to keep them engaged. After a thorough investigation of the methodology of art direction, Andy teaches how to accomplish it by embracing the web using modern CSS.

Art Direction for the Web will help you make your sites more effective at communicating, persuading, and selling. If you develop products, this book will make them more compelling and more enjoyable to use. Read the excerpt chapter →

Table Of Contents

Part 1: Explaining Art Direction

• What Art Direction Means
  Ask what art direction means to developers, and they might answer: using the <picture> element or sizes attribute in HTML for responsive images; presenting alternative crops, orientations, or sizes at various screen sizes. But there’s more to it.
• One Hundred Years Of Art Direction
  Bradley, Brodovitch, Brody, and Feitler — together, their names sound like a Mad Men-era advertising agency. In this chapter, we’ll take a look at their iconic works, from the 1930’s to the 1980’s.
• Art-Directing Experiences
  Whether we write fact or fiction, sell or make products, the way to engage people, create desire, make them happy, and encourage them to stay that way, is by creating narratives. So what do we need to consider when doing so?
• Art Direction And Creative Teams
  Let’s take a look at how we can embrace collaboration and form teams who follow strategies built around common goals.

Part 2: Designing For Art Direction

• Principles Of Design
  Are the principles which have guided design in other media for generations relevant to the world of digital products and websites? Of course! In this chapter, we’ll explore the principles of symmetry, asymmetry, ratios, and scale.
• Directing Grids
  Grids have a long and varied history in design, from the earliest books, through movements like constructivism right up to the present-day popularity of grids in frameworks like Bootstrap and material design. This chapter explains grid anatomy and terminology and how to use modular and compound grids.
• Directing Type
  White space, typographic scale, and creative uses of type are the focus in this chapter.
• Directing Pictures
  Images and how we display them have an enormous impact on how people perceive our designs, whether that be on a commercial or editorial website, or inside a product. In this chapter, you’ll learn how to position and arrange images to direct the eye.

Part 3: Developing For Art Direction

• Developing Layouts With CSS Grids
  CSS Grid plus thoughtful, art-directed content offers us the best chance yet of making websites which are better at communicating with our audiences. In this chapter, Andy explains properties and techniques which are most appropriate for art direction.
• Developing Components With Flexbox
  While Grid is ideal for implementing art-directed layouts, Flexbox is often better suited to developing molecules and organisms such as navigation links, images, captions, search inputs, and buttons. This chapter explores how to make use of it.
• Developing Typography
  From multi-column layout and arranging type with writing modes to text orientation and decorative typography, this chapter dives deep into the code side of type.
• Developing With Images
  How do you fit your art-directed images to a user’s viewport? And what do CSS shapes and paths have in store for your design? Let’s find out in this final chapter.

Smashing TV Webinars

To accompany this book, Andy is also giving a series of webinars on Smashing TV. Webinars are free with Smashing Membership, which costs a couple of cups of coffee a month (cancel anytime).

About The Author

Andy Clarke is a well-known designer, design consultant, and mentor. He has been called plenty of things since he started working on the web. His ego likes terms such as “Ambassador for CSS,” “industry prophet,” and “inspiring,” but he’s most proud that Jeffrey Zeldman once called him a “triple-talented bastard.”

With his wife, Sue, Andy founded Stuff & Nonsense in 1998. They’ve helped companies around the world to improve their designs by providing consulting and design expertise.

Andy’s written several popular books on website design and development, including Hardboiled Web Design: Fifth Anniversary Edition, Hardboiled Web Design, and Transcending CSS: The Fine Art Of Web Design. He’s a popular speaker and gives talks about art direction and design-related topics all over the world.

Testimonials

It has been our goal to make the book as inspiring, practical, and useful as possible, and we feel honored to have already received such positive reviews.

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

— Trent Walton, co-founder of Paravel Inc.

Why This Book Is For You

The content of this book is based on Andy’s twenty years’ experience of working with clients, plus the expertise of the art directors and designers he interviewed. You’ll learn:

1. What art direction means, why it matters, and who can do it.
2. How to make art direction work for digital products and websites.
3. How to improve conversions and bring your customers’ journeys to life.
4. How to maintain brand values and design principles by connecting touch points across marketing, product design, and websites.
5. How to use art direction priciples such as layout, typography, proportions, ratio, and grids in a more imaginative way to communicate what you’re trying to do much better.
6. How to implement your designs on any platform with the latest HTML and CSS.
7. …Plus, we’ll explore outstanding designs from 100 years of media and print publishing for some extra art direction inspiration.

Technical Details

• 344 pages, 14 × 21 cm (5.5 × 8.25 inches)
• ISBN: 978-3-945749-76-0 (print)
• Quality hardcover with stitched binding and a ribbon page marker.
• The eBook is available in PDF, ePUB, and Amazon Kindle.
• Free worldwide airmail shipping from Germany. Starting mid-April. (See delivery times.)
• Available as printed, quality hardcover and eBook.

(cm, bl, il)