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 (http://www.yahoo.com/) is a good example of appropriate use of these elements while Military Corruption (http://www.militarycorruption.com/) 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 (https://news.google.com/?ar=1347233528) 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 (http://bavarianbrathaus.info/) 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.