Grids in Web Design

Introduction

"A grid as it's barest is nothing more than a series of intersecting vertical and horizontal lines spaced at regular intervals, but it's innate propensity for creating order out of chaos makes it one of the most powerful tools at a designer's disposal." (Braukmuller, 2010)

In this essay I will attempt to explain the use of grids in web design while looking particularly at how they have been used in websites marketing one of my favourite things in the world - chocolate. I will discuss how grids are used to present content and create emphasis, and also the effect of the grid-based layout on the brands image.

The use of grids in web design

The use of grids is a fundamental graphic design principle, which is used primarily in the context of traditional graphic design, and by that I mean design for print. However, the major benefits of using grids for print based design, also apply to web design. The web standards renaissance has popularized the use of grids in the web community (Braukmuller, 2010), and there has been an emergence of many frameworks and tools to aid designers in their projects, such as 960.gs, Blueprint, The Head's Up Grid, Gridlover. These tools claim to reduce time spent developing websites, while providing the structural and aesthetic benefits that have enhanced grid based print design for so long.

There are many advantages to using grids in web design as described by Khoi Vinh in his book "Ordering Disorder", and here are some of the main points advocating their usage on the web:

Grids can be very subtle, and often seem invisible when you look at a design, but there are traces of them when you look at the positioning of the elements. One must keep in mind that grids not only organise the elements of a design, but also the space within a design. Clearly aligning sections and elements through the use of columns, rows, gutters etc. creates defined space, which in turn gives the appearance of organisation. This space also allows the page to breathe. White space is just as important as the 'objects' in design (type, images, lines etc), and it is the relationships between the two that forms visual hierarchy. Gutters, margins, line spacing and paragraph spacing can assist in helping the user to recognise individual pieces of information (Miller, 2011).

Grids from Mathematical Formulae

Over the centuries, mathematical formulae and patterns have been discovered and applied to all sorts of design. One of the most popular concepts, derived directly from nature, is the Golden ratio. Also known as the Fibonacci sequence, its recognition is credited to Pythagoras in the 6th century BCE. The Golden ratio relates to the harmonious relationship between to numbers of the ratio 1:1.618. When this ratio is applied to measurements within design, it forms the basis of a grid system that is recognizable as harmonious and logical (Vinh, 2011). This is supposedly pleasing to the human eye.

A less scientific ratio, and simplified version of the Fibonacci sequence, is the 'Rule of Thirds'. When a section is divided in two by the Golden ratio, one section will be approximately twice the size of the other. An easy way to achieve a less strict mathematical version of this 'divine' proportion, is to divide your layout into thirds, both horizontally and vertically. This rule of thumb contends that there are four focal points in a composition that the eye is drawn to, and this division into thirds is the way to find them. This method of achieving a pleasing, harmonious aesthetic has been employed not only by graphic designers, but also painters and photographers. It is so popular that it has been integrated into modern cameras and into the crop tool in Photoshop, making it easier for people to apply it to their photography/editing.

Baseline Grid

A baseline grid is something that has been used by print designers for years, but only recently adopted by web designers (Miller, 2011). This is a horizontal grid system that aligns all of the text on the page to a baseline, regardless of the style or even the size of the font. This can give a harmonious rhythm to the typography of a website, as opposed to a feeling of arbitrary placement.

Chocolate Editions

The modernist approach to layout and design in general focused on the use of white space and sans serif typography that utilised asymmetry. This was driven by the adherence to the grid, based on geometry and the proportion of the page, as a controlling device (Noble & Bestley, 2005). This statement can sum up the layout of the site, with its adherence to a simple four column grid, the ample use of white space, and the asymmetry created by aligning to the left hand side of the page. The aesthetic of their website could certainly be said to refer to the Swiss journal "Neue Grafik", credited with defining the Swiss style of design (Miller, 2011). Even the typography, Helvetica in two weights, bold and normal, fits into this homage to modernist design. Matt and Mary's aesthetic is described as one of "unsentimental nostalgia".

Emphasis is also achieved through the generous use of white space. The title of the page, and the product names, although in a relatively small font, are given emphasis by the large amount of white space surrounding them. A pattern is created throughout the page. There is very clear separation and organisation of elements, and almost a rhythmical use of space. Also, the generous amount of white space surrounding the navigation helps it to stand out, despite the shade of grey used for the font being a more passive colour than the hot pink headings. This also serves to create a visual hierarchy.

The proportion of a webpage cannot be anticipated, due to the variety of screen resolutions used. This website is not designed for the almost standard 960px width that has been so popular in recent years. The designer decided instead to give the page an 820px width, and to align the page to the left. By doing so, they are creating a wider white space on the right hand side for the majority of modern browser sizes, and creating an asymmetry.

The images of the bars of chocolate, although centred within a three column span, are approximately the same width as two columns, and their large weighted presence is subtly balanced by the pop of colour in the title to its left. This gives the overall page a subtle balance.

The brands image is one of "nostalgia with a smile", and everything from their delightfully minimal website, to the chocolate itself embraces this. Although the websites design seems simple, it is meticulously designed to tie in with the modernist identity of the brand. All in all, it allows the product to speak for itself through the tantalising images, without cluttering the page or distracting the user.

Wispa

This website does not stick to the same layout for every page of its site. Different pages have different layouts within the same general grid, depending on the content that is being presented. By designing from the content out, the content is presented in the best possible way for the user to engage with it. It is not imperative for every page to have the same order, as long as there is a base grid system throughout, which will unify the site as a whole. This website uses the 12 column 960px grid framework that is very popular in web design today, and divides the content of each page in a manner appropriate to its content.

