Contrasts in Design

Human eye can complete some forms (according to our imagination) in order to understand them better. But eyes do not always interpret things as they are. Classic example: “MWA” on bright background seems to be darker than on a grey one, while both “MWA"s have the same font color.

image

The thing is that people perceive any object as a figure and a background. This phenomenon is due to perceptive grouping laws and can be explained on double-meaning pictures.

Problem

I discovered the problem of contrast in web-design while creating web-site for a customer. (of course design is not perfect, but it suits the purpose of illustrating the problem).

image

You may have noticed: on the right side, at the point where the black menu bar meets with a grey background, shade is less contrast. Moreover, black bar appears 1px smaller! The fact is that the human brain can’t embrase the picture entirely.

Gestalt Theory

According to Gestalt we mostly take one or another, and our perception is directly related to graphic structure. When change in image happens we are restructurizing all our perceptive space, and, while creating one image, the other images disappear at all!

It would be useful if I mention some Gestalt laws:

  1. Law of Proximity
    Elements that are closer together will be perceived as a coherent object.
  2. Law of Similarity
    Elements that look similar will be perceived as part of the same form.
  3. Law of Good Continuation
    Humans tend to continue contours whenever the elements of the pattern establish an implied direction.
  4. Law of Closure
    Humans tend to enclose a space by completing a contour and ignoring gaps in the figure.
  5. Law of good form
    A stimulus will be organized into as good a figure as possible. Here, good means symmetrical, simple, and regular.
  6. Law of Figure/Ground
    A stimulus will be perceived as separate from it’s ground.

These laws were written many times, but a lot of designers forget or even have never heard of them. These designers create design only according to their vision and opinion of how site should be created. Well, sometimes this is enough.

Explanation

Let’s back to our example. Here our eye divides whole design into two (or maybe three) parts and constructs the balanced picture (according to our thoughts and impressions about design). Furthermore, while analyzing one group of objects we ingore all other groups, so that we can get impression of smaller black dice and less-contrasting shadow. Here it is necessary to note, that when our eye divides picture into object and its’ background - the picture is still percieved as a whole.

Grouping objects, and the balance of colors (I mean not grouping by the balance of colour, but by the number of objects of in a particular place of page), can work good for you. You can always emphasise what you want to be seen or read by user. When you create full balanced design the attention will be captured at the center, as it is a logical conclusion of all your design.

Try to use Gestalt laws to achieve some benefits from your design. Remember, that users don’t read your page, they “scan”. And the use of the simple laws, general understanding of human attention and how we group objects can send user directly to the part of page where the most interesting and attrative information is located.

PS: Well, some phrases for best indexing, I used while writing this article but did’nt find any results are illusions and contrast, black and white illusions
PPS: Tommorow I will publish russian version of this article in my russian blog.

 Permalink Posted in Blogging,Design

Share: Digg it! Tech it! Delicious! StumbleUpon! Reddit! Magnolia! Facebook it! Google! Yahoo!
1 mmo | 03/14 06:25

Very cool how our eyes play tricks on us. When developing games you have to take this into account for pixels..its weird cause its just a bunch of small blocks but when ordered in such a way you see a complete image.

2 commercial art | 10/14 06:59

The color codes mostly linked with illusions. Here we can understand our brain more. I received a few emails also about this earlier. I wonder this combination really works, but see what hypnosis people are doing now. They are playing with this color codes.

Page 1 of 1

Name:

Email:

URL:

Remember my personal information

Notify me of follow-up comments?

Submit the word you see below:


Next entry: Road sign

Previous entry: I love you (viral video)