Why You Don’t Want to Go off the Grid.

If you’ve ever been soothed by the predictability and rigid organization of ice cube trays, demanded the ease and comfort of a lunch packed in a bento box or found Excel spreadsheets sexy, then read on, my obsessive/compulsive friend.

An appropriately sized grid pattern is at the root of all well-structured Web design. It may not seem tremendously exciting, but following a 6 or 12 point grid pattern can not only help achieve an easy to understand and use website, but can also save money, as well.

Grids are sets of horizontal and vertical line and column templates that guide the Web designer in spacing and size, which can help the designer achieve a harmonious and readable result.

When to Use Grids

Grids should be used whenever you are designing a site where the quick and efficient gathering of information is paramount (in other words, almost all the time). Even though the use of a grid template may seem confining, grids are flexible devices, and can actually encourage creativity, since the designer will be able to see what will and won’t work, instantly.

Grids are fashioned in several ways:

• The Block Grid: Essentially a large, single block delineating the parameters of the usable area. Also called a “manuscript” grid, a “single column” grid or a “do I really even need a grid for this?” grid. The block grid is best used for blogs, articles or large images.
• The Column Grid: A sequence of vertical columns, particularly good for diverse chunks of information as one might find on a news site or a retail site.
• The Modular Grid: A grid with both horizontal and vertical demarcations that is basically an evenly spaced series of boxes. The modular grid helps with strictly defined individual blocks of information and images. Using a modular grid when spacing sequences of small photos and captions can be helpful, but they are also quite confined; it is best to use a modular grid when exact specifications need to remain consistent. Tile floors, newspaper classified ad sections and the opening credit sequence of “The Brady Bunch” are all examples of the modular grid in action.
• The Hierarchal Grid: The last chance grid; the grid you can turn to when none of the other grids is really appropriate. This grid has customized and varied column and cell spacing, as opposed to the columns and cells that are more or less etched in stone in the modular and column grid templates. Hierarchal grids are more fancy-free than the grids above; they’re the bongo-playing, Kerouac-reading beatniks of the design pattern world.

Yield to the Grid and Save Money

Using a grid rather than attempting to structure a Web page free hand is tremendously time saving, and time is money, as the old cliché goes.

Using a familiar grid also spares potential customers the frustration of having to adjust to an unfamiliar design sequence. When we visit a website, we don’t necessarily want to be dazzled by the inventiveness of an incoherent structure. When we spend more time than we should trying to figure out the website, we tend to click off. We’re used to navigating websites in a certain way, and we want to be spared the inconvenience of having to scrutinize the page to find out where we want to go. Customers desperately want to give you their money; don’t discourage them by forcing them into a confusing maze of data.

You may think that it’s restrictive and uncreative to be hemmed in by a predetermined design template and, well, you would be wrong. Every artistic medium has some parameters; creativity lies in the ability to use those parameters to your advantage.

So, what have we learned today? We learned that adhering to a grid helps Web designers create an aesthetically pleasing website that gently encourages site users to buy things. We learned that, like our parents, grid patterns can be rigid and strict, but can occasionally be flexible if we’ve done our chores. Lastly, we learned that even though the concept of a grid seems confining, sometimes we need to be confined for our own financial good.

Data-Driven Brand Development

Want a best-selling brand? SmashBrand is a brand development agency for FMCG and CPG companies. From brand strategy to packaging design testing, our Path To Performance™ process guarantees a retail performance lift. Book a time to discuss your project with our team.