The Benefits Of Modular Design

Posted: 18 Feb 2013 05:30 AM PST

In the mid 1930s, Frank Lloyd Wright developed what he termed Usonian homes (PDF). They were designed to control costs during the great depression. They had no basement, no attic, and little in the way of ornamentation. They were built from inexpensive and modular concrete blocks.

These prefabricated modular blocks could be combined in a variety of ways to create unique houses, which could be built efficiently and inexpensively. The same principles can be applied to designing and building websites.

Weltzheimer Johnson House: Designed by Frank Lloyd Wright in Usonian style — View from the northeast of the Weltzheimer/Johnson usonian house built by Frank Lloyd Wright

Last week I offered an overview of adaptive content. The idea was to make content more modular by breaking it up into smaller chunks. Those chunks would be structured through meta data so they could be recombined in flexible ways according to the needs of a given context.

This week I want to move from content to design. In many respects modular design works the same way. You separate parts from the whole as building blocks for later combination. There are advantages beyond flexibility.

Separation of concerns allowing different aspects of design to be worked on and improved independently of each other
Reuse of independently created components from a general pattern libraries
Efficiency in being able to combine pre-existing components
Development of a consistent design vocabulary through the constraints of project style guides and self imposed design palettes across a career

Independence, Reuse, and Efficiency in Modular Design

One dominant theory about how we visually perceive the world, holds that different aspects of our visual environment (color, form, motion, texture, etc) require different computational solutions and are thus processed in distinct and independent regions of the brain. In other words we modularly process our visual surroundings.

If we process these things independently of each other, it stands to reason we can work on them independently of each other too.

If you’ve designed more than a couple of sites you’ve no doubt encountered many similar problems that your design had to solve. Every design makes choices about type and layout and color. On a more granular level you needed to design solutions for navigation, forms, and data tables. You needed to determine how buttons would look and function across the site.

In dealing specifically with navigation your solution might have led to

horizontal navigation bars
vertical menus
breadcrumbs
accordions
pagination
tabs

Odds are the horizontal navigation bar included on one site, looked and worked similar to other navigation bars added to other sites. Perhaps all your navigation bars could be grouped into 3 or 4 main styles. Components like these can be designed independently of one another. Their look, functionality, and the code behind them can be explored outside of any specific project.

There’s no reason to reinvent the wheel each time you need a menu. You could develop several patterns for menus, build a library, and improve on and add to your menu patterns over time. Working on them independently you can make them more flexible and easily customizable. You can ensure they work across browsers, devices, and platforms.

Instead of designing a new menu from scratch for a project you can choose from your available solutions. Working this way leads to much greater efficiency. You’re building the whole from existing blocks instead of rebuilding a new set of blocks with each project.

Design patterns encourage reuse. They speed up prototyping, design, and development. They ensure consistency, and through improving them independent of other concerns they lead to greater usability. Over time they become better and better solutions to a given problem and become building blocks that can be combined in any number of ways.

Modular Doesn’t Mean Boring

We sometimes think creativity and productivity are at odds with each other.

Creativity likes to meander and take the path unknown just to see what’s there. It doesn’t mind doing the same thing over and over because each new pass might reveal something new.

Productivity wants to travel in the straightest line possible and never wants to do the same thing twice, viewing that as wasted effort. Most of what I’ve been saying about modularity up to this point makes it sound a lot more like productivity at the expense of creativity. It doesn’t have to be.

Design isn’t art. They share some things, like creativity, but design begins with constraints. From the moment we begin defining the problem we’re constraining all the possible paths into those that lead to the best solution. As Ellen Lupton and Jennifer Cole Phillips point out in their book Graphic Design: The New Basics,

modularity is a special kind of constraint. A module is a fixed element used in a larger system of structure.

Sure, if the buttons we use will only be drawn from a set of buttons we’ve previously created we aren’t exploring every possible button we might use. That doesn’t mean we’re throwing away creativity. If we’ve developed our button patterns well, we’ve left room to vary their shape, color, size, and other details.

If we haven’t there’s nothing stopping us from creating a new set of buttons for the specific project and then adding them to our button library. We aren’t forced to use our pattern library. It’s there when we want it to be there, but we aren’t required to use it.

Modular design doesn’t have to lead to boilerplate design. Our modules should be customizable and offer variety in their characteristics. They’re building blocks that we assemble in any way we like.

Modularity Leads to a Consistent Design Vocabulary

Unique is good. There’s also something to be said about consistency. The specific patterns we create may constrain our choices, but they do lead to a consistent design language.

A painter begins by with a palette of colors. These colors can be mixed to form new colors, but the palette doesn’t begin with an endless variety of color. Painters will often explore certain colors for a time and we think of their color palette as living beyond a single painting.

Picasso had his blue period. Van Gogh’s early career is marked by a darker palette of earth tones, where in his later career his palette incorporated a variety of brighter hues.

Our modules are like colors on a painter’s palette. They aren’t endless, but they can be combined in endless ways. By constraining all possibilities we can better learn and explore the possibilities of a given palette.

We can have palettes of grids and layouts and palettes of typefaces and type parings. We can create palettes of atmospheric details and even of color combinations like painters. Through the constraint of these different palettes we can develop a consistent style that becomes our individual design language.

How we modularize is part of our unique creativity. Our palettes are a self-imposed constraint as we favor one set of grids over another or one set of colors over another. Our creative choice in palettes leads to our unique form of visual consistency. It becomes part of our visual voice.

Summary

Modularity offers many advantages to designers. It allows us to work out solutions to common problems independently of projects. This independent work enables us to consistently improve our solutions and it leads to an efficiency in development through reuse.

It doesn’t have to lead to the same design again and again. Modules can and should be built to allow and encourage variety. Variety within the module itself and variety in how they’re combined to form a greater whole.

A module is a constraint, but all design is constraints. It’s the only way we can get to a solution. Modules can lead to a consistent visual vocabulary and voice for each of us. We constrain ourselves in our own unique way by creating palettes of different design modules.

Much like modularity gave structure to our content so we could reuse it more flexibly, modularity gives structure to our design. A structure that ultimately helps us create more flexibly and efficiently.

The post The Benefits Of Modular Design appeared first on Vanseo Design.