Professional Documents
Culture Documents
Shop Wallpapers, Icons Photos, Show cases CSS, JS, WordPress PSD, Fonts, Freebies mail@example.com Go! Go!
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
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
converted by Web2PDFConvert.com
Beyond Visible: 100 Years Of Infrared Photographs
noupe.com
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
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
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
Photoshop Time-Savers
converted by Web2PDFConvert.com
Wordpress Themes for 2009
Illustrator Tutorials
53 C SS Techniques
50 jQuery Techniques
50 C SS Techniques
Graffiti Artworks I
Graffiti Artworks II
Photography Techniques
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.
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.
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
42 Comments
Reply
Reply
Reply
Reply
Reply
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
Reply
Reply
Reply
Reply
Reply
Reply
Reply
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
Reply
Reply
Reply
Reply
Reply
Reply
converted by Web2PDFConvert.com
Makes a cool layout seem… tainted.
Reply
Reply
Reply
Reply
Reply
Reply
Reply
Reply
Reply
Reply
Reply
converted by Web2PDFConvert.com
Grids are structure imposed on chaos.
Reply
Reply
Reply
Reply
Reply
Reply
Reply
Reply
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
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 *
Smashing Media GmbH. Created by Sven Lennartz & Vitaly Friedman | Back to top Design by Function, Team23 GbR
converted by Web2PDFConvert.com