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.
Pingback: Color website design » Blog Archive » Grid-Based Design 101
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!
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.
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.
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/
Kel,
Thanks for the additional resources, certainly all very worthy of being mentioned.
Pingback: Easily layout your site using Grid-Based Design | White Sands Digital
Pingback: Information Bricolage » Grid-Based Design 101
Pingback: March’s Best Links | Vandelay Website Design
Pingback: Coolness roundup #6: Grid-based & CSS flisterz:blog
Pingback: 65 Resources for Grid-Based Design | Vandelay Website Design
Pingback: Magic Multi-Inspirational Sites of March | Malene Hald
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…
Pingback: Which Social Networks Provide the Best Design-Related Content? | Vandelay Website Design
Pingback: tech.twomadgeeks.com » Grid-Based Design 101
wow, thank you so much, grid style looks systematic.
Pingback: 23 Kick Ass Portfolio Designs | + fuel your creativity // find your spark +
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.
Pingback: Down the Foxhole - Grid Based Design for Flash Templates
Pingback: Padub :: Free, Hosted ad server
Pingback: Grid Based Design Toolbox | Fuel Your Creativity
Pingback: 50 Totally Free Lessons in Graphic Design Theory - Psdtuts+
Pingback: 50 Totally Free Lessons in Graphic Design Theory « One’s Graphics and Design lab
Pingback: 50 Totally Free Lessons in Graphic Design Theory | Learning Curve
Pingback: 50 Totally Free Lessons in Graphic Design Theor « ” Catatan ilmiah Erwin “
Pingback: 50 Totally Free Lessons in Graphic Design Theory pt.2 | A Design Mafia
Pingback: » 29 Graffiti Tutorials using Photoshop/Illustrator
Pingback: Grid Based Tasarım « Skill Diary
Pingback: 40+ Grid-based design Articles, Tutorials and Tools » TemplateLite.com
Pingback: Grid System Based Design Toolbox | Themeflash : The Better Resources For All Your Web Needs
Pingback: Fuel Your Interface » Grid Based Design Toolbox
Pingback: The 1Kb CSS Grid
Pingback: 45+ CSS Grid Systems, Layout Generators and Tutorials that every Designer should know | tripwire magazine
Pingback: Ultimate Guide To Grid-Based Web Design - Noupe
Pingback: Ultimate Guide To Grid-Based Web Design: Techniques and Tools « Tech7.Net
Every good design starts out with a grid. I always use the rule of thirds.
Pingback: Big list ‘o’ web design links : CSM4
Pingback: Grid Style In Modern Web Design: Showcase and Resources | Showcases | instantShift
Pingback: GRID | Tahki
Pingback: 20 Methods for Upping Your Current Web Design Skills | Brajesh Sangahi's Blog
Great post. The whole grid concept sort of confused me but you cleared it up nicely. Thanks!
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.
Pingback: 20 Methods for Upping Your Current Web Design Skills | Creaive Expert India-Blog
Pingback: Graphic Design & Communications Theory : micronaut.ca
Pingback: Totally Free Lessons in Graphic Design Theory | VapvaruN | Wp Experts