Are You Solving Design Problems Or Forcing Solutions On Them?

Posted: 27 Oct 2011 05:30 AM PDT

If you are an artist, you can do anything you want. It's perfectly all right. Design serves a different purpose. If in the process of solving a problem you create a problem, obviously, you didn't design.
—Massimo Vignelli

Recently I received a comment from Mitch on my post about creating equal height columns with css. Mitch wanted to know how to create columns of equal height where borders instead of background colors differentiated one column from another.

I didn’t have a good technique to share, but his question made me think about whether or not we try too hard to force a particular solution on a design instead of choosing the best of the available solutions to the problem.

Why Force a Solution

How many times have you been frustrated because you couldn’t make a specific css technique work? Did you spend hours searching for a solution? Did you end up forcing a not so great technique into the site just to make your idea work?

Why not ask instead if another technique would solve the problem.

What problem are the equal height columns trying to solve? If the content itself is going to have different heights, then what purpose does making the content appear to sit inside equal height column serve?

does it create a specific mood?
does it help organize some other content?
does it communicate something specific?

Assuming equal height columns are important, why are the borders necessary? What specific problem are the borders trying to solve and is it only borders that can solve the problem?

Borders (and lines in general):

enclose space
separate one area of space from another area of space
help group what’s inside the space

Are borders the only way to do those things? How about…

using different background colors on the columns columns to create a virtual border between them, which both encloses and separates the space
using whitespace to surround the areas of positive space and varying the space according to the principal of proximity to enclose, separate, and group.
using a strong vertical edge created through aligned elements to separate elements on either side of that vertical edge. You can take it further and align elements on a grid.
using the principal of contrast (different color, font-size, font-style, etc) to style the content in different columns to show it as clearly separate from the content in another column.

The above are just a few ideas and I’m not trying to suggest that any of these things are better in general than using borders or that they make more sense for a specific design problem.

However, I would ask if any of these other possibilities could equally solve the problem.

The design problem that borders is trying to solve is one of how to enclose and separate space. The problem isn’t how to create equal column heights using borders to show the different columns. The fundamental problem is how to enclose and separate space.

It’s a problem that has a variety of solutions.

Choose the Best from the Available Solutions

Design finds solutions to problems and the designer attempts to select the best solution from all the available options.

Web design is often a matter of communication. There are many different ways to communicate the same message. Think of all the different languages spoken on the planet and how many ways there are to say hello or goodbye.

Graphically there are many ways to communicate something like the content in this space is different from the content in that space or that this element is more important than that one over there.

If there were only one way to solve each problem designers wouldn’t be necessary. Our work would be automated. Fortunately for us there isn’t a single solution.

Design Constraints

Within the variety of solutions we also have constraints. We can’t do anything we want. You’re constrained by the client’s existing brand and identity, by the demographics of your clients customers, by the likes and dislikes of your client.

You’re also constrained by the technologies at your disposal and the tools you have available to you.

If css doesn’t have a good method for creating equal height columns described through borders, then maybe that should be considered a design constraint and a different graphic solution should be considered.

The problem you’re trying to solve is defined in part by how you can’t solve it after all. That’s what a constraint is.

Sometimes it’s worth looking deeper into the technology to see if it can do something you want to do. Sometimes it’s worth searching for another technology to see if it can do what the first technology can’t. Sometimes your best bet is seeking a different design solution — one that is easily developed with the tools in front of you.

Summary

It’s easy for designers to fall in love with the solutions we come up with. Perhaps it’s the latest trend or a some cool new development trick we want to use.

Sometimes this leads us to force something that may not work well or be reasonable to achieve with the tools at hand.

When this happens I think we sometimes blame the tool, forgetting that there is another design solution we could readily use.

If a border can’t work why not use color or space or some other graphic element that solves the essential problem the border was trying to solve?

Why do we get locked into wrestling with one solution when another will happily cooperate?

There are times when the design solution is in the technique and it’s worth figuring out how to make a technique work. At other times the solution is simply another design choice.