**Announcement**: Okay I don’t want to scare too many of you away with another design psychology based article but as I’ve said before I think it’s imperative that we should use psychological techniques more in our designs. I’m not saying design is completely scientific or mathematical, but I do believe the best design comes when proven theory works in harmony with art. We as designers need to understand the implications of our actions and by understanding psychology we can truly begin to discover the effect our designs will have; this isn’t a game of chance.

Why does a specific website or piece of graphic design look and work so effectively? The truth is that individual elements and the design in its entirety work well because theoretical design principles are applied to good effect.

The theory I’m going to specifically look at is The Gestalt Principles of Perception.
Now I now what you’ll be thinking with a lot of these principles:

“Why are you writing an article on such obvious principles? We know putting black on yellow creates contrast!”

Okay but in answer to that I would quote the following from Andy Rutledge (who reminded me of these principles):

“It is the purpose of fundamentals to open wide doors to conceptual depths, and the subtleties that lie beyond.”

In other words you have probably only scratched the surface; now read further and you will become a better designer!

Time for a touch of history and contextualisation. The Gestalt Principles of Perception (GPOP) were discovered by Max Wertsheimer who was  a Czech psychologist whom came upon the theory that the brain adopts a holistic approach when visualising a scene; in rudimentary terms this means the brain automatically organises elements it see’s into groups. I came upon a great summation of the GPOP during my studies (so if you are still confused just read the quote below and the click the cross at the top of your browser)

“The Whole is greater than the sum of its parts”

It’s like when I first began to paint , I would spend hours anally painting a tiny area and continued to adopt this segmented approach until my art teacher told me to take a step back, loosen my brush stroke and see’s the piece in it’s entirety rather than in individual parts.

We all go through the process of visual organization; without this visions of complete chaos would exist.

Even though you may understand these principles, the better you understand them the quicker you’ll be able to design, as essentially these principles are aimed at taking the guesswork out of design.

Gestalt Principles of Perception
All theses design principles are based on relationships; human perception is governed by relationships. I’ve ordered these principles in order of importance:

The hierarchy of design principles

1. Common Fate
2. Good Continuation
3. Uniform Connectedness
4. Proximity
5. Colour

Understanding figure and ground elements
When first visualising a scene our brain automatically categorises elements as figure or ground elements. This technique harks back to the basics of survival and is based on threat perception. Picture yourself in a cave with a roaring fire cooking a nice piece of chicken. Now as you are eating the chicken a sabre tooth tiger comes hurtling into the cave towards you. The sabre tooth tiger now becomes your focus; but why is this? (Other than the fact that it has sharp jaws, is hairy and eats humans?).The reason is because the sabre tooth is moving towards you. This is based on the Gestalt principle of Common Fate (#1). If you were walking out of the cave and the sabre was running in the same direction your focus would minimal because the pair of you are now moving in the same direction and therefore you become more closely related.

We look at figures first because they are most likely to pose a threat. That which we can safely ignore we will. So in the moments the sabre tooth was in the cave you would be able to tell me little about the cave walls or anything else in that could be termed a ground element.

How do you apply this to design? Some of the most visually stimulating designs I’ve seen recently actually blur the lines between figure and ground elements, even interweaving the two. This is a classic example of understanding the intricacies of a rule; essentially once you have understood the rule completely you have a license to break it.

Using transparent pngs in your websites is a great way to interweave figure and ground elements. Another nice technique you can try is playing with focus. The next part will look at the specific priciples in more depth and also draw some compelling conclusions.

 |    |