updated: August 26th, 2009 / Ross Johnson / 4 Comments

Website Art Direction Redux

Despite Art Direction having been discussed as early 2004, it is now gaining more attention as designer Jason Santa Maria has proven it’s use through his blog and Noel Jackson has made it easy to do with WordPress. Despite the attention there is still an general misunderstanding as to what art direction really is.

What is Art Direction?

Lately it seems that the discussion of art direction centers around using different layouts and arrangement based on the shape and size of the imagery used. While this is definitely a part of art direction, it actually completely misses the big picture. I found a quote on Wikipedia that sum’s it up closely, “The ability to formulate and communicate the message, rather than simply stylize it, is one of the qualities that distinguishes an “art director” from a “graphic designer.” That means that the design should be more than just slapping gradients and stock photos together. It should be the careful marrying of the proper graphics, illustrations, photos and diagrams. At times that means using more complex and varied layout based on graphics and copy – however it is more of using design to communicate the message rather than just stylize it.

How Does One Art Direct?

In order to art direct you must think about what graphics and imagery is going to compliment and communicate the message in a way that has impact. This is something that the print advertising excels at. Flip through a magazine and you will be confronted with advertisements that have one image and one or two lines of copy, yet the combination is clever, has impact and is memorable. To art direct think about the following:

  • What is the message
  • What is the tone of the message
  • What are the benefits that the message
  • What are the obvious images could would be used (so you can plan on not using them)
  • What are the not so obvious images that could be used
  • What spin could you put on the message?

10 Strategies to Art Direction

While there are no rules as to what you can / can’t show, nor what method you want to go about it. There are some proven ways to pick out imagery and visuals that will enhance the communication of the message.

1. Demonstrate the Product in Use

Using the product in your visuals is often referred to as using “the product as the hero.” You are basically glorifying the product as the savior to all your needs, making it more than an object and giving it life. Using the product in use is really only effective if the product has some motion or drama.

2. Show the Product with an Unusual Association

This is a common yet effective approach. Rather than showing the product in a typical usage scenario, show the product in an unusual context. In these two examples you can see that the product is used in an an abnormal context but it goes a long way to convey the benefits. In the case of the nail advertisement the obvious (and ineffective) image would simply be a hand with beautiful fingernails. But by showing the product in an unusual situation, being used as a can opener, it conveys the benefits in a memorable and stronger way. In the case of the headphones, the obvious image would be someone enjoying the headphones with out hearing loud people around them. Sure it might be a simple way of saying “these make listening to music better,” but it is not as effective as the concept of drowning out the Niagra falls right before you go over them.

3. Focus on a Critical Part of the Product / Service

This is particularly effective when you have product that has a value added feature. Rather than show the whole product, zoom in and focus on one feature, detail or aspect of the product. It could be as simple as a resealable lid that no other product on the market has, or as complex as a new engine technology that improves gas mileage.

4. Uncover a Part of the Product / Service Story

Every product or service has a story behind it. Stories are particularly effective in being persuasion and developing interest. From a young age we learn to be captivated by stories and we remember them far beyond features and benefits. This might be focusing on the interesting plant the product is made in, or the person who invented the product, potentially even the culture that it came from.

5. Highlight the Person Connected to the Product / Service

Rather than highlighting the product itself you can instead highlight a person who is connected to the product or service. People are much more likely to connect and emphasis with a person than a static object. This is one of the situations in which celebrity endorsements are particularly effective.

6. Highlight the Benefit of Using the Product / Service

Rather than showing the product at all, you could instead show the pleasures of using the product. A website for a productivity program might be tempted to use images of workbooks, finished checklists, and lots of completed work. A more effective way of communicating the same message would be photos of people not working at all, because they have completed it all. Another great spin on this concept is to show the negative effects of NOT using the product. In our motivational program the imagery could convey being distracted all the time, bogged down in work and never having time to enjoy life.

7. Feature the Lifestyle That the Product / Service Offers


Appealing to higher levels of Maslov’s hierarchy of needs is an effective way of being persuasive and generating interest. One of the ways you can do this is by featuring how a product or service changes your lifestyle for the better. The new shoes turn your life into one of being athletic, active and healthy. Frequent massages could communicate a lifestyle of being free of tension, stress or worries.

8. Use the Split-Screen Effect

Split-screening is a great way to do comparisons. It might be comparing one product or service to another, or more commonly it is used as a “before and after” situation. It could also be used to tell a story like a comic book frame, or highlight something unexpected.

Psychology has proven that we as humans react and identify with stories. We have grown up being surrounded by stories, and it is how history has been preserved up until the invention of mass printing. Split screening is a great way to use images to tell a story. When we hear see, or interpret a story we are much more likely to remember and ingest it.

9. Use a Metaphor for the Product or Service

You can create a powerful message by showing something dissimilar that stands for the same benefit. This becomes a metaphor for the same product or service, but communicates it in a compelling and interesting way. This can be effective by making the viewer think about the benefit of what you sell in a familiar way, or by thinking about the benefit in a new way. In the duruex advertisement you can see how effective this is. Would you go into combat unprotected? It causes you to related to the benefit of the product in an easy to understand familiar way. No one would argue the ridiculousness of running into battle naked. After viewing the advertisement you now related the product they sell relates to this very level of ridiculousness.

10. Pair understatement with overstatement

If your imagery and messaging are both understated your viewers may miss the point. If your imagery and messaging are bother overstated viewers may not take you seriously. An effective way to catch your viewers attention is to match understatement with overstatement. This technique has been extremely effective in comedy since the beginning of time. Comedians have long been able to get laughs by understating one element of a story and then overstating another. It seems the wild contrast between the two extremes gets our attention and stimulates our interest. In the advertisement displayed that communicates “Don’t be stuck in the wrong job” they use an understated message of “in the wrong job?” with an overstated image of a construction worker in a dentists position. The extreme understatement mirrored with the extreme exauguration (or overstatement) gets your attention and makes a memorable impact.

What to remember

If you take anything away from this post, it is that art direction is not simply creating a unique layout for every page. It is the practice of mating the proper imaging and layout with the content and context. A site could have the exact same layout on every page and still be beautifully art directed. It is more about using both word and image to communicate the right message rather than making a design look unique or “cool.” Really think about every page in terms of what it should communicate? what is the message? how can I contribute to that message?

4 thoughts Website Art Direction Redux

  1. Pingback: Improve your art direction abilities on 3.7CREA.TV | StylizedWeb.com

  2. Pingback: Website Art Direction Redux : Design Newz

  3. Graphic designers do more than “simply stylize messages.” And we do not just “slap stock photos and gradients together” either.

    I know that this was not the intended message of the post, but you should have included a better definition of Graphic Design as it compares to Art Direction.

  4. I agree Sean, I think you may have misunderstood my message.

    The definition was from wikipedia and it seemed fitting considering the subject. The article is a call for graphic designers to embrace enhancing the message vs simply trying to decorate it.

    Ross Johnson

Comments are closed.