The Gestalt Principle: Design Theory for Web Designers

The way that people see our designs strongly effects the meaning that they take away from them. The Gestalt Principle examines this phenomena; As such, it’s one of the fundamental principles that each and every web designer should consider when moving through the design process. We’ll also examine how understanding gestalt will improve your own workflow!

Design Theory and Web Design

Trying to come up with a good and creative design may seem easy for someone who has attended a design school, but for the 90% of web designers out there who never attended any design course or school coming mostly from either development or generally non-design backgrounds. The question still remains… what really defines a good web design? Is it just talent? A person who possesses some kind of “special” eye that knows what works out and what doesn’t? Or is there logic and scientific methodology behind all of this that can guide designers, critics and even clients into coming up with a great design.

This is part of a series of design-theory articles that will guide you through the basic principles of the design process. We’ll be focusing on the most important fundamental ideas that can make great differences in the final design.

The Gestalt Principle

Gestalt is a German word meaning “essence or shape of an entity’s complete form”, and this single definition may be one of the most important rules of design.

More often than not, designers tend to focus on the web design’s details rather than the overall look. They focus on curved edges, shadows, fonts…etc. all that is good but may not really make any difference if the client doesn’t like the design at first glance, what most people don’t understand is that the brain first sees the overall shape of any design, then starts to focus on and see the details…

Take a look at this example image…

At a first glance you would see a couple of old people’s heads, but looking more closely you start to see the details (which some people may not even notice at first) that make up these images and you start to see a totally different image.

Now let’s try something to see how details really do not matter, take a look at these 2 examples:

At first glance these 2 images may seem identical; however there are 5 subtle differences in the details that have very little impact on the whole “design”

1. The black bird at the top left s looking the opposite direction
2. The man on the left’s sombrero (hat) is different
3. The man’s walking stick is flipped and a bit darker
4. The pavement bricks on the bottom right are larger in the 2nd image
5. The woman is looking in the opposite direction

Now none of these changes really had any impact on the overall look of the image… let us see another common example:

These are 2 versions of the Volkswagen Beetle, the 1937 and the 1973 models, and despite several major changes in the design details over 4 decades, the design essentially remains the same. This is due to the way our brains work, we see whole pictures and define the whole form much faster and easier than seeing or noticing changes in details.

If we look at the above image which depicts a Dalmatian dog sniffing the ground in the shade of overhanging trees. The dog is not recognized by first identifying its parts (feet, ears, nose, tail, etc.), and then inferring the dog from those component parts. Instead, the dog is perceived as a whole, all at once.

The same happens to every single website design we create, the design is never perceived by identifying its parts (Header, Navigation, Content, buttons, tabs…etc.), the design is perceived as a whole at first glance.

When I was back in college, one of my professors summed up this in a simple sentence, he said “if you see a design, like it, then decide to work on adjusting details, then you know it’s a good design, however if you start to adjust first to try to make yourself like it… then you know it’s a bad design… don’t waste your time trying to fix it… just change it as a whole”, this professor understood the magic key in any design… we see things as a whole, not as the sum of its parts.

Ask anyone in the world to draw Big Ben or the Eiffel Tower or the Giza Pyramids… they would all agree on the overall shape of each landmark, because however differently we may see these landmarks (visiting, in photos, in a movie, in a travel brochure …etc.) we all see the same defining shape.

Applying the Gestalt Principle to the Web Design Workflow

Below are a few web examples and their respective layout silhouettes. The silhouette view is what the brain identifies as the page shape. Trying to change anything other than the main shape will result, more or less, in the same design… and going back to your client with the same design after they’ve requested changes will make the client feel that nothing has been done.

…the design will look the same until you’ve changes the structural gestalt.

You’ll be surprised at how many designers make this mistake and wonder why the client still hates a design or feel nothing has been changed or added, even though they’ve worked tirelessly on improving the individual elements.

Alright, let’s peek at a few designs and their silhouettes:

Usually, sticking to the safe and generally square-like design (as in the 4 bottom layouts from the examples above) will result in an ordinary design, nothing very creative. Try to always experiment with the “containing shell” of your design. Try rotating the box a few degrees or cutting out and changing one of the corners… all of this adds to your design’s uniqueness and creativity.

You should always start with the container, or the overall structural shell of a design; Forget the details and individual components for now.

When that is done and you and the client are satisfied with the structure, grab your wireframes and start working on the details. You will be surprised at how many times a design ends up as a neatly colored wireframe when you start from the inside out. I’ve seen several designers working on the header and navigation first, then start laying out the components, and before you know it you have a neatly packed and nicely colored page full of content which may be from a usability perspective well placed and correct, however from a design perspective it would never be creative or stand out.

Think of your design as a chocolate covered peanut, if you start with the peanut, from the inside out, the outer layer which everyone sees (the chocolate layer) will always depend on the peanut shape and you will have little control on the result.

However if you treat your design like a chocolate egg, working on the outer layer first, and shape it as you desire – fitting your inner content to match the shell, then it really doesn’t matter what you fill it with, the design will always be the egg-shape that you intended.