Five killer ways to break the grid

The grid isn’t primarily a visual design tool, it’s a user-experience aid – like lanes on a street. A good grid will establish a norm, and a rhythm of viewing a website so that users aren’t thinking about where to read or view next, they’re intuiting it because of the order and hierarchy you’ve established on the grid.
If everything followed the regimen of the grid, though, we’d all go cuckoo from visual boredom. Sometimes we want a design to have elements that pop out of the lines and say, “Hey, look at me! I’m cool for breakin’ the rules”.

Define the grid

If you don’t first define a strong grid, then breaking it won’t mean anything. A strong clean grid with a clear structure and plenty of white space for breathing room is one of the most important parts of a good visual structure for your content.
There are a ton of resources on designing on the grid, but I recommend a thorough read of Mark Boulton’s handbook, Designing Grid Systems for the Web, from Five Simple Steps.

Break the grid

A subtle breaking of the rules can be a great way to draw attention to a detail in your design. Done right, it can help your design break away from that constrained and boxy look – a common critique of web design.
An image pulled out beyond a border, or a sticker label stuck over a bit of content will go a long way to add a nice, defiant detail to your design. Too much of this technique will kill the nuance, though, and you’ll lose the interest. Choose your rule breaking carefully.

Five examples to check out

1. Apple Apple.com’s iMacs pop over the well-defined edge of the main frame of content, giving the sense that these Macs will not be constrained.

2. Gene's Sausage Shop You can use a badge, sticker, banner or ribbon to break the grid and deliver a little fun as Gene’s Sausage Shop & Delicatessen does here.

3. Shweplantis Aimee Duplantis and Matthew Shwery’s wedding site uses a frame to define an image then gives it more interest and extra presence by letting a part of the image break the border.

4. Andy Clarke The subtle but effective image overlapping on designer Andy Clarke’s portfolio is a great way to keep an image stack fresh.

5. The Style Spy Images aren’t the only way to break the grid. Fashion blog thestylespy.com’s headline script flies out to suggest energy and fun.

If you've seen any examples of sites subtly breaking the grid, why not mention them in the comments?