A Practical Guide to Designing With Faces

by on 20th August 2010 with 68 Comments

screenshot

One of the principal functions of professional design, if not the central function, is to draw the attention of the viewer. Everyone has a message that they want to get across, but getting people to actually stop and take that message in is no easy task.

Designers are therefore tasked with attempting to use every human’s natural attraction to aesthetic beauty in such a way that it becomes possible to capture the attention of an audience almost without them even realizing it.

With this goal in mind, faces are a magic design element.

Why Are Faces Magic?

screenshot

The answer to this question is multi-faceted and deeply psychological. There are countless scholarly studies that indicate the factors related to facial attractiveness. These include symmetry, bone structure, etc.

However, in the context of a photograph or piece of art, the face doesn’t always have to be attractive or even remarkable in any way for it to grab our attention. This indicates that there is something deeper.

Perhaps society has simply programmed us to look others in the face. Or maybe we have some deep need to relate to the world around us and objects that seems face-like is easier to relate to than something decidedly non-human.

No matter what the solution or combination of solutions may be, the truth remains: we like to look at faces.

Leveraging Faces in Design

Possessing this knowledge as a designer arms you for a variety of situations. Obviously, as we’ve already discussed, faces are awesome for grabbing the attention of a viewer. However, they also play a huge role in how the viewer reads the page, interprets the message, feels about the design, and even the emotion they walk away with and remember later.

Let’s look at a few specific ways you can leverage faces in your designs.

Breaking the Z

Many professional marketers with lots of abbreviations after their names and lots of zeros on their paychecks have it in their heads that people will always view a page in a “Z” pattern. These marketers love to remind silly designers of this fact when they are presented with an ad layout that doesn’t conform to this idea.

After all, people read from left to right and top to bottom. It’s therefore natural for them to process information in this regard.

This is absolutely a true statement. People will have a tendency to read a page in such a manner… unless other factors stand in the way of that tendency. As a designer, you should be able to easily control how you want someone to read your designs.

As an example, consider the following image:

screenshot

Given the knowledge that people read in a “Z” starting at the top left of a page you would conclude that the words on this page are the very first thing you see. However, they aren’t are they? (Note that scrolling on a website can ruin this idea as the image is revealed from top to bottom regardless of intent.)

Though a few exceptions will no doubt arise, most people will will have a tendency to first look at 1) any faces present and 2) the item with the greatest volume of space. Interestingly enough, there is a high likelihood that these same objects will be the last thing you look at before moving on.

In the image above I used huge faces and small text to completely ruin your Z-pattern tendencies. The typical pattern here would be: faces, text, faces, move on. The text simply isn’t as visually interesting so your eyes will inevitably end up back on the faces.

Directionality

When you put a face in your design, make sure you think about what you want to accomplish with it and whether or not the face you chose is getting the job done.

One of the key considerations here is directionality. The direction the face is looking is among the most powerful tools you can use to accomplish a specific goal.

For instance, in the previous example, the faces are essentially looking at empty space. Consequently, they’re really doing a poor job of getting the viewer to read the message. Sure the viewer might get around to it, but this is really in spite of the faces rather than because of them.

Follow the Eyes

Let’s take a look at a similar example that has been structured to better take advantage of the magic of faces.

screenshot

Here we have a face that’s actually being put to good use. Remember that the goal is to get your message across. As before, the face grabs your attention but this time rather than leading you astray, it throws your attention straight at the headline, which is inevitably read, often by accident.

One of the key rookie mistakes you’ll see designers make with faces is having them look out of the ad. By doing this, you grab the viewer’s attention but then let it wonder outside of the page where it’s likely that the person will move on without ever reading your message.

To illustrate, let’s go back to the photo of the man and the baby.

screenshot
screenshot

Here you can see that, although the first example is still quite aesthetically pleasing, the faces aren’t really helping out as much as they could be. The second example does a much better job of guiding you to the message.

Notice how I also moved the text up to eye level in the second example. Remember that it’s their eyes that you are subconsciously following. When performing the layout I was tempted to center the text vertically but this proved to be a much stronger visual statement.

Eye Contact

Using faces as an arrow that points to your message is incredibly effective. However, though this trick diverts attention fairly well, it doesn’t always grab attention as well as direct eye contact.

When someone looks straight into our eyes we almost can’t help but to look back. As designers, the primary way we can use this is to attempt to make the viewer feel something through the expression on the face.

Happiness, anger, confusion, comedy, lust and more are all easily relatable through facial expressions and are particularly effective when coupled with eye contact.

You can see this in countless ads and websites for corporations, schools and other professional entities trying to convince you that they have a welcoming environment and lots of friendly people.

screenshot

You also see the same technique used in much more dramatic situations. Overly serious facial expressions can do everything from sell sports drinks to inspire guilt-driven donations.

screenshot

Abstract Faces

Keep in mind that literal faces aren’t the only way to draw a viewer’s attention. The suggestion of a face in a more abstract way can be just as powerful and often even more amusing.

Whether it’s a common household object or a clever composition of objects, look for ways to infuse faces into your designs.

screenshot

Play around with both obvious facial suggestions and subtle hints. The viewer doesn’t even have to consciously be aware of the similarity to be drawn to the image.

Conclusion

The basic message here: faces are magic. As a designer, you have few more powerful visual weapons at your disposal.

Just as the skillful wielding of faces can greatly increase the effectiveness of your designs so too can the casual misuse of faces can significantly reduce the appeal of a design. Remember to always pay attention to your intentions for the use of the face and whether or not that intention is being met through both expression and directionality.

