Smashing Magazine we smash you with the information that will make your life easier. really.

Grid-Based Design: Six Creative Column Techniques

March 26th, 2008 in How-To | 83 Comments

Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

by Sean Hodge

Grid systems bring visual structure and balance to site design. As a tool grids are useful for organizing and presenting information. Used properly, they can enhance the user experience by creating predictable patterns for users to follow. From designer’s point of view they allow for an organized methodology for planning systematic layouts.

After creating a well-structured and usable grid, consider allowing it to breath. A page without a grid is a usability nightmare. On the other hand, a grid that has creatively overlapping, escaping, or energizing columns leads to a more enjoyable user experience. Discovering or planning areas of the design that will have some freedom will lead to more interesting and appealing design solutions.

What is Grid-Based Design?

Grids are structure imposed on chaos. They are a harmonious and reliable system for presenting information. Grids offer an effective design approach for site layouts and assist in communicating site’s main messages clearly to the end user. They created ordered hierarchies, proportional relationships, and clear visual paths for the eye to travel.

Its important to know your tools before trying to get creative with them. This means you should study the grid and understand how to successfully use it to create your site layouts. Learn to achieve balance, symmetry, and place emphasis on important content all through the use of the grid. If you need some information on Web grid usage utilize the resources below:

Grids are useful for communicating information clearly and effectively. Khoi Vinh’s redesign of a complex news-site proves it.

Designing With Grid-Based Approach
Massive roundup of grid based design resources here on Smashing Magazine.
Five Simple Steps to Designing Grid Systems Part I
Mark Boulton discusses this professional solution to a common Web design problem. Refer to his multi-part series for a review of grid use.
Grids Are Good (Right?)
Is a presentation by Mark Boulton and Khoi Vinh that covers the use of the grid as it applies to Web design. They do this while analyzing a fictitious though useful Yahoo redesign case study. They work through their methodology for using the grid while revealing concepts in this process.

Six Creative Column Techniques

Like skyscrapers in city centers, overwhelmingly, columns dominate Web design grids. Once you’ve mastered the grid as a tool then it’s time to get creative with it. Work on establishing a visual rhythm in your design. Then you can step in and break the visual flow for effect. The techniques discussed in the next section present effective ways of getting creative with your columns in grid-based Web design.

1. Embracing Disharmony

Disharmony is, of course, the opposite of harmony. A grid is a harmonious instrument. Its goal is to achieve balance, symmetry, and order. So why would you want to bring imbalance to this order? Why break up this carefully constructed data structure? The answer is to add interest.

Chaos is more interesting than order. A good murder mystery is infinitely more enjoyable than a story about taking a walk in the park. Jackson Pollock’s splattered paint canvas is more stimulating than a wall without it. A partly broken grid is more interesting than a perfectly ordered grid. Besides who doesn’t want to break the rules? Embrace some randomness, chaos, or discord and create a space for them to thrive within your designs.

2. Joining for Variety

Layouts that have strong horizontal areas are being seen more often, especially on home pages. Horizontal Web design areas feel more creative because vertical designs are so common on the Web. Try using more rows in your designs. Or join areas of a column together to create a display space in your design.

Rows can be used to break up the visual flow of a page. Each row you create gives a new opportunity for establishing new column areas with different sizes, numbers, and variety. Its possible to create pages on your site, or areas of your pages, that are heavily horizontal. Or join columns to form rows that add interesting areas to your layouts. Consider varying the number of columns in the rows you create.

The gray horizontal row below is heavily emphasized. The use of repeating horizontal backgrounds helps to make predominately vertical layouts feel wide. Adding these spaces to your layouts will allow them to stand out. Horizontal areas in sites will slow the user’s progression through the page and create emphasis.

3. Utilizing Angles

It’s possible to set an entire grid on an angle. In the article Rule Four: Spacing Is Your Friend an angled grid design is reviewed. The example used in this article is for print design though. The use of an angled grid is unusual on the Web. That’s because the layout of text on the Web is horizontal, not slanted.

You would likely use images to accomplish an angled piece of text. Flash would be another option. In both cases you’re loosing the semantic goodness and ease of use of Cascading Style Sheets. The use of angles to occasionally break your grid will add visual interest. If you restrict the use of angles to images you won’t lose any semantic or SEO benefits of the default horizontal text used in the Web.

4. Escaping Boundaries

