Grid Layouts in Modern Web Design

by in Design on 1st Sep 2011 · Comments

The use of grids in web design is a popular topic that has inspired many designers in their pursuit of the perfect site design. Although this concept is just a few years old, the use of grids has been ever-present in field engineering and architecture, where precision is key. However, the concept of grid theory, where proportion is given as much emphasis as structure, has been around for thousands of years and is exemplified in the works of Pythagoras, who proposed numbers as ratios rather than single units.

Grid Layouts in Modern Web Design

So what does this all mean for graphic and web design? Well you’ve probably heard about the golden ratio – or a mathematical pattern that occurs so often in nature they refer to it as the divine proportion. Generally speaking, these logical guidelines create aesthetically pleasing compositions that are both balanced and structured.

Grid Layouts in Modern Web Design
Image credit: Aleksandar Urošević

Grid Layouts

Grid Layouts have become commonplace in modern web design for a number of reasons: First they provide unmatched structure and organization, which helps create a predictable rhythm and sense of familiarity to the design. As the web becomes the best medium for publication worldwide, designers and developers must work to simplify the process. Grid-based layouts produce stable websites: its no surprise the community has adopted frameworks as common practice.

Secondly, our tendency is to read a page from left to right, and grids only reinforce this innate characteristic. Also playing into this is browsing device of your visitor and whether they are coming from a traditional computer or mobile platform. Many grid-based website are fluid and will re-size according to the user’s browsing devices. Take a look at the wordpress theme FolioGrid below. Its popularity is attributed to its ability to flex with viewing devices.

Folio Grid
Folio Grid

A common example of the grid in web design is on newspaper websites. These websites often used grids as a necessity; the sharp look is one way to effectively manage and organize a large amount of content. The New York Times has one of the more well known grid-based layouts.

New York Times
New York Times

The Rule of Thirds

The Rule of Thirds is a visual arts rule that 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. Aligning a composition according to Rule of thirds creates more tension, energy and interest in the composition than simply centering the feature would.

The Rule of Thirds

So how do you split a layout into 9 equal parts? Jason Beiard states the following method for applying the Rule of Thirds to your layouts:

To start the pencil-and-paper version of your layout, draw a rectangle. The vertical and horizontal dimensions don’t really matter, but try to keep straight lines and 90-degree angles.

  • Divide your rectangle horizontally and vertically by thirds.
  • Divide the top third of your layout into thirds again.
  • Divide each of your columns in half to create a little more of a grid.
  • You should have a square on your paper that looks similar to the rule of thirds grid.

960 Grid System

960 Grid System

Another tool for laying out a website that utilizes a grid is the templates put forth by the 960 Grid System. Based on a width of 960 pixels, this system is an effort to streamline development workflow. The number 960 was chosen due to it being divisible by 3, 4, 5, 6, 8, 10, 12, 15, and 16. The result is an ideal width for grids and experimenting with different arrangements for your layouts.

960 Grid Site

Second Park

The website for Second Park is presented using the 16-column grid from the 960 grid system template, but do not exist on the actual website.

Alternative Layout Methods

If you’re looking to break out of the norm and introduce a little variety into your layout, it may be worthwhile to break out of the grid partially. The most common method for deviating from the grid is to introduce circles as an element in your design.

Circles

An alternative layout is achieved on the website for StartingBloc. As you can see, the unconventional approach is expressed through the use of circles that guide our eyes through the layout. In the following example a basic path has been created that pretty much directs your eyes – you can’t really help following the flow as the designer desires you to. A fairly easy way to gain some control over user experience.

StartingBloc
StartingBloc

A Minimalist Approach

When there are very few objects in the layout, it’s okay to have them floating. Such is the case for NewQuest. The interactive website allows you to customize and arrange the icons like a puzzle, while adhering to a strict grid in the process.

NewQuest
NewQuest

Maintain Structure

As you can see on the website for Get Active, structure is still present. A design can still be highly logical, yet retain an out-of-the-box approach at the same time. Rounded symmetry is used here, which makes the site well balanced and attractive.

Get Active
Get Active

Establish a Focal Point

An alternative layout is best designed with a strong focal point in mind. As in the above example, the layout has a heavy draw towards the center, where the logo is housed. In any of your layouts a focal point can be expressed through many elements such as size, color, and placement to achieve the message you’re trying to convey.

Illustrating Areas

Illustrating areas allows you to break out of the structure you’ve created in your grid. They’re a perfect way to counterbalance the rigidity of the grid. Stimulating areas of interest can be created on an otherwise boxy layout through the inclusion of illustrations.

The website below, Convax Solutions, presents an illustration that acts in opposition to the grid-based layout. The result adds visual interest to an otherwise rigid grid.

Convax Solutions
Convax Illustration

Tilt the Grid

By tilting the grid to create diagonal lines, the grid-based layout is almost hidden. Diagonal grids look cool whilst still based on a grid layout. Marie Laurent makes good use of this effect.

Resources

  • Blueprint CSS Grid Framework
    Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.
  • Yahoo! YUI Grids CSS, Grids Builder
    The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations.
  • YAML, YAML Builder
    YAML is an (X)HTML/CSS framework for creating modern and flexible floated layouts. The structure is extremely versatile in its programming and absolutely accessible for end users.
  • Grid Designer
    This is a web tool for generating custom CSS grids. It uses its own CSS classes, so it could be said to be a framework, though it’s not as well supported in the design community as some of the others.
  • 960 CSS Grid System
    The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.
  • CSS Boilerplate
    Blueprint CSS is a stripped down framework which provides the bare essentials to begin any project. This framework will be lite and strive not to suggest non-semantic naming conventions.
  • Spark
    A Sinatra inspired micro web framework for quickly creating web applications in Java with minimal effort.
  • Ditching the Grid: Alternative Layout Strategies and Tips
    A good article about alternative layout methods and how they can be successfully implemented.

Showcase

Arc90 Lab
Labarc90

Paper Beats Internet
Paperbeats

Mizko
Mizko

Warwick Saint
Warwick saint

Edgepoint Church
Edgepoint church

Raven Photography
Raven Photography

Rich Brown
Rich Brown

Dynamit
Dynamit

YCN
YCN

Jesus Rodriguez Velasco
Jesus Rodriguez

CSS Zen Garden
CSS Zen Garden

Conclusion

A grid provides a logical structure to your layout while providing a sense of familiarity. It’s also user-friendly and provides a flow to large amounts of information. At the same time, experimentation by breaking outside the grid allows you to see a design in ways you never have before. Breaking the grid can reduce monotony, while still providing organization to your layout.

Utilize concepts such as disharmony, asymmetrical balance, and ordered chaos to bring areas of your site’s grid designs to life. Are you a stickler for grids or are you prone to think outside the box for your layouts? Leave a comment below letting us know!

Stephanie Hamilton is a freelance Graphic and Web Designer by day and a blogger by night. Holding a BFA in Graphic Design, she has several years experience designing the latest in print and building better user interfaces and websites. She also enjoy writing as a creative outlet and blog regularly for her business and contribute to others as well.