Grid-Based Design 101
Posted in Design StylesMar 24, 08 | 11:10 am
Steven Snell
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.
Some Examples:
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.
inspiring commentary
March 24th, 2008 at 11:29 amColor website design » Blog Archive » Grid-Based Design 101
[…] admin wrote an interesting post today onHere’s a quick excerptGrids 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 … […]
March 24th, 2008 at 1:04 pmBen Carlson
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!
March 24th, 2008 at 4:03 pmArmen
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.
March 24th, 2008 at 6:31 pmSteven Snell
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.
March 24th, 2008 at 11:34 pmKel
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/
March 25th, 2008 at 5:19 pmSteven Snell
Kel,
Thanks for the additional resources, certainly all very worthy of being mentioned.
March 25th, 2008 at 8:40 pmEasily layout your site using Grid-Based Design | White Sands Digital
[…] read more | digg story Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages. […]
March 25th, 2008 at 10:08 pmInformation Bricolage » Grid-Based Design 101
[…] A good 101 article with resources about grid-based design methods by Steven Snell […]
March 29th, 2008 at 9:37 amMarch’s Best Links | Vandelay Website Design
[…] Grid-Based Design 101 - from Most Inspired Blog. […]
March 31st, 2008 at 1:29 pmCoolness roundup #6: Grid-based & CSS flisterz:blog
[…] of grid and columns designs, few weeks back.They are clean and simple and looks kinda cool. Learn more about grid-based design or maybe you can head back to 2005 to read this old but great article - Thinking Outside the Grid. […]
March 31st, 2008 at 8:48 pm65 Resources for Grid-Based Design | Vandelay Website Design
[…] Grid-Based Design 101 - Most Inspired […]
April 1st, 2008 at 4:53 pmMagic Multi-Inspirational Sites of March | Malene Hald
[…] Grid-Based Design 101 […]
April 2nd, 2008 at 12:45 pmΤakis
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…
April 2nd, 2008 at 7:42 pmWhich Social Networks Provide the Best Design-Related Content? | Vandelay Website Design
[…] Grid-Based Design 101 […]
April 17th, 2008 at 4:21 pmtech.twomadgeeks.com » Grid-Based Design 101
[…] Link: Most Inspired Blog […]
April 25th, 2008 at 2:58 amPanda
wow, thank you so much, grid style looks systematic.
May 22nd, 2008 at 9:33 pm23 Kick Ass Portfolio Designs | + fuel your creativity // find your spark +
[…] is a one page site. Through my research in finding the best designed portfolio sites I looked at grids (which always hold my attention), typography and navigation / layout of the […]