Grid Systems

Introduction

I will in this essay be discussing Grid systems, explaining what they are and how they are used, its history and endeavouring to explain how Grid systems are used to achieve the following:

I will also focus part of the essay on the use of grid systems in ecommerce websites and conclude the essay with an overview and justification for the reasons why I recommend the use of grid systems in designs.

What is the grid system

The grid system is a method for aligning elements on a page on screen.  It is a way of organising information by aligning content using evenly sizes and evenly spaced rows and columns as guides, .  In combination with rows and columns, grid systems also use margins, padding and gutters for deliberately constructed white space. (Miller, 2011: 63).  Grid systems since the 1940s have been one of the most significant developments in contemporary graphic design.  Grid systems introduce a systematic order to a layout and ease a user’s navigation through them.  (Samara, 2005)

Historically, the use of Grid systems became increasingly popular since the late 1940s, after World War 2 and led to a movement known as the Swiss Grid Style that consisted of Swiss designers, such as Armin Hofmann, Josef Müller Brockmann, Max Bill, Richard P Lohse, Hans Neuberg, and Carlo Vivarelli.  They first started experimenting with typography and photo montage. They were philosophical in their nature, and developed a framework of thought with regards to design.  Their philosophical tenets included:

These pioneering graphic artists led the way and established many of the foundations of how print media was to be laid out.  It is now their guiding principles that have found their way into web design. Grid systems lie at the heart of most modern web designs. In the last couple of years there has been some type renaissance on the web with relation to Grid systems.  Some of the leading proponents of the use of grid systems are Mark Boulton.  According to Mark Boulton, a “Grid design is a fundamental skill of any designer.  Understanding proportional relationships, white space and composition are all vital in constructing a grid for any delivery platform – web, print & real 3d environments”

With reference to design, the use of white space, sometimes known as negative space is as important to good design as much as the content.  It creates page balance and separates content into identifiable areas, making it easier to follow and read.  The use of white space should be used effectively to help guide users through content, help separate content and create a visual balance, which in turns positively affects understanding and interpretation of the design and page content.

It uses a column based approach to give order to a page and through the use of alignment a person can be led through a design.  Using Grid system elements positioned in the rows and columns of a grid make explicit the relatedness of information.  Elements aligned with one or more elements “creates a sense of unity and cohesion, which contributes to the design’s overall aesthetic and perceived stability” (Lidwell and Butler, 2000: 23)

As stated previously, Grid systems use a combination of margins, guides, gutters, rows and columns. The goal of grid systems is to create a design that provides consistency and predictability, essential attributes of a well-designed information system. “Grids not only organise the elements of a design, they organise the space within a design.” (Miller, 2011: 70).  In the book called Above the fold, Brian Miller states that “space is essential for creating relationships that form systems that lead to hierarchy”.  Grid systems help the organisation of space which creates a “natural hierarchy or sequence of importance by either ralting or separating elements” (Miller, 2011: 60-67)

Khoi Vinh, in his book called Ordering Disorder: Grids for Web Design stated the following benefits of grid systems in web design (Vinh, 2011: 11):

The Golden ratio and Rule of thirds

The golden ratio stems from a theory based on century old.  This ratio is claimed to be found in nature and in some of the most beautifully designed paintings and buildings found.  It is also claimed that the Pyramid are based on the golden ratio.  The golden ratio is a geometric ratio discovered by the Greeks which found that in nature there is a ratio; this ratio is 1. 61803398875. The Golden ratio is also known as the divine proportions is a number found when studying ratios of geometric figures, e.g. pentagon, pentagram, decagon, dodecahedron.  The Greek letter “Ø” is often used to denote the golden ratio.  Phidias, a Greek sculptor is often cited as the originator of the golden ratio, because his works often demonstrate the golden ratio.

Early history of grid systems was based on the golden ratio.  Another system used for layout out compositions is called the rule of thirds and is related to the golden ratio.

The rule of thirds according to Wikipedia is explained as: “The rule states that an image should be imagined as divided into nine equal parts by two equally-spaced horizontal lines and two equally-spaced vertical lines, and that important compositional elements should be placed along these lines or their intersections. Proponents of the technique claim that aligning a subject with these points creates more tension, energy and interest in the composition than simply centering the subject would.”  (Wikipedia, n.d.)

The rule of thirds can be considered the lazy way of applying the golden ratio to a design.  Using the golden ratio or the rule of thirds a designer in conjunction with the grid system can create a design that is not only functional but also aesthetically pleasing or beautiful. The Math is less complicated and used widely in photography and composition.

