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.
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.
Download a free sample from my book, Design Fundamentals.
Thanks Alessandro. I hope it’s a trend that outlasts the typical trends. I think web designers have finally caught on about girds and I don’t think they’re going away any time soon.
You give some good examples of sites and apps using them. I remember seeing that Facebook concept when it first made the rounds. I don’t expect Facebook to adopt it any time soon, but it’s looks great, doesn’t it?
I think web designers caught on to girds before responsive design, but I can see where the latter is pushing innovation. I think the real genius of responsive design is that’s it making us all rethink a lot of things. it reminds me a lot of when everyone moved from tables to css.
“(…) it reminds me a lot of when everyone moved from tables to css.”
Yes, I’m that old too…
We are still using a grid system that it has its origin on the design of information from printed media, though. I wonder when we’ll manage to actually think of something that would move away from that, and in that sense being a ‘proper’ innovation (as in evolution), more than a simple adaptation.
Would it be the case when NUIs would be the most popular UIs? It looks like we are moving towards a ‘physicalisation’ of a 3rd spatial dimension that so far has not been truly exploited given the constraints of 2 dimensions screens.
Funny. We’ve learned we’re both old. The tables to css thing happened as I was getting started in business. I had built a few tables based sites for practice and for some continuing ed classes, but after build one for a client I decided there had to be a better way. I found some of Eric Meyer’s books and have never looked back.
It makes sense to me that we use a grid system with origins in print. That’s what designers knew so they brought it online with them. We’re at least reaching the point where we realize it’s no longer about absolute measurements and basing the grid around the dimensions of the canvas so it’s progress.
Where it will be 20 years from now who knows. In the immediate future I expect more proportional grids based on something from the content. Exploring a 3rd dimension sounds interesting.
Went through your blog, you have lot of good advice on design. I have a question, and maybe a very basic one – what is the sequence or order to apply the rules/principles when I am making a design composition ? They all seem very overwhelming together….Thanks for your help.
Thanks Mita. I’m glad you’re finding the site helpful.
I’m not sure if there’s a sequence you have to use to apply all these different principles. To me it’s more about having the information to make better decisions.
Much of design is just making lots of different decisions. Design principles are a way to understand how to make many of them.
I know it can be overwhelming. It was for me too. What I’d suggest is try to digest some of the basic principles. Look below in the footer of the site at the recommended section. Those are all series of posts. You can read Design for Non-Designers, then The Elements of Design, and then the 7 Components of Design.
After that learn what you can about typography and layout.
Also if you can wait a couple or three months, I’m working on a book that covers a lot of this stuff. Hopefully it’s presented in a more digestible order and I’m going to do my best to provide a lot of images to help illustrate everything.