You are on page 1of 14

Home Graphics Inspiration Coding Design Email Newsletter Search

Shop Wallpapers, Icons Photos, Show cases CSS, JS, WordPress PSD, Fonts, Freebies mail@example.com Go! Go!

Magazine RSS Feed


206,572 readers
Follow us on Twitter
257,954 followers

Advertisement Advertise with us!


Smashing Magazine Smashing Network

Grid-Based Design: Six Creative


Column Techniques PSD to HTML Services C reate free stunning flash websites!
By Sean Hodge March 26th, 2008 Design 42 Comments Publishing Policy

Advertisement

A new service from Adobe. C reate and win with HammerKit

Premium Blog Themes White-Label SEO Services

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
PSD to HTML Newsletter Design & C oding
systematic layouts.

After creating a w ell-structured and usable grid, consider allow ing 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 w ill have some
freedom w ill lead to more interesting and appealing design solutions.

[By the w ay, did you know w e have a free Email New sletter? Subscribe now and get Online Project Management MailC himp E-Mail Marketing
fresh short tips and tricks in your inbox!]

Network Jobs

What is Grid-Based Design? Smashing Network


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
Useful Adobe Photoshop Techniques, Tutorials and Tools
smashingmagazine.com
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. Blockquote Bulge
css-tricks.com
Its important to know your tools before trying to get creative w ith them. This means
you should study the grid and understand how to successfully use it to create your Free 960.GS CSS Photography Template and Tutorial
site layouts. Learn to achieve balance, symmetry, and place emphasis on important designshack.co.uk
content all through the use of the grid. If you need some information on Web grid
usage utilize the resources below : Quitting Your Job to Become a Freelancer
freelancefolder.com

converted by Web2PDFConvert.com
Beyond Visible: 100 Years Of Infrared Photographs
noupe.com

50 Awesome Speed Paintings for Your Inspiration


onextrapixel.com

Accessibility Principles for the Modern Designer


speckyboy.com

10 Professional WordPress Themes for Business Websites


webdesignledger.com

Add this widget to your site!

Advertisement
Interact
Grids are useful for communicating information clearly and effectively. Khoi Vinh’s
About
redesign of a complex news-site proves it.
C ontact
Designing W ith Grid-Based Approach
Regular Authors
Massive roundup of grid based design resources here on Smashing Magazine.
Become an Author
Five Simple Steps to Designing Grid Systems Part I
Mark Boulton discusses this professional solution to a common Web design Publishing Policy
problem. Refer to his multi-part series for a review of grid use.
List of Tags
Grids Are Good (Right?)
Smashing Jobs
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 w hile analyzing a fictitious though Smashing Newsletter
useful Yahoo redesign case study. They w ork through their methodology for
Smashing Network
using the grid w hile revealing concepts in this process.
Smashing Shop

Follow us on Twitter

Six Creative Column Techniques Subscribe to RSS-Feed

Noupe Design Blog

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

1. Embracing Disharmony
@trishawebs it's our
Disharmony is, of course, the opposite of harmony. A grid is a harmonious instrument. pleasure! Thanks for
Its goal is to achieve balance, symmetry, and order. So w hy w ould you w ant to bring following us, Trisha!
imbalance to this order? W hy break up this carefully constructed data structure? The about an hour ago
answ er is to add interest.

Chaos is more interesting than order. A good murder mystery is infinitely more
enjoyable than a story about taking a w alk in the park. Jackson Pollock’s splattered New on SmashingMag:
paint canvas is more stimulating than a w all w ithout it. A partly broken grid is more Useful Adobe
interesting than a perfectly ordered grid. Besides w ho doesn’t w ant to break the Photoshop Techniques,
rules? Embrace some randomness, chaos, or discord and create a space for them to Tutorials and Tools -
thrive w ithin your designs. http://su.pr/2lxbW8
(please RT)

converted by Web2PDFConvert.com
(please RT)
about an hour ago
More cartoons

Join in: Group Design


Advertisement Project: List with
Functions -
http://bit.ly/a84b8L
about an hour ago

Entitifier: paste some


HTML and it will escape
nasty characters that
should be entities -
http://bit.ly/cq2N5B
about 3 hours ago

2. Joining for Variety @Murenamax thank you


:-)
Layouts that have strong horizontal areas are being seen more often, especially on about 3 hours ago
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. What are your most
useful and valuable
Row s can be used to break up the visual flow of a page. Each row you create gives a
sites with strong focus
new opportunity for establishing new column areas w ith different sizes, numbers,
and variety. Its possible to create pages on your site, or areas of your pages, that
on usability and user
Popular 2010 experience? #smux
are heavily horizontal. Or join columns to form row s that add interesting areas to
your layouts. Consider varying the number of columns in the row s you create. about 3 hours ago
Web Design Trends 2010

