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. 40×40 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 800×600 or 1024×768 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.
{module_contentholder,name=”Blog ad”}
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.