Warning: Declaration of Thesis_Comment::start_lvl(&$output, $depth, $args) should be compatible with Walker::start_lvl(&$output, $depth = 0, $args = Array) in /nfs/c04/h03/mnt/66302/domains/gettheeye.com/html/wp-content/themes/thesis_16/lib/functions/comments.php on line 0

Warning: Declaration of Thesis_Comment::end_lvl(&$output, $depth, $args) should be compatible with Walker::end_lvl(&$output, $depth = 0, $args = Array) in /nfs/c04/h03/mnt/66302/domains/gettheeye.com/html/wp-content/themes/thesis_16/lib/functions/comments.php on line 0

Warning: Declaration of Thesis_Comment::start_el(&$output, $comment, $depth, $args) should be compatible with Walker::start_el(&$output, $object, $depth = 0, $args = Array, $current_object_id = 0) in /nfs/c04/h03/mnt/66302/domains/gettheeye.com/html/wp-content/themes/thesis_16/lib/functions/comments.php on line 0

Warning: Declaration of Thesis_Comment::end_el(&$output, $comment, $depth, $args) should be compatible with Walker::end_el(&$output, $object, $depth = 0, $args = Array) in /nfs/c04/h03/mnt/66302/domains/gettheeye.com/html/wp-content/themes/thesis_16/lib/functions/comments.php on line 0
Opposing Forces

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.


Fatal error: Uncaught Error: Class 'thesis_comments' not found in /nfs/c04/h03/mnt/66302/domains/gettheeye.com/html/wp-content/themes/thesis_16/comments.php:24 Stack trace: #0 /nfs/c04/h03/mnt/66302/domains/gettheeye.com/html/wp-includes/comment-template.php(1508): require() #1 /nfs/c04/h03/mnt/66302/domains/gettheeye.com/html/wp-content/themes/thesis_16/lib/functions/loop.php(92): comments_template() #2 /nfs/c04/h03/mnt/66302/domains/gettheeye.com/html/wp-content/themes/thesis_16/lib/functions/loop.php(8): thesis_single_loop() #3 /nfs/c04/h03/mnt/66302/domains/gettheeye.com/html/wp-content/themes/thesis_16/lib/html/content_box.php(66): thesis_loop_posts() #4 /nfs/c04/h03/mnt/66302/domains/gettheeye.com/html/wp-content/themes/thesis_16/lib/html/content_box.php(42): thesis_content_column() #5 /nfs/c04/h03/mnt/66302/domains/gettheeye.com/html/wp-content/themes/thesis_16/lib/html/content_box.php(25): thesis_columns() #6 /nfs/c04/h03/mnt/66302/domains/gettheeye.com/html/wp-content/themes/thesis_16/lib/html/frameworks.php(27): in /nfs/c04/h03/mnt/66302/domains/gettheeye.com/html/wp-content/themes/thesis_16/comments.php on line 24