Beyond the Grid: With Grid Based Web Design

by in Design on 24th Mar 2011 · Comments

Grids can be a massive help when building websites. It provides both a visual structure for laying site elements out and a framework for its content. Think about all the different objects needed to make up a typical layout design. There’s text, images, videos, adverts plus all the standard elements like banners, navigation bars, footers etc. A grid is often the logical solution for making sense of the task at hand. It’s the simple way of creating a balanced and unified website.

We’ll start by deciding what a grid is (or can be). In general terms it’s a series of lines, rules and guides used within a layout where design elements should be placed or positioned. Potential grids can sometimes be simple and sometimes very detailed. Like any design aspect, the grid used should be determined by the aims of a website. Content is determined by factors such as site purpose, intended users, advertising requirements etc. It’s this content that should determine the shape and structure of the grid. So before starting to design, clarify the different types of content to be used.

Beyond the Grid: With Grid Based Web Design

Using the Grid

The aim should be to create something that looks logical, this isn’t simply abstract blocks. They’re should be a flow, a rhythm even movement to the layout. This approach should allow different images, blocks of text and other design elements to fit together as a sort of overview stage. A good grid should not only bring all of these elements together but create unity, making the separate and individual objects look comfortable together. It’s far better to use the same grid structure through the whole layout, subconsciously we prefer this order. Don’t exclude any potential ideas without considering what you hope to achieve from your layout. It may just be the solution you’re looking for.

Before worrying about specific grid dimensions, first concentrate on how you think this content would be best organised. This is best done by sketching out rough layouts that helping to generate ideas quickly. More exact dimensions can then be established from these initial design sketches. It helps you understand the general shape of your layout objects.

Basegrid

The most effective way at implementing the grid is by altering the width of the smallest possible grid unit. These individual grid units should be used to determine placement positions on the layout. Although some grids determine the size of objects it should be remembered that it’s placement, position and organisation that’s the goal of this technique. Above is an example of a basic undeveloped layout grid. In particular it establishes a three column layout purely through the block pattern created.

To get the best out of the grid, page objects should be multiples of a single grid unit. To go back to our basic example, we have a grid three units wide. This can be turned into a three column layout easily, but the header used will be the width of the three grid units (this is shown below).This really comes from practicality as much as good design practice. It would be unrealistic to expect all page elements to be the same size but when using the grid, rough yet deliberate sizes can be derived.

Basegrid Two

Changing object widths to suit grid units helps give dynamism to the design. It makes the grid look more interesting and far less formal while still maintaining order. To make your layout look even more interesting you can go further by playing with the balance of the layout itself. It can take some imagination from your part but remember the grid is only a guide. It should be flexible enough to allow for this type of experimentation. The overall goal isn’t to maintain something that looks like a grid (unless that’s what you want); it’s to build a website. The examples below show how further changes to the grid can achieve more developed and intricate layouts.

Grid Expand

Grid Expand Two

Sometimes it appears there more than one grid or structure in place, but this isn’t usually the case. The suspected grid unit may actually be made up of a series of much smaller ones. This allows even more flexibility and contrast in the way objects can be positioned.

Grids as a Design Style

A rigid grid structure reassures users; this visual familiarity helps them understand how the site’s content fits together. This may appear a very constrained way of designing but can often prove a valuable design tool. The grid unit will often define the literal size of layout objects. This gives a clear blueprint which the site can be built around.

The shape and line patterns created are visually appealing, making the layout as much a design feature as the content itself. The high levels of visual organisation should allow users to confidently navigate the layout providing a better experience for users.

Mike McQuade
Mike McQuade

Manchester City Football Club
Manchester City Football Club

We Are Hunted
We Are Hunted

Cascade Brewery
Cascade Brewery

Zaum & Brown
Zaum & Brown

Boutique Cycles
Boutique Cycles

Grids as a Design Structure

Although grids can be very apparent, where you can visually see boundaries, this isn’t always the case. Chances are you won’t notice a grid structure without looking carefully.

Some grids might only specify column widths or even just the space between objects. Being that some may be very detailed, it’s not really a design style; it’s more a design structure. Below is a simplified version of the grid used by NME.com. While in reality the grid structure has far more complex elements behind it, the model demonstrates how the basic grid structure is formed. It’s this initial recognition of shapes that give us the impression of order.

NME

NME Grid

A good grid structure should help individual elements fit together comfortably; they should be in harmony with each other. Where grids really become useful is when organising varied content requirements. It gives us as designers, an opportunity to combine these often blocky objects into something with unity and purpose. Grids can be a very practical tool in site management terms also. First, project time (therefore money) is saved by having an established grid structure in place. Conforming to a grid not only maintains site unity but saves the designer having to come up with new layouts for each page.

News and magazine websites in particular, implement more complex grid structures. This isn’t only replicate a traditional paper format, but because it’s the most practical way of achieving a busy and diverse layout. Content is constantly changing and being updated. Using an established grid means the focus can be put on content production, knowing the display method is securely in place. Future changes, new pages and content can all be added quickly.

The Guardian
The Guardian

The Telegraph
Telegraph

Channel 4 News
Chanel 4 News

The Boston Globe
The Boston Globe

Empire Online
Empire Online

The New Yorker
The New Yorker

Grids as a User Interface

It’s important not to overlook how effective grids are at displaying and navigating large amounts of dynamic content. Many social, ecommerce and even portfolio sites find them the perfect solution for their search and browse scenarios.

This is mainly down to their ability to make the best use out of available space, but also because their flowing nature allows users to skim content quickly. Grids not only provide a grouping mechanism but create a clear boundary between different objects which is important in this type of situation.

Sure there are some terrible examples created for this purpose but if the attention to detail is put in; they can become invaluable interface feature. Highlighting the details in each grid object clearly should be the priority. Consider the important information needed and implement a single labelling structure in each grid object. They should all be formatted the same way as this established repetition allows users to browse quickly.

Itself
Itself

Tumblr Directory Page
Tumblr Directory Page

Arias
Arias

XtremeMac
XtremeMac

Behance Network
Behance Network

Asphalt Gold
Asphalt Gold

Other Useful Resources

Conclusion

Grids are flexible, they allow for the generation of fresh and new ideas. By their nature grids have many aesthetic benefits based around shape and lines. They can create balance, unity, order and harmony. Layouts aren’t limited by the grid structure; they’re limited by the lack of design imagination.

From a practicality standing they can speed up the overall design process by putting a structure in place. New content can be added easily without having to think how it will be accommodated. Even freshening up a design can be achieved much more easily when your content is already arranged in a grid.

What do you think of grid based layouts? Have you seen any interesting grid layouts? Or have you spotted any grids being used as a navigation feature? As always tell us what you think below.

Scott Carmichael is a freelance web designer, developer and blogger from Fife, Scotland. He’s interested in a whole range of web related things, from digital art and design to coding and programming.