Web Design Using Grids: Tools and Inspiration

Posted in Tips, Tools, Web Design • Posted on 14 Comments

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?

Let’s see who has done their homework

Portfolio-like grid: Sylvan-Olliver.com

It isn’t that hard to see that this website is based on a grid, right? Since there’s not a lot of text, the images act like blocks and we have an isolated block as menu.

Mixed blocks: Rivers&Robots

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).

Clean and responsive: Upperdog.se

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.

Lot of content: Drupal.org

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.

960.gs

Easy and one of the most used grid systems. A great starting point.

1140px – cssGrid.net

Responsive and easy to use also. If you just want to get started with responsive grid systems, take a look at this one.

Golden Grid

One of the most powerful grid systems. If you want a complete solution go with this one.

BootStrap

Project from Twitter that is also a complete CSS toolkit. Pretty cool :)

Yet Another Multicolumn Layout – YAML.de

Slim framework with accessibility concerns

BlueTrip.org

Collection with some cool tools, this project  is much more than an ordinary grid system. Worth checking out!

ElasticCSS.com

As name says, it focus in easier implementation of fluid, elastic and multicolumn interfaces.

YUI 2 – Grids CSS

4kb file that allows you to do A LOT.

1 Line CSS Grid Framwork (Experiment)

It’s not a framework per se, but has a nice logic and worth checking to remember that sometimes a solution is way easier than it seems.

Are you hungry yet?

So have I missed anything? Do you have any other nice tool to share? I’ll be glad to hear from you via comments!

43 Written ArticlesWebsiteGoogle+

I'm a web designer and entrepreneur from Itajubá (MG), Brasil. I love writing about obscure topics and doing some cool stuff. And also I do some FREE stuff, check it out: http://www.roch.com.br/

