Using a grid-based approach to web design

Monday, July 07, 2014 by Richard Howe

Based on its traditional counterpart in the print industry, the use of the grid as a web design tool has been around for a long time. Yet there are some designers who are still reluctant to use a grid-based approach, fearing that the adherence to a fixed structure will stifle their creativity or that their sites will end up looking ‘samey’. In fact, when well executed, nothing could be further from the truth.

Using a grid-based approach to web design has many advantages and can enhance creativity. Providing a structural and aesthetic balance to a web page, using a grid can bring a sense of harmony and confidence to your visitors and even make your site more usable and easy to navigate. 

Once you have the basics under your belt, it’s quick and easy to design with grids too.

In essence, a grid is simply a layout made up of units (e.g. 40x40 pixels) and columns (e.g. 3 columns). There are many examples of ready-made grids you can use to be found on the internet, or you can create your own. In this article, we’ll cover some of the basics.

Where to start

Type of grid structure

Before you choose a grid-based system, think about the type of site you are trying to create and what sort of content you have. Things you will need to consider include:

  • Amount of text
  • Type of text (e.g. long articles, shorter pieces
  • Amount of images or photographs
  • Size of images or photos
  • Number of elements to be included
  • Shape of elements (e.g. lots of rectangular shapes or more irregular shapes)

Once you’ve thought about the type of content you will be including, you will be able to select a grid system to match. So if you have long articles with only a few images, a grid with fewer columns will suffice. 

If, however, your website is more of a magazine site with separate stories, advertisements and images, you will need to have a more complex grid involving smaller units.

Remember that just because you have a certain number of columns, doesn’t mean that you have to use them all individually. Some very successful grids have as many as 12 or 15 columns, which are then put together in various combinations to form blocks two or three columns wide. Using grids in this way can provide a very flexible solution and suit a wide range of content.

Screen resolution

You will also need to think about the screen resolution you are designing for, and although it’s impossible to design something that will look identical for every screen size and on every browser and device, you may be best to go for a standard size such as 800x600 or 1024x768 pixels.

If you are using responsive design, a fixed-width solution is not going to cut it. The most popular way to get around this is to use a fluid grid, which will flow and adjust to suit the device or screen size of the user. 

Fluid grids, rather than being based on pixels, are instead built upon percentages of a total maximum width, and there are many online tools and calculators you can use to help you get started.

Gutters

Since you need to align items directly on the grid lines, your gutters will need to be separate mini-columns. An alternative to this is including gutters as part of the columns and implementing them through the use of padding or margins. 

Do your maths carefully at the outset and you will save much time and angst later. Preparation is everything.

A word about vertical and horizontal rhythm

Vertical proportions in grid systems are always something of an issue, especially where the content is dynamic and height cannot be determined accurately. This is the reason why grid-based design is usually based on horizontal proportions – in other words, columns. In terms of vertical rhythm, this is manipulated through line height, padding and margins and must be measured in ems, to ensure typographical integrity when text is resized by the user.

Rules (and grids) are meant to be broken

Remember that you don’t have to stick rigidly to the grid – it is there as a tool to guide your placement of key items only. So if you are working with a five-column grid but you want to include a long article, try combining columns and just using two double-width columns, with an extra column for photos or whitespace.

Similarly, the gutters and margins of your page are not off-limits, so bleeding images off the edge of the page or taking photos or illustrations into the gutter is perfectly acceptable and serves to give your pages a more natural, organic feel.

Quick tricks and tips

To finish, here are a few quick tricks and tips that might save you time and improve your design and your workflow:

  • Using an odd number of columns is usually more pleasing to the eye.
  • Your columns do not have to be of equal width.
  • Using the Golden Section principle of design brings a more natural sense of balance and composition to a webpage. A simpler but still effective approach is to use the Rule of Thirds.
  • You can use more than one grid across your site or even on one page.
  • Using an image of a grid (created in Photoshop, for example) and setting it as a background-image element in the body tag or using CSS makes building your site so much easier. You can see the grid and align all elements to it during the building of the website, and then simply remove the grid at the end.

Although there are websites that are beautifully designed and functional without the use of grids, a grid-based approach does offer many advantages to a designer. Not only does it provide a solid ‘backbone’ and central integrity for your webpages, but it also makes building your site quicker and easier. 

Combine that with the facts that grid-based designs (including those where the grid is very obvious) are very on-trend at the moment, are aesthetically pleasing and often make users feel more comfortable, and you have a systematic approach to web design that is hard to beat.

Your comments

Post has no comments.

Post a Comment


Captcha Image

Request a callback

Filter by category

Post archive

Richard has quite honestly been the best designer we have worked with and this is our fourth website!

From our first meeting through to the sites completion, his creativity and ability to deliver our brief was second to none and we have had countless compliments for our new website. We have also had a notable increase in work since the site went live, which I feel is largely down to the aesthetics he created.

We will undoubtedly be using his company in the future and will happily recommend his services.
Cocktail bar web design

Tom Bronock,
The Cocktail Service

What's next?

Get in touch with us today on 01865 522525 and let's kick-start your project.

Colour Rich custom website design

Web design trends in 2020

Wednesday, March 18, 2020

Web design trends in 2020Web design has changed an awful lot over the years. Most people would assume that web design is as changeable as fashion design - a constant flux of styles and trends which are hot one second and not the next. But, one of the biggest overarching movements within web design has been the growing dominance of focusing on user feedback to guide design decisions.  Read more

© Copyright Colour Rich. Privacy