Grid systems and web design

As originally stated grid systems have been an established tool for use in print design.  It has long been used in laying out newspaper column layouts and magazines.   Architecture and even cities have been built using a grid system. 

In the last couple of years, grid systems have become increasingly popular in the design of webpages.  As stated, Grid systems have found their way to web design through print media.   The aim is to use to replicate the systematic way that information is arranged in print.

Grid systems in web design have spawned a number of CSS frameworks.  These CSS frameworks are designed to simplify the creation of webpages based on a grid system.  The 960.gs is one of the more popular Grid system CSS frameworks.  A number of popular websites have been created using the framework.  Some of the exemplars are good examples on how using a grid system can produce aesthetically beautiful websites.

In design the grid system is an important tool in creating “order out of chaos”.  Grids are used to present content in a consistent and predictable manner, helping to organise content in a methodical fashion. It affords conformity and uniformity, increasing the usability of any given system, by placing items and information in a predictable manner, reducing the cognitive overload of users. “According to the principles of consistency, systems are more useable and learnable when similar parts are expressed in similar ways, learn new things quickly, and focus attention on the relevant aspects of a task” (Lidwell, Holden and Butler, 2010: 24)

The grid system helps organise and structure content in a systematic and logical manner, helping teams work and design collaboratively in a consistent and uniform manner.  “Grids make it easier to add new content to a website in a manner consistent with the overall vision of the original website.”  (Ordering Disorder pg 11) Grids can also be a cost effective way of designing as designs can be reused and content placed in a simple and effective manner, without having to rethink the design.

Its inherent organization properties and aesthetic guidelines have helped many designers to streamline their sites and simplify their design process (Banas, 2011)

How are grids used to present content? How does the visual balance affect understanding and interpretation?

A user needs to be able to access information quickly and efficiently.  According to research conducted on how users read on the web, most notably Jacob Neilson, (Nielsen, 1997).  It is found that users scan webpages, and it is an imperative need for users to read and understand a webpage quickly.  The use of grid systems can aid in this endeavour to meet these stated goals.  In combination with established design principles of contrast, colour, proximity a grid systems enables pages to be understood and interpreted quickly and efficiently.  The user should be able to anticipate where information is to be found and recognise the placement of elements on a webpage.
Varying contrast between elements leads not only to an interesting page, but also creates a visual hierarchy such that the most important elements are the ones that stand out on first read—the first impression users get of a page.

Layout and credibility

According to research conducted by the Standard Web Credibility Project found that people quickly evaluate a website by visual design alone.  The visual design includes layout, typography, images and consistency issues.  (Lab, 2002)The grid system enhances a layout affording it consistency with the different elements found on the website. 

The use of Grid systems in ecommerce

The Black Estate Vineyard Website

The Black Estate Vineyard website, which has won many accolades, is based on the 960.gs grid system.  The designer based the design on a 12 column grid system.   In combination with other design principles the designer has managed to create a visually beautiful design that is both aesthetically beautiful and functional.  Grid systems, alone will not create an aesthetically beautiful design.  It is thorough the combination of well-established design techniques and principles can one create a beautiful site that is both organised and aesthetically pleasing.  The Wine website, through the use of typography, layout and images, has managed to create a visual hierarchy, guiding the user to the next element. As stated previously, the design has used the grid system, a 12 column grid system to great effect, leading the user's eye to follow the information in an orderly flow. This flow and direction of information has been complimented with the use of contrast, imagery and typograpghy.

John Lewis Website

Another website I believe has used the grid system rather well is the John Lewis website.

John Lewis Website

John Lewis’s Website, according to Webcridible’s latest ranking of the top 20 high street retailers according to usability, has overtaken some of its competitors Marks & Spencer and WHSmith.  John Lewis was the only website that has consistently remained in the top 5 since 2006.

John Lewis Products

John Lewis’s website like most ecommerce websites is found to use a grid system for their layout. The use of a grid system in ecommerce to display products and position the different elements normally found on ecommerce websites naturally lends itself well to the use of grid systems.  The grid systems in ecommerce websites allows products to be displayed in a structured manner, permitting large amounts of information to be organised in a visually appealing manner.  Products and Information on most websites need to be scannable and chunkable.  A grid system, with its inherent white space can effectively guide the user through the different products of information.  Grids help in the aid of information and increase the chances of information being found quickly and efficiently.   According to research conducted using the latest heat scanning technology, and studying people’s eye movement it has been found that users make an “F-shaped pattern” when scanning a website, and especially while scanning product pages.  It is vital that ecommerce websites and any other website for that matter strive to display information in a relatively “simple, uncluttered, coherent and organised” manner.

