Happy Friday, everyone!
Today I’ll be introducing some principles known as “The Gestalt Principles,” as I alluded to last week in my post, “Top 5 Reasons To Redesign Your Website.”
The way that people see your website design strongly effects the meaning that they take away from them. The Gestalt Principle examines this phenomena. That’s why it’s one of the fundamental principles that each and every web designer (and website owner) should consider.
Gestalt is a German psychology term developed in the 1920’s meaning, “unified whole.” These principles describe how the brain composes bits of information into groups.
You may now be asking, “Why is any of this important?” Well, I’m going to explain some of the principles included within Gestalt, and we’ll see some examples of how some websites follow or break these rules.
First, I’ll define each principle, and then we can see how it effects web design.
- Proximity:Proximity occurs when elements are placed close together. They tend to be perceived as a group.
- Similarity (of color, size, orientation, texture, typeface, etc.): Similarity occurs when objects look similar to one another. People often perceive them as a group or pattern.
- Closure: Closure occurs when an object is incomplete or a space is not completely enclosed. If enough of the shape is indicated, people perceive the whole by filling in the missing information.
- Continuation: Continuation occurs when the eye is compelled to move through one object and continue to another object.
- Synchronicity/Common Fate: Synchronicity occurs when certain elements appear to be moving at once, then they are perceived as being part of a group.(When the animation stops, right-click and push the “reload” or “refresh” button to start it again.)
So, now that we have an understanding of what these principles are, let’s see some of them in action.
The above image shows a great (and very common) example of synchronicity. Here, as the drop menu drops, it is perceived as a group.
Here, the different design elements placed near each other (proximity) form easily understandable groups.
Here, we can see the main shapes on this man’s portfolio website form a group because they are alike (similarity).
The different navigation shapes in this example form a complete diamond shape (closure).
The direction of the man’s head leads you to the image on the left (continuity). This kind of practice is extremely important when it comes to getting customers to look at and click on your Call To Action buttons!
When it comes to making or maintaining a website, knowing how the brain visually composes elements into groups is imperative. Now you can take these principles to your site and see how you fare!