So How Are Grids Used In Web Design?
Essay
What are grids?
A grid breaks space or time into regular units. (Ellen Lupton). Grids are “...sets of intersecting lines that help the designer decide where to put things, but that generally no-one else sees.” (Lucienne Roberts -Grids – Creative Solutions for Graphic Designers 2nd Edition, RotoVisionSa 2011) In web design, a grid is a series of intersecting horizontal and vertical lines that serve as guides to place elements in a design – a system for creating order amongst elements in a website. http://www.awwwards.com/30-grid-based-websites.html Ellen Lupton, in her book Thinking with Type, says grids are “all about control. They establish a system for arranging content within the space of page, screen or built environment...an effective grid is not a rigid formula but a flexible and resilient structure, a skeleton that moves in concert with the muscular mass of information.” Grids have evolved from man's desire to find order in the world, by using mathematics and logic.
How did their use develop?
Pythagoras is said to have been the first to recognise the Golden Ratio (Phi, 1.61803), which appears frequently in geometry, and also in nature.
fig 1. The sum of the ‘Golden Ratio’
fig 2. The Golden Ratios logarithmic spiral or golden spiral
Artists and architects have used it since this time as it is said to be aesthetically pleasing. It is also sometimes referred to as the Divine Proportion. Leading from this, a rougher guide of the “rule of thirds” is often used by artists, photographers and graphic designers. This takes a grid of three columns of equal width and three rows of equal height and says that where these intersect it creates four focal points, where most interest is naturally directed.
Fig 3. The ‘Rule of Thirds’
Fig 4. The ‘Rule of Thirds’ with a covering an image
In the twentieth century, a new inspiration for design developed, away from nature and towards a beauty inspired from the standardisation and order of industrialised machinery. This modernist approach started in mainly in Germany and then moved to Switzerland, where graphic designers built a design methodology around the typographic grid. It was then that the term “grid” became commonly used for page layout.
Why are grids used in web design?
Although the use of grids in web design arose from their use in typography, they have only become widely used online in the past few years, where they are now becoming increasingly popular. All web pages are based on grids, whether the designer is conscious of this or not, because digital work is comprised of pixels and as such will conform to a set width and height, also producing artistic effects visually with spacing and distance between points. http://www.webdesignerdepot.com/2011/03/web-culture-grid-based-layout-designs/. Grids first became popular when Adobe Photoshop was used by web designers to create a layout, but now there are many frameworks available, with the 960 Grid System (960gs) being probably the best known. Designing a web page is like organising a set of boxes which need to be properly spaced and this is where grids help to keep things aligned and visually pleasing.
What are the principles that govern the use of grids in web design?
Khoi Vinh describes three principles of using grids: 1. A grid should focus on problem-solving first and aesthetics second. A grid derives its beauty from how well it resolves its challenges. 2. It is a component of the user experience – a tool to help the user control his experience, but not a tool to impose complete control over the user. 3. The simpler the grid, the more effective it is. The easier it is to use and to explain to others, the greater the benefit that can be gained. (Ordering Disorder – Grid Principles for Web Design).
What are the advantages of using grids in web design?
The first main advantage of using a grid is that it helps to simplify the web design process. The architecture of the site is worked out first, providing a framework of columns and rows, which allow elements to be organised in an orderly way, giving alignment and structure. The site will then also be easier to update in the future. Grids also offer stability and consistency to the design and make it easier for designers and developers to work together. The second huge advantage of grids is that they can help to give a clean, modern and appealing look to a site, and are particularly useful in content-rich sites, where a lot of information can still be presented in an organised and attractive way. A third advantage is that they help to draw attention to specific areas of information, leading to better engagement by the user and easier navigation. Grids also help the design to feature the most important content without the user having to scroll down the page. But the grid is not primarily a visual design tool, it's a user experience aid – like lanes on a street, says Matthew Smith. (.net/august 2011). A good grid establishes a rhythm of viewing a website, which guides the user effortlessly through, because of the order and organisation of the information presented. Grids are very flexible in their use, accommodating most needs and constraints of the design. Advertising is often an important constraint within the web design, since the sizes of advertisement will be a “given” and have been largely standardised by the IAB (Internet Advertising Bureau). The grid can help to display advertisements in a way that makes them visible but does not overshadow the “real” content. The flexibility of grids also means that they can help to overcome the problems of designing for viewing on a variety of different devices e.g. smartphone, tablet, laptop or desktop – responsive websites.
Are their any negatives in their use?
Using grids in web design can have some disadvantages and possible problems and may not be appropriate in every situation. Firstly, they are not as useful for sites with less content – the effort will not be worthwhile, as there are fewer advantages to be gained but there could be more complications. Secondly, they can stifle creativity, if they act to contain or restrain too much. This can lead to boredom setting in, for the designer and the end-user! But it is not essential to always keep exactly to the grid layout. “A subtle breaking of the rules can be a great way to draw attention to a detail in your design, and break away from that constrained and boxy look” says Matthew Smith (.net/august2011). EG Apple iMac on www.apple.com. (Fig.5) Mark Boulton has said that grids do not stifle creativity, they “facilitate creativity by providing a framework” (Five simple steps to designing grid systems Part 1). Thirdly, there is a lot to learn about grids in order to make the best use of them and this takes time, patience and skill. Time spent on a design process that doesn't work could be very costly.
Fig 5. Photo from Apple’s website showing that sometimes objects can be chosen to come outside of the grid
Examples of the use of grids in websites
Mind
The first site that I have chosen to present is Mind, the mental health charity, www.mind.org.uk.
Fig 6. The charity Mind’s home page - top section
This site uses a 12-column 960px grid and every page aligns well.
The lilac header-bar at the top of the screen includes a search-bar on the right-hand side and icons, which link to social-media sites, on the left-hand side. They are clearly aligned to other buttons, which are below them on the page. The Mind logo and info-line telephone number are shown in the top left corner, with two CTAs on the top right – I need urgent help/Support Us.
A horizontal blue info bar aligns to the centre of the visible area of screen on the home page, and extends right across the white margins, providing a visual link to the same shade of blue used in the Mind logo. The bar is divided in the ratio of 2 to 1, but because the Support Us (A) area to the right has the same blue background, it has the effect of drawing the eye to the margin, creating visual interest.
The Support Us area (A) reinforces the CTA button directly above and the yellow Give Here box promotes consistency. “Become a member” is featured here too, again with a yellow CTA box, urging us to Join Mind. The three yellow CTA buttons align on the right-hand side.
The left hand side is used to show a series of four photos of people, with descriptions, which continually change and add further interest. Two emphasise the mission that no-one should have to face a mental health problem alone (one of which also links to fund-raising, in the form of sky-diving); one draws attention to the 50+ training courses offered by Mind and one highlights the TV advert. This presents clearly what the brand Mind is about and what it stands for.
Underneath the bar, the site is divided into 6:3:3, for “How can we help you?/News/Blog.” (B) The left hand section uses the blue colour again for the words, with a wavy blue line, (C) rather like a stretched-out version of the Mind logo, to draw the eye down the site.
Fig 7. The lower section of the home page of Mind
The site is then divided into three equal sections, using three coloured boxes (D) – with the same colours of blue, yellow and lilac used throughout the site. Typography in these three boxes does not fully align horizontally, as headings vary in size, but I feel this adds visual interest because it is consistent with their theme of the hand-drawn and written areas. It also helps to create an informal user-friendly look. The footer at the bottom of the page is also solid blue, mirroring the blue bar above. There is a lot of content within the site, particularly in the A-Z of Mental Health section, which is a vast resource, but this is well ordered and organised, again using grids to present the information in a clear manner. The grid layout gives a good sense or order, which could be particularly important for users who may be feeling unwell and not thinking as clearly as usual. The flow and rhythm of the information promotes a feeling of harmony and reassurance. Information is organised logically and is easy to find. CTAs are highlighted by position and the use of yellow.SANE
Fig 8. The charity SANE’s home-page
The second charity website I have examined is that of SANE, www.sane.org.uk, which is also concerned with mental heath issues. This site does not appear to use a grid. The Sane site uses a lot of blue, as does Mind, which is also one of the two colours used in the Sane logo, again shown in the top left hand corner, as with Mind. The header features a blue sky with a few clouds and the top right-hand corner is used as a log-in and search area, with white buttons. Clearly, being able to log-in and have a personalised experience is important to this charity. “Your stories” are an important element of the site and these can be accessed from the home page or from the “how you can help” button on the top menu on the home page. (A) The blue edges of the header run into the margin on the right, giving the look of ribbons, with a wave-like movement and adding visual interest. Beneath the header, on the left and to the centre, the SANE Black Dog Campaign is prominently featured, but you cannot click on this area for more information and it is not explained. The box, which gives full details, is actually below the fold on the right. The black dog represents the “black dog of depression”, but I do not think this is necessarily obvious to a new user. The SANE website has its four CTAs on the right hand side of the home page- Need help now/Learn/Help/Donate but the arrangement and colours do not make them stand out in the same way as on the Mind site. (B) The various boxes on the home page do not align properly and so the overall impression is not of the same order that is created on the Mind website. (C)
Fig 9. SANE’s What We Do page
Following links onto the various other pages, there is a blue menu bar used on the left hand side of every page except the home page. This helps to provide continuity throughout the site, although it is not the same width as the columns on the home page. On these pages, boxes are used to show choices for the user but these are duplicated on the side menu bar, which is unnecessary and confusing. Other than on the home page, CTAs are on the left hand side under the blue menu bar, below the fold, and again are not well highlighted. Page titles are off-centre, to the right and in the same shade of blue used throughout, so they are not as visible as they could be although they harmonise with the overall look of the site. (D) The telephone number and contact information are not well shown on the home page – surprising for a charity, which operates a helpline for people with mental health concerns. The registered address and telephone number are both shown at the foot of the home page and are the actual address and number, although this would not always be the case. However there is a 0845 helpline number, which is only displayed from the home page when you click on the CTA “ Need Help Now?” button or on “contact” in the top right-hand corner. (E)
Fig 10. Under ‘Contact’ the website shows two phone numbers for SANE
The website is fairly well organised, keeping the detailed information hidden until the users make their choices through the website, to avoid overwhelming them and to ensure information given is relevant to their needs. Navigation is straightforward, the visual hierarchy has logic and the site displays an obvious personality and identity. However, because grids do not appear to have been used, the overall look of the site is not as tidy and well ordered as it could have been and it lacks some continuity. Margins and borders vary in size and CTAs are not always obvious and well highlighted. SANE is a far smaller charity than Mind and probably has a much smaller budget to invest in website design, so overall the SANE website achieves its aims, but some small changes could help to improve it and give a more professional look. This could help to further increase confidence in the charity versus its big competitors like Mind.Down's Syndrome Association
The third website to examine is http://www. downs-syndrome.org.uk. This has been constructed using a 960px grid with 16 columns.
Fig 11. The ‘Down's Syndrome Association’ website home page
The logo is once again featured in the top left corner and the green colour from the logo is used as the main colour of the website, to build brand identity and a cohesive appearance. The contact telephone number is prominently displayed in the top right corner with a search facility, which is also aligned with other items down the side. I do feel that the social-media links on the bar above the navigation-bar are a bit outdated, as they are rectangular and not square-shaped. Beneath this, a green menu bar features a “Donate” button highlighted in a pale green colour (A). A even lighter shade of green could have made this still more prominent. Underneath is a slider bar which fills the full width of the site, with continually changing pictures, which adds visual interest and impact. It gives four menu choices - a book for sale/book a study day/education resources/fundraising and events. (B) Below, the page is divided into three columns (in the ratio 5:8:3) with a menu-bar on the left, colour coded into two sections – one to indicate geographical splits (green) and one for category of user (grey). (C) On the right are additional menu choices in green for e.g. work issues, football, theatre and museum. (D) In the central wider column, the first area leads to About Us, followed by a selection of links to news items and links to blogs. Clicking on any items from the top menu results in a smaller light-green sub-menu appearing on the left, above the previous menu, which is shifted down.(E)
Fig 12. Under the ‘Information’ page showing that there is a second menu
The right hand column always starts with the title, written next to a photograph of a child. This adds visual interest and continuity, which is carried right through the site, except for the Shop page. (F) The main top menu bar is retained throughout, with the donate CTA always visible, plus the logo and telephone number. The site is well aligned, organised, and easy to navigate and contains a great deal of information, which does not overload individual pages. This all helps to reinforce trust in the brand and in the knowledge and strength of the charity. It is very straightforward for users to identify and navigate the sections that will be relevant to them.
Other issues
When the Internet was first developed in the 1990s, it was envisaged as a series of pages, similar in appearance to the printed page. However, the big difference is that on the Internet, the end result can appear different to different end-users, depending on, for example, the size of monitor, web browser, user settings, number of pixels etc. In addition, with the development of the personal computer, the Internet became “conversational” so that the user can interact with the medium in a way that one cannot interact with the printed page in a book or magazine. So web design now has to be responsive to designs that can present all the important information in a way that can be read on any kind of device or screen size. One way of dealing with this is to use fluid grids rather than fixed grids. Fluid grids measure the design in percentages or proportions rather than in fixed numbers of pixels. These have the advantage of creating a similar amount of white space, regardless of the viewing medium, except on very large screens and also the user tends to need the horizontal scroll less. However, it is harder for the designer, since it may look fine on his screen resolution but not on others. It may also be harder to incorporate picture and video content.
Conclusions
The case studies of the three charities above illustrate how a well structured and organised website enhances visual impact and ease of navigation. A balanced and consistently implemented design scheme will increase readers' confidence in your site (Web Style Guide). Khoi Vinh describes how the power of the grid “can be so intoxicating, once you… realise that everything can line up and you get this immediate boost to the aesthetic power of your design. It's very compelling.” (www.thecolourmachine.com) “Well designed grid systems can make your designs not only more beautiful and legible, but more usable.” (Mark Boulton). “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.” (Josef Müller-Brockmann). In summary, in all but the most simple of web designs, I recommend their use.
3463 words
Bibliography
Books
Thinking with Type
– Ellen Lupton – Princeton Architectural Press, 2004
Ordering Disorder, Grid Principles for Web Design – Khoi Vinh – New Riders 2011
The Web Designer's 101 Most Important Decisions – Scott Parker – Ilex 2012
Designing with Web Standards, 3rd ed – Jeffrey Zeldman with Ethan Marcotte – New Riders 2010
Grids - Creative Solutions for Graphic designers, 2nd ed. - Lucienne Roberts, RotoVisionSa 2011
Web Style Guide 3rd ed.-Patrick J Lynch and Sarah Horton,Yale University Press 2009
Grid Systems in Graphic Design:A Handbook for Graphic Artists, Typographers and Exhibition Designers-Josef Muller-Brockmann -Niggli Verlag 2008
Magazines
.net magazine - August 2011 - Matthew Smith – Breaking Out
Websites
http://www.downs-syndrome.org.uk
http://www.mind.org.uk
http://www.sane.org.uk/home
http://960.gs/
http://coding.smashingmagazine.com
http://www.awwwards.com/30-grid-based-websites.html
http://www.webdesignerdepot.com/2011/03/web-culture-grid-based-layout-designs/.
http://www.apple.com/uk/
http://960.gs/
http://www.markboulton.co.uk/journal/five-simple-steps-to-designing-grid-systems http://www.thecolourmachine.com