14 Comments Best Comments First
  • Kevin Riemens

    Friday, September 30th, 2011 12:10

    1

    Where’s Blueprint? http://www.blueprintcss.org/

    One of the best ones out there!

    If you combine it with HTML5 boilerplate you have a POWERFULL starting ground for your website…

    0
    • Rochester Oliveira

      Friday, September 30th, 2011 18:36

      3

      Hey Kevin!

      I think I could have explained BlueTip a litlle better. Actually, it has a lot of frameworks mixed and improved, including there BluePrint :) But yeah, I should have talked a little bit about it.

      Thanks for pointing out!

      []’s

      0
  • Dave

    Saturday, October 1st, 2011 05:16

    6

    Nice. Maybe I’m a bit old school, but I never thought people designed without grids. But I’ve always used graph paper for my rough sketches. I am going to check out the 960 grid right now. I’ve downloaded it and looks interesting.

    0
    • Rochester Oliveira

      Sunday, October 2nd, 2011 06:14

      9

      That’s a nice idea, Dave!

      But 960 is a really good start point, I’ve started with grid systems from it myself and found it really useful!

      []’s

      0
  • aditia

    Saturday, October 1st, 2011 01:45

    5

    there is also some online grid generator in case dont’t want to dig in the whole framework

    0
    • Rochester Oliveira

      Friday, October 14th, 2011 20:37

      14

      Hi aditia,

      Yeah, I should have covered them also, thanks for your tip.

      []’s

      0
  • Shekhzz

    Friday, September 30th, 2011 14:17

    4

    I’m a regular visitor of this blog, and whenever I come to this blog – I’ve got some tremendous information. And today is also the same day as always. Thanks for sharing information with us… :)

    0
    • Rochester Oliveira

      Friday, October 14th, 2011 20:34

      12

      Hey Shekhzz,

      I’m glad you liked, and keep coming, we have much more great content to go.

      []’s

      0
  • Shaquil Oliver

    Friday, September 30th, 2011 17:15

    2

    Grids are what is needed to make your design look great. It has more precision and accuracy to it.

    0
    • Rochester Oliveira

      Friday, October 14th, 2011 20:36

      13

      Hi Shaquil,

      And they really speed up development process. So there’s a lot of reasons for using them ;)

      Thanks!

      []’s

      0
  • Aaron

    Saturday, October 1st, 2011 19:16

    7

    Good post, I am a big fan of the 960 grid system.

    but you forgot to add my site to the list?

    http://iamcreative.me
    Based on the grid system and is also responsive… Try resizing the browser window! ☺

    0
    • Rochester Oliveira

      Sunday, October 2nd, 2011 06:17

      10

      Hey Aron, I forgive your self promotion, since your portfolio is pretty well done indeed :)

      I would just center things in “mobile” screen sizes, so it’ll be prettier.. But it’s really good this way.

      []’s

      0
    • Stanley

      Wednesday, October 5th, 2011 12:42

      11

      Hi Aaron

      You have an excellent Website. The look is awesome. great work.

      0
    • Aaron

      Saturday, October 1st, 2011 23:01

      8

      ! shameless self promotion !

      0
  • Aaron

    Saturday, October 1st, 2011 19:16

    7

    Good post, I am a big fan of the 960 grid system.

    but you forgot to add my site to the list?

    http://iamcreative.me
    Based on the grid system and is also responsive… Try resizing the browser window! ☺

    0
    • Aaron

      Saturday, October 1st, 2011 23:01

      8

      ! shameless self promotion !

      0
    • Rochester Oliveira

      Sunday, October 2nd, 2011 06:17

      10

      Hey Aron, I forgive your self promotion, since your portfolio is pretty well done indeed :)

      I would just center things in “mobile” screen sizes, so it’ll be prettier.. But it’s really good this way.

      []’s

      0
    • Stanley

      Wednesday, October 5th, 2011 12:42

      11

      Hi Aaron

      You have an excellent Website. The look is awesome. great work.

      0
  • Dave

    Saturday, October 1st, 2011 05:16

    6

    Nice. Maybe I’m a bit old school, but I never thought people designed without grids. But I’ve always used graph paper for my rough sketches. I am going to check out the 960 grid right now. I’ve downloaded it and looks interesting.

    0
    • Rochester Oliveira

      Sunday, October 2nd, 2011 06:14

      9

      That’s a nice idea, Dave!

      But 960 is a really good start point, I’ve started with grid systems from it myself and found it really useful!

      []’s

      0
  • aditia

    Saturday, October 1st, 2011 01:45

    5

    there is also some online grid generator in case dont’t want to dig in the whole framework

    0
    • Rochester Oliveira

      Friday, October 14th, 2011 20:37

      14

      Hi aditia,

      Yeah, I should have covered them also, thanks for your tip.

      []’s

      0
  • Shekhzz

    Friday, September 30th, 2011 14:17

    4

    I’m a regular visitor of this blog, and whenever I come to this blog – I’ve got some tremendous information. And today is also the same day as always. Thanks for sharing information with us… :)

    0
    • Rochester Oliveira

      Friday, October 14th, 2011 20:34

      12

      Hey Shekhzz,

      I’m glad you liked, and keep coming, we have much more great content to go.

      []’s

      0
  • Shaquil Oliver

    Friday, September 30th, 2011 17:15

    2

    Grids are what is needed to make your design look great. It has more precision and accuracy to it.

    0
    • Rochester Oliveira

      Friday, October 14th, 2011 20:36

      13

      Hi Shaquil,

      And they really speed up development process. So there’s a lot of reasons for using them ;)

      Thanks!

      []’s

      0
  • Kevin Riemens

    Friday, September 30th, 2011 12:10

    1

    Where’s Blueprint? http://www.blueprintcss.org/

    One of the best ones out there!

    If you combine it with HTML5 boilerplate you have a POWERFULL starting ground for your website…

    0
    • Rochester Oliveira

      Friday, September 30th, 2011 18:36

      3

      Hey Kevin!

      I think I could have explained BlueTip a litlle better. Actually, it has a lot of frameworks mixed and improved, including there BluePrint :) But yeah, I should have talked a little bit about it.

      Thanks for pointing out!

      []’s

      0

Comments are closed.

54.91.35.130 - unknown - unknown - US