User interface

Use a grid system

With a grid system you enforce structure to your designs.

elf. I would recommend the use of a 12 column grid. It's just my personal preference for a grid system and most of the web too.

Another reason the 12 column grid is so great, is due to the number of times you can divide with the number 12. You can use 1, 2, 3, 4, 6, and 12 to come up with layouts for your design.

Depending on the design software you are using, you should be able to define the grid used in your designs. Most of these will come with an option to select the column count, and typically these will be 12 columns by default.

It keeps everything inline By using a grid, and utilising that grid properly, you will bring structure to your design. When that structure is used, it makes designs more visually appealing and more comfortable to follow as a user.

Can you imagine reading a newspaper where every column of text is placed randomly on a page? It just wouldn't work.

Don't break your grid

When your design starts to break out of the structure of your grid, it looks out of place. There are reasons to break out of your grid but typically try and stay inside the boundaries. One of the best reasons to break your grid is to change between full and fixed width.

Don't bleed into margins

If you're working within a framework, then you won't need to worry about this as much. If you aren't in a framework, avoid bleeding into the gutters of your grid.

Use even numbers

Use an even pixel value for the grid of your website, and that includes the columns and gutters. The reason I bring this up is to avoid subpixel rendering. Subpixel rendering can happen when using odd values in your designs and viewed on certain browsers and screens.

It's far easier to divide by an even number too. I can assure you, that in most cases odd numbers in a grid will give you a headache, whether that is for the number of columns or the sizes.

What I'm using for this site

If you're interested, I'm using a 12 column grid, and it is 1200px in width. The column size is 78px for a column when viewed at full-width. The gutter size is 24px. I also have some spacing on the outside of the grid, for larger devices it is 72px, smaller devices it should be 24 px.


If you found this tip useful, consider subscribing with the form at the bottom of this page. If you didn’t find this useful, let me know what I could have done better at