Opposing Forces

by Zack on June 2, 2009

Opposing Forces

User interfaces can learn lessons from all the visual arts. In this article we’ll look at four photographs that use a specific type of composition and how you can apply those ideas to your UI designs.

hovsep

Many of the best images make use of two visuals that pull against each other with one clear winner. The tension between the two forces helps you figure out what to look at. Hovsep Nazarian‘s picture of a bride on her wedding day is a good example. The white veil is the clear focus of the picture, but the red barn gives the picture stability and balance. Without the barn the picture would be overly simplistic.

Hovsep creates tension with two contrasting images. The vale is white, moving, and ephemeral. In a few seconds it will fall and image will be over. The barn is dark red, solid, and permanent. You can imagine it standing there still. This contrast makes the image interesting.

philippe

Philippe Schlienger creates his opposing forces with expectation and color. He controls the lighting to make the skin clean and perfect without looking overly glossy. It is the embodiment of beauty we have come to expect from a model. He then disrupts our expectations with the green lip gloss and the picture is made.

Green skin doesn’t meet our expectations. The color contrast between the two draws us in. If her entire face were green the photograph would lose some of its pull.

Opposing forces in UI

These types of opposing forces aren’t limited to fine art. Google uses them on their home page. The blue, red, yellow, and green Google logo is only striking because it pulls you away from the large white background. Surround the logo with a myriad of other elements and it would lose its luster.

It goes the other way as well. Replace the colorful Google logo with Google set in 12 point type and you’ll be overwhelmed by the white space. It works because the logo is just colorful enough to pull your attentation away from the field of white.

We need a little complexity. It challenges and engages us. We like to think about how things work; it draws us in. Let’s look at two more examples.

chickens_in_market

Tomás Castelazo uses the scale in his photograph to pull your attention away from the chickens. The two are fighting for your eye. The scale is hard and mechanical while the chickens are soft and organic. The numbers of the scale demand attention, but they ultimately lose out to the powerful lighting of the chickens. This images creates a compelling, if not vegetarian friendly, visual that doesn’t let you go.

adam

The faces of children create the opposing forces in this haunting photograph by Adam Nadel. The two children in the lower left try to sneak in and pull some of the attention away from the one in the right, but they ultimately fail to draw you away from her completely. It is easy to imagine they are related and fighting for the affection of a parent. This conflict makes the picture interesting.

Where do you go from here?

The options for creating opposing forces in your UI are nearly limitless. The key is to create a sense of balance, but have a clear winner. Two elements of equal importance are confusing, but make one the clear winner and the design feels satisfying.

If your software is boring to look at people will be less likely to look at it. Everything needs to make a first impression and without some thought to composition the part of your UI can become discordant. Add too many elements and all you have is noise. Take away too many and there is nothing left.

The photographs

Hovsep Nazarian, Philippe Schlienger, and Adam Nadel are all finalists in the Hasselblad Masters 2009 competition. Their photographs are used in this article with their kind permission. Unlike the rest of the content on this site their photographs are copyrighted material and may not be reproduced without their consent.

Tomás Castelazo posted his picture to The Wikimedia Commons and it is used here in accordance with the Creative Commons Attribution-Share Alike 3.0 license.

{ 2 comments… read them below or add one }

Zack June 2, 2009 at 2:09 pm

Adam Nadel sent me a caption to add to his image (the last one in the article). From Adam:

Hadiyah Abdul Adam
rape victim
Darfur, 04

“I am very afraid. Afraid they will come back. I am ashamed. Ashamed of what happened”.

A young girl as she lives through realities of war. These images are part of a recently completed a 5-year project on war and its consequences. The project documents individuals currently living in zones of conflict, individuals who survived wars, and individuals who are decades or even centuries removed from the war, yet are still impacted.

Both our appreciation of (classical) form and need for compassion defines what is best about being human.

Zack June 11, 2009 at 1:30 pm

A friend of mine read this article and asked for a few more examples of software using opposing forces. Most of the examples from software lack the subtlety of those from art. A classic example is a black bar at the bottom of page to offset a strong graphic at the top. Let’s look at some examples:

Guy Kawasaki plays with this notion on his personal site by offsetting the strong red of of the top title bar with the unassuming gray of his navigation bar.

37 Signals uses the strong black of their info box (the one that says, “a better way to work”) on the left with the lighter colors of their product images on the right.

Ali Felski does it twice in the same page. Once in the top title bar where she balance her name on the left against the clouds on the right and again at the bottom of the page where she pits he blue footer against her light article background.

Leave a Comment

Your Comment

Your Comment Preview

Previous post:

Next post: