Reusable Divisions Of Space: Grids And Modular Design

Posted: 25 Feb 2013 05:30 AM PST

For the last few weeks I’ve been digging into the concept of modularity as it relates to web design. Last week I moved from modular content creation to modular design and considered how abstracting out components and patterns could lead to flexibility, efficiency, and a consistent visual language. There was one aspect of design that I didn’t talk about and that was modularizing the space of the canvas.

On the surface it might not seem like a discussion of typographic grids would fall into this same discussion of modularity. Aside from the idea of building a library of grid patterns, how do grids fit in to reuse? And don’t grids make things less flexible? I think when you look a little deeper the reasons for dividing space into modules that become a grid are very similar to the reasons we might build a library of buttons to reuse across projects.

Benefits of a Modular Grid

Modularity involves breaking apart the greater whole into smaller chunks that become building blocks for flexible combinations. It’s really no different with a grid. You break up a large amount of space into smaller units that later get combined in flexible ways.

Last week I covered 4 reasons for modularity in design and I’d like to consider grids through those same 4 lenses.

Separation of concerns leading to independence
Reuse of independent units
Efficiency in combining pre-existing units
Visual consistency through constraints

Separation and Independence

Naturally we can develop grids independent of any specific design, but that’s more what we were looking at last week. Here it’s more about how we organize space. A grid structure helps us to both separate and connect information. Grids create areas where we place elements and areas that are left as space.

With grids we aren’t literally reusing the space. We’re reusing the characteristics of a division of space.

The gutters and flowlines in a grid separate the information placed in one module from the information placed in another. Through the principle of proximity, some elements are grouped together connecting them, while other groups are clearly separate and independent from the first. The structure of a grid allows us to separate and connect information so it can be more easily digested.

A few months ago Anastasios Karafillis, writing for UX Booth suggested that we visually chunk different functionality in an interface. Navigation in one chunk, main content in another, a sidebar of related information in yet another. You no doubt already deign this way. A grid makes it easy to visually chunk a design.

Reuse of Independent Units

With grids we aren’t literally reusing the space. We’re reusing the characteristics of a division of space. We’re reusing the characteristics of various combinations of these divisions of space.

Even though I push for relative measurements, allow me to speak in absolute measurements to make a point. Say you determine a module will be 50px by 50px. Reuse comes from using those same measurements for all other modules in the design. The independent unit is the attributes you assign to the module.

You might then decide to combine 2 modules horizontally to create a 100px wide column. You’d reuse that with another 100px column right next to it and another next to it to create a column grid. The same would be true for any rows you create.

No matter how you ultimately divide the space you’re combining modules with the same visual characteristics. You’re be reusing those visual characteristics.

Efficiency of Pre-existing Modules

When faced with a blank canvas a designer has to determine where to place an element when there’s an infinite amount of options. It’s not easy to find the best option in a sea of infinity. The structure of a grid constrains this sea of options into a meaningful group of possibilities and makes it easier for us to choose.

A grid not only makes it more efficient for us to design the space, it makes it more efficient for viewers to to absorb what we place in the space. It enables easier scanning. It creates predictable patterns for where to look for information and even better specific types of information. A grid enables us to present complex information through a clarity of organization.

Ultimately a grid leads to efficiency for both designers and viewers because it divides and organizes space in a logical way. It helps designers choose and it helps viewers understand.

Visual Consistency through Constraints

The modularity of a grid creates consistency in how we use space. Elements aligned to the grid don’t appear anywhere. They’re placed in consistent locations on the canvas. This is especially true if we maintain the same grid across canvases, or from page to page in a deign.

Even when the structure of a grid is invisible, it’s structure is still felt and perceived by the viewer. It directs people where to look and it holds elements in familiar locations.

Grids aren’t arbitrarily designed. There’s a consistent logic of proportions behind them. The size of a module, a field, a column are based on a set of consistent guidelines. Grids impose a consistency in how we use space.

Interest within Consistency

Just as a design built from modular components doesn’t have to be boring, a grid of space built from modules doesn’t have to be boring either. For one you can break out of the grid. A grid is more guide than absolute rule. It’s ok to move some elements off the grid to add visual interest and attract the eye to them.

There are a lot of ways to combine modules into the larger units of fields, columns, and rows. A grid of 2 columns and 2 rows has at least 4 modules and thus 4 × 4 or 16 possible combinations of modules to fill the space. That doesn’t sound like a lot, but the more modules, the more the possibilities. An 8 × 8 grid would have nearly 4,100 possible combinations, a 12 × 12 grid over 20,000. There’s plenty of flexibility in those numbers.

We constrain choices with a grid. We don’t eliminate them.

And that’s only using one grid. There’s no reason you’re limited to only one grid on a single canvas. Different grids can be combined to form compound grids to allow for much greater possibilities and flexibility.

Summary

Grids follow the same principle of modularity we’ve been considering the last few weeks. In some ways that seems obvious given the terminology modular grids. In other ways though it isn’t quite as obvious that they’re the same thing.

However, when you think about how grids divide space and make it easier for us to make layout decisions, I think the modularity of grids falls right in line with the reusable modularity of components and design patterns.

They separate concerns, by dividing the space into modular units. The characteristics of these modular units are reusable and through reuse help us more efficiently place information. Finally the structure of these units in the grid leads to greater consistency in how content is organized.

The post Reusable Divisions Of Space: Grids And Modular Design appeared first on Vanseo Design.