Designing Broken Grid Layouts
Although traditional grid layouts are tried and true, from time to time you may want to experiment with “breaking the grid” in order to create a unique experience for your audience. Before we talk about this unique way to build your site’s layout, however, it’s important to have a grasp of what a grid is.
A grid is an invisible structure that provides a map for all the elements you place on your site. Most sites use grid to make sure that text and images are proportionally sized and don’t overlap or obscure any important content. While this is great for usability and readability, occasionally it can become repetitive and predictable. Now, in order to break the mold, you don’t need to throw out the grid completely. This could frustrate and confuse your reader. But by thoughtfully forgoing the grid in certain areas, you can make a creative and visually arresting site. Following are some ways that you can selectively break the grid on your site.
1. Movement
Movement can be an unexpected way to break gridlines. By applying animation to elements of your site, you can pleasantly subvert viewer expectations using small paths of movement that cross the invisible lines of the grid. Video can also be a helpful way to achieve the same effect. For an example, check out volunteer.uark.edu, which uses a looped video in the main header.
2. Parallax
Here’s a method you can implement easily on any image. Parallax, a way of styling images that allows background images to move more slowly than the site’s foreground, can help break up the grid vertically as users scroll through your page. To use parallax, simply select it as an option in any module that allows image uploads. See an example below.
3. Layered Elements
Try allowing elements to drift into each other’s space in order to achieve a multidimensional, layered effect. Consider carefully placing some elements slightly off center to help it stand out from the rest of the design.
4. Unconventional Text: Stairs, tilted, wrapped, overrun, pull quotes
Consider using text in unconventonal ways, overrunning it slightly with an image, placing in in a staircase style layout, wrapping text around elements, etc. Check out some examples of unconventional text in print below.
5. Collapsed Gutters
Gutters are the space between elemtns in the grid. For the most part, gutters help make sure that your elements don’t overrun each other, ensuring visibility of each element. Try using some transparent elements with collapsed gutters to create points of emphasis–this will break up your grid but ensure that your site is still readible.
6. White Space
There’s no need to fill every element of a grid. Leaving strategic white speace can make your overall grid more inviting, and adds emphasis to the content you do have.
7. Accent colors
Accent colors can work with your design to add areas of interest. Consider using accent colors to form partial borders to rows or sections, or colored buttons.
