Web Design Using Grids: Tools and Inspiration

When I started this web designing thing all my work just didn’t look “professional”. It was pretty, nice colors, nice fonts, nice bevel/emboss effects…but something was annoying and I didn’t know what.

Then I found out.

Grids are one of the smallest differences between good and great design. It is quite easy to find a way to realign aspects of the design that give it a completely different look. Of course we have also other spacing adjustments but when you put things inside grids everything tends to look much better.

Today we’ll find out together why they make such a difference, who is doing it right, and which tools you can use to have a better grid.

So, grid systems?

There are a few ways to group elements on page. Color, size, alignment. But surely alignment is the least utilized of them. Maybe because there isn’t a “group tool” like we have color tools or size tools (in Photoshop, for example, is quite hard to align things in a rational way).

Then they come to save us.

Grid systems give an easy and safe way to better organize your content, so you don’t need to worry too much about it. Things will be like playing with Lego bricks from now on

They have a few preset sizes of blocks and preset number of maximum blocks per line. So what you have to do is to say “hey I want three small blocks and one medium on first line, but one big and one small on the second.” Pretty easy, huh?

Here you may notice that on the first line the blocks are one size and on the second they change. Because of their good grid system everything looks symmetrical and right (otherwise something would just look strange).

They have a quite simple structure, but the best part is that their grid system adjusts to screen size and when it detects mobile resolutions it resizes contents blocks so users will get a way better interface.

Drupal is one of the best CMS’ in the world. But it has to show a lot of content on its homepage. Without a nice grid system all this content would look a mess. And here is the magic, you can see which content is related to which even on this small screenshot (where you just can’t read the content).

Tools

I’m sure you want to use a grid system as soon as possible. So I’ll show you some cool tools to make your life easier.