Totalwireframe is now free for everyone.

Oh! You are the type of people who browses the web on your mobile. Good, good. Everything works on mobile, including the purchase process.

How grid systems work

  • Duration: 03:02
  • Level: intermediate
  • Axure Version: 7.0+
  • Date: Jun 26, 2015


Today I want to talk to you about an important aspect of the design process for a wireframe. I want to talk to you about the grid system.

The grid system is a technique that comes from the ancient world: a world where computers did not exist yet. It has been made popular by legends like Josef Müller-Brockmann and Wim Crouwel, two graphic designers who come from the same school of thought that brought the famous Helvetica to the world. The idea behind a grid system is to provide an invisible foundation used to achieve visual cohesion in magazine and newspaper page design and layout. They essentially amount to a lattice that divides horizontal and vertical space in consistent units where text, headlines, images, and advertising can be placed.

The same principales can be applied to the web.

We can see nice examples on how grid systems work on the homepage. Take a look at some of these examples. It's pretty impressive to see how well all those elements are aligned and how everything is coherent visually.

Axure provides one way to achieve grid perfection with our wireframes.

Go to the menu called Arrange, then Grid and Guides and choose Create Grid.

Here you can choose a predefined preset: a 960 pixels wide grid or a 1200 pixels wide grid. When you choose a preset, the columns and rows fields are filled with the values for this preset. You can change them at will but I strongly suggest that you don't mess with them too much, unless you really know what you are doing.

Once you choose a preset, here is the effect on a wireframe.

You see a bunch of guides that have appear on the canvas. You see the columns here, and the separators between the columns there. You can also move the guides if you want, but I strongly suggest you don't. To make sure you don't move them by accident, choose the Lock guides options under Arrange, Grid and guides menu.

Ok so we've setup the grid. It looks great but what the hell do you do with it?

Well, now it starts to be interesting.

Start by doing your wireframes as you would do without the grid.

Add a big fat header. Then a sidebar, for instance. On a 12-columns grid, usually the sidebar takes 3 or 4 columns maximum, so let's pretend we want a 3-columns sidebar.

Then we can add a title and images too. Note how easy it becomes to add placeholders and find the right size for these images. With a grid system you are sure that everything will look good - almost no matter what you do. Start use it, now.k

Continue your learning