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
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.
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.
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
sizesattribute 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.
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 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 overview page on delivery times.
- Is the eBook included?+
Yes, of course! The eBook is included with printed books, so you can start reading the eBook right away. All eBooks are available in 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. (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, ands, or buts!
- I have a question that is not covered here.+