"The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice." (Müller-Brockmann 1961)

Much quoted in any discussion on grids in design, the Swiss graphic designer Josef Müller-Brockmann wrote 'Grid Sytems in Grpahic Design' in 1961. It established him as an authority on the subject.

Contents

1. An explanation
2. The effect of ratios
3. The significance of Grids
4. Case studies:
1. NHS
2. Virgin Care
3. Circle Partnerhsip
5. The future of grids
6. I choose grids
7. A fully referenced pdf

Grids

An explanation

At their most basic level grids are a collection of organised vertical and horizontal lines. They are used for all sorts of things in life from town planning, electrical grids, tabular data and crucially in design. From architecture to print and web design, grids feature heavily as a design tool for organising the layout of content.

"A grid is made up of vertical and horizontal lines and is the foundation of nearly every type of visual media. The structure is there to shape the content into proportions that are pleasing to the eye." (Van Wagner 2003)

Back to contents

The effect of ratios

The vertical and horizontal lines are ordered in a consistent way that provides balance and a clear structure to produce a grid. This structure is determined by ratios. There are rational ratios 1:3, 2:1 (Boulton 2005) and so on and there are irrational ratios , those that can’t be represented as a simple fraction (Wikipedia). The common example in design is the Golden Section, 1:1.168, also known as Phi.

"Using the Golden Section can ensure a natural sense of correct composition, even though it is based in mathematics it will ‘feel’ right." (Boulton 2005)

Back to contents

The significance of grids

Web design is a relatively new design medium; it is in the process of developing its own practices and conventions. Conventions can be incredibly useful as they create a familiarity between the designer and the user, which helps the user process information quickly. Just as television initially borrowed conventions from its closest medium radio (Allsopp 2000); currently much of the theory of how to design for the web is based on borrowed conventions from its closest medium – print. Grids as we think of them today have existed as a means of organising content in print design since World War II (Wikipedia) . That’s not to say that designers weren’t organising content in a similar fashion previously to this, but it was then that the world of graphic design established a common language around the use of grids (Roberts 2008). They give designers a structure to base their designs on. In the article, Thinking Outside the Grid, Molly E. Holzschlag explains that:

"Grid-based design can be extraordinarily useful in creating sites that are predictable, easily navigated, and visually appealing." (Holzchlag 2005)

All of these are incredibly important qualities for creating an enjoyable user experience and therefore heavily contribute to the success of a website. However in an article that revolutionised how designers design for the web, A Dao of Web Design, John Allsop stresses the need for web designers to break free from the constraints of designing for the printed page and to design for the flexibility inherent within websites rather than pixel perfect pages (Allsopp 2000). As the web matures, establishing its very own rules and conventions is being becoming a key part of its development. The influential Mark Boulton believes that grids can be a part of this growth and development. That by providing a frame work, grids, far from being constrictive (as thought by some) actually ‘facilitate creativity' they do this by offering the answer to basic spacing and layout issues (Boulton 2005)’. Having said this, in his book A Practical Guide to Designing for the Web he also discusses the importance of breaking out of the grid.

"Sometimes, it's useful – no, crucial – that we break free of the grid to provide emphasis, importance, visual interest, or increased usability." (Boulton 2009)

While a grid is a great tool for guiding layout and making structural decisions it is important that designers don’t let it limit designs. It is essential that there is a natural flow to a design and part of using a grid is knowing when to break out of it. (Noack 2010)

Until the emergence of CSS, table based layouts limited the structure of many websites to simple grids. The effect was that many websites had a very similar structural layout. With the arrival of CSS and its continued development web designers are now at liberty to create far more unique designs. Whether that is by using grids of varying complexity, throwing grid based design out of the window entirely or just bending the grid a little here and there (Holzschlag 2005). This freedom has resulted in a wealth of beautifully designed websites. Which if the 'Aesthetic Usability Effect' is to be believed is inherently good for user experience. (The 'Aesthetic Usability Effect' is a theory that beautiful things are easier to use.) (Boulton 2005)

Back to contents

Case studies:

To demonstrate how grids are currently used in web design and how useful they can be, we are going to explore a number of health care provider websites; starting with the NHS. This genre of website has been chosen as they tend to contain a large amount of content and therefore require extensive organisation.

NHS:

The homepage of the NHS website built on a 980 px, 12 column grid, is essentially a series of organised blocks laid out in a way that makes them easily digestible. The distinct and obvious headings as well as the consistent two column layout make it easy for the user to scan the page and spot what they are looking for. Thanks to well-thought-out white space, the logo stands out clearly on the page. As a cherished and well-known brand little other branding is needed on the website, however the continued use of the blue offers a comforting consistency to the user. Your eye is then drawn to potentially the most useful item on the page, the search bar. The fact that it is almost six columns wide immediately draws attention and shows its importance. The other key element above the fold is the picture carousel. Attention is drawn to the key messages displayed by the visual interest the photos create. The photo carousel stretches to almost the whole width of the page, giving it visual prominence but it is not too long ensuring that as much information as is feasible is being shared above the fold. The grid has been used to create a balance between the blocks and the picture carousel, guiding the users' eye down the page. The nature of the inter locking blocks varying in length so drastically and consequently the headings feeling so sporadically placed across the page, means the site lacks a vertical rhythm. However as the content on the homepage tends to be in short digestible lists I don't think this interferes with the users' ability to absorb the information displayed. From a user experience perspective what's really lovely about the NHS site is that you can customise the page, so that it feeds in blocks relevant to your age, gender and life style choices. Which given the shear amount of information available on the site can only make it more likely users will discover items relevant to them. In this case the grid appears to have been used as a tool to guide the layout of the main content blocks and navigation; it has not been strictly stuck to for smaller items and links.

Beyond the homepage however is quite another matter. While the inside pages do not apprear to adhere to the grid in the same way, a feeling of disorder is really created by the huge variety of layouts throughout the site. Sometimes there is an options menu on the left - sometimes on the right. Sometimes the main content in on the left - sometimes in the centre and so on. It is also not made clear when you are being taken to another site. It is incredibly confusing and potentially unsettling for the user. The site would benefit from limiting the number of templates it uses for content and sticking to the grid it uses on the homepage. Giving a more consistent layout that makes it easier to naviagate all of the content. Please see example of mix below.

Back to contents

Virgin Care:

Virgin Care is a private health care provider that delivers services on behalf of the NHS to patients. While the website doesn't have to cope with the same levels of content as the NHS it still covers a wide range of topics and contains a lot of information. Built to a fixed-width of 960px and made up of eight columns, a real sense of calm and space is created. It enables your eye to easily scan the page and absorb all of the key information, helped by the limited copy and space around the headings. The predictable proportions across the main content give an air of stability and confidence. The photo carousel that covers the entire width of the page adds a level of visual interest, although the pictures could be more engaging. Some sort of photo montage or carousel on the homepage is now so common in websites it's easy to glide over them if the photos aren't gripping enough. However in this case it means your attention is immediately drawn to the more important choices below. The logo with Virgin written in the brands familiar way pops out of the grid drawing focus and offering brand assurance. It says to the user this might not look like any other Virgin site you have used before but you can trust it because here is our trusty logo. All of these elements contribute to how clean and accessible the website feels to use.

Much of the rest of the website is even more stripped back than the homepage. With just one column of text that takes up a little over half the page. Showing that you don't necessarily need to stick to the same grid layout throughout a site as long as there's consistency; the key is that the information is clear. The luxury of having near empty space on the right continues the sense of clarity that runs through the website by increasing legibility. The strong image chosen for this page continues the idea of 'trustworthiness', however the inclusion of a testimonial would make this even more credible.

Back to contents

Circle Partnership:

Circle is an employee co-owned partnership that provides healthcare services on behalf of the NHS as well as privately. The website is a 960 px, fixed-width website that appears to use a 12 column grid - loosely. The grid often appears to have been used on the left of the page but not the right. That's not to say the layout is lacking a structure but rather than having elements laid out in relation to a grid, or lining up with a grid each, of the six key sections on the homepage appear to be laid out in relation to each other. In terms of written information it is a fairly stripped back homepage which perhaps allows it to be a little more relaxed with the layout than the NHS website. The isolation of the logo draws attention to it, while the circular photos act as a good visual reference to the company name; reaffirming it in the users mind. The visual hierarchy draws you to these photos over the options in the navigation bar but I would question whether the chosen items display the most useful information on the page. The accessibility information appears to have been arbitrarily lined up with an item below it, giving the impression that it is floating in space. Use of a grid may have given it a more 'natural' place to land.

