Grids in web design
Disposition of design elements
Basic web content, minus any presentation values, should be naturally sequential and understandable, but what will be lacking is aesthetic quality. A plain list of elements that continues down the page is uninteresting and won’t engage a user or encourage them to explore the site further.
Aesthetics
Designers have been studying aesthetics for centuries and there are many techniques that can be employed in terms of layout and structure to take the mundane and make it interesting.
Figure 1.1: A spiral created using the golden ratio (Logoking, 2007).
The image above is an illustration of the golden ratio. The ratio can be expressed mathematically in the following ways:
Figure 1.2: The golden ratio expressed mathematically (Stannered, 2007).
This pattern has been recognised as occurring repeatedly in nature and is thought to be aesthetically pleasing on an almost subconscious level. In an attempt to utilise the beauty of nature, this ratio has long been used in art and design and can also be seen in web design layouts.
Figure 1.3: The Habitat website overlaid with a golden ratio spiral. Notice how the different page elements fit within the structure of the spiral.
The strict application of the ratio can be considered overly complicated when you consider that web design is not a perfect science. Pixel perfect web design is not always possible, therefore some designers prefer to use the ratio as a guide and instead use the less precise method of dividing a container in to thirds, both horizontally and vertically. This more simplistic approach can yield very similar results.
Symmetry is another technique that can be used that is taken directly from nature. It is thought that symmetry has come to represent beauty and perfection. The evolutionary reason for this is related to how humans subconsciously select a mating partner. Good symmetry tends to be connected with good genes and a lack of disease.
Figure 1.4: A page from the Dior website illustrating the use of symmetry to create beautiful design (Dior, 2013).
You can see above how the fashion brand Dior, synonymous with beauty, has displayed the main content using symmetry.
Psychology
The distribution of elements within a web page might be thought of as purely an exercise in aesthetics. However, aesthetics can be quite a personal thing. What is pleasing to the eye of one person might be offensive or confusing to someone else. Therefore it is important to look beyond the subjective beauty of a web design and learn more about the psychology that is at work.
The theories of Gestalt psychology contain principals that are key to our understanding of how the brain processes information. It is thought that over the centuries the human brain has evolved systems that allow us to quickly process and arrange information subconsciously. This skill was probably developed as a way to make us more efficient hunter-gatherers.
From a web design perspective, two of the main Gestalt theories to consider are those of proximity and good continuation.
The proximity principal suggests that when a person is presented with a selection of elements, those elements that are closer to each other are instinctively grouped together. Those that are further away are considered to be separate.
The principal of good continuation again relates to the grouping of elements, but this time in regards to alignment. When elements are aligned in a uniform way, the brain perceives those elements as having some relationship and therefore groups them together.
Figure 1.5: Circles grouped using Gestalt psychological methods. The principals of proximity and good continuation can be seen (Eumedeito, 2008).
Figure 1.5 above shows 72 equally sized circles. However, we naturally process the image to see different groupings based both on proximity and good continuation.
Figure 1.6: The camera section on the Amazon website. The principals of proximity and good continuation can be seen (Amazon, 2013).
Figure 1.6 shows these two principals in action on the Amazon website. Notice in the main content how the proximity and alignment of the items within each of the featured categories is used to group them. Each category is then aligned with the next to visually reinforce that these categories are also grouped together within the camera section. Now consider the whole image. The proximity and alignment of the featured categories reinforces their separation from the sub-content to the right of the image. Not only is the sub-content further away and out of alignment with the main content, but also the elements within the sub-content are spaced differently. This creates a different style for the sub-content and is a subtle way of further reducing visual confusion.