One of the techniques in line with embracing some disorder is to break out of the boundaries you’ve established in your grid. Once you’ve established your order find ways for elements to move outside of it. Cross over the lines you’ve set up and break out of the visual flow of the page.

In the article Thinking Outside the Grid Molly E. Holzschlag discusses concepts of creating compelling visual design that breaks the mold of the grid. Some of her examples show boundaries being escaped. This is an inspiring conceptual article that also discusses the complexities involved in coding designs that are less rigid.

Pull-quotes are an example of a design element that presents an opportunity to break out of your established visual flow. The older version of Andy Rutledge’s Design View used interesting pull-quotes that broke the visual flow of the column. Doing this places greater emphasis on the pull-quotes than if they were kept within the content of the column.

Compare the old version to the newer site design below. The new design places pull-quotes within the boundaries of the content column. This is a less creative and more conservative solution. Though in either case the pull-quote creates a noticeable change in the visual flow of the column.

An abrupt change in the flow of the page will cause users to pause and notice the change in rhythm. This is true whether the pull-quote is kept within the column or moved outside the boundaries of its borders. Consider this the next time you use pull-quotes or if you’re embedding an image within your column. As an image presents the same design opportunity.

5. Illustrating Areas

Illustrations and the use of design elements allow for overlapping and breaking out of the structure you’ve created in your grid. They can be used to add some areas of creative disorder to counterbalance the rigidity of the grid.

In the example below the illustration at the top of the page breaks the grid by overlapping the gridlines and flowing into different content areas. The movement of the design elements within the illustration creates a different visual rhythm that acts in opposition to the order of the grid. There is balance in the design of these opposing forces. The illustrations in this design add stimulating areas of interest to an otherwise boxy layout.

6. Energizing Spaces

There are some basic design principles to consider when looking to energize space within your grid. Concepts such as asymmetrical balance, proximity, and repetition are discussed in the article The Principles of Beautiful Web Design by Jason Beaird.

These principles are at work in the portfolio design of Issara Willenskomer, shown below. Jason Beaird has this to say about asymmetrical balance,”Rather than having mirror images on either side of the layout, asymmetrical balance involves objects of differing size, shape, tone, or placement. These objects are arranged so that, despite their differences, they equalize the weight of the page.”

In the image shown below no two paragraphs or images are the same size. Columns are broken and overlap horizontally. Mathematical precision is abandoned and a grid based on an artist’s intuition and eye for design is used to fill this creative space. The balance achieved here is not based on rigid structure alone, but rather is achieved through the equalizing weight of asymmetrical balance.

Each portfolio piece repeats a structure of similar size and weight of presentation on the page. The elements within each space through their proximity function as single design units. Though each portfolio piece is presented with a unique rhythm within the confines of this space, thereby adding interest to the design.

There is great variety in each one of these portfolio spaces. This allows for a creative presentation that the designer will enjoy making and a viewer will find stimulating.

Case Studies

Three sites that creatively use columns and break out of the rigid confined of well structured grids.

Study #1: Satsu Design

The design of Satsu.co.uk uses sketch style illustrations to overlap the grid lines established for the site. These illustrations effectively communicate the concept of rough draft brainstorming creativity. Conceptually the illustrations don’t belong inside the confines of an ordered grid. They serve to bring interest, asymmetrical balance, and conceptual creativity to the design.

The use of illustrations, the spacing between elements, and the variety in weight of elements within each grid make this a visual stimulating design.

Study #2: Lake Crackenback

Lake Crackenback utilizes illustrative design elements to great effect. The interior page, second image below, has a strong three column grid. Though the presentation through the design gives the illusion that it is one column with side elements that overlap that column. The side columns successfully overlap and break the rigid layout of the grid. Order is maintained while visual interest is added.

Also, notice the difference in presentation between the home page and the interior page. Varying your grid on different pages can be a useful technique for adding interest as well.

Study #3: Edgepoint Church

Edgepoint Church has a strong grid and a two column layout. The home page stands out as unique. It has multiple rows that turn the two columns into three, or unite a column to form one space. The home page especially has a grid filled with variety. The grid is escaped with the use of angles and placement of the illustrations and photography that surround the layout. The header has a free flow design that opens up the top as a creative space.

Conclusion

There are multiple techniques to add interest to your grid. Certainly you should first understand how to use the grid effectively. Then work on escaping some of this rigid structure and create some free flowing spaces within your design. Or break the established flow and focus attention on a particular element. Utilize concepts such as disharmony, asymmetrical balance, and ordered chaos to bring areas of your site’s grid designs to life.

