Seven Smooth Steps to Superb Grids

One of the new trends among web designers has to be grid design. While grid design is a simple concept, there are now so many tools and ways of doing it that it might get confusing for newcomers. So here is my way of doing things, i.e. how I would explain grid design to someone who’s never heard about it.

My aim here is not to be exhaustive and shower you with links and fancy tools, actually it’s quite the opposite. I’ll give a few links for each section, but if you’re short on time, just click on the first one !

But first, do you have the necessary tools ? You’ll need

  • Your favorite design software, preferably Photoshop with GridMaker
  • A code or WYSIWYG editor like Dreamweaver
  • The Firebug extension for firefox, or Xray if you use IE
  • Optional: A CSS framework, for example the Blueprint CSS library

All set ? let’s go !

Step one: understand grids

This one is easy enough. No matter if you like grids or not, if you organize content on a page you’re already using one without even knowing it. The only problem is that your implicit “grid” might not be regularly spaced, and that creates imbalances in your design. To avoid these imbalances, your best bet is to plan out a grid as early as possible in the design process.

Keep in mind that a grid usually regulates horizontal spacing (i.e. the space between columns) but that vertical spacing (the space between lines) can be just as important. More on that later.

examples of grid-based sites

Step two: define your grid

When starting out, I advise you use a 12 (or 24) columns grid, as 12 is a very flexible number. Some people also like 14 columns. Then you need to define total page width (ideally something between 700 and 960 px), padding between each columns (or “gutters”), and padding inside each columns. Inside padding is not technically part of the grid, but it’s better to include it in your calculations early on .

For now let’s start out with a simple 960px wide layout, with 12 columns with lots of space between them and a little space inside.

Step three: calculate your grid

It’s easy enough. Total width (960px) divided by number of columns (12) gives us the column+margin width (80px). Now we decide how much space we want between each column (let’s say 20px) and we have the individual column width (80px-20px=60px). The good news is that tools like the Blueprint CSS Grid Generator do all of the math for you.

We haven’t talked about horizontal spacing yet. This is because it’s very hard to tell exactly how much vertical space content (which might be dynamic) will take up on a web page. However, we can define a baseline, or a basic unit of vertical space. The most common way to define it is to take your text’s line-height (this will ensure all the text falls neatly on the horizontal grid). A common baseline is 18px, which is 1.5 times 12px, the default font size. If you want to have bigger text with more spacing, you might try a 14px font size with a 28px baseline.

3 automatic grid calculators

Step four: start designing

Now is when things get fun. Download the Gridmaker plugin for photoshop, install it, pop in the values we just decided on (for the horizontal grid, you can use your baseline or multiples of it), and start designing ! Don’t worry if you realize you made a mistake with your grid. Starting over a few times is part of the job.
And don’t forget you can always refer to existing grid designs for inspiration.

Step five: choose a css framework

Why reinvent the wheel ? You don’t need to manually specify widths and float for each of your columns. I advise using Blueprint CSS or YUI Grids for example. My personal favorite is Blueprint because it includes lots of other cool stuff. The downside is that you need some time to study it and learn to deactivate the stuff you don’t want.

3 css frameworks that support grid systems

Step six: put everything together

This is the hardest part. To help you with it, you can use Syncotype to check that everything fits on the baseline, or Grid Layouts to do the same for the vertical grid.

2 time-saving tools to help you code your layout

Step seven: admire your work

See how everyting seems clean and well layed out ? That’s the magic of grids !

3 links to learn more about grids



