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.
Some designs switch between two, three, four, one and six column grids with ease like whiteboard.is.
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.
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?
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.
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.
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.
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.
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.
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!
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.
Know of other websites that successfully break the grid? Please comment!
Original post published on Crazy Egg’s blog “The Daily Egg”. Archived here.