Conclusion:

There are of course critics of the grid system.  Some accuse it of stifling individual creativity and designs created using the grid system are dull, common and lack any character and individuality that designers strive for.  Grids also tend to work best when there is a lot of content to work on and sites with little content may not benefits for using a grid system.  Also, Grid systems were originally developed for fixed dimension mediums; newspapers, magazines, etc.  Today, due to the ubiquitous nature and use of mobile phones and increasingly use of tablets, web designers have found themselves designing for a medium that has no fixed dimensions, and by their nature grid systems are designed for fixed dimension.  There are a number of growing CSS Grid system frameworks that are now dealing with these issues and now there are a number of growing frameworks that deal with fluid grid systems, designed for responsive and fluid designs.

Using a grid system can be a good design tool to bring logical structure to a design.  It can guide the varying elements but knowing when to break out of the grid can bring an element of creativity and individualism.  One should use a grid system as a guide and not feel constrained by it, a visual and organisational guide.  Grid systems can help beginners organise content on a webpage and grids can be a great start to organise a page into a structured and logical page. “Along with typography, they determine the visual organisation of information” (Adam et al., 2007) once a designer uses this as a basic guide, then a designer can choose if he or she would feel the need to break out of the grid or the design benefits from following adhering to its structure.  The Grid system with regards to web design, as with many things in design, should not be blindly followed, but used as guideline. 

In terms of increasing confidence it is stated that a grid system is “A balanced and consistently implemented design scheme will increase users’ confidence in your site” (Lynch and Horton, 2009)

The benefits of working with a grid are simple: clarity, efficiency, economy, and continuity.  (Samara, 2005)

Used in combination with other established design principles, a grid system is a powerful tool in the designer’s arsenal.  For example, varying the contrast between elements leads not only to an interesting page, but also creates a visual hierarchy such that the most important elements are the ones that stand out on first read—the first impression users get of a page.

As with most things in life, it is not a case of black or white, yes or no, on or off.  Grid systems can be a very useful tool for aiding and improving a design, simplifying the positioning of elements on a page in a methodical and orderly manner but a designer should not feel constrained by the use of the grid.  A designer should feel free to “break out of the grid” if they feel the need to.  A worrying aspect of some designers is the overuse and complete reliance of grid systems will result in designs having the same look and feel, lacking in any personality and character.  Some designs from my research are crying out for the use of grid systems, because they lack any organisation and structure, whereas some other designs feel they have been imprisoned in some type of grid prison, crying out for freedom and release. 


 

Bibliography

Adam, C., Boulton, M., Clarke, A., Collision, S. and Croft, J. (2007) Web Standards Creativity, New York: An Ampress Compnay.
Banas, T. (2011) The Advantages and Disadvantages of Using Grid Systems in Web Design, 3rd June , [Online], Available: http://planmysite.com/blog/the-advantages-and-disadvantages-of-using-grid-systems-in-web-design [Monday January 2013].
Chapter 42; The Swiss Grid System -- and the Dutch Total Grid, [Online], Available: http://guity-novin.blogspot.co.uk/2011/07/chapter-42-swiss-grade-style-and-dutch.html [Saturday January 2013].
Lab, S.P.T. (2002) The Web Credibility Project: Guidelines, June, [Online], Available: http://credibility.stanford.edu/guidelines/index.html [Friday January 2013].
Lidwell, W. and Butler, J. (2000) Universal Principals of Design, London: Routledge.
Lidwell, W., Holden, K. and Butler, J. (2010) Universal Principles of Design, Rockport; Revised edition.
Lynch, P.J. and Horton, S. (2009) Web Style Guide: Basic Design Principles for Creating Web Sites, 3rd edition, Yale University Press.
Miller, B. (2011) Above the Fold, Ohio: HOW Books.
Nielsen, J. (1997) how-users-read-on-the-web, 1 October, [Online], Available: http://www.nngroup.com/articles/how-users-read-on-the-web/ [7 January 2013].
Samara, T. (2005) Making and Breaking the Grid, Rockport Publishers.
Vinh, K. (2011) Ordering Disorder: Grid Priciples for Web Design, California: Pearson Education.
Wikipedia Rule of thirds, [Online], Available: http://en.wikipedia.org/wiki/Rule_of_thirds [January 2013].