Art Direction and Design

From AListApart

by Dan Mall

Glorifying the supposed arrival of art direction on the web is one of the latest trends in interactive design. There are several galleries devoted to it. There’s even a plug-in for it. Sadly, many designers don’t understand the difference between design and art direction; sadder still, many art directors don’t either: Art direction gives substance to design. Art direction adds humanity to design.

Art direction is not a “blogazine”

The Death of the Blog Post popularizes the “blogazine,” an amalgam of a magazine article and a blog post. The article posits that the featured designers have broken new ground, and have started to bring “art direction” to the web. That description reduces art direction to little more than a unique design for each blog post. The term blogazine is an embarrassment to art directors everywhere. It’s like saying, “Look! This blog is like a magazine because every post is different!” Often, the “blogazines” simply contain dressed up blog posts.

Magazines don’t set out to simply decorate stories individually. Their goal is to combine visual imagery and language to enhance the story’s meaning. Design variations are a result of that desire, not a cause in and of itself. On a magazine staff, art directors and copywriters spend a tremendous amount of time brainstorming different ways to enhance a story, from choosing the design style, selecting related content features, and honing the story’s tone of voice.

To translate that process to the practice of web design, we need different frameworks to give us flexibility within a given format. Custom fields for styles within content management systems at the individual post level are a start. However, the ability to write custom CSS doesn’t automatically mean a blog post has been art directed. Art direction transcends custom blog posts. It is something different and extraordinary. Art direction elevates and enhances meaning.

Is and is not

Art direction brings clarity and definition to our work; it helps our work convey a specific message to a particular group of people. Art direction combines art and design to evoke a cultural and emotional reaction. It influences movies, music, websites, magazines—just about anything we interact with. Without art direction, we’re left with dry, sterile experiences that are easily forgotten. Can a New York subway ad about the homeless provoke you to donate money? Why do you want to beg Clarice Starling to turn around, even though you know she can’t hear you? How do candles transform a regular meal into a romantic evening? Art direction is about evoking the right emotion, it’s about creating that connection to what you’re seeing and experiencing.

By contrast, design is the technical execution of that connection. Do these colors match? Is the line-length comfortable for long periods of reading? Is this photo in focus? Does the typographic hierarchy work? Is this composition balanced?

If I tell my wife that I love her, but say it with a frown on my face, she’ll get mixed signals. If I say it nonchalantly while watching TV, she might not fully believe it. But when I say it with a genuine smile and a bouquet of flowers, my meaning is clear. In this example, my love is the art direction, while my smile and the deep red color of the roses are the design. They work hand-in-hand to deliver the point emotionally and physically. Design is perfection in technique; art direction is about the important, yet sometimes intangible emotion that powers the design.

Here are a few suggestions on how to approach design and art direction, as you discern the differences in your own work:

Don’t take my word for it

I asked a few friends to weigh in on the differences between design and art direction. Here’s what they had to say:

Design is about problem-solving, whether you are a designer or an art director. The two roles differ in that the designer is more concerned with execution, while the art director is concerned with the strategy behind that execution.”

—Phil Coffman, Art Director, Springbox

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.

“Outside of this, it’s involvement, perception, and politics.”

—Jarrod Riddle, Sr. Art Director, Big Spaceship

The act of designing is different from the act of art directing. Art Directors are supposed to provide the concept. Designers are supposed to bring ideas to the table and implement the concept. However, it is important to point out that it is almost never that black and white. Designers do art direct and art directors do design.

“In my experience, the process is much more collaborative. The ideas inform the concept and vice versa.”

—JD Hooge, Design Director, Gridplane

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

Three hats

I used to teach graphic design at the University of the Arts in Philadelphia. In an assignment I borrowed from Happy Cog Creative Director Christopher Cashdollar, I had students select slips of paper from each of three hats. The first hat contained the assignment, the second hat contained various design elements, and the third hat held the art direction. A student’s assignment might be a homepage redesign for the graphic design department. The design direction might specify dark colors and Swiss typography, while the art direction specifies “happy” and “cheerful.” Another student might get design elements that include an earthy color palette and script typefaces to create a menu for a restaurant whose art direction is elite and formal.

Fig. 1 A formulaic approach to teaching the difference between art direction and design yielded some interesting results for these students.

More a theoretical exercise than a practical one, the students started to develop a feel for what were more natural combinations: Bright colors are easier to work with for happy pieces. A script typeface is a design element that naturally makes a piece feel formal.

More importantly, the students started to understand the unusual and exciting possibilities of uncommon combinations. How can you create a happy website with dark colors? You might create a unique illustration style that bridges the two. How do you make a formal-looking brochure without a script typeface? Try moderately sized, light serif type on a dark background with ornaments. Though these are stereotypical examples, the students developed a sense of how to make the world see what they wanted it to see, despite working within tight constraints. Art direction transcends constraints; in fact, it thrives within them.

Poorly designed, well art-directed

Do an image search for the term “happy birthday.” You’ll find some of the most horrendous design crimes ever committed: Exceedingly offensive color schemes. Repulsive typography. Clip art graveyards.

Yet, they all get the point across: Fun, celebration, and happiness. Most are poorly designed, but we all intrinsically know how to art direct a birthday card. It’s no coincidence that they all gravitate toward similar color palettes, typography, and messaging—if you can even call it that. The obvious joyful art direction all but dictates the design elements. Design fundamentals like grid systems and the Golden Ratio aren’t exactly household terms, but most people implicitly understand art direction.