As with all of the sites explored here the chosen font stack is Arial, Helvetica, sans-serif. This is a safe choice for ensuring wide accessibility and also offers a common familiarity to users. However the font size chosen for the bulk of copy on the inner pages is quite hard to read and the line height makes it feel cramped. While the key elements are well spaced on the homepage giving it a feeling of balance, the content on the inner pages can feel squashed affecting legibility and diminishing the user experience. As well as creating a sense the amateur. In terms of copy nothing is emphasised enough to really gain interest. The website suffers from not having a strong call to action; it shares information but does not offer a clear set of steps as to what to do with it. The professionalism of the homepage isn't consistently followed through to the rest of the website.

For all of the books and articles there are on grids in web design it is very difficult if not impossible to find anyone who is openly against using them in at least some form. It is therefore surprizing how loosely the grid is used across this sample of websites. While none of them are ‘bad’ designs it would be interesting to see what fixes a better adherence to the grid could provide.

Back to contents

The future of grids

With the huge growth in recent years in the number and variety of devices being used to explore the web, a debate has been sparked in the world of web design; what is the best way to design for them all? Should we still be designing for fixed-width but with breakpoints or for mobile first or responsive sites? While many designers have their own preferences and philosophies around these questions, as an industry we are still at a relatively early stage in developing the answer. Therefore at the moment the answer is still project specific.

If we take it as given for a moment that we want to design to a grid based layout; we then have to consider the particular problems posed by each of the offered solutions to designing for multiple platforms and devices. As CSS developed but designers still longed for the safety of the grid numerous tools also developed to help with fixed-width grid based design. This is mostly made up of those that enable a grid to be laid over a design or for a background image to be placed under the design for reference (Examples include 960.gs, gridpak.com, puidokas.com/portfolio/gridfox). Fixed-width design essentially means designing for the most common desktop screen size/ resolution being used at that time. It enables web designers to design in Photoshop and recreate near pixel perfect designs in the browser. This approach ignores alternative devices that may be being used and was a completely reasonable approach until quite recently. While designing to a fixed-width grid in the browser isn’t quite as simple as designing to one in Photoshop, by virtue of it being a constant width it is relatively easy to create.

Moving on from fixed-width grid systems, a couple of key approaches have generally been adopted to address the fact that there are now a huge number of different sized devices that people use to browse websites. They essentially boil down to designing several 'adaptive' grids that match the most common sized devices. Then at 'breakpoints' that relate to these sizes an adapted design is delivered to the user. Alternatively a fluid or responsive design is delivered by using flexible measurements i.e. percentages or ems. The size of something is decided in relation to the size of elements that are dictated by the browser or device being used. For example max-width or font-size; as well as by their relative size to other elements on the page. Ratios are then used to determine the percentage or ems used.(Marcotte 2009). This approach then begs the question, how do I combine grid based layouts with responsive design? One approach suggested by Ethan Marcotte who now famously coined the phrase 'responsive design’ (Marcotte 2010) is to create a fluid grid (Marcotte 2009). Take your fixed-width design and using the formula target ÷ context = result for ems or target ÷ context × 100 = result for percentages and you can convert a fixed-width grid based design into a fluid grid layout. Andy Clarke however argues that the danger with this approach is that as designs are pulled apart by larger screens they can begin to feel ‘disconnected’ (Clarke 2011), the hierarchy of content can be interrupted and therefore misinterpreted. Therefore, however loosely, breakpoints do need to be taken into consideration at some point to ensure the ‘connectedness’ of the design regardless of the device being used to view it. He goes on to argue that rather than follow a formula that allows designers to cling to fixed-width design, in fact we should be designing in the browser. This does not however mean that we have to chuck out the grid. There are several frameworks that can be copied and included in the CSS (Sannta Maria 2008) and of course there are the browser based overlays mentioned earlier.

Back to contents

I choose grids

Or at least I do in theory. Personally I like things to feel ordered and organised, whether that's my in-tray or a website and I think grids can be incredibly helpful when it comes to instilling order! I don't come from a design background and for me grids act as a bit of a comfort blanket. That's not to say that I think a design should be bound to the grid; it's important to feel free to break away from the grid but it's a really useful starting point. As long as care is taken to create the grid with appropriate spacing it can help create a beautiful rhythm and rational to a website guiding the flow of content and ultimately enhancing the user experience. Or at least it can when somebody else is doing it. At this early stage in my design career I feel confident designing to a grid in Photoshop but struggle in the browser, particularly as I back the move to responsive websites. Hopefully a little more practice is all that is needed. For all the debates and discussions, grids are just a tool - but potentially a very useful one.

Back to contents

A fully referenced pdf of this essay