Producing a well designed, and aesthetically pleasing web site must begin with planning and preparation. This is not exclusive to gathering content, such as vibrant photos, well-written copy, or choosing appropriate colors and typeface. The very base of your design begins with wire frames and the grid.
A wire-frame is like a blueprint for your site, a skeletal visual representation of how you want your site to look, and how you want to organize and arrange your content.
What is a Grid?
Similar to wire frames, a grid can create a basic structure for your design. This image from webdesign.tutsplus.com is a great visual aid to help understand how the grid works.
The grid consists of vertical units, separated by gutters, which together form columns. The units form the grid, and the gutters represent white-space. Columns are simply containers in which to store your content.
A strong understanding and consistent use of the grid will strengthen any web developers technique, and will help simplify the structure of your content. As many of us new to web design can attest, creating a layout can be frustrating. Trying to determine where to place content, how to align the different elements so it flows well and feels unified, can be a challenge.
Breaking the Grid
Traditionally, the grid ensures that columns do not overlap, and elements do not bleed into one another, thus maintaining a clean, legible layout.
Breaking the grid involves challenging the notion of content-focused layout and design. Many designers break the grid to bring focus to a call to action, or to draw the user’s attention to specific content. The grid layout creates logically organized, symmetrical, perfectly aligned content. The intention is to present a clear design which can be easily navigated by new and returning users. There is absolutely nothing wrong with this approach, but aesthetically it can get a bit boring. That’s why designers now are playing with ways to break the grid, in an intelligent and effective way.
Breaking the grid the wrong way will result in a poorly designed site. There is potential to disrupt the flow of content and to make navigation difficult. This article suggests to choose one way to break the grid then use that approach consistently throughout the site. Your users will appreciate that this new look or function is present on other pages. It not only gives them an opportunity to get used to it, but may create more interest and engagement with your site.
One technique for breaking the grid that I really love is through big, bold typography. Some designers are challenging the rule of separating elements. As seen in the example below, the text on the left begins in its own space, and ends just inside the space parallel to it; the photo. You can see as well the geometric shape of the photo that is almost leaning into the text area, outside its column. I think this is an effective and interesting use of space. It includes the traditional structure of the grid, yet skews it just enough to draw the user in with the text, and take notice of the image. In this example, the layout focuses the user’s attention on the call to action. If you look at the other pages on their site, you’ll see this style is carried through consistently.
As powerful as this technique is, not all attempts are equally accomplished. A mistake that is easy to make is trying to break the grid in too many ways at once. Doing so will cause confusion for the user. The site should still be easy to navigate and important content simple to find. This article from Design Shack offers some excellent guidelines regarding how to apply breaking the grid techniques while still maintaining an intuitive design and a sold structure for your content. Breaking the grid can be a great tool, but keep it simple, know your audience, and be consistent.
Wasserman, Ed (2016) A Comprehensive Introduction to Grids in Web Design. Retrieved from https://webdesign.tutsplus.com/articles/a-comprehensive-introduction-to-grids-in-web-design–cms-26521
Awwwards Team (2017) 30 Grid-Based Websites. Retrieved from http://www.awwwards.com:8080/30-grid-based-websites.html
The Best Designs. (2017) Ghafari Associates. Retrieved from https://www.thebestdesigns.com/designs/ghafari
Cousins, Carrie (2017) How to Break the Grid without Making a Mess. Retrieved from https://designshack.net/articles/layouts/how-to-break-the-grid/