DON’T MISS OUT

Get updates on new articles, webinars and other opportunities:

Six Rule-Breaking Websites That Defy The Design Grid

by Angela Noble

Having a solid grid system is foundational to good design – web or otherwise. The grid was first widely recognized in the 1950s when the International Typographic Style, or Swiss Style, was adopted by many designers.

“The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.”
~Josef Müller-Brockmann

Even in a design where the grid isn’t apparent, there is most likely an underlying grid system that the designer used as a foundation to build on and establish order and hierarchy.

In this example from nike.com, a three column grid is very obvious. The page is designed around the grid in a literal way using boxes that span one, two or three columns. All the elements line up nicely and have an asymmetrical balance.

Nike

Some designs switch between two, three, four, one and six column grids with ease like whiteboard.is.

Whiteboard

Whatever grid structure you choose, working within a solid grid ensures all the elements in your design will align and provide unity and order to the design. Grids also provide the user with a framework and a certain amount of predictability and visual paths for viewers to follow.

But rules are meant to be broken! This is where the phrase “break the grid” comes in. As with any art form, once you understand the structure and guidelines you have to work within, you gain the ability to break out of them (think Picasso!).

Check out these 6 websites that break the grid

Glamour.biz

This design from glamour.biz  has a simple two column grid that’s broken by the illustrative design elements. Breaking the grid adds interest, flow and hierarchy to a two column layout that could have been boring.

glamour

Apple.com

Have you ever noticed apple.com breaks the grid? Even though their designs adhere very closely to the grid, if you look closely, you’ll see they subtly break out of the grid on some pages.

Take this page highlighting the iPhone for example. The other product pages are similar – the corner of the product (in this case the iPhone) breaks out of the grid. This adds visual appeal but also communicates something about the product. They’re too awesome to contain, perhaps?

apple

Hugeinc.com

This layout from hugeinc.com drops an image in the middle of a column of text. Pull out quotes are often used in similar ways.

hugeinc

Spongebob.com

A not-so-subtle example of successful grid breaking can be found on spongebob.com, and many other websites that are made for kids (or the young at heart). Characters from the show pop up in the main content areas as well as in the margins of the design to add interest and fun.

spongebob

Campl.us

Campl.us, a website promoting an iPhone camera app called Camera+, breaks the grid in a number of eye-catching ways. They use a diagonal image as well as a callout box that doesn’t quite line up with the columns established by the rest of the text. Scrolling down on the website, the design follows a very zig-zag path down to the bottom which establishes a clear, easy path for the viewer.

campl

Seymour Powell

Seymour Powell, a design agency, has a very organic flash component to their website. Each time the deck of cards is clicked, a stack fly off and land in what may seem like a haphazard way, but if you look closely, you’ll see each card is positioned quite precisely to create balance and lead your eye around each one.

seymour

Looking for some great grid resources to aid you in your next design?

Try GuideGuide! This is by far the best Photoshop plugin ever made (at least as far as designing for web goes). Super simple to install, intuitive user interface, and all the functionality to set up guides for any type of grid you could possibly imagine.

guideguide

A very common width in web design is 960 pixels. Based on that number, Nathan Smith devised the 960 Grid System. On his site you can find templates for CSS, InDesign, Photoshop and more. My favorite tool is sketch paper!

960gs

Wondering what kind of grid the site you’re looking at is designed around? Use this handy bookmarklet, 960 Gridder created by Andrée Hansson.

Want to learn more about grids?

Check out thegridsystem.org.

the grid system

Know of other websites that successfully break the grid? Please comment!

One Comment

DON’T MISS OUT

Get updates on new articles, webinars and other opportunities:

Angela Noble

Angela Noble runs Noble Intent Studio where she specializes in email marketing, branding, and website creation. Email her at angela@nobleintentstudio.com or follow her on Twitter @AngelaNoble_.

ONE COMMENT

Comment Policy

Please join the conversation! We like long and thoughtful communication.
Abrupt comments and gibberish will not be approved. Please, only use your real name, not your business name or keywords. We rarely allow links in your comment.
Finally, please use your favorite personal social media profile for the website field.

SPEAK YOUR MIND

Your email address will not be published.

  1. Pj Schott says:
    May 10, 2012 at 9:03 am

    Loved this one. Especially Spongebob.

Show Me My Heatmap

Really easy to understand the user behavior with the new @CrazyEgg reports! @qubitTV #UX #prodmgmt

Francisco Mingote

@fmingote