The gray horizontal row below is heavily emphasized. The use of repeating horizontal 100 iPhone Wallpapers
backgrounds helps to make predominately vertical layouts feel wide. Adding these
100 Wordpress Themes 2010 UX Myths: debunking
spaces to your layouts w ill allow them to stand out. Horizontal areas in sites w ill slow
100 Wordpress Themes 2009
user experience
the user’s progression through the page and create emphasis.
misconceptions -
45 Useful C hecklists
http://uxmyths.com
30 Free High-Quality Fonts about 4 hours ago
More Free High-Quality Fonts

Printable PDF Templates


Are CSS Frameworks
iPhone App Design Evil? -
Facebook Fan Page Design http://bit.ly/bOWN2x -
Beauty-Retouching Tutorials
Well, are they? #smcss
about 4 hours ago
Vintage & Retro Tutorials

Photoshop Time-Savers

Bizarre and Funny Websites @iA nice one, Oliver,


Writers looks great!
Useful Usability Findings
Maybe you would like to
Business C ard Design give away a couple of
C olor Theory For Designers licenses to our Twitter
Photoshop Actions
followers / Facebook
fans?
Photoshop C ustom Shapes
about 4 hours ago
3. Utilizing Angles Photoshop Text Effects

Photoshop Tutorials: Best of


It’s possible to set an entire grid on an angle. In the article Rule Four: Spacing Is Your @droudable das macht
Glossaries For Web Designers
Friend an angled grid design is review ed. The example used in this article is for print eigentlich nichts ;-)
design though. The use of an angled grid is unusual on the Web. That’s because the Free UI and Wireframing Kits Danke für Deine
layout of text on the Web is horizontal, not slanted. Desktop Wallpapers I Retweets, Jürgen!
about 4 hours ago
You w ould likely use images to accomplish an angled piece of text. Flash w ould be Desktop Wallpapers II
another option. In both cases you’re loosing the semantic goodness and ease of use
Dual-Screen Wallpapers
of Cascading Style Sheets. The use of angles to occasionally break your grid w ill add
visual interest. If you restrict the use of angles to images you w on’t lose any Navigation Design Trends
semantic or SEO benefits of the default horizontal text used in the Web. Powerful Time-Savers

Wordpress Themes for 2009

converted by Web2PDFConvert.com
Wordpress Themes for 2009

Illustrator Tutorials

Free Icon Sets I

Free Icon Sets II

Free Icon Sets III

E-Mail Newsletter Design

Free Design Templates

53 C SS Techniques

50 jQuery Techniques

50 C SS Techniques

Graffiti Artworks I

Graffiti Artworks II

Photography: Black & White

Photography Techniques

Fantastic HDR Photos

4. Escaping Boundaries Stunning Pictures and Photos

Transparent Screen Photos


One of the techniques in line w ith embracing some disorder is to break out of the
boundaries you’ve established in your grid. Once you’ve established your order find
w ays 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 w ere kept w ithin the content
of the column.

converted by Web2PDFConvert.com
Compare the old version to the new er 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 w ill cause users to pause and notice the
change in rhythm. This is true w hether the pull-quote is kept w ithin 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 w ithin 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 flow ing into different content areas. The movement of
the design elements w ithin 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 otherw ise boxy layout.

6. Energizing Spaces
There are some basic design principles to consider w hen looking to energize space
w ithin 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 w ork in the portfolio design of Issara W illenskomer, show n
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 show n below no tw o paragraphs or images are the same size. Columns

converted by Web2PDFConvert.com
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 w eight of asymmetrical balance.

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

There is great variety in each one of these portfolio spaces. This allow s for a creative
presentation that the designer w ill enjoy making and a view er w ill find stimulating.

Case Studies
Three sites that creatively use columns and break out of the rigid confined of w ell
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 betw een elements, and the variety in w eight of
elements w ithin each grid make this a visual stimulating design.

converted by Web2PDFConvert.com
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 w ith side elements that
overlap that column. The side columns successfully overlap and break the rigid
layout of the grid. Order is maintained w hile visual interest is added.

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

converted by Web2PDFConvert.com
Study #3: Edgepoint Church
Edgepoint Church has a strong grid and a tw o column layout. The home page stands
out as unique. It has multiple row s that turn the tw o columns into three, or unite a
column to form one space. The home page especially has a grid filled w ith variety. The
grid is escaped w ith 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 w ork on escaping some of this rigid
structure and create some free flow ing spaces w ithin 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.

converted by Web2PDFConvert.com
Like 11 people like this.

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