Leave a comment below with a link to something you’ve designed that uses faces in a very intentional manner. Explain your intention and why the photo succeeds in meeting that purpose.

Comments & Discussion

68 Comments

Comments & Discussion

68 Comments

  1. Well written article and I agree completely. I’m curious, do you (or any of your readers) have more resources on this topic? I’m particularly looking for definitive studies. There’s been a few times when it would have been very useful to help convince clients to use faces, but I was unable to find a lot in way of research that had been done.

  2. I definitely looked for some scholarly material to back it up, but as I mentioned in the article, all I could find were articles discussing what features made faces attractive and not necessarily the basic fact that faces ARE attractive.

  3. Abhishek says:

    I put my face on my landing page (click on my name). I used an older photograph of me with my dog. Laya is an important part of my life and I wanted her on it. Unfortunately, the only decent picture of the two of us was taken in 2006, the second time I met her at the Greyhound adoption.

    Please overlook the rudimentary photoshop work. I used Gimp and this is my first attempt ever in removing the background.

    On the site for Orphans Ablaze, I used Mandy’s fire breathing picture. The effect of this picture is dramatic and gives me empty space to put text. Reading the recommendations in this post, I may have got the text in the wrong position.

    I only use iWeb though I am open to using other (frugal) programs.

  4. Roos says:

    Love this, thanks a lot! :)

  5. Nice read. Great effect with the cat looking at the message.

  6. @Benjamin/Virtuosi Media and @Joshua Johnson, Take a look at eye tracking studies – every study I’ve seen really illuminate the power of using faces. The reader’s eye are attracted to faces and tend to stay focused (pardon the pun) on faces the longest, relative to other elements on the page. I recommend Marketing Sherpa and Marketing Experiments work in this area.
    @XinaMartin

  7. Peter Bowyer says:

    Benjamin, the research that first got me interested in this topic was http://usableworld.com.au/2009/03/16/you-look-where-they-look/ – they use eye tracking studies to demonstrate the outcome.

    Have fun exploring the field!

  8. John says:

    Marvelous article and great creative advice…love the electrical receptacle example!

  9. Tony says:

    Great article. @Benjamin try reading this article from UsableWorld http://tiny.cc/nr3e0 for more info

  10. @Tony, great link! Right on target with this article.

  11. Anton says:

    Scanned through the post once just to look at the images, going back and reading everything it struck me how true this is. Will definitly use these techniques sometime soon. Thanks for a great post!

  12. Ayush Kumar says:

    I love the articles on this site! Don’t get such details on other sites. Thanks a lot! Retweeted!

  13. Nebojša says:

    Great Article! Nicely illustrated. Tnx!

  14. Rich Peniche says:

    It’s a very interesting article although I believe it to be quite obvious.

  15. Joshua says:

    Great article, faces definitely make the most impact

  16. Thanks for the links, everyone. I’ll check them out. And thanks again, Joshua, for the article.

  17. Exionyte says:

    Enjoyed this article, thanks!

  18. paul says:

    very interesting and well written. Thanks.

  19. Galen says:

    This is nice, thanks for posting!

  20. Joelle says:

    Grrrrreeat Article!! I am glad i read it! Thanks Alot!

  21. Great reading! Thanks alot! :-D

  22. Awesome article Joshua Johnson. Truly inspiring. Thanks for share. :)

  23. Sue says:

    Great article, very well writeen and illustrated.
    Thanks ;)

  24. david delbianco says:

    great article.

  25. Excellent read. Thanks! Will be twittering it shortly.

  26. VANO Logo says:

    Thanks for share……………..!!!

  27. Scarlett says:

    Brilliant article. Ultimately, it does show that emotions are still extremely important in influencing our choices in life. Excellent read :) RT’ed

  28. DesignMango says:

    really great article

  29. Alison says:

    great article. possibly one of the best wee tricks I had never noticed, and now I know I’m going to try it out! So good to get some ideas on using faces that aren’t just cheesy stock photo models!
    Loving this site, thankyou

  30. mein says:

    many thx from beijing,China.
    very useful, thanks Alot.

  31. Obscene Cupcake says:

    Ah, I LOVE your articles.

    I’m an english major myself but I like to doodle as a hobby. I remembered that an art class I had failed (before making drawing a hobby) talked about composition. When I looked the word up on the net I couldn’t find ANY information that related to art in a constructive manner.

    This was somewhat FRUSTRATING especially since the reason my pictures all ended up looking dead and still wasn’t only because I’m a newbie and haven’t learned mastered anatomy (stylized or real) yet, but because they were EFFING BORING (I like caps, if you hadn’t noticed).

    This was especially relevant with a “horror” style picture a person wanted me to draw them. I had the subject of the picture drawn in sketch form but it looked dull just standing there, and I also had a little cliche-but-in-a-good-unmemorable-way ditty I had written for the picture that I couldn’t just slap on.

    I think your marketing information will help a lot to make me more satisfied with my art. Thanks a bunch <33333

  32. Obscene Cupcake says:

    also, yes I realized that my writing is atrocious for an aspiring english major (how can you call it an english major if you haven’t gotten a degree yet? why has no one else noticed this?) but since I am a person with severe ADHD prone to run on sentences and rant form talking (did you understand any of that?) as well as commentary on myself in paranthesis, I let loose on the net.

  33. very well illustrated…

  34. thankS for share……!

Leave a Comment

Subscribe
Membership
About the Author