Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

Grid-Based Design: Six Creative Column Techniques

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. [Content Care Nov/07/2016]

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. Read also: Designing With Grid-Based Approach1

What is Grid-Based Design? Link

Grids are structure imposed on chaos. They are a harmonious and reliable system for presenting information. Grids offer an effective design2 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. Grids are useful for communicating information clearly and effectively. Khoi Vinh’s redesign of a complex news-site proves it.

Six Creative Column Techniques Link

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 Link

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’s3 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 Link

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 Link

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.

Design b

4. Escaping Boundaries Link

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

Design View 15

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 26

5. Illustrating Areas Link

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 Poss7

6. Energizing Spaces Link

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

Design Bum 2

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 1

Case Studies Link

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

Study #1: Satsu Design Link

The design of 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 1

Satsu 2

Study #2: Lake Crackenback Link

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.

Lake Crackenback

Lake Crackenback

Study #3: Edgepoint Church Link

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.


Edgepoint 2

Conclusion Link

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 Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8

↑ Back to top Tweet itShare on Facebook

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

  1. 1

    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.

  2. 2

    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.

  3. 3

    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.

  4. 4

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

  5. 5

    Great post, thanks.

  6. 6

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

  7. 7

    Excellent article.

  8. 8

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

  9. 9

    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.

  10. 10

    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.

  11. 11 guys really don’t leave out a thing.

    Very impressive material over here.

  12. 12

    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?

  13. 13

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

  14. 14

    Justin Lilly

    March 26, 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!)

  15. 15

    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

  16. 16

    Brilliant article with some great links. Thanks again.

  17. 17

    Great work guys :) keep it up.

  18. 18

    Ruben Casalta

    March 27, 2008 4:45 am

    amazing article.

  19. 19

    Ruben Casalta

    March 27, 2008 5:13 am

    Nice article.

  20. 20

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

    Martin / madeo

  21. 21

    Camilo Oliveira

    March 27, 2008 10:00 am

    Genial article, congratulations.

  22. 22

    Manoj Karmocha

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


  23. 23

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

  24. 24

    yeeaahh, Its nice
    it make by vietnam guy ?

  25. 25

    Grids are structure imposed on chaos.

    Great article, thanks!

  26. 26

    Manoj Karmocha

    April 2, 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!

  27. 27

    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.

  28. 28

    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.

    • 29

      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.

  29. 30

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

  30. 31

    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.


↑ Back to top