How are grids used in web design?

Introduction

Grid systems are used to logically structure layout in print or on screen. By aligning the different visual elements of a design in a deliberate way, the designer achieves improved clarity and credibility in her design (Müller–Brockmann, 1981). Grids have been used in architecture and book design for thousands of years, but there is some controversy as to whether they are as relevant for web design. This essay will first look at different types of grids, then explain how grids are constructed, continue to look at the benefits of using a grid as well as some of the criticisms that have been leveraged against grids in web design. Concluding the discussion we will see that a grid can be a helpful guide and facilitator of creativity.

Single–column or hierarchical grid

The simplest form of grid. Text and images flow in a single column which stretches between the page margins. Single column grids work well for simple content, like blogs, but it is also often the only viable option for a smart phone or small tablet layout. The vertical rhythm is defined by type sizes and leading.

New Adventures 2013, single column layout | design by Simon Collison

Multi–column grid

A grid that is made up of multiple columns. Text and images can span one or multiple columns. Where the hierarchy of the content becomes more complex, for example requiring side notes or multiple images, a multi–column grid might be more suitable than a single column grid.

New Adventures 2013, multi-column layout | design by Simon Collison

Multiple columns also allow for more interesting designs, for example leaving one column empty.

The number of columns also makes a difference: grids with an odd number of columns create more tension than those with an even number of columns (Boulton, 2011). Designers and architects have taken advantage of this effect for millennia and as a result the spaces between columns (intercolumniations) of classic Greek temples are always 5x11 (NB: The which would represent the columns of our layout grid) (Wikipedia.

National Gallery, London | © Sibylle Weber 2013

Modular grid

The modular grid consists of multiple modules of equal width and height. Text and images either fill single or multiple modules.

Modular grid | © Ellen Lupton

This is almost impossible to achieve on the web as vertical alignment of elements is extremely difficult for various reasons, one of them being that the browser does not know the x–height of a character as it varies from typeface to typeface (Boulton, 2011). Line–height in CSS is not calculated from the baseline, but by drawing a box around a character and adding padding to the top and bottom of it (W3C, 16 June 2011). This is also known as the 'em square' (derived from the size of the character block of the letter M in movable type).

em square | source: Wikipedia

Baseline grid

In a baseline grid the type of one column is aligned with the type in another column. For the same reasons as the modular grid, a baseline grid is very difficult to achieve on the web (a modular grid is really a type of baseline grid). As Jason Santa–Maria points out (19 October 2012) it might not even be desirable as the effectiveness of a baseline grid depends on the screen width and other elements, which can change anytime on the web.

Baseline grid | © Ellen Lupton 2009

Construction of a grid

In print design the construction of a grid starts with the margins of a page. As there are no fixed margins on the web and screen sizes vary, Mark Boulton (2011) recommends to start with a 'knowable fixed content size'. This could be ad sizes or legacy artwork or videos. If there are no fixed content sizes we can make some up, e.g. by choosing the best width i.e. for an illustration or picture. The important factor is that the grid must be related to the content in some way. This creates a connectedness across the design that is reassuring for the site visitor as well as pleasing to the eye. Approaches like the 960–grid are useful for fixed width designs that have to fit a 300px ad unit in one column. With an added 10px margin on either side we can create a simple three–column design with a total width of 960px. However, where there is no such connection between grid and content other dimensions might be better, especially because it is an opportunity to differentiate the design from other websites. The approach should always be to design 'from the content out' rather than trying to shoehorn content into a 'bucket' (Boulton, 2011).

Another determining factor in the construction of a grid is the typographic hierarchy and the size of the body type. The latter will inform the line length, which should be 7–10 words depending on reading distance (approximately 30–35cm for print). Slightly shorter line lengths (5—7 words) may apply to mobile phones because they are held a little closer than book. Desktops will be at the upper end of around 10 words per line as the reader is further from the screen, however, in most cases this will also require them to adjust their type size so that the word count per line would not vary too much.

The size of the body type should always allow for optimal legibility and may vary depending on screen size. There should also be a clear contrast between between headlines and body type, or between different kinds of headers. This can be achieved through size, position, weight or style. If a header is positioned several lines above the body text, there is less need for additional differentiation. If, however, the header is placed directly above the body copy or very close to it, the hierarchy should be further emphasized through font size, weight or style.

From type size and line length (measure) we can then infer a suitable leading (the distance between the baseline of a line of text and the baseline of the following line). This must not be too narrow, as the eye would constantly be distracted by the next line in its field of view, nor must it be too wide as that would make it more difficult for the eye to connect the end of one line with the beginning of the next while moving down the page (Müller–Brockmann, 1981). The longer the measure, the more leading will be needed (Bringhurst, 1992) the narrower the measure, the less leading is needed.

Benefits

Man has always been driven to create order out of chaos to understand and manage the world around us. Grids are used in land administration, mapping, architecture, graphic design.

As we have become familiar with grid patterns we use them instinctively. The presence of a grid in a design may not always be noticed, but its absence usually is. Even a slight disorderliness, when compared to a more rigorous layout, can be perceived as less professional and less trustworthy with potentially negative consequences for the business or brand. This is especially true for brands or businesses who we entrust our health and safety to like doctors, therapists, accountants, lawyers, restaurants, grocery stores or airlines.

A grid reduces chaos and creates order on a page. It has been scientifically proven that an orderly layout not only increases reading speed but also improves understanding and retention (Müller–Brockmann, 1981). Similarity of shape, scale, pattern creates consistency and connectedness across multiple pages or even multiple communication platforms like print or signage. This not only leads to a stronger brand identity but it is also easier for people to navigate a website when there are repeating patterns. This becomes especially significant for people with learning disabilities, which makes a website built on a systematic, logical grid potentially more accessible than one that uses arbitrary measures.

Especially on the web, people are grateful for sites that are easy to use and navigate. They are either searching for information or want to accomplish a task, and want to do so quickly. A grid based design helps find things more quickly, which adds to the overall usability of a website.

Furthermore, a grid can enhance the aesthetics of a website. By using the rules of composition to lay out page elements using the golden ratio or the rule of thirds, the designer can add interest and tension to a design, and relating elements to each other in size adds to the perceived harmony of a design. In turn, aesthetically pleasing products are often perceived as better working than less aesthetic products (Aesthetic–Usability–Effect, Lidwell et al.,2003), and users may tolerate possible design flaws much more readily.

How does the layout add credibility?

Grid layouts add credibility to a design through their systematic and logical ordering of elements.

There are several established design principles (Lidwell et al.,2003) that confirm this. The principle of alignment states that aligning elements of a design to each other creates relationships between these elements, which in turn leads the design to be perceived as more stable.

This is further supported by Gestalt Theory which acknowledges that elements that are grouped close to each other are perceived as belonging together or having common properties.

Fogg et al. (2003, in David & Glore, 2010) found that "over 45% of consumers made judgments about the credibility of websites based on the site design, 'including layout, typography, font size, and color scheme (p. 5).'"

What structure is used to enhance brand image and identity?

The choice of grid would depend on what kind of brand one is designing for. Financial services and law firms would be better represented with a stricter grid (Vinh, 2011) and quiet overall design. The creative industries on the other hand or website aimed at young people may benefit from a more dynamic grid. Whichever approach is chosen, the grid needs to be consistent across all collateral and corporate communication: letter heads, brochures, websites, annual reports, etc.

Criticism

Designers who are critical about working with grids often state that they find them restrictive and that they feel they limit their creativity. These designers often like to work with many columns, similar to the 31 columns used on the BBC website. However, while this is indeed a very flexible grid, there is also much more opportunity for disconnect between individual pages (Boulton, 2011). The point of a grid is, after all, to impose constraints in order to give the designer a point to start. Nothing is worse than a blank canvas. On the other hand we must not start using grids mindlessly by using the same measures over an over and filling them in with content.

A very real problem is how to change a grid in responsive design. In a 2011 article for 24–ways Andy Clarke recommends to adjust the percentage widths at such breakpoints that the overall proportions and visual hierarchy between the elements and the viewport is kept intact.

Another issue with changing relationships in responsive layouts arises when we are dealing with fixed width elements like ads. Here, the relationships between the ad and the other page elements have to change and it is up to the designer to find a suitable grid for each breakpoint.

Conclusion

A grid can help us make decisions about visual hierarchy and measures that would otherwise be arbitrary are might lead to disconnected designs. As a minimum, there should always be a vertical hierarchy based on the type size. For single column layouts this might be all we need but as soon as there is more than one column I have found that deliberate relationships between horizontal widths of elements add to the beauty of a design. We should, however, not feel restricted by it—it is alright to break content out of the grid when needed.

For those designers who are put off by the maths involved in creating grids there are several CSS grid frameworks available that produce the required calculations at the press of a button.

References