The grid may be a key element of good web design but you can enhance it by breaking its own rules, says Matthew Smith.
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. You can learn more from our Designer's Guide to Grid Theory.
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.
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.
Four great examples
01. Apple
A couple of years back Apple.com made its iMacs pop over the well-defined edge of the main frame of content, giving the sense that these Macs will not be constrained.
A subtle but effective image overlapping on a past iteration of designer Andy Clarke's portfolio. This technique is a great way to keep an image stack fresh.