Beginning with the home page, the content is presented in a symmetric grid. The main content is in the middle column which is the widest, and sub-content in the two thinner columns either side. Although the middle column is obviously given the most weight, with the large heading and wider sizing, there are other elements vying for the users attention.

Elements that break the grid are given more prominence. For example, there is a call to action to login/register at the top. This is highlighted in two ways, firstly the bright red colour of the font, and also the fact that it is jutting out of the main content area, and above the header. This gives it more visual weight, and so attract the users attention. This makes the user more likely to actually sign up or register, or whatever else it is that the brands marketers want from the users. There are other examples on the home page of elements breaking out of the main grid by a few pixels, and these elements always have a reason to do so, such as a call to action for the user to engage with.

In another page, "The Play Room", the main content is split into two equal columns. Each element on this page is of the same height and width. This is because each element is of equal importance, and there is no need to fight for attention. When elements are presented in this manner, it gives an equal weighting to each, and hierarchy is only achieved from top to bottom.

On the "Latest Wispas" page, which is a blog/news style page, the content is yet again presented in a different layout. This one follows the Golden ratio, with a larger left hand column and a narrower right hand column. Each news item is presented in its own box, which also follows the golden ratio sizing. In general, compositions divided by lines that are proportionate to the golden ratio are considered to be aesthetically pleasing. This divides the content in such a way that although a bigger proportion of the page, and therefore more emphasis is given to the wider left hand column, the page still feels balanced enough to remain compatible with the symmetric layouts of previous page structures.

By having a layout that is not strict in its consistency, it enhances the casual, playful image of the brand. This is a chocolate bar that is not to be taken to seriously, that is light and bubbly. A website that is not strict in its nature, but rather follows the grid quite loosely and flexibly, contributes to this image. However by maintaining a general 12 column grid throughout the website, despite the variety of layouts used, it succeeds in presenting the content in a structured and well laid out manner without seeming rigid or boring.

TCHO

The layout for this website adheres strictly to a four column grid, and is consistently balanced in a symmetric manner throughout.

On the home page, there is a very definite visual hierarchy created through the content's distribution within this grid. The main focus of this page is the large jQuery carousel gallery in the first field. This spans the width of all four columns. This is subtly spilt into a two column wide text statement, and a two column wide photo. The large size of this carousel, spanning the whole width of the page creates a visual impact, and achieves emphasis for the content that is presented in rotation.

The lower field is next in the line of hierarchy. This is further spilt into two rows, and each row is spilt into the four columns. Each section in the first row has either a photo or graphic, and each of these elements is give the same visual weight as one another. The next row is again split into four equal sections of equal weighting however they are just black text on grey background, with no images or graphics. This shows a very definite step down in the hierarchy. The user can understand that there is a level of importance from the top of the page to bottom of the page, and interpret from there how to navigate around the content.

On pages within the site, the layout changes slightly. On the shopping pages, there are sub-navigation links which take up the first column on the left hand side. These links are separated visually by giving them their own column, in a different colour to the rest of the page. They are easy to find, but do not dominate the page, due to the small font size and submissive colour. The main content, the products, are spread across the next 3 columns, one product per column. The products section draws the users focus through nice bright images that pop on the white background, and the large heading. These pages might seem to break symmetry due to the sub-navigation column. However, by having the background of the left column a darker colour than on the right, it gives weight to it, maintaining the balance of the layout, this time in an asymmetrical manner.

The main navigation is tabular. The link for the current page is given a bright background colour. There is also a bar of this colour which spans the four columns, making it very obvious to the users what page they are on, giving them a sense of location. This is very good in terms of usability. The coloured line spans all four columns, almost enveloping the active page.

This symmetrical four column grid ties in with the brands packaging, and relates to the way the chocolate products are presented. The chocolates come in the form of square bars which are then packaged in squares, The gift boxes are squares split into 4, 12 or 36 part grids, maintaining a sense of order, uniformity and constant symmetry. This is reflected strongly in the design and layout of the website.

Conclusion

By looking at these three in particular, and also many more websites marketing chocolate which can be seen here, it is apparent that grids can be used in many different ways, and it is obvious that most of these websites do employ a grid in their design in one form or another. By using these grids, they achieve a sense of order, a visual balance, and a hierarchy of importance.

There were many similarities in the websites that I looked at, despite the broad range of chocolate, from gourmet chocolatiers to cheap and cheerful Wispa bars. Most of the websites I looked at employ a fixed width grid. The 960px grid system is common, as it is with a lot of modern websites. Another design element that chocolate websites seem to have in common is horizontal top navigation. Because these websites tend to vividly highlight product images, visuals therefore fill a large part of the layout, so the choice of horizontal top navigation seems appropriate. It seems that most websites for chocolate tend to lean towards having a asymmetrically balanced websites, with more abstract methods of achieving the harmonious balance.

Unfortunately, none of the websites that I looked at employed the use of a baseline grid. The baseline grid is a wonderful tool in creating a smooth and harmonious rhythm to the typography within a design.

And just for fun...

A website made entirely of chocolate!

References

Gube, J., 2009. Call to Action Buttons: Examples and Best Practices. [online] Available here.

Braukmuller, C., 2010. Grid-Based Web Design Simplified. [online] Available here.

Roberts, L., 2008. A Brief History of Grids. [online] Available here.

Miller, B., 2011. Above The Fold. Georgetown, How Books.

Vinh, K, 2011. Ordering Disorder; Grid Principles for Web Design. Berkeley, New Riders.

Beaird, J., 2010. The Principles of Beautiful Web Design 2nd Ed. Melbourne, SitePoint Pty Ltd.