35 Thoughts

  1. […] Smooth Steps to Superb Grids sacha greif heeft een hele duidelijke handleiding geschreven voor het designen en coden met grids. Filed […]

  2. Paul says:

    This is the exact process I use, but I add one tool. I use a system I created called Grid Mark, which overlays a layout grid over the page. This way you don’t have to monkey about with background images and positions. It’s just a good little extra to keep things pretty.

    http://gridmark.net

  3. Logicoder says:

    Hey, good article ! ;)

    If you have some spare time please take a look @ http://logicss.googlecode.com to learn about the Logic CSS Framework.

  4. […] 7 Schritte zu einem lässigen Grid Design […]

  5. Carly says:

    Thank you for my comment. Glad you like my header I made it with Illustrator… First time I’ve ever made anything in it really. Trying to get loads of practise in – then maybe I can make a site as good as yours :-D

  6. […] Seven Smooth Steps to Superb Grids | Sacha Greif (tags: design grid webdev) […]

  7. […] Sacha Greif bietet in einem Blog-Artikel eine sehr hilfreiche Übersicht anhand einer Schritt für Schritt Einführung: Seven Smooth Steps to Superb Grids. […]

  8. Ralph says:

    thank you for your great shortly summary about grid layout with the topic ” Seven Smooth Steps to Superb Grids”.

    This link is in my bookmark list already ;)

    Ralph

  9. […] on ALA about the baseline grid, a post to 24-ways about vertical rhythm, and after that a nice 7-step guide to creating a grid-based design, and a great piece on incremental leading. Between these five articles, (and about a year’s […]

  10. […] Lately, thanks to the success of the Design Resources Search Engine, I’ve been obsessing about my stats. I don’t know if you noticed it, but WordPress’s stats uses google blog search to display your incoming links. Don’t ask me why blog search returns 45 results linking here, while the regular search only finds 24 links. I’m far from being a Search Engine Optimization expert. But anyway this got me curious and I tried googling my own name. Appropriately, my own site comes in first. But I was susprised to see that the second result is my LinkedIn profile, which I created about a year ago and completely forgot about since. Guess this means I should start updating it… The other results are moslty links to my grid article. […]

  11. sfg says:

    sgf

  12. […] Seven Smooth Steps to Superb Grids […]

  13. […] “While grid design is a simple concept, there are now so many tools and ways of doing it that it might get confusing for newcomers. So here is my way of doing things, i.e. how I would explain grid design to someone who’s never heard about it.” Visit Lesson […]

  14. […] Seven Smooth Steps to Superb Grids […]

  15. […] Seven Smooth Steps to Superb Grids […]

  16. […] Seven Smooth Steps to Superb Grids “One of the new trends among web designers has to be grid design. While grid design is a simple concept, there are now so many tools and ways of doing it that it might get confusing for newcomers.” […]

  17. Tracy says:

    Great article – I love blueprint. I have been using the 960.gs grid system lately however. Perhaps worthwhile mentioning is the grid system generator that will generate grid systems for you :) – perhaps it helps someone.

    http://www.gridsystemgenerator.com/

  18. […] Seven Smooth Steps to Superb GridsThis article offers a seven-step outline for creating grid-based designs, with linked resources to help you along the way. […]

  19. […] Seven Smooth Steps to Superb Grids This article offers a seven-step outline for creating grid-based designs, with linked resources to help you along the way. […]

  20. […] Seven Smooth Steps to Superb Grids This article offers a seven-step outline for creating grid-based designs, with linked resources to help you along the way. […]

  21. […] Seven Smooth Steps to Superb Grids This article offers a seven-step outline for creating grid-based designs, with linked resources to help you along the way. […]

  22. […] Seven Smooth Steps to Superb Grids This post gives step-by-step instructions for understanding, developing and using grids for page layout. Also included are additional resources for each step. […]

  23. […] Seven Smooth Steps to Superb Grids This post gives step-by-step instructions for understanding, developing and using grids for page layout. Also included are additional resources for each step. […]

  24. […] Seven Smooth Steps to Superb Grids This post gives step-by-step instructions for understanding, developing and using grids for page layout. Also included are additional resources for each step. […]

  25. […] Seven Smooth Steps to Superb Grids Categories inspirational […]

  26. Will says:

    This is the most helpful article I’ve found on grid web design. Thank you!

    It’ll help me when I tune up my own website.

Your Thoughts...


All content © Copyright 2017 by Sacha Greif.
Subscribe to RSS Feed – Posts or just Comments

Powered by WordPress
Designed by Graph Paper Press
Redesigned by Me