Sean Hodge is the creative mind behind AiBURN.com, a Weblog about design, creativity, inspiration and graphics.

Published in How-To, March 26th, 2008
Tags: grids, skills, techniques

1.

Pavel Ciorici (March 26th, 2008, 3:47 am)

You should add and this resource in this article: Link [960.gs]
2.

Christopher Hill (March 26th, 2008, 3:47 am)

Some nice layouts. Grid designs only look good if executed correctly, otherwise they look like a scramble of text. The Times Online is, in my opinion, a good example of grid based layouts.
3.

Shane (March 26th, 2008, 4:06 am)

Grid systems are a foundation of many an excellent site, and when done well, are fantastic.

Continuing the newspaper theme from Christopher Hill’s comment, Link [www.guardian.co.uk] is a great example too.
4.

Enrique (March 26th, 2008, 4:06 am)

El estudiado y correcto uso de un buen layout, es la base del éxito en lo que se refiere a una buena experiencia de usuario.

Great post, thanks.
5.

Reginald (March 26th, 2008, 4:23 am)

I liked most of the grid designs illustrated in this post. However, I could see that in some cases improper use could make the layout look a bit more like disharmony that harmony and cause visual confusion to the reader.
6.

Sacha (March 26th, 2008, 4:45 am)

Nice article ! It seems you’re all over the web these days ! Smashing Magazine, PSDTuts…

There has been a lot written on the subject of grids, but I like your approach. It’s nice to fget a real article and not just a list of random links sometimes :)

I also wrote Link [www.sachagreif.com] a while back. It concentrates more on the technical side of the question.
7.

Spence (March 26th, 2008, 4:59 am)

Spelling mistake at the top, ‘Khoi Vahn’ instead of ‘Khoi Vinh’. Great article BTW!
8.

Eureka (March 26th, 2008, 5:15 am)

Great post, thanks.
9.

Mike (March 26th, 2008, 5:47 am)

Thanks a lot, i was looking for such useful information about grid layouts.
10.

Dave Bowker (March 26th, 2008, 5:47 am)

Excellent article.
11.

Jason (March 26th, 2008, 6:39 am)

Excellent article, as these principles are the basis of graphic design and if used correctly translate perfect to the web; thus allowing not only the freedom to create dynamic and flexible web pages but also visually appealing. The most difficult part is overcoming the thinking that by using a grid you are essential trapped in a box… :)
12.

Mish (March 26th, 2008, 7:37 am)

Please, please, please run the text by an editor who understands the use of “lose vs. loose” and “then vs. than” — the occasional slip up wouldn’t have moved me to comment but this many egregious errors in a row roused my inner editor and distracted me from an interesting topic.

I don’t want to leave a purely negative comment because I found the article very interesting. I like the use of graphics to communicate the site’s structure (”content here” and “navigation tools here”) in a way that also makes a website more visually striking and memorable. The substance of the article was good food for thought.
13.

Mish (March 26th, 2008, 7:41 am)

Of course I would make an error when niggling about grammar word choice. *sigh* I wanted to quote the text that I felt needed attention:

In either case you’re loosing the semantic goodness and ease of use of Cascading Style Sheets. The use of angles to occasionally break your grid will add visual interest. If you restrict the use of angles to images than you won’t loose any semantic or SEO benefits of the default horizontal text used the Web.

That was the passage that fired up my inner editor.
14.

Peter B (March 26th, 2008, 8:45 am)

Not sure if this is technically considered “grid-based”, but the whole site is actually a grid of content tiles with the core functionality being a drag and drop of tiles to create your own custom grid of content. The grid is randomly populated from the content pool and each tile can be viewed in detail in a lightbox.

Link [www.startupneworleans.com]

Click on the “Spread the word” link to see the custom grid drag and drop functionality.
15.

IvoIvanov (March 26th, 2008, 10:01 am)

Wow..you guys really don’t leave out a thing.

Very impressive material over here.
16.

brandy (March 26th, 2008, 10:56 am)

The new design places pull-quotes within the boundaries of the content column. This is a less creative and more conservative solution.

Er, I wouldn’t say “creative” is really the opposite of “conservative.” How about using the word “dynamic” instead?
17.

Sean Hodge (March 26th, 2008, 12:41 pm)

@Mish - I appreciate the grammar lessons. Unfortunately, I have atrocious habits that go back to high school. I do have a need to get up to speed quickly. And I’d like to edit my own work successfully. Any suggestions are helpful. I have been adding the common mistakes you and others have pointed out to a list. Then I double check the work for these errors. If anyone knows of any good links on this subject feel free to let me know. Also, good point about reworking some paragraphs. The one you highlighted could use some work.

@Brandy - good point about using the word “dynamic”. I was struggling for the right word there.

@Jason - “The most difficult part is overcoming the thinking that by using a grid you are essential trapped in a box… :)” - Excellent point!

I’m glad people are finding the content helpful. The grammar will improve with each article as well. Thanks all!
18.

Justin Lilly (March 26th, 2008, 1:02 pm)

Fantastic article. I’ve been investigating this space recently and this was a nice summary of what I’ve been reading (plus a few extras!)
19.

andrew (March 26th, 2008, 1:29 pm)

you might check the anti-grid utilized by edfella.com - hey uses and abuses the grid wonderfully…

Link [www.edfella.com]
20.

Ben (March 26th, 2008, 4:05 pm)

Have just stumbled across a pretty sweet grid system (sure you guys have heard of these things), but have been playing with Link [www.960.gs] — good stuff!
21.

Lothar (March 26th, 2008, 9:14 pm)

The nice looking layout at Link [www.designbum.net] (one of the examples you give in the article) is done with… drumroll please… tables! As someone who has been doing web work for years I’m kind of shocked to see a designer using tables for layout anymore. Bummer. Makes a cool layout seem… tainted.
22.

anne (March 26th, 2008, 9:24 pm)

Very glad to read all of the comments here. It sound exellent to apply grid system. I may use it on my bbw dating site pluscupid.com.
23.

Azeem (March 27th, 2008, 12:40 am)

Brilliant article with some great links. Thanks again.
24.

Luke (March 27th, 2008, 1:53 am)

Great work guys :) keep it up.
25.

Ruben Casalta (March 27th, 2008, 4:45 am)

amazing article.
26.

Ruben Casalta (March 27th, 2008, 5:13 am)

Nice article.
27.

Martin (March 27th, 2008, 6:12 am)

Hi,
thanks a lot for including our recent work - Mike Poss! It is big honor for us.

Martin / madeo
28.

Camilo Oliveira (March 27th, 2008, 10:00 am)

Genial article, congratulations.
29.

Manoj Karmocha (March 31st, 2008, 2:07 am)

Good article!

I hope we see more good post, related to accessiblity, typography and usability too. And, nowadays there are lot of designers who claim to be web designer but they forget about overall stuffs which is required to be a good designers, hope your post will help them to understand the real importance of such knowledge.

Thanks,
30.

Paolo (March 31st, 2008, 1:45 pm)

thanks for this guide. i must start learning this techniques. they are very beautiful!
31.

hanoi (March 31st, 2008, 6:34 pm)

yeeaahh, Its nice
it make by vietnam guy ?
32.

Quevin (March 31st, 2008, 10:17 pm)

Grids are structure imposed on chaos.

Great article, thanks!
33.

Manoj Karmocha (April 2nd, 2008, 4:06 am)

Thanks for sharing your idea and knowledge dude..wish some of designers who always wanted to break the rules..might have got some ideas.

Well, dude keep up with your good article!
34.

Ralph (April 6th, 2008, 11:48 pm)

I like grid designed website.

My own website ( Link: Link [www.webpixelkonsum.de] ) based on a grid-design.

I hope some people like this kind of webdesign, too ;)

Ralph
35.

Naseer Ahmad Mughal (April 23rd, 2008, 12:50 am)

Excellent resource. I like grid designing…. now a days i am learning this. I found this article very helpful. the site 960 (dot) com help me a lot for learning the basic layout designing.

many thanks & Best Regards,
naseer ahmad mughal
Link [www.naseerahmad.com]
36.

HHA (April 30th, 2008, 11:34 am)

I a’m stdent webdesinger and want more advise about my web design.
can you please take a look at my site and advise me what to do or change.
37.

naseer ahmad mughal (October 9th, 2008, 4:37 am)

where is your site link

Best Regards,
naseer ahmad mughal
Link [www.naseerahmad.com]
38.

Rasmus Schultz (November 20th, 2008, 6:39 am)

I’ve just updated my Link [grid.mindplay.dk] script - you can now bookmark your grid and typography settings.