You probably know this image.
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 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.
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.
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’?“
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.
Alex has been doing cruel and unusual things to CSS since 2001. He is the lead front-end design and dev for SitePoint and one-time SitePoint's Design and UX editor with over 150+ newsletter written. Now Alex is involved in the planning, development, production, and marketing of a huge range of printed and online products and references. He has designed over 40+ of SitePoint's book covers.
The Principles of Beautiful Web Design, 4th Edition
Docker for Web Developers
Learn PHP in One Day and Learn It Well