As a kid, I was crazy about comic books.
Maybe you have fond memories of comics, too.
Remember how the narrative advanced on page after page full of boxes?
Those boxes inside the frame of the page are my first memory of a grid structure.
In comics, almost every box seemed to have something bursting out of it.
I love grids, but there are times when we just need to break out of the grid!
Breaking out of the grid can help create a sense of movement and
dynamism in your layouts.
Let's look at some great examples of punching through the grid or
violating the grid.
Sometimes a simple move can have a big effect.
Just pushing through the stem of the big capital T creates movement and dynamism.
And notice on the photo caption at the right how the little piece of the T
carries out the motif.
Another way to break out of the grid is to bleed elements off of the screen or page.
Popping the giant initial J off to the right adds movement, and it also mirrors
the way the image on the facing page bleeds off to the top, left, and bottom.
Bleeding off of the edges has two benefits, it allows you to
make elements larger and thus to have more impact, and it creates visual excitement.
The second spread creates visual activity in a slightly quieter way
by overlapping the initial cap L from the photo, and
pushing it through the boundaries of the text column.
In this date fold,
the illustrations are popping out of their columns through the bar across the top.
And at the far left,
the small figure pops out into the column of space between the rules.
These seemingly small design choices can really add liveliness to your designs.
This could have been a boring layout.
What makes it active and exciting is the ways that it violates the grid.
Even though all of its main elements are rectangles and
lines, they are poking into one another, bleeding off of the photo.
And the text blocks are uneven.
The designer took his cue from the way the contrasting woods slats in
the photograph are budding up against one another.
The image and the layout reinforce and amplify one another.
See if you can spot all of the places in this layout that are violating the grid.
I can see at least six instances.
Most obvious, the large yellow tin area and its contents.
The small figure violating the photo and
stepping through the horizontal bar at the bottom left.
The glossary box.
And to the bottom right, the cyan arrow.
In the middle of the bottom area, the house violates the grid in two places.
You could argue that the partial car silhouette is another kind of
grid violation.
It's a very active page.
So, you have choices.
You can see that you don't have to be a slave to all of
the beautiful lines you've created.
Think about your content.
Think about the rhythm and tenor of your project.
Think about the impression you want to make on your audience, and
see if pushing through the grid will amplify and enhance your concepts.