Why Art Direction is Critical to Responsive Design

Default avatar.
April 18, 2017
Why Art Direction is Critical to Responsive Design.

Art direction plays a role in all facets of life. It’s especially important in advertising and magazines. The visuals in ads and magazines often are presented in a way that evokes an emotional reaction and leaves us with a lasting impression. Have you ever seen an ad in a subway and you pause to look at it because it connects with you in a certain way? Maybe you’re reading a magazine and you find yourself flipping over the same pages over and over because the colors, the typography and the photo focus just resonates with you? Or perhaps you’ve seen different blog posts with similar content, one of which stood out because it was more visually appealing, with a carefully selected font weight, the perfect amount of whitespace, and well spaced paragraphs. Art direction has made all of these experiences possible. 

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 Cog

Art 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. fedexFedex: China — Australia lionZoo Safari: Lion watchKapiti: Designer Ice Cream fedex2Fedex: Always First Truck leafPlant for the Planet: Factory Looking at these ad banners creates an emotional connection and evokes an experience that I’ll not soon forget. Yes, that’s the power of 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: devices Source: ResponsiveImages​.org The full image can be seen on a wide display, 25601600 for example. But when viewed on an iPad or an iPhone, the dog is is the central focus. For this image, the art director — such as the designer, developer or a visual director, wants the viewers to see more of the dog than any other object in that image. Let’s take a look at another example in action. It is an art-directed front page created by Eric Portis. http://​res​.cloudinary​.com/​e​e​e​p​s​/​v​i​d​e​o​/​u​p​l​o​a​d​/​w​_​770​/​h​e​r​o​-​f​l​o​w.mp4 You can check it out here : https://​ericportis​.com/​e​t​c​/​c​l​o​u​d​i​nary/ So, right now you might be thinking, Wow, this is cool” or This is awesome.” and wondering how you might implement this yourself and give viewers a captivating art-directed page?

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: serena_0Serena Williams is centered in this image (1600700) We will apply various properties to this image and see the results, before putting it together using a <picture> and <source> to see the full impact of art direction. New to the <picture> element? Check out this excellent post on how the <picture> element works. Cloudinary enables us to supply a certain aspect ratio like so: serena_1 Source: http://​res​.cloudinary​.com/​u​n​i​c​o​d​e​v​e​l​o​p​e​r​/​i​m​a​g​e​/​u​p​l​o​a​d​/​a​r​_​16​:​9​,​w​_​600​/​4739297​-​f​r​e​e​-​i​m​a​g​e​s​_​m​o​s​t​d​h.jpg Let’s crop the image by using the c_​fill parameter that Cloudinary provides. It works like background-fit: cover in CSS. You’ll discover that the image will be stretched to fit the width. Notice the difference? serena_2 Source: http://​res​.cloudinary​.com/​u​n​i​c​o​d​e​v​e​l​o​p​e​r​/​i​m​a​g​e​/​u​p​l​o​a​d​/​c​_​f​i​l​l​,​a​r​_​16​:​9​,​w​_​600​/​4739297​-​f​r​e​e​-​i​m​a​g​e​s​_​m​o​s​t​d​h.jpg When cropping, Cloudinary focuses on an image’s center by default. Now, focusing on the center doesn’t always work like I mentioned earlier. An example would illustrate my point better. Check this cute cat below: We applied the c_​fill” filter and it yanked out a greater part of the cat image and left us with the background. Is this what we want? Definitely not! cat_1 Source: http://​res​.cloudinary​.com/​d​e​m​o​/​i​m​a​g​e​/​u​p​l​o​a​d​/​c​_​f​i​l​l​,​a​r​_​4​:​6​/​w​h​i​t​e​_​c​a​t.jpg Cropping it on another point using the gravity property such as g_​auto gives us our desired output like so: cat_2 Source: http://​res​.cloudinary​.com/​d​e​m​o​/​i​m​a​g​e​/​u​p​l​o​a​d​/​c​_​f​i​l​l​,​a​r​_​4​:​6​,​g​_​a​u​t​o​/​w​h​i​t​e​_​c​a​t.jpg That’s what I’m talking about. Whoop! Whoop! Now back to our original example, let’s crop in on another point using the gravity property like so: Using g_​south, you can see how it shows the bottom part of the image and crops off the head serena_4 Source: http://​res​.cloudinary​.com/​u​n​i​c​o​d​e​v​e​l​o​p​e​r​/​i​m​a​g​e​/​u​p​l​o​a​d​/​c​_​f​i​l​l​,​a​r​_​4​:​1​,​w​_​800​,​g​_​s​o​u​t​h​/​4739297​-​f​r​e​e​-​i​m​a​g​e​s​_​m​o​s​t​d​h.jpg Using g_​north, you can see how it shows the top part and crops off the bottom. serena_5 Source: http://​res​.cloudinary​.com/​u​n​i​c​o​d​e​v​e​l​o​p​e​r​/​i​m​a​g​e​/​u​p​l​o​a​d​/​c​_​f​i​l​l​,​a​r​_​4​:​1​,​w​_​800​,​g​_​n​o​r​t​h​/​4739297​-​f​r​e​e​-​i​m​a​g​e​s​_​m​o​s​t​d​h.jpg But by default, we can see a more focused image. serena_6 Source: http://​res​.cloudinary​.com/​u​n​i​c​o​d​e​v​e​l​o​p​e​r​/​i​m​a​g​e​/​u​p​l​o​a​d​/​c​_​f​i​l​l​,​a​r​_​4​:​1​,​w​_​800​/​4739297​-​f​r​e​e​-​i​m​a​g​e​s​_​m​o​s​t​d​h.jpg On very small devices, we can take advantage of the Cloudinary c_​thumb parameter that tries to focus on in on the image with an aspect ration of 1:1 like so: serena_7 Source: http://​res​.cloudinary​.com/​u​n​i​c​o​d​e​v​e​l​o​p​e​r​/​i​m​a​g​e​/​u​p​l​o​a​d​/​c​_​t​h​u​m​b​,​a​r​_​1​:​1​,​w​_​600​/​4739297​-​f​r​e​e​-​i​m​a​g​e​s​_​m​o​s​t​d​h.jpg

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="http://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="http://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

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…

20 Best New Websites, April 2023

In April’s edition, there’s a whole heap of large-scale, and even full-screen, video. Drone footage is back with a veng…

Exciting New Tools For Designers, April 2023

The AI revolution is having a huge impact on the types of products that are hitting the market, with almost every app b…

3 Essential Design Trends, March 2023

One thing that we often think about design trends is that they are probably good to make a list. That’s not always true…