4
Tags: grids, layouts, techniques

Bookmark Vote up Retweet Share


Advertising

42 Comments

Pavel Ciorici March 26th, 2008 3:47 am


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

Reply

Christopher Hill March 26th, 2008 3:47 am


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

Reply

Shane March 26th, 2008 4:06 am


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.

Reply

Enrique March 26th, 2008 4:06 am


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.

Reply

Reginald March 26th, 2008 4:23 am


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.

Reply

Sacha March 26th, 2008 4:45 am


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

converted by Web2PDFConvert.com
I also wrote an article about using grids a while back. It concentrates
more on the technical side of the question.

Reply

Spence March 26th, 2008 4:59 am


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

Reply

Eureka March 26th, 2008 5:15 am


8
Great post, thanks.

Reply

Mike March 26th, 2008 5:47 am


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

Reply

Dave Bowker March 26th, 2008 5:47 am


10
Excellent article.

Reply

Jason March 26th, 2008 6:39 am


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

Reply

Mish March 26th, 2008 7:37 am


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.

Reply

Mish March 26th, 2008 7:41 am


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.

Reply

Peter B March 26th, 2008 8:45 am


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

converted by Web2PDFConvert.com
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.

Reply

IvoIvanov March 26th, 2008 10:01 am


15
Wow..you guys really don’t leave out a thing.
Very impressive material over here.

Reply

brandy March 26th, 2008 10:56 am


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?

Reply

Sean Hodge March 26th, 2008 12:41 pm


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!

Reply

Justin Lilly March 26th, 2008 1:02 pm


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

Reply

andrew March 26th, 2008 1:29 pm


19
you might check the anti-grid utilized by edfella.com – hey uses and
abuses the grid wonderfully…
http://www.edfella.com

Reply

Ben March 26th, 2008 4:05 pm


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!

Reply

Lothar March 26th, 2008 9:14 pm


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.

converted by Web2PDFConvert.com
Makes a cool layout seem… tainted.

Reply

anne March 26th, 2008 9:24 pm


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.

Reply

Azeem March 27th, 2008 12:40 am


23
Brilliant article with some great links. Thanks again.

Reply

Luke March 27th, 2008 1:53 am


24
Great work guys :) keep it up.

Reply

Ruben Casalta March 27th, 2008 4:45 am


25
amazing article.

Reply

Ruben Casalta March 27th, 2008 5:13 am


26
Nice article.

Reply

Martin March 27th, 2008 6:12 am


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

Reply

Camilo Oliveira March 27th, 2008 10:00 am


28
Genial article, congratulations.

Reply

Manoj Karmocha March 31st, 2008 2:07 am


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,

Reply

Paolo March 31st, 2008 1:45 pm


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

Reply

hanoi March 31st, 2008 6:34 pm


31
yeeaahh, Its nice
it make by vietnam guy ?

Reply

Quevin March 31st, 2008 10:17 pm


32

converted by Web2PDFConvert.com
Grids are structure imposed on chaos.

Great article, thanks!

Reply

Manoj Karmocha April 2nd, 2008 4:06 am


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!

Reply

Ralph April 6th, 2008 11:48 pm


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

Reply

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


35
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

Reply

HHA April 30th, 2008 11:34 am


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.

Reply

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


37
where is your site link
Best Regards,
naseer ahmad mughal
Link [www.naseerahmad.com]

Reply

Rasmus Schultz November 20th, 2008 6:39 am


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

Reply

Dana April 5th, 2009 10:13 pm


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.

Reply

ogbot February 25th, 2010 8:59 pm


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.

Reply

converted by Web2PDFConvert.com
Mark July 23rd, 2009 11:29 am
41
Dana (Dana (April 5th, 2009, 10:13 pm)), please take a look at your
comment.

Reply

John August 26th, 2009 12:19 pm


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.

Reply

Leave a Comment
Make sure you enter the * required information where indicated. Please also rate the article
as it will help us decide future content and posts. Comments are moderated – and
rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not
spam, and do not advertise!

Name * Email *

Message *

Categories Information Content Connect


Graphics, Inspiration About Us Smashing Shop Follow us on Twitter
Coding, Design Regular authors Smashing Book Join us on Facebook
Photoshop, Wordpress Become an Author Smashing Network RSS Feed - Magazine
Tutorials, Wallpapers Publishing Policy Mobile Version RSS Feed - Network
Icons, CSS Advertise with us Smashing E-Mail Newsletter Contact us
Smashing Job Board
Smashing Banners and Icons

Smashing Media GmbH. Created by Sven Lennartz & Vitaly Friedman | Back to top Design by Function, Team23 GbR

converted by Web2PDFConvert.com

You might also like