This article originally appears on Lousch.net
When graphic designers talk about “the grid” they’re talking about something surprisingly old, often invisible, deceptively simple, and ultimately revolutionary in the world of design. You see it everyday without knowing it. In fact, your ability to navigate, read, and comprehend information is largely dependent on it.
So what is the grid?
Simply put, the grid is the underlying structure of a page comprised primarily of columns and rows. These divisions not only help compose and organize content, they also dictate the size and relative proportions of all elements on a page including empty space. The effect is a harmonious design aimed at clear, easy-to-navigate levels of text and image.
Much of the grid’s development in graphic design is based in print. Print is a fixed medium. It’s physical. Paper has edges and those edges strictly define what is possible within its bounds. The grid likes boundaries.
This brochure demonstrates how a grid can create a clear yet visually dynamic hierarchy of information, especially in a content-rich communication.
Digital space is different. It “responds.” It is, by comparison to print, boundless. While looking at a website on your computer screen, you think you are looking at a 2-dimensional page. However, with endless devices that all have different resolutions, screen proportions, and physical dimensions, designers today have to accommodate all possibilities, not just one physical space.
LEFT: A typical 3-column grid divides a piece of paper. The size and proportions of the page are fixed. RIGHT: A window can expand or contract, changing the size and proportion of a web page. A 1-column grid at a narrow window size can expand to a multi-column grid at wider sizes.
The digital grid takes on a more flexible form. Many source codes and grid systems are available online to support grid-based site development. In fact, a new service called The Grid even promises a level of artificial intelligence where your site’s design, from image cropping to layout, all adapts to your changing content.
Regardless of how it’s built, the philosophy behind the grid endures online. Visually, having a network of columns and rows remains a good way to organize content. The added benefit of a grid in responsive web design is it allows for “break points” or markers that can shift content to fit your window or device’s size, maximizing design and legibility.
We’ve put together this short guide to some of the web’s most common and prevalent grids. Identifying these grids and the context in which they’re used helps us determine the best kinds of grids to use for specific kinds of content. Knowing your grid means having a strategy behind your design that enhances your user’s experience.
1. The T-Grid
The T-Grid is a popular and effective layout in managing a simple hierarchy of information. Websites that use a T-Grid typically have large, wide images to maximize the full width of your window while a centered, narrower column contains the site’s main text and image content. A sidebar is often used to promote supplementary content like blog posts, videos, and social media.
Example: kkr.com (designed by Lousch)
2. The Gallery Grid
The Gallery Grid is optimal for websites that have large amounts of image content such as retail sites or art portfolios. The modular layout is easily responsive while also creating bite-size chunks of information that are quick and convenient to access.
Example: baubauhaus.com
3. The Editorial Grid
The Editorial Grid is among the most common site layouts and spans numerous media types. The EG creates a visually rich, multi-level hierarchy of content that resembles traditional newspaper or magazine layouts. For this reason, many news and media outlets, online catalogs and blogs use the EG. However, to leverage the volume of content on these sites, this grid is typically fixed and less responsive than more modular grids.
Example: polarfoundation.org
4. The Container Grid
The Container is really a grid within a grid. In the previous examples, the boundaries and sections of the layout are mostly dependent on how the grid responds to the size of your window, like pieces of a puzzle. This Container Grid, however, relies on a single column to maintain the site’s boundaries while the content contained within shifts and responds.
Examples: katvig.dk/en, r-ny.com/
5. The Multi-Column Grid
TOP: Content that exists in each individual column shift placement at various window sizes. MIDDLE: Content that spans columns scales to various window proportions. BOTTOM: Content that spans columns can both shift placement and scale proportionally with various window sizes.
The Multi-Column Grid is perhaps the most responsive and versatile. The columns in this grid not only carry content, but also act as break points as window sizes change, shifting and scaling content for better display within the window.
Examples: thegridsystem.org, heydays.no/, niceandserious.com/
Designing with a grid is not only essential to remaining compatible with today’s technology, but is also part of a philosophy of design that values clarity above all things. If books, apps, and websites make up the visual architecture of our daily lives, then the grid exists to support that architecture by moving us through spaces of information with ease and pleasure.
Stay tuned for the next installment of Up Your Grid Game where we dive a little deeper into the origins of grid-based design and how it became an international standard.
