Skip to main content Jump to list of all articles

Andy Clarke

Art Direction for the Web

Art Direction for the Web

Art direction has been part of advertising and print design for over 100 years, but on the web art direction is rare and there have been few meaningful conversations about it. In his 2001 book Taking Your Talent to the Web, Jeffrey Zeldman wrote:

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

Almost two decades later, Art Direction for the Web by Andy Clarke has finally changed that and in this book he explains art direction, what it means, why it matters, and who can do it. This book shows 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
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 light blue background, 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.

Art Direction for the Web

Hardcover

$ 39.00

Printed hardcover. eBook included. Free shipping worldwide, airmail only.

eBook

$ 19.00

PDF, ePUB, Amazon Kindle.

Table of Contents

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. Andy’s written several popular books on website design and development, including: Art Direction for the Web Smashing Magazine, 2019 Hardboiled Web Design: Fifth Anniversary Edition Smashing Magazine, 2015 Hardboiled Web Design Five Simple Steps, 2010 Transcending CSS: The Fine Art Of Web Design New Riders, 2006 He’s a popular speaker, and gives talks about art direction and design all over the world. Andy tweets as @malarkey and really, really loves gorillas.

Art Direction for the Web

Technical Details

  • 344 pages
  • 17 × 24 cm (6.7 × 9.5 in)
  • Quality hardcover with stitched binding and ribbon page marker
  • ISBN: 9-78-3-945749-76-0
  • Free worldwide airmail shipping from Germany starting mid-April
  • Release: April 2019

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 Twitter @smashingmag — 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.

Delivery times to my country?
+

All books will be shipped via airmail to keep delivery times as short as possible. You can find the anticipated delivery time for your country in the delivery times.

Is the eBook included?
+

Yes, the eBook is included when you buy a printed book, so you can start reading the eBook right away. We support PDF, ePub and Amazon Kindle formats.

What payment methods are accepted?
+

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

Is there a money-back guarantee?
+

Yes, absolutely! No risk is involved. Our 100-day full money-back guarantee keeps you safe. Don’t hesitate to return your purchase. You’ll get your money back with no ifs, ands, or buts!

I have a question that is not covered here.
+

Please leave a comment below, or get in touch with us via the contact form or via @SmashingSupport on Twitter. We would love to help you in any way we can — you know that!

That’s it, everyone! We sincerely appreciate your support and trust, and we’ll make sure to deliver the book to you as soon as possible. Cheers!

Hardcover

$ 39.00

Printed hardcover. eBook included. Free shipping worldwide, airmail only.

eBook

$ 19.00

PDF, ePUB, Amazon Kindle.

More Books