Art direction is a filter for making judgments; you pass every design choice through it. Start by determining the overall emotion. All the copy, photography, UI elements, buttons, and the kitchen sink should be pinged against this ideal. I like to think of it as the Magic Kaleidoscope Looking Glass. It helps to determine which path I need to take when struggling with design decisions. — Christopher Cashdollar, Creative Director, Happy CogArt direction also plays a vital role in the world of web design. Designers and developers create responsive designs that involve a lot of imagery. In the realm of responsive design, the role of art direction can’t be over-emphasized; from the flow of content on web pages, to placement of ad banners, to the way images are displayed at different resolutions.
Design is the how. It’s the foundation of all communication, the process and production of typography, color, scale and placement. Art direction is the why. It’s the concept and decisions that wrap itself around the entire product. — Jarrod Riddle, Senior Art Director, Big Spaceship
Art Direction in Ads
Let’s look at some examples of art direction in ads. Below are some ads with astonishing art direction.




What is Art Direction in Responsive Web Design?
While these are great examples of art design in advertising, our focus is on delivering impactful images in responsive web design. So, what is art direction in this regard and how does it affect responsive images on your web platforms? Art direction is a technique for drawing attention to the most important parts, or targeting specific features of an image, even when it’s viewed on different devices or platforms. Consider this example:
Crafting Art-Directed Responsive Images
Doing so doesn’t need to be complicated. To achieve this on your own, you would have to manually crop individual images to fit them on various resolutions. Another alternative is to go the route of cropping all images to focus on the center of the image. And as you might be aware already, important content can be lost trying to use the “one size fits all” approach. One of the easiest ways to go about is to take advantage of Cloudinary’s face detection, cropping, resizing and optimization capabilities to provide art-directed images. Let’s start with this image below:








Visible Art Direction
Now, let’s see how this works in a web page. Create an `index.html` file and insert this code in it like so:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Art Direction</title> </head> <body> <picture> <!-- wide crop --> <source media="(min-width: 600px)" srcset="https://res.cloudinary.com/unicodeveloper/image/upload/c_fill,ar_2:1,g_face,f_auto,q_70,w_800/4739297-free-images_mostdh.jpg 800w, http://res.cloudinary.com/unicodeveloper/image/upload/c_fill,ar_2:1,g_face,f_auto,q_70,w_1600/4739297-free-images_mostdh.jpg 1600w" sizes="100vw" /> <!-- standard crop --> <img srcset="https://res.cloudinary.com/unicodeveloper/image/upload/f_auto,q_70,w_800/4739297-free-images_mostdh.jpg 800w, http://res.cloudinary.com/unicodeveloper/image/upload/f_auto,q_70,w_1600/4739297-free-images_mostdh.jpg 1600w" src="https://res.cloudinary.com/unicodeveloper/image/upload/f_auto,q_70,w_800/4739297-free-images_mostdh.jpg" alt="Serena Williams Jumping" sizes="100vw" /> </picture> </body> </html>Browsers will use the srcset to select the image to load based on the viewport size and display density. We have already defined the breakpoint in the source tag. Once the browser is opened on larger screens, the image visually adapts for a larger viewport. Check out the flow in your browser.
Conclusion
A combination of the <picture> and <source> tags helped us craft art-directed responsive images. Art direction brings out the best in your ad and web platforms, it establishes a connection between the user and the website or ad banner. With Cloudinary you can easily integrate art direction in your process flow. [-- This is an advertorial on behalf of Cloudinary --]WDD Staff
WDD staff are proud to be able to bring you this daily blog about web design and development. If there's something you think we should be talking about let us know @DesignerDepot.
Read Next
Exciting New Tools for Designers, November 2023
We’ve got a mix of handy image helpers, useful design assets, and clever productivity tools, amongst other treats. Some…
The Dangers of Doomscrolling for Designers and How to Break Free
As a creative professional, navigating the digital realm is second nature to you. It’s normal to follow an endless…
By Louise North
From Image Adjustments to AI: Photoshop Through the Years
Remember when Merriam-Webster added Photoshop to the dictionary back in 2008? Want to learn how AI is changing design…
By Max Walton
3 Essential Design Trends, November 2023
In the season of giving thanks, we often think of comfort and tradition. These are common themes with each of our three…
30 Obsolete Technologies that will Perplex Post-2000s Kids
Remember the screech of dial-up internet? Hold fond memories of arcade machines? In this list, we’re condensing down 30…
15 Best New Fonts, October 2023
We’re entering the final quarter of 2023, and even in the pre-holiday lull, there are still plenty of fonts to get…
By Ben Moss
Progressive Web Apps (PWAs): Unlocking The Future of Mobile-First Web Development
There are over 5.4 billion mobile users today, meaning that over 68% of the population tap into an online business via…
The 12 Most Controversial Ad Campaigns of the 21st Century
How far would an organization be willing to go for the chance to generate a little extra buzz? In this list, we're…
By Robert Reeve
20 Best New Websites, October 2023
The Bento trend is still going strong: In some cases, we see this extend to the layout, but many more are picking…
Exciting New Tools for Designers, October 2023
This month, we have a whole bag of goodies for designers, developers, and designevelopers alike. (Yes, we did just make…
The 10 Most Successful Rebrands of All Time - Ranked
We’re all familiar with rebrands going wrong, but what happens when they go right? From McDonald’s health kick to…
By Max Walton
3 Essential Design Trends, October 2023
Every now and then, website design trends can leave you scratching your head. This month’s collection includes some of…