Thoughts On Developing Visual Voice Through Modular Design

Posted: 11 Mar 2013 05:30 AM PDT

Over the last few weeks I’ve been talking about modular design and one of the ideas I’ve mentioned throughout is how modularity can contribute to your visual voice as a designer. I’d like to dig deeper into that idea today and talk about developing a visual language for both a single project and the whole of your work.

One of the benefits of modularity is consistency and through consistency we can unify a single project and even a career of projects. There’s a potential danger in being too consistent and having all your work look identical, but it’s a danger that I think avoidable without too much difficulty.

Developing the Visual Language for a Website

Style guides, style tiles, and mood boards are tools designers might use to shape and refine the aesthetics of a project, independently from layout. They separate concerns like type, color, and visual styles across a project. In a previous post about all three I offered the following brief definition of each.

Style guides — reference documents that define a consistent set of aesthetics.
Mood boards — combination of wireframes, aesthetic ideas, and inspiration that aim to capture the mood or feel a site should have.
Style tiles — akin to the paint chips and fabric patterns an interior designer uses with a goal of developing a visual vocabulary between designer and client.

Each provides an opportunity to iterate one aspect of the design separately from other aspects. You make decisions about colors and build a color scheme for the site without specifically thinking about what color a button should be or what background color to place behind the header of your site. Any element placed in the design will be one of those colors, ensuring consistency.

You do the same for type and texture and any other visual style you include. In essence you constrain your choices from all possible choices, and in doing so you refine the vocabulary you use when speaking visually about the design.

In her post on style tiles, Samantha Warren offered:

style tiles seek to form a common visual language between designer and client and provide a catalyst for discussion.

Ideally the use of style guides, style tiles, or mood boards will help you both modularize different design components and then visually and conceptually unify them into a cohesive whole.

When a new element is added to the design it refers to the style documents to maintain visual consistency with the whole of the design. The documents contain a record of the visual language and vocabulary you’ll use to design the site. They give the design its visual voice.

Developing a Visual Language for Your Career

When you speak or write you likely use certain words more than others. The words you use and those you don’t might communicate the exact same thing, but you prefer some over others. You probably speak or write with a consistent rhythm. The inflection of your voice rises and falls in a consistent way. The length and variety of the sentences you write become recognizably you.

In a similar ways designers choose the visual equivalent of words, sentence structure, and grammar. Each of us has a visual vocabulary that expresses our voice as a designer.

Say you’re trying to communicate that some elements on the screen are related. They need to be grouped together in some way and separated from other groups. You could do this by:

Enclosing the elements inside a border
Giving the group of elements a different background color
Using space to communicate the relationship through proximity

Your choices in developing a variety of design palettes for type and color and grid become your visual voice

Any of the above communicates the connection and separation you’re after. In some cases one will work better for a specific project, but just as likely any will do and it’s up to you to decide. If you make these decisions across your work in a consistent way you develop your own style. In a sense you create a style guide for the entirety of your work.

Another example is how I’ve chosen to use show pull quotes here on the site. The job of a pull quote is to make the overall content more readable, to enable scanning by the reader, and to add visual interest to the design. To do these things I styled the pull quotes by:

Increasing the font size
Pulling them outside the content column
Adding a horizontal border above and below the quote

There were plenty of other ways I could have styled the pull quotes to achieve the same things. I could have given the words a different color, kept them inside the column and separated them from the main text with space or a border.

If you consistently make some choices while varying others, the consistency carries across your work and becomes part of your voice.

We do this naturally whether or not we realize it. Most writers don’t have an infinite vocabulary. Ideally they have a large one, but there are words they won’t know. It’s unlikely those words will make it into their writing. In fact it’s likely they have a working vocabulary much smaller than every word they know.

Again it’s the same for designers. We all have limited vocabularies and we’re constrained by our vocabularies and ability with the language in which we work.

Consider all the possible typefaces you might choose for a design. There’s far too many to really know well. Most designers will instead develop a palette of typefaces from which to choose. They’ll find a few that work well for body copy and a few more they can pair with it for display type. Their typeface palette constrains the possibility of options they have, but even a few fonts in the palette is enough to combine them in a large number of ways.

Your choices in developing a variety of design palettes for type and color and grid layouts become your visual voice, your language as a designer. Much the same way a writer only has so many words in their vocabulary, you only have so many visual words in yours.

Cookie Cutter Design

There’s a fear that the above could lead to cookie cutter design. You set up patterns and styles for buttons and when it comes time to add another button to a design you reach into your bag of buttons and pull one out arbitrarily or worse the same one every time.

It’s a valid concern, but one that really isn’t about having those predefined styles. It’s more about how we choose to use them.

This isn’t about subordinating the needs of any project to a style you develop. Whether it’s a single project or your career work, every choice should be unified. They should all be informed by some singular concept.

The key is balance. You don’t automatically reach for a pattern or visual style because it’s there to reach for. You develop a palette of styles that has enough variety and flexibility to find a solution to many different problems.

You do this anyway based on your own skills as a designer. No one truly has a limitless set of choices. We’re all constrained by our own abilities. Every project is constrained by its budget and and deadline. You’re going to start with a palette no matter what. I’m suggesting you more consciously create a palette in order to ultimately have better options. And in so doing you’ll create visual consistency across a project and across your wok.

If at times you find your palette too constrained; if it doesn’t present a wide enough vocabulary, you add to it. You build on it. Having a library of visual styles doesn’t prevent you from trying something new.

You can and should grow your palettes throughout your career, the same way a writer learns new words and experiments with different sentence structure.

Summary

Style guides, style tiles, and mood boards modularize the visual styles of a design. They define independently how certain elements in the design will look. They separate concerns and allow you to iterate over design choices.

You can do the same thing in a larger sense for the entirety of your work. You do this automatically with your skills and preferences as a designer. You’re never free to choose from infinite choices, because you aren’t interested in or capable of successfully working with all of them.

Your visual vocabulary like the visual vocabulary of all designers is limited. Direct your own limitations instead of just letting them happen. Choose your own constraints. Develop your own design palettes from which to choose. When you consciously choose your constraints you can create a visual consistency while still leaving plenty of options to solve a variety of design problems.

Yes, you have to watch out for the potential to create cookie cutter designs, but that’s on you and not your palette of styles. If you find your palette too limited or you find your designs too much the same, learn something new and expand the size of your palette.

As long as they contain enough variety you should be able to retain consistency while still having the flexibility to ensure your designs are different.

The post Thoughts On Developing Visual Voice Through Modular Design appeared first on Vanseo Design.