Breaking grids by Nerijus Pudziuvelis

Breaking the grid

It’s often said that rules are made to be broken, and the same can be said of grids which, in themselves, represent a set of rules for a layout to follow. The content of a page will generally dictate whether or not you decide to stick rigidly to a grid, or whether it’s appropriate to adapt a grid to create the right styling for a project. Of course, you do need to start off with a grid before you can break out of it. It may seem more logical to simply throw the grid away entirely, but this would be a mistake as there are likely to be elements of the original grid that you retain. A more deconstructed-looking layout will still need to hang together if it is going to succeed.

1 Deconstruction implies that you are, in some way, taking apart what has already been built. This exercise will show how the grid we’ve created during the previous tutorials can be changed to give a more organic feeling to a layout. Open the last version of the files with both the four- and five-column grid in place, and reveal the layer that contains the modular boxes you drew as part of Tutorial 3.

To begin the process of deconstruction we’ll take a selection of the modules from the existing grid, and create new relationships between them through appropriate resizing and repositioning.

It’s important to carefully consider which modules you can adjust, as the deconstruction process must still have some kind of order to it. If you were to take a building apart you wouldn’t pull out the first brick to hand as the building may fall down around you; the same applies to grids, if visually rather than physically.

2 Begin with the corner modules of the grid. Extend them outward until they are bleeding off the edges of the page. Extend the inner modules until they meet the gutter at the center of the spread. At the same time, increase the height of each module by four lines (or 52pt). Finally, drag the inner edges toward the center of the page until they meet the edges of the middle two columns of the four-column grid. The resulting grid is shown below, with overlapping areas in a darker tint.

If the resized modules were filled with a color, or if an image were placed in that position, the visual relationship with any type placed accurately on the original grid will be quite different from that produced by an unadjusted grid. The examples below show how the visual dynamic changes. 3 To reproduce your own version of this, take any image and text available to you and try various combinations of image, color tint, and text using our sample grid. This version illustrates why it is important to carefully consider which elements of the grid can be changed. At full strength, the overlaid text would not be readable; the additional design element of the knocked-back image has been introduced in order to make the deconstruction work. Invariably, your decisions will be driven by the content you’re working with.

Here are a few more examples showing how the grid we’ve been working with can be adapted to create additional layout opportunities while retaining the structural integrity of the original grid. 4 In this example, each outer module of the grid has been extended to 44mm (13⁄4in)—the measure of the four-column grid. Each module of the next column in has, in turn, been increased to 44mm (13⁄4in) in width and moved to align above the four-column grid. This creates a region, slightly off-center within the text area, in which text and images (or tint areas) can be overlaid.

5 Try combining individual modules into larger groups that designate areas to be occupied by blocks of text or images. By offsetting the larger modules, you can achieve an alternative dynamic to that offered by the basic column structure. It isn’t always necessary to overlay material when the grid is broken. Text measures or image sizes can be adjusted accordingly, but try to maintain consistent spacing between items for visual harmony.

6 In addition to the modules that fit within the horizontal and vertical grid lines, try introducing alternative shapes as modules that sit above the original grid. These areas can be used very effectively for the placement of images that interact dynamically with text. Keep a close eye on how sizing and placement will affect the measures of any text that runs around shaped modules, and avoid reducing measures beyond an acceptable “words per line” count.