Gestalt Principles Applied in Website Design

10 Sep

What is a good and creative design? What is a bad and ugly design? These questions are always running through my head. As a web designer, suddenly I encounter a web page that first leaves me breathless, and then leaves me sleepless because it makes me think “why I didn’t come up with it” “I should have thought of that”. Good web design interface is something that grasps your eyes and invokes your feelings when you get into contact with it. To me, it makes me think and appreciate how smart, creative the piece was. I want to make my users smile and evoke some sort of emotional response. They are glad to discuss and share it with fiends. More people will look at it, save it, and come back to it. Yes, that’s an awesome design. I want more of that in my life.

But how? How can I make such simple, effective, and yet brilliant web page that you can’t stop thinking about it with respect and envy? I didn’t get an answer until I recognize the close relationship between Gestalt principles and design. Gestalt Principles is an essential theoretical tool which can help us to find out how visual perception works and how to arrange visual contents in an effective way. A good designer knows of Gestalt principles and employs these rules to have the edge over. The principle of proximity is one of Gestalt principles. It has a big impact on web designing, especially for content-rich websites. Here following the examples of how this rule has applied to web design layout creation.

Because our brains like to make order and cohesiveness out of chaos, our minds have a tendency to perceive objects as a group when they are close to one another. As part of implementing proximity, white space, hierarchy, grid, grouping of related elements should be incorporated in the web design.

Appropriate and bad use of white space and grid

While implementing the principle of proximity, it must be noted that white space or empty space is essential. Experienced designer know how to give website an appropriate empty space and create a harmonious and balanced layout. The empty spacing between the designs can make our mind pick up a pattern easily as you can see below. An organized look is more appealing for visitors.

One way to group related elements is to use grids in web design. With the multiples of the grid columns and structured vertical layout, everything is lined up perfectly. It can force the web designer to apply principles of proximity without even thinking about it. These factors can be used for both good and evil. Yahoo ( is a good example of appropriate use of these elements while Military Corruption ( is a bad example.

Appropriate and bad use of hierarchy and grouping of related elements

Grouping and sub-grouping helps to communicate the purpose of the website. The relationship between items is called visual hierarchy. A clear grouped items are effective to convey the meaning of information and help users get to the main point quickly. A list is a powerful tool for creating sub- hierarchies. We can also use size, color, contrast, alignment and repetition to make it easier to scan. Google News ( is a great example of balancing and displaying a large amount of information with appropriate use of hierarchy and grouping of related elements. Headlines use the biggest size and bolder color to attract reader’s attention. Within separated widgets, the designer of Google News uses list and alignment as powerful forms of organization to associate similar content. Using the above mentioned points, web site becomes easy for users to read and scan. It looks more attractive.

On the contrast, Bavarian Brathaus ( is a really bad example. The awful design makes visitors leave quickly. Heading has the same size and color with the content. And the content is not well-planned. No separated widgets, no visual hierarchy and even no clear list. So how can users read and scan websites easily! Absolutely horrible experience! Just by glancing at the two examples above, without even examining the content, you’ll see that Google News can hold the interest of the reader while Bavarian Brathaus is a failure of design.


Posted by on September 10, 2012 in Good/Bad Interface Design


Tags: ,

8 responses to “Gestalt Principles Applied in Website Design

  1. Xin_Cindy_Chen

    September 10, 2012 at 1:57 pm

    Good examples. One thought I have is that Bavarian Brathaus has much less content than Google News. Users who go to Bavarian Brathaus have more clearly defined purposes than those who go to Google News. The users have more top-down attention when use Bavarian Brathaus, that’s why they can get away with a bad design. It seems that the Bavarian Brathaus website is designed for a narrower screen, and it looks different in different browsers.

    • cgt512chenguo

      September 11, 2012 at 1:41 am

      Yeah, Bavarian Brathaus actually conveys less information than Google News. While its food is really excellent, I couldn’t help noticing that the site is not so good. It should be a more attractive site just like its food. lol….PS. I only opened the link in Google Chrome and IE. It just looks the same.

  2. Mihaela

    September 12, 2012 at 11:24 pm

    YES! That’s why you learn all these principles – to complement and sharpen your designer intuition, and to figure out WHY a design works or does not, based on existing knowledge, not just gut feeling.

    • cgt512chenguo

      September 13, 2012 at 3:07 am

      I find that I need to read a lot and practice a lot! The big challenge is to broaden my perspective, even change my views on how I see these products and make it better. So many things to learn!

      • Mihaela

        September 13, 2012 at 3:21 pm

        Yes, that’s why you’re here! Enjoy! Few things are better than broadening your perspective and changing the way you view the world – it makes me happy to hear you’re experiencing this as part of this class. 🙂

      • cgt512chenguo

        September 14, 2012 at 12:22 am

        Yeah! I love this class.Once I started writing, I began to discover the joy of sharing my thoughts and feelings with others! So wonderful! Thanks very much, Dr. V!

      • Mihaela

        September 14, 2012 at 2:26 pm

        :))))))))) come on, you’re making me cry.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: