The Grid System

 Uncategorized  Comments Off on The Grid System
Feb 202013
 

The Grid

Introduction

Design is relationships. Design is a relationship between form and content.” These are the now famous words of Paul Rand. (Kroeger 2008)

This is as simple as it gets.  The definition of design and the journey through its history shows that establishing and ordering that relationship has been core to the developmental strides taken in the generic field of design.  In the drive for continuous improvement, one of the manifestations of our pre-occupation with order has been the breakthrough and subsequent gradual improvement of the grid system. 

Origin

Grids originated with graphic design and are very popular in print medium.  They have only become widely used online in the past few years.  They have however exploded in popularity and can now be found as a component of many websites.

Website design frameworks producing HTML and CSS had existed for a while before newer frameworks popularised the use of grid-based layouts.  Some examples of grid system frameworks are:

  • 960 grid system
  • Grid system generator
  • Semantic
  • Flexible CSS Grid
  • Modular Grid Pattern

What is a Grid?

“A design grid is a hidden system of guidelines, borders and columns into which elements are placed and to which they are aligned.  It is a simple and surprisingly flexible system for providing a framework for the material being presented within a brochure, booklet, ad (singly or as part of a campaign) or throughout a website.” (Krause, 2004)

The grid is the most vivid manifestation of the will to order in graphic design. (Boulton, 2005)

 

Types of Grids

gridtypes

There are several types of grids from which a designer can choose from.  The simplest of  them is the the rule of thirds. It’s a method used in photograph also. It involves dividing a page into thirds with two equally spaced vertical and/or horizontal lines so that important compositional elements can be placed along these lines or intersections.

Goldern ratio is another popular method used (approximately 1.618)  for proportioning.  The goldern ratio has been used for centuries by architects, artists and book designers for its aesthetically pleasing qualities and has been studied by mathematicians for its presence throughout the universe..

My personal favorite method is to divide a page into several equal sized columns, which is often used in newspapers and magazines.  These types of publications also commonly use a baseline grid, which is a set of horizontal lines on a page that the baseline of all type sits on.

Anatomy of a Grid

Grids act as guides for the placement of elements in a design. No matter how simple or complex, grids share some common parts, each fulfilling a specific function. Not every one of these parts needs to be present in every grid. (Samara, 2007)

When a grid is being discussed especially online, the focus is mostly on columns and to a lesser extent baselines.  The diagram and definition below gives a foundation for the common language of grids and makes it clear that there is more to grids than columns and baselines.

 

anatomy

 

Format in simplest form a format is the browser window even as page is page is format to a book or magazine i.e. the area which design sits. It defines the live area of a design where type, images, and other media are present.

Margins are the white spaces and seen as the negative space between the edge of the format and the outer edge of the content.  In a composition, the overall tension or lack of it is determined by the proportion of the margin.  So the bigger the margin, the lesser the tension created.

Larger margins create more white spaces and help focus attention on the positive space of the design.  Larger margins also help the eye find a place to rest and can be a good area to place subordinate information.

Flowlines could be seen as horizontal lines that break the space into horizontal bands.  They can be used to help guide the eye across the page and can be used to impose starting and stopping points for text and images to be aligned.

Modules are individual units of space created from inserting rows and columns.  They are the basic building blocks of grids.  When repeated, they create columns and rows.

Spatial zones are fields of adjacent modules.  They are groups of modules that cross multiple rows and columns.

Columns are the vertical division of space on a page.  There could be any number of columns in a grid.  More columns lead to more flexibility, but can also make the grid difficult to work with.  Column widths can be equal or can vary across a grid.

Rows are the horizontal equivalent of columns.  Online, itis harder to plan for rows as the height of the format is often inconsistent and dynamic.

Gutters are the spaces that separate rows and columns or two facing pages.  Typically, we think of gutters as the spaces between columns, but they are also the spaces between rows.

 

The Advantages and Disadvantages of Using Grid Systems in Web Design

More and more designers these days are using grids (e.g. 960px) in their web designs.  While grids originated with graphic design and are very popular in print mediums, they have only become widely used online in the past few years.  However, they have exploded in popularity and can now be found as a component of many, many web sites.

Grids are used to structure a page layout.  They function as a framework on which to place all of the site’s different components.  A grid is literally a framework of pixels running horizontally and vertically, just like the horizontal and vertical lines on the grids we all used to plot points along the X and Y axis in high school geometry.

This allows elements to be aligned horizontally and vertically, which creates columns that keep things organized.  A well-used grid can help a site to feel more orderly and reduce visual chaos.

Using a grid has several advantages, both while designing the site and when looking at the finished product.   A well-used grid can help a designer visualize the proportions that will look best on the site and to achieve a balance with the white space in the margins of each element.  It helps the designer highlight the most important elements without overcrowding the site.

A grid can also provide stability, making it easier to build the site. Since the grid gives a guideline for how things should be aligned and laid out, the site can be pulled together much more quickly than if each individual element had to be placed and aligned by hand. Plus, if elements need to be switched around, this can be done quickly and painlessly due to the structure and organization that a grid provides.

Clean, modern websites can be created using a grid layout; this is a popular trend in web design today. Aesthetically, designing along a grid can be very pleasing, which is why many popular blogs and sites have turned to a gridded look.

One of the biggest benefits of grid-based web design can be seen in its power to direct the user to specific content you want them to interact with.  For example, it can make it so simple such as the site title, logo and even the brand image itself stand out. The grid layout favours this mode making sure the most important content can be seen without scrolling. Combined with the vertical and horizontal axes that come into play, keeping content above the fold allows the grid to deliver the user-friendly experience visitors demand.

Also, many sites incorporate third-party advertisements to generate the money needed for hosting and other purposes. The grid-based system offers a solution to problems that may occur with Google regarding SEO. So when planning in advance, web designers can lay out an architecture that perfectly accommodates the sections and boxes advertisements will be displayed in.  More importantly, this approach can support advertisements in a way that gives them the necessary visibility without overshadowing natural content.  Sites could get in trouble with Google if a site is highlighting sponsored content more than it is organic content.

However, there are some things to keep in mind when working with grids, as they are not ideal for every site. Some people argue that using a grid as a design framework can stifle creativity, as it provides a ready-made organizational structure. For some, particularly those designing sites that need a little more abstraction, a grid can feel too stifled or too contained.

Sites with little content may also want to stay away from grids, as aesthetically speaking a grid framework does require a fair amount of content to work. Without enough content to fill out the grid, it doesn’t make sense to attempt to use one.

While a grid can speed up the design process in many cases, this is not true for all. A grid helps speed up design by providing an organizational framework, but a site which already has an organizational system in place or which has only a small amount of uncomplicated content does not necessarily need a grid to aid in organization. 

 

Responsive Web Design

Grid designs can work wonders for sites that are meant to be viewed on a wide variety of devices. A grid can help produce a site that looks and functions as good on a tablet or smartphone as it does on a desktop or laptop computer. The system these layouts use allows a single set of programming code to be used across a multitude of devices, which makes it an ideal tool for developers as well. Using a single set of code not only makes the site easier to build for designers, but also easier to manage for a webmaster.

responsive

User Experience Implications

Human mind always attempts to find a pattern and system of logic in everything, including visual design.  Consistency is a key factor that helps a designer achieve this with its users. Since a grid is a consistent system for element placements, “sophisticated layout structures offer more flexibility and enhance the visual experience of visitors. In fact, users can easier follow the consistency of the page (or site), while developers can update the layout in a well thought-out, consistent way.” (Friedman, 2007)

Closely related to this and loosely based on the Gestalt Principle of Closure, the user can better relate with well-planned white spaces since the invisible but definite grid framework is planted in the user’s sub consciousness.  Also, people have a priori understanding of how things work or at least an opinion of how it should work and many times, the best designs take these preconceptions into consideration and a well formed grid system is largely based upon this. With a grid that is well formed and implemented, users will easily perceive importance due to positional contrast and visual hierarchy.

Analyses

The grid creates a systematic and consistent rule for placing objects. It creates a visual rhythm. It makes it easier and more pleasant for the eye to scan the objects on the page. Page designs that do not use a grid often tend to look ‘messy’ or ‘unprofessional’.

www.audi.nl

audi
At the unit level of cells (e.g. 20×20 pixels) with Audi example above where a strict underlying grid is used for all elements on the page, in print design such grids are called ‘modular’ grids.

At the column level (e.g. 4 columns) and the Abn Amro example below where a grid is used for defining the overall layout in terms of columns and margins.  In print design, such grids are called ‘column’ grids.

abn

 

 

In this example with the Abn-Amro shop, it can be seen that different types of grid are being used. Not a strict modular grid, but a grid defining some columns, margins and horizontal evenly spaced guides.

Simple station homepage

simplystation

960px grid with ~16px base line height. 3-column header containing brand banner and at the center the slogan “creates a powerful video site”.

Below is a section split into 4 columns of which 3 have content (mini-banners) and the outer 2 columns are empty.

Finally the Design & web engineering, our philosophy and sustainable concept appear logically in the flow of the visual hierarchy created by the grid.

Company menu

simplystation2

Appears to be a 960px grid with 16unit.  This page mainly has 2 columns from the head through to the body. The footer has 4 columns. 

 

Summary

All grids are functional but not all grids will function properly for every project.  Part of the duty of the designer is to determine which grid will work for each project and how best to implement it.

While it is not the ideal choice for all sites, particularly those that are very simple or very abstract, a grid can be a highly useful tool in designing many sites. Its inherent organizational properties and aesthetic guidelines have helped many designers to streamline their sites and simplify their design process. Using a grid system may not be for everyone, but for many people, a grid system may be the way to go.

 

 

References

http://planmysite.com/blog/the-advantages-and-disadvantages-of-using-grid-systems-in-web-design
http://www.smashingmagazine.com/2010/04/29/grid-based-web-design-simplified/
http://www.designer-daily.com/the-use-of-grids-in-website-design-6639
http://webdesignerwall.com/trends/960-grid-system-is-getting-old
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/
http://www.responsivegridsystem.com/
http://www.topdesignmag.com/top-5-benefits-of-grid-based-web-design/
http://sixrevisions.com/web_design/a-brief-look-at-grid-based-layouts-in-web-design/
http://www.tripwiremagazine.com/2012/11/grid-style-in-web-design.html
http://webdesignerwall.com/trends/grid-and-column-designs
http://www.markboulton.co.uk/journal/five-simple-steps-to-designing-grid-systems-part-1
“Making and Breaking the Grid” by Timothy Samara.
John O’Nolan – Fully Understanding Contrast in Design (2010)
Jim Krause – Design Basics Index (2004)  David and Charles
Timothy Samara – Design Elements: A Graphic Style Manual; Understanding the Rules and Knowing When to Break Them (2007) Rockport Publishers, Inc.
Vitaly Friedman – Designing With Grid-Based Approach (2007)
 Posted by at 8:04 am