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.
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.
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.
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.