Fig. 2 The design makes my eyes bleed, but the art direction is spot on.

On art directors

The widely varying role of “art director” adds to the confusion around the difference between art direction and design. At one extreme, some agencies hire art directors who are terrible at design but understand it well enough to give direction to designers. On the other hand, some agencies have “art director” as the next logical pay grade in the path to become an experienced designer. Most workplaces are somewhere in between.

Many smaller agencies don’t employ an art director for many reasons. That fact misleads us into thinking that art direction is an optional part of the creative process. However, the opposite is true. Art direction is so crucial that it is never skipped, only inadvertently and subconsciously performed by designers who often aren’t ready for that type of responsibility.

In their excellent book Art Direction Explained, At Last!, Steven Heller and Veronique Vienne distill the job of an art director:

Art directors must do one fundamental activity: they must ‘direct.’ If they fail to do this, they are not art directors. While this should not imply that art directors must exhibit arrogance or rigidity, it does mean that they have ‘the divine right of expertise.’ The art director may not always have the final say… but he or she should remain the ultimate arbiter of art and design… The first rule is making decisions, the second is making the right decisions…

“Every art director should start with the belief that his or her job is to lead not follow, direct not be directed, and be as great as possible and not settle for the line of least resistance.”

Look and feel

I was once part of a design process where several designers pitched independent concepts to the same client. Built on a freelance model, we made our process non-hierarchical—more collaborative than competitive—but we often lacked a cohesive vision on each project.

Each designer was responsible for the art direction and design (not to mention creative direction, a separate topic entirely) of our respective comps. As a young designer, I had a strong grasp of the elements needed to compose an appropriate design: Color, typography, layout, and the like. But I lacked the experience to be a good art director, especially to art direct myself. Without an art director to oversee my work, I produced well-designed pieces that were poorly art directed.

Many consider “look and feel” to be synonyms instead of complements, treating them interchangeably. Creating a design is creating the “look.” The “feel,” however, warrants specific attention from a seasoned art director to ensure that the message isn’t compromised.

Fig. 3 Thank goodness the client had the wisdom to reject my comp. While the design may be well-executed—ample typographic hierarchy, harmonious color schemes, strict grid, dynamic composition—the art direction isn’t quite appropriate for this nonprofit. It’s too trendy, the hero piece in the header drives home an awkward point, and the paint splatters really have nothing to do with the brand.

The New York Times website has the same art direction today as it had in 1997: Minimal and unobtrusive, it allows the reader to objectively interpret the stories with little influence from the visuals. The design may have evolved over the years, but the art direction persists. When I asked former NY Times Design Director Khoi Vinh about it, he emphasized the need to update the design while keeping the art direction peripheral:

Once a month, once a week, even once a day is a rate that humans can sustain. That’s not the case anymore; digital publishing happens as quickly as it can, as often as it can, constantly. That’s not a human schedule, that’s a machine schedule, and it makes excessive art direction economically untenable.”

Fig. 4 As the minimal art direction has remained constant, the New York Times design has been updated over the years to adapt to the changing need of its readers.

Valuing moments

We’re not art directing any more than we used to. Steven Hay’s article, Art Direction on the Web applies just as much now as it did six years ago. But, we are paying attention to how we’re saying what we want to say at a more granular level. We’ve all but perfected the art of designing templates—that is, designing the framework around what we want to say—but we’re still relearning how to design pages and create moments. In his 8 Faces interview, Ian Coyle says:

I realised the power of actually creating a moment: a moment to pause, a moment to read, a moment to reflect. In any song—in any piece of art—you can’t have all high notes. You need to have moments when people can listen to it or get excited. Even moments of silence.”

This is where art direction thrives: deciding which moments to scream from the mountaintops and which moments to keep as secrets.

Done right

We’ve defined art direction, but what does it look like in practice? It’s quite compelling when you find a piece where the story and design support each other and allow the concept to shine through. Though few and far between, great art direction and design on the web isn’t unattainable.

Fig. 5 Launchlist: a winning combination of art direction, copy, and design.

Consider Launchlist, a “one stop website checklist” you can use to make sure your website launches go smoothly. The space shuttle launch metaphor informs us of the decisions behind the feel, the look, and the messaging. The sky-like backdrop and slow-moving clouds aren’t an arbitrary (or gimmicky) choice. The interface’s metallic color scheme suggests a physical console. Clever yes/no sliders instead of checkboxes feel like you’re completing a process rather than toggling a default browser element. Status messages, including “launch not advisable” or “go for launch” reinforce the simulated mission control environment. All of the details elevate the experience.

This is a great example of art direction, in that it engages our imagination. If we can do that for anyone that interacts with what we create, we’ve done much more for them than we could have hoped.

Changes lives

When my grandfather died, I wrote about it. I wanted to share my memories of his life. I considered the art direction, the mood of what I wanted to say: Reflective, somber, reverent. I wanted to create a digital memorial.

I have a system for my site—strict templates that limit much flexibility—so I worked within those constraints. Instead of creating large tabloid-esque headlines like I normally do, I set this headline moderately in small caps and increased the amount of space around it. I didn’t need to do anything drastic with colors, layout, or imagery. I simply modified my design in subtle ways to accommodate the change in this post’s art direction.

I didn’t just want to change the design for its own sake. I wanted my readers to understand how special my grandfather was to me. I wanted to convey my thoughts and feelings in a compelling way, and to change their lives, even if in a small way. I wanted them to empathize with me, to be a part of the moment with me. Art direction, not just design, is what made all the difference.