Andy Clarke

Art Direction for the Web

The web can be more than plain rectangles and perfect circles. Art Direction for the Web exists because we wanted to explore how we all, designers and front-end developers alike, can break out of generic web experiences prevailing today.

In the book, Andy explores original compositions, unexpected layouts, critical design thinking and front-end techniques that will help you create something that stands out.

To achieve this, the book applies art direction to examine a new approach to designing for the web. This book is supposed to make you think, and ask questions, and polish every pixel with clear intent and purpose. It will show you how art direction will:

Connect your brand with customers
Create connected experiences
Improve engagement and conversions
Bring personas and user stories to life
Take design beyond frameworks

Published on April 2019
Tags: Design, CSS Grid, Flexbox

Print + eBook

$ 44.00

Quality hardcover. Free worldwide shipping. 100 days money-back-guarantee.

eBook

$ 19.00

DRM-free, of course. ePUB, Kindle, PDF.
Included with your Smashing Membership.

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.

Trent Walton

co-founder of Paravel Inc.

About The 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, this book is about why art direction matters and how to art-direct compelling and effective experiences across devices and platforms.

A hardcover book laying open on a wooden table, with two pages open that are showing the table of contents

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

Download A Free PDF Sample

Want to peek inside? We’re happy to provide a free sample chapter on how to direct grids, available in PDF, ePUB and Amazon Kindle (of course). The eBook is included with the print version for free.

Download the excerpt (6.5 MB): PDF, ePUB, Amazon Kindle.

Print + eBook

$ 44.00

Quality hardcover. Free worldwide shipping. 100 days money-back-guarantee.

eBook

$ 19.00

DRM-free, of course. ePUB, Kindle, PDF.
Included with your Smashing Membership.

The possibilities of art direction on the web go far beyond responsive images. Andy’s brand-new book explores how to create art-directed experiences with modern HTML and CSS techniques.

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

About The Author

Andy Clarke is a well-known web designer, design consultant, and mentor. He’s 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, where they’ve helped companies around the world to improve their designs by providing consulting and design expertise.

Print + eBook

$ 44.00

Quality hardcover. Free worldwide shipping. 100 days money-back-guarantee.

eBook

$ 19.00

DRM-free, of course. ePUB, Kindle, PDF.
Included with your Smashing Membership.

Frequently Asked Questions

If you have any questions, we are right here to answer them. We love our customers, and we’d love to help you in any way or just listen to your story. So please feel free to ask questions via @smashingmag on Twitter — we’ll get back to you right away. Just in case: here are answers to some frequently asked questions.

How much does shipping cost to my country? +: No shipping costs — wherever you are in the world! We ship everywhere, worldwide, via airmail shipping. What you see is what you pay. No ifs or buts.
Delivery times to my country? +: All books are shipped via airmail to keep delivery times as short as possible. You can check the anticipated delivery times for your country.
Is the eBook included with print? +: When you purchase a printed book, you’ll get a friendly discount on the eBook. All eBooks are available in usual formats — PDF, ePUB, and Amazon Kindle.
What payment methods are accepted? +: PayPal, VISA, MasterCard and American Express. Of course, we use a secure connection, with 256-bit AES encryption and a green GeoTrust Extended Validation SSL CA certificate. And no, we don’t store your credit card data on our servers. (Obviously.)
Is there a money-back guarantee? +: Yes, absolutely! No risk at all — our 100-day full money-back guarantee keeps you safe. Don’t hesitate to return your purchase. You’ll get your money back without ifs or buts!
I have a question that is not covered here. +: No worries! Please get in touch with us via the contact form. We would love to help you as soon as we possibly can!