Grid-Based Design 101


Designers of all types (web, print, etc.) are constantly facing issues involving the structure of their designs. Web designers are increasingly turning to grids to control the structure of web pages, and grids have long been used extensively in other design mediums. For many designers, grid-based design is still somewhat of a mystery. In this article we’ll take a look at some of the basics of grid-based design so that you can understand it and apply it to your projects.

What is Grid-Based Design?

The grid serves as the framework for page layout. It divides the page horizontally and vertically into columns and rows which work to order the elements of the design. The text and images used on the page fit into place and align with one another according to the grid. The lines of the grid themselves are not necessarily visible (although in some designs they are) but they are used by the designer to create the proper width and height of elements to align the page.

grid.gif

Some Examples:

New York Times
nytimes1.gif

Frieze.com
frieze.gif

Subtraction
sub.gif

Why Use Grid-Based Design?

Grids in web design can be helpful for both the designer and the visitor. For the designer, the grid helps to achieve balance, spacing, and to compartmentalize the data. The grid can aide with organizing the content and future additions and updates may be a bit easier if there is a specific place for the content to go.

Visitors benefit from grids by arriving at a page that is easier to digest and the structure helps with usability. News sites and others with large amounts of content on a page can especially benefit from the use of a grid. As we saw above, the website for the New York Times is one of the more well-known grid-based designs. Without the effective use of a grid, it’s likely that with the amount of content on the homepage, it would appear more cluttered and less organized.

Helpful Resources for Further Development:

Mark Boulton is one of the leading sources of knowledge involving grid-based web design. If you’re interested in taking a more in-depth look at grids and how you can use them for yourself, Mark has written an excellent 5 part series to lead you through the process.

Grid Designer is a handy online tool that can help you to quickly and easily get your grid set up. You enter some variables such as the number of columns, the width in pixels, gutters, and margins, and Grid Designer produces the layout (with measurements) for you.

Design by Grid is a gallery featuring grid-based designs. If you’re looking for inspiration or for plenty of examples, this is the place to go.

Grids Are Good was a presentation at SXSW (2007) led by Khoi Vinh and Mark Boulton. Their excellent presentation is available in this PDF document.

Have You Designed Any Grid-Based Sites?

What’s your experience with grid-based design? What is your opinion of it, as a reader or a designer? Feel free to leave a link to your own grid-based designs in the comments.

About Steven Snell

Steven Snell is a web designer and freelance writer. He maintains a blog at VandelayDesign.com that focuses on web design and related topics.
This entry was posted in Design Styles and tagged , . Bookmark the permalink.

