Design & UX
Article

What Does Facebook, the Muppets & Paris Hilton Have in Common?

By Alex Walker

American Gothic by Grant Wood (1950)

You probably know this image.

This is ‘American Gothic‘ by Grant Wood (1930) – one of the most recognizable images of the 20th century.

Even if you don’t recognize the original artwork, chances are you’ve seen at least one of the many parodies of it. You’ll see this image referenced in everything from Barbie & Ken to the Rocky Horror Show to Paris Hilton to the Simpsons – in fact, far too many to list here.

So, why does it get referenced so often?

American Gothic parodies - The Muppets, Big Bang Theory, Beavis & Butthead & Barbie & Ken

The Muppets, Big Bang Theory, Beavis & Butthead & Barbie & Ken

American Gothic is the definition of an ‘iconic’ image. The imagery is bold, simple and easy to parse – it’s two people and house. Though it’s technically ‘fine art’, it has an almost child-like composition – like a symbol or road sign.

But as simple as it is, we can’t help but pull lots of extra information out of it.

We probably guess:

  • These people live in that house.
  • They’re probably a married couple (though there is some argument that the woman is a daughter).
  • They dress in traditional farm attire. We might expect them to be devout, tough and reserved.
  • The woman is partially obscured by the man, and looks away from us, avoiding our gaze. There are well-tended flowers on the porch behind her shoulder.
  • The man is taller and stands slightly in front of the woman, dominating two-thirds of the frame. He’s holding a sharp-looking pitchfork and makes cool, even eye contact with us.

The painter leaves no doubt who the boss in this image. It’s not just a single picture – it’s a little story.

Facebook Gothic?

Interface icons are their own little iconic artworks, usually taking on an even simpler composition than American Gothic. The skill in icon design lies in cutting away as much extraneous detail as possible. However whatever detail remains ultimately speaks even louder – and it tells a story too.

Until recently, Facebook had their own tiny artwork that riffed on Wood’s original masterwork. Echoing American Gothic, the Facebook friends icon portrayed your friends as a small woman in the shadow of slightly taller man.

Friends icon (with pitchfork)

Friends icon (with pitchfork)

I’ll admit I’ve been a little bit mischievous here by temporarily adding a pitchfork. But even without it, that ‘visual echo’ of American Gothic is still clear.

Or it was.

Recently Facebook designer Caitlin Winner noticed the issue and set about tweaking things. She documented her process in a great Medium post last month.

One of the problems with successful symbols and icons is that they become so ubiquitous that we don’t truly see them anymore – at least with fresh eyes. Caitlin is trying to change that.

As a result of this project, I’m on high alert for symbolism. I try to question all icons, especially those that feel the most familiar. For example, is the briefcase the best symbol for ‘work’?

Original Friends icons vs. Updated icon

Original Friends icons vs. updated icon

It’s a smart approach. On one hand, Caitlin has made very subtle changes to very small image. On the other hand, this is an image that is rendered to a billion users around the world daily. That’s a huge impact – a broader reach than monoliths like Coke or Disney or FIFA.

Sometimes it’s the smallest things that speak loudest.

Originally published in the SitePoint Design Newsletter.

  • Ralph Mason

    You dig up the most interesting topics, Alex! TBH, I’m surprised the original Facebook icon was approved. It says a lot, I reckon.

    I liked your reflections on the Mona Lisa in the newsletter, too … though unfortunately I look as bad in the mirror as in photos. :p

    • http://sitepoint.com Alex Walker

      My guess is it was never technically *approved* – it was just.. there, probably introduced as a bunch of 6-12 new icons. The group update was approved but the symbology of each icon was never considered after it was designed.

  • http://careersreport.com Eloise Craven

    I will show excellent internet job opportunity… three-five hrs of work /a day… Payment at the end of each week… Bonuses…Payment of 6-9 thousand dollars /a month… Merely several hrs of spare time, desktop or laptop, most basic knowing of web and dependable internet connection is what is needed…Get more~ information by visiting my page

  • http://careersreport.com Eloise Craven

    I will show excellent internet job opportunity… three-five hrs of work /a day… Payment at the end of each week… Bonuses…Payment of 6-9 thousand dollars /a month… Merely several hrs of spare time, desktop or laptop, most basic knowing of web and dependable internet connection is what is needed…Get more~ information by visiting my page

  • Jacob Alvarez

    Now the woman is in front of the man. How sexist. Why not just use robot silhouettes in place of human silhouettes? That way you won’t hurt anybody’s feelings.

  • http://careersreport.com Mary Hudson

    This is how you can get fifty five dollars an hour… After being unemployed for six-months , I started freelancing over this internet company and now I possibly can not be more satisfied. 3 months have passed since being on my new job and my income is around 5000 dollars/a month -Check link on MY-_____PROFILE__-PAGE__________ for more info

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Design, once a week, for free.