Over the years I’ve had a number of discussions with other web designers on grids. I’ve found that a lot of web designers, especially those that are self taught, don’t use them. Often, I find it’s because, like me, they were never really taught how to use them. In the online design community it’s something that is rarely discussed and we are the worse for it. Why is it that many designers have a hard time with the grid?
First, developing grids is all about numbers, proportions, and other equally unsavory things. Most of us creative types are about freedom and expression. The idea of whipping out a calculator during design is not the sexiest of ideas, and thus some us tend to drop the subject. Second, we tend to think of design as an esoteric process, a series of magical ‘aha’ moments. Grids take work and planning and we often think it would put a halt to our creative process.
The grid is the artist’s true brush
However the great irony is that using a grid actually liberates creativity, not stifles it. Have you ever started to design and just end up staring at a blank canvas? That’s because your staring at infinite possibilities. A canvas with unlimited layouts and unlimited directions to pursue. You have little or nothing to go on. I found that staring at the blank canvas usually lead to little or no design exploration. Typically I would go with the first blast of inspiration I got and left it at that because it’s too difficult to come up with an entirely different layout. It was the blank canvas that became stifling.
With a good grid in place, you already have something on the screen giving you direction for your layout. This lets you jump right in and start exploring a variety of options. I’ve always found that the key to honing in on a great layout is by constantly exploring through compare and contrast. Using a grid makes it easy to try new ideas, and it often opens up unusual layouts you otherwise might not think of on your own. Through this process of constant exploration and refinement, you begin to sharpen and focus your design into a final masterpiece. This is how they open the door for creativity, rather than closing it. Think of a grid as your own home-brewed, instant inspiration.
Drop your pants and show us your grid
So let’s have at it! Do you use grids? How do you come up with them? Post a screenshot of a grid you have used and let us know how you developed it. Haven’t used them very much? Let us know your thoughts. There as real lack of good information and examples in this area and I’d like to see more people stepping forward with their experiences.
So to start, here’s a sneak peek at a grid we are using for our upcoming site redesign. When we launch our new design, we’ll post a follow up article outlining how we developed it, and how we followed it throughout the rest of the site.
Other Resources
- Five Simple Steps to designing grid systems
- Why use a grid
- The funniest grid you ever saw
- The Grid: The structure of design
Published on August 28, 2006
Resides in Design
Comments feed | TrackBack URI
22 Responses to “Grids: show ‘em if you got ‘em”
1
matthijs on August 30th, 2006
Interesting topic, looking forward to the upcoming redesign (which site?), of which the images look already great.
I’ve started an interest in grid design with the articles of Mark Boulton last year. And one of the books you mention: Making and breaking the grid is very good. And inspirational.
Often using a grid will come naturally, but starting with a well-defined one certainly helps a lot and can indeed be liberating in some form. At the moment after the first creative paper sketches for something, I will always start with designing a solid grid.
Funny you mention the calculator, as in fact it’s something I do use once in a while
2
Ryan Nichols on August 30th, 2006
Actually it will be our site. Guess I should make that a bit clearer.
If you get a change, post a link to an image of one of your designs with the grid on top. I’d love to see it.
3
matthijs on August 31st, 2006
Ok, well looking forward to it. Although I like this one very much. So you’d better give it your best
I managed to create an image of my own site with the grid rules here. In the lower part it’s a bit off but that’s on purpose.
4
Ryan Nichols on September 1st, 2006
Awesome! Your work is nice and clean by the way.
5
matthijs on September 2nd, 2006
Thanks Ryan. Still learning, but trying my best. Here’s a current project I’m working on.
6
Rafael Lüder on February 20th, 2007
I´ve designed this almost a year ago (it is now going through a redesign, but the grid is the same).
http://www.flickr.com/photo_zoom.gne?id=146677750&size=o
I´m really interested on grids, specially for books and magazines (where I have more control working with picas and points than pixels). Grids have been my main research topic for the last 5/6 years.
The screenshot uses a 8 column grid (90px each, 10px gutter), the vertical space is divided every 25px (and every 5px where more precision is necessary). Grids are fun.
7
Designing With Grid-Based Approach | Smashing Magazine on April 13th, 2007
[...] Grids: Show ‘em if you got ‘em Grids are a topic that’s rarely discussed or disected in the online community, yet is one of the fundamental components of good design. Why is it that many designers have a hard time with the grid? [...]
8
Webdesign (css, grafica e altro) » Blog Archive » Designing With Grid-Based Approach on April 14th, 2007
[...] Grids: Show ‘em if you got ‘em Grids are a topic that’s rarely discussed or disected in the online community, yet is one of the fundamental components of good design. Why is it that many designers have a hard time with the grid? [...]
9
Pablo Castellazzi on November 9th, 2007
For those who hate the calculator, you can find good start points here: http://code.google.com/p/blueprintcss/ and here: http://developer.yahoo.com/yui/. Also take a look at the video at yahoo site, it’s a 40m talk about how to use grids, and specially the yui grid system. This guy http://www.subtraction.com/archives/2007/0318ohyeeaahh.php has a very educative explanation of what’s all about too.
10
Grids: show ‘em if you got ‘em on November 14th, 2007
[...] Grids are a topic that’s rarely discussed or disected in the online community, yet is one of the fundamental components of good design… Man I got to study grid design more! Its on my to do list now
) Click here to visit>> [...]
11
i say that | Designing With Grid-Based Approach on December 14th, 2007
[...] Grids: Show ‘em if you got ‘em Grids are a topic that’s rarely discussed or disected in the online community, yet is one of the fundamental components of good design. Why is it that many designers have a hard time with the grid? [...]
12
65 Resources for Grid-Based Design | Vandelay Website Design on March 31st, 2008
[...] Grids: Show ‘Em if You Got ‘Em – Apples to Oranges [...]
13
mm.blog » Grids… on January 21st, 2009
[...] http://applestooranges.com/blog/post/grids-show-em-if-you-got-em/ http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/ http://alistapart.com/articles/outsidethegrid http://www.designbygrid.com/ [...]
14
» 29 Graffiti Tutorials using Photoshop/Illustrator on May 7th, 2009
[...] Grids: Show ‘Em if You Got ‘Em This article highlights artistic features of grid. It illustrates how a person can suffice his /her art temptation by using grids. It also tells about some finest virtual brush strokes. [...]
15
Elizabeth K. Barone on May 12th, 2009
Anyone use the http://960.gs? I’m using it for a new site I’m working on. This is the first time I’ve ever used a grid in my design and coding process (I normally tend to sketch it out on paper and then create a mockup in Photoshop to see how it will all look in color).
16
Elizabeth K. Barone on May 12th, 2009
Why my link just got messed up, I don’t know. It’s called 960.gs, and there is no question mark in the URL.
17
40+ Grid-based design Articles, Tutorials and Tools » TemplateLite.com on May 18th, 2009
[...] Grids: Show ‘Em if You Got ‘Em This article highlights artistic features of grid. It illustrates how a person can suffice his /her art temptation by using grids. It also tells about some finest virtual brush strokes. [...]
18
Web Host Right on August 27th, 2009
Currently i became more interested in grids, i wasn’t looking into using them at first but now im reading what i can about them.
19
GRID | Tahki on June 14th, 2010
[...] Grids: Show ‘Em if You Got ‘Em – Apples to Oranges [...]
20
WEEK 9 SUMMARY | In Over My Head : a blog by ian henderson on October 25th, 2010
[...] http://applestooranges.com/blog/post/grids-show-em-if-you-got-em/ [...]
21
Designing With Grid-Based Approach | PSDSir on July 9th, 2012
[...] Grids: Show ‘em if you got ‘em Grids are a topic that’s rarely discussed or disected in the online community, yet is one of the fundamental components of good design. Why is it that many designers have a hard time with the grid? [...]
22
Recopilación sobre Generadores CSS de cuadrículas de diseño | CSSBlog ES on December 20th, 2012
[...] LayoutGridControl: A Grid Overlay System for Design Development.Gridding the 960Grids Show em Off if You Got emGrids: an invisible foundationGrids: Order Out of ChaosIntroduction to Layout GridsPrototype a [...]