45 Responses to Grid-Based Design 101

  1. Pingback: Color website design » Blog Archive » Grid-Based Design 101

  2. Ben Carlson says:

    The next site or two that I develop I’m planning on building around a grid system. I just came across another great grid framework, http://960.gs/ and plan on using that to build the site. Thanks for the link to the gallery, there are some sweet layouts!

  3. Armen says:

    Nice article Steven (do you write everywhere?).

    I’ve been designing the majority of my work to strict horizontal grids for some time now. Some of them are simple, and you’d barely no it was there (like the site linked to in my name). Others are more obvious, like my personal site.
    It’s one of the key elements of my design process now.

  4. Steven Snell says:

    Ben,
    Yes, I just found 960.gs today on the delicious front page. It looks promising.

    Armen,
    Not everywhere, just enough places to make people sick of me… I like your blog, it has a nice look.

  5. Kel says:

    Seems like Blueprint CSS ( http://code.google.com/p/blueprintcss/ ) deserves a mention too… and of course Yahoo’s YUI. SmashingMag did another decent roundup this time last year. http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/

  6. Steven Snell says:

    Kel,
    Thanks for the additional resources, certainly all very worthy of being mentioned.

  7. Pingback: Easily layout your site using Grid-Based Design | White Sands Digital

  8. Pingback: Information Bricolage » Grid-Based Design 101

  9. Pingback: March’s Best Links | Vandelay Website Design

  10. Pingback: Coolness roundup #6: Grid-based & CSS flisterz:blog

  11. Pingback: 65 Resources for Grid-Based Design | Vandelay Website Design

  12. Pingback: Magic Multi-Inspirational Sites of March | Malene Hald

  13. Τakis says:

    I agree with most of what I read here. But I have the fact that almos 99% of the grid based layouts that I meet have no fluid-ness. I mean, OK, there has to be some part of the grid that might use the extra space that these grids leave out. Not everyone has a screen 1024px wide. Not any more!

    For instance in the case of the website of a newspaper the space where the article – or the main pages most significant article – goes could very well be fluid and use up the empty screen space. Why do I never see that? Beats me…

  14. Pingback: Which Social Networks Provide the Best Design-Related Content? | Vandelay Website Design

  15. Pingback: tech.twomadgeeks.com » Grid-Based Design 101

  16. Panda says:

    wow, thank you so much, grid style looks systematic.

  17. Pingback: 23 Kick Ass Portfolio Designs | + fuel your creativity // find your spark +

  18. Leon P says:

    To play devil’s advocate: grids have their place, but they’re not the answer to every confused architecture.

    For example, Yahoo uses a pretty strict grid to align its content, but the Yahoo home page is a mess, simply because it has too much content. Google – which is by no means designed to a grid – is far more effective.

    Grids essentially try to impose a static order over a fluid medium, which means that certain users (especially those with lower res monitors) lose out.

    Having said that, I recently designed a site (Ipswich Scrabble Club using a 6 column grid (using ems, no less), and it was a pretty useful tool: you simply place content within blocks and it looks balanced. It’s also easy to emphasise content by placement and by assigning important stuff more columns.

  19. Pingback: Down the Foxhole - Grid Based Design for Flash Templates

  20. Pingback: Padub :: Free, Hosted ad server

  21. Pingback: Grid Based Design Toolbox | Fuel Your Creativity

  22. Pingback: 50 Totally Free Lessons in Graphic Design Theory - Psdtuts+

  23. Pingback: 50 Totally Free Lessons in Graphic Design Theory « One’s Graphics and Design lab

  24. Pingback: 50 Totally Free Lessons in Graphic Design Theory | Learning Curve

  25. Pingback: 50 Totally Free Lessons in Graphic Design Theor « ” Catatan ilmiah Erwin “

  26. Pingback: 50 Totally Free Lessons in Graphic Design Theory pt.2 | A Design Mafia

  27. Pingback: » 29 Graffiti Tutorials using Photoshop/Illustrator

  28. Pingback: Grid Based Tasarım « Skill Diary

  29. Pingback: 40+ Grid-based design Articles, Tutorials and Tools » TemplateLite.com

  30. Pingback: Grid System Based Design Toolbox | Themeflash : The Better Resources For All Your Web Needs

  31. Pingback: Fuel Your Interface » Grid Based Design Toolbox

  32. Pingback: The 1Kb CSS Grid

  33. Pingback: 45+ CSS Grid Systems, Layout Generators and Tutorials that every Designer should know | tripwire magazine

  34. Pingback: Ultimate Guide To Grid-Based Web Design - Noupe

  35. Pingback: Ultimate Guide To Grid-Based Web Design: Techniques and Tools « Tech7.Net

  36. Every good design starts out with a grid. I always use the rule of thirds.

  37. Pingback: Big list ‘o’ web design links : CSM4

  38. Pingback: Grid Style In Modern Web Design: Showcase and Resources | Showcases | instantShift

  39. Pingback: GRID | Tahki

  40. Pingback: 20 Methods for Upping Your Current Web Design Skills | Brajesh Sangahi's Blog

  41. Great post. The whole grid concept sort of confused me but you cleared it up nicely. Thanks!

  42. Edok Ben says:

    I’m a complete novice at grid-bases designs , but need some ideas on how to START something of my own. I must admit that I’ve been thrilled by the comments read so far by all those who have been able to make one grid-base design or the other.
    Stumbling into these article has in no small measure stepped up my believe that someday(not too long from now, I’ll be having my first grid-base design), however inferior it might seem.
    Any information as regarding this will be of utmost importance to me. Thank you.

  43. Pingback: 20 Methods for Upping Your Current Web Design Skills | Creaive Expert India-Blog

  44. Pingback: Graphic Design & Communications Theory : micronaut.ca

  45. Pingback: Totally Free Lessons in Graphic Design Theory | VapvaruN | Wp Experts