Grid-Based Design: Six Creative Column Techniques

Advertisement

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:

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

  • Designing With Grid-Based Approach3
    Massive roundup of grid based design resources here on Smashing Magazine.
  • Five Simple Steps to Designing Grid Systems Part I4
    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?)5
    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’s6 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.

Pollock7

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.

8

3. Utilizing Angles

It’s possible to set an entire grid on an angle. In the article Rule Four: Spacing Is Your Friend9 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.

Design b10

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 Grid11 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.

AIGA12

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 View13 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.

Design View 114

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.

Design View 215

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.

Mike Poss16

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 Design17 by Jason Beaird.

These principles are at work in the portfolio design of Issara Willenskomer18, 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.

Design Bum 219

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.

Design Bum 120

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.uk21 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.

Satsu 122

Satsu 223

Study #2: Lake Crackenback

Lake Crackenback24 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.

Lake Crackenback25

Lake Crackenback26

Study #3: Edgepoint Church

Edgepoint Church27 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.

Edgepoint28

Edgepoint 229

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.

Footnotes

  1. 1 http://www.subtraction.com/archives/2007/0318_oh_yeeaahh.php
  2. 2 http://www.subtraction.com/archives/2007/0318_oh_yeeaahh.php
  3. 3 http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/
  4. 4 http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-designing-grid-systems-part-1
  5. 5 http://www.subtraction.com/archives/2007/0318_oh_yeeaahh.php
  6. 6 http://en.wikipedia.org/wiki/Jackson_Pollock
  7. 7 http://www.alistapart.com/articles/outsidethegrid/
  8. 8 http://www.weeatt.com/
  9. 9 http://www.gomediazine.com/design-tip/rule-four-spacing-is-your-friend/
  10. 10 http://www.designbstudios.com/
  11. 11 http://www.alistapart.com/articles/outsidethegrid/
  12. 12 http://www.alistapart.com/articles/outsidethegrid/
  13. 13 http://www.andyrutledge.com/
  14. 14 http://www.andyrutledge.com/compromised-design.php
  15. 15 http://www.andyrutledge.com/falling-down.php
  16. 16 http://www.mikeposs.com/
  17. 17 http://www.sitepoint.com/article/principles-beautiful-web-design/3
  18. 18 http://www.designbum.net/portfolio.htm
  19. 19 http://www.designbum.net/portfolio.htm
  20. 20 http://www.designbum.net/portfolio.htm
  21. 21 http://www.satsu.co.uk/index.php/portfolio
  22. 22 http://www.satsu.co.uk/index.php/portfolio
  23. 23 http://www.satsu.co.uk/index.php/portfolio
  24. 24 http://www.lakecrackenback.com.au/
  25. 25 http://www.lakecrackenback.com.au/
  26. 26 http://www.lakecrackenback.com.au/
  27. 27 http://edgepointchurch.com/
  28. 28 http://edgepointchurch.com/
  29. 29 http://edgepointchurch.com/

↑ Back to topShare on Twitter

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

Advertising
  1. 1

    You should add and this resource in this article: http://960.gs/

    0
  2. 2

    Christopher Hill

    March 26, 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.

    0
  3. 3

    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, the Guardian website is a great example too.

    0
  4. 4

    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.

    0
  5. 5

    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.

    0
  6. 6

    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 an article about using grids a while back. It concentrates more on the technical side of the question.

    0
  7. 7

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

    0
  8. 8

    Great post, thanks.

    0
  9. 9

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

    0
  10. 10

    Excellent article.

    0
  11. 11

    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… :)

    0
  12. 12

    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.

    0
  13. 13

    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.

    0
  14. 14

    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.

    Startup New Orleans

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

    1
  15. 15

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

    Very impressive material over here.

    0
  16. 16

    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?

    0
  17. 17

    @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!

    -1
  18. 18

    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!)

    1
  19. 19

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

    http://www.edfella.com

    0
  20. 20

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

    0
  21. 21

    The nice looking layout at http://www.designbum.net/portfolio.htm (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.

    0
  22. 22

    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.

    0
  23. 23

    Brilliant article with some great links. Thanks again.

    0
  24. 24

    Great work guys :) keep it up.

    0
  25. 25

    amazing article.

    0
  26. 26

    Nice article.

    0
  27. 27

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

    Martin / madeo

    0
  28. 28

    Genial article, congratulations.

    0
  29. 29

    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,

    0
  30. 30

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

    0
  31. 31

    yeeaahh, Its nice
    it make by vietnam guy ?

    0
  32. 32

    Grids are structure imposed on chaos.

    Great article, thanks!

    0
  33. 33

    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!

    0
  34. 34

    I like grid designed website.

    My own website ( Link: webpixelkonsum ) based on a grid-design.

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

    Ralph

    0
  35. 35

    Naseer Ahmad Mughal

    April 23, 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
    My Blog

    0
  36. 36

    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.

    0
  37. 37

    naseer ahmad mughal

    October 9, 2008 4:37 am

    where is your site link

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

    0
  38. 38

    I’ve just updated my Grid Designer script – you can now bookmark your grid and typography settings.

    1
  39. 39

    This should not be published with such grammar and spelling mistakes. It’s an insult each other as web designers if we think it’s okay to publish something with such blatant errors. Get an editor.

    1
    • 40

      if you’re going to leave a scathing comment about grammar, you should at least check your own comment for grammar 1st. Just a tip.

      0
  40. 41

    Dana (Dana (April 5th, 2009, 10:13 pm)), please take a look at your comment.

    0
  41. 42

    Thanks for the info, im currently reading more about grids, at first i wasn’t interested in learning about them but now that im looking into how they can be used it has grabbed my attention.

    0

↑ Back to top