Grids in Webdesign – Critical Essay
“Grid systems can facilitate creativity by providing a framework and already answer some designers’ questions such as ‘where should the folios go’, ‘how wide should the measure be?’ etc. A well designed grid system will go some way to answer these questions and more.”
— MARK BOULTON
Grids have been a tool for ordering graphical elements in the works of graphic designers for quite some time now. They have managed to ease the work of a designer by introducing structure and order on the canvas. You might think that this may be constraining to once creativity by putting it under the tyranny of a fixed net of horizontal and vertical lines. However this is far from the truth. Grids are all about mathematical ratios - how big is one column with respect to the other column? May those proportions be formed by whole rational number (1:2, 2:3, 3:4) or may be some irrational ratios such as the Golden Section (1:1.618). What makes them ideal is not that they are mathematically accurate, but their unexpected commonness. Those ratios surround us in our everyday life from the buildings we create to nature itself. People subconsciously are used to seeing those ratios everywhere and whenever something does not fall into the "known" ratios we feel like something is wrong with it without actually knowing what the reason is. The person quickly discards the oddity and gets on with his life. The same principles apply in web design as well, only here you cannot afford to have a user irritated because of the irregularity you might have introduced by not using a grid system. Only recently grids have been introduced to the word of web design and they have changed our workflow for the better. (An simple example of web grid system) So how are grids used in web design? Let us have an example. For the purpose of this essay I have chosen a website which combines two different website genres. This piece of work acts as a showcase for a designer’s artwork, but it also is a place where anyone can buy the productions of the particular designer who also built this website. Being both an e-commerce and a portfolio website makes it very diverse with respect to the type of grids used in it. I have chosen a few of the web pages with different layouts in order to analyse how exactly are grids used in each case. 
The Homepage looks like the very familiar layout for blogs. A two column layout is used to divide the content information into a main content part and a sidebar part. The two columns stand in a relation of 2:1 (main: sidebar) with 630px measurement for the main part and 310px for the sidebar. The gutter between them is about 15px which leaves 5px to spare from the magic target of 960px, just in case. This common 2:1 layout grid allows the page to efficiently relay updates and news about the designer’s work through the bigger column and at the same time have some additional information, which might be of interest to the user, in the sidebar. The grid is successfully used to organise and align the content of the page. All the textual information or imagery in the main column is made very clear. Because of its dominating features the main column is perceived to be the centre attention. The hierarchy in this sort of layout is based on the ratio – the bigger column comes before the small one with respect to the relevance. The importance of this main column is not only shown by its size. The fact that the column is placed on the left-hand side of the page is more intuitive for the user as we tend to read pages from top-left to bottom-right part of the page. Moreover the web designer has decided to envelop this area in a rectangle which further enforces the idea of importance by emphasis. The side bar is left without containment and also uses the background image of the whole page which makes it to blend in - an effect of second grade importance is achieved for the sidebar. The disposition of this element makes it perfect to display any sort of additional information which the user might like. With the help of a few horizontal grid lines the content is divided into easily readable sections. The same separator elements are used in the main column as well. They manage to separate the different posts (wallpaper section, blog section and comment section) without breaking the flow of information. In the case of the main column these horizontal separators also deliver a sense of hierarchy helping the user to identify the top most post as the most important/relevant/up to date. The grid also helps the web designer to finely align all of the text and images easily. The straight lines which are then formed by the content create a more relaxed and straightforward feeling when the user goes through the text and images. Thanks to the grid system the CTA button are even more evident. The orange buttons in the main column are fulfilling their purpose not only because of their colour, but also because of the brackets on their sides. Those brackets break the straight left line going down the page which is formed by the content. The human eye immediately picks up this irregularity and that makes it stand out from the surroundings, thus achieving the needed effect. 
The Desktop Wallpapers page has a typical gallery look. The entire content is contained in a single column with 960px width. However there is also a clear subdivision into three equally sized columns of about 280px each. The number of columns to display this gallery is very well chosen. Because this is a wallpaper preview page every piece of work has to have enough space to be displayed properly without the imperative need to be enlarged. On the other hand a single wallpaper should not dominate the limited space at hand. The aim is to display as many desktop images as possible on each row without lowering the preview quality. Three column layout in my opinion is the most efficient way to divide the space- less would have made the page look wasted with just two entities per row and more rows would have impaired the legibility of the whole page by displaying smaller images. In turn this would have decreased the usability of the website as a whole. At first not obvious but if you take a closer look there is another significant division on this page - a horizontal gutter separating the page into two even rectangles. This gutter allows the insertion a few ads or links to other websites without the need for an additional sidebar. The width of the ad section is about 935px which makes it 25px less than the rest of the page. This difference is what causes an irregularity in the flow of the page. The straight vertical line is broken and this is easily picked up by the human eye. Even though the ad section stands a lower hierarchical level, with respect to the rest of the content, this technique significantly increases the attention drawn to the ad. 
The Downloads page is built on a two equal column layout. Each of the columns has a 470px width and between them a gutter of 20px is left to separate the two parts. Once again here we have a subdivision of the main layout. Each of the two columns contains another two columns of equal size – about 170px. The hierarchy of this page is not defined by the size of the columns, because here they are of equal size – the two parts share the same importance. However we have very well defined emphasis on the first row of the vertical division of the page. The upper most part of both columns is encased in coloured rectangles while anything else below them remains with the default background pattern. This observation allows us to deduce that the most importance is placed on the first row of the page - two downloadable entities with equal priority. They dominate the page with size and position. People tend to scan a page from top to bottom and seeing those emphasises rectangles is an immediate call to action. Furthermore there is a hover effect place on the boxes to change colour to enforce visual hierarchy. The rest of the entities on this page share exactly the same importance irrelevant of their position in the grid. There are no particular features to differentiate them one from the other. 
The Apps&Games page is based on a four equal column layout - 225px each. There also is vertical division which together with the horizontal creates the grid for this page. The content that needs displaying here consists of apps and games which apart from the icon they are represented with they also need textual information to give more detail about what they are. Both text and images are very well accommodated in this layout. There is no particular hierarchy between the entities of the page, as they are of equal size due to the choice of layout. However, once again a method to emphasize certain elements is present. The well known by now rectangle around the images achieves the goal to make the icons more obvious. The attention of the user has to be drawn to the icons first and then may be read the details. The textual information is meant to be of secondary importance and this is enforced by the fact that even though the image and the text are in the same column they seem to be separated once by the rectangle of the image and a second time because of the text alignment with respect to the left edge of the column. The paragraphs do not use up all the space available in the column. Instead, they leave a few pixels of padding on both sides in order to stress the fact that the text should only be read after the user has seen the image above it. 
So far I have only discussed how are grids used in content area of the web pages. Here I will try to decipher the grid which stands behind the arrangement of elements in the header/branding part of the website. It is quite obvious from the image of the header that the alignment and division of the elements are guided not by vertical but horizontal lines. Unlike the content of the page the navigation and logo need not to obey the standard layout proportions. This is a very good example of how the grid of a header could be formed around a few of its elements. In this case those elements are the logo and the opening bracken on its side. The bracket sets the top and bottom boundaries for locating elements. The logo is positioned right in middle of the height if the header. Even though no other text is aligned with the logo the visual balance is achieved. The bottom navigation text is aligned with the bottom of the bracket while the top of the same text is aligned with the bottom of the logo. At the same time the top of the other links in the header is aligned with the top of the bracket as well as the top of the Logo. Meanwhile the bottom of the link’s text is aligned with the top of the logo text. This scheme of alignments allows the logo to stand alone on its row giving it more weight and focus. The fact that the navigation does not clash with the logo also improves usability as the links fall on their own row which makes them easily noticeable and not overpowered by the size of the logo.
“The grid is a regulatory system that pre–empts the basic formal decisions in the design process. Its preconditions help in the structuring, division and ordering of content. I'm not saying a well–designed grid will solve all of your compositional problems, far from it, but it goes some way to creating a coherent structure in design that in turn creates the aesthetic values all of us are seeking in our designs.”
— MARK BOULTON
Bibliography:
- Target site - http://www.vladstudio.com/home/
- Five simple steps to designing grid systems - http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-designing-grid-systems-part-1 - by Mark Boulton
- A practical guide to designing for the web - http://designingfortheweb.co.uk/book/index.php - Mark Boulton
- Grid-based web design, simplified - http://designinformer.smashingmagazine.com/2010/04/29/grid-based-web-design-simplified/ - by Chris Brauckmuller
- Grid (page layout) - http://en.wikipedia.org/wiki/Grid_(page_layout)
- Designing for the Web: Templates and Grid Systems - http://designfestival.com/designing-for-the-web-templates-and-grid-systems/ - by Felix Mak