Style Guides, Mood Boards, And Style Tiles: 3 Tools To Keep Design Projects On Track

Posted: 07 May 2012 05:30 AM PDT

How do you begin the process of communication and collaboration with your clients? Do you send them wireframes? Complete and polished design comps from Photoshop or Fireworks? Often the first visuals you send can set the tone for everything that follows.

3 recent client projects have convinced me I need to change my own process for shaping a design with clients.

3 Recent Projects Leading Me to a New Process

My design process always starts the same way. I collect whatever information I can from the client and through my own research. I jot down notes and sketch ideas. Once I have some workable ideas it’s time to present something to the client for feedback and input.

That used to be the typical Photoshop design comp, but over the last year or two I’ve moved away from the comp and moved towards high fidelity wireframes created in Keynote. There were a few reasons for the change.

It’s much quicker and I can focus on the creative instead of how to do something.
Revising Photoshop design comps is often just as much work as creating them
It’s unrealistic to deliver pixel perfect comps in a responsive design world
My creative process is to get something down and then shape and refine it so the early process should be less focused on details

Wireframes are about structure and layout. You want to see what will be on the page, where elements will be located, and how they relate to other elements. They’re meant to be short on the aesthetic details that clients like to see. The ones I’ve been sending were high fidelity and closer to rough design comps.

My hope was it would save time in the project. I could create the wireframes much quicker than I could a design comp. My clients would get something showing them more than layout alone. They give me the go ahead on the layout while offering feedback on the aesthetics and the project would quickly move along.

It hasn’t quite worked out that way.

Client 1 — wanted a minimalist design so by definition the project would be light on aesthetic details. The wireframes I sent more closely resembled what we think of as wireframes. They used placeholders for images and had an absence of color. They were focused on structure and layout.

My client quickly approved them and everything proceeded well.

Client 2 — is a long time client who I thought would need to see more details. The wireframes included color and texture and resembled a semi-polished design comp. While I was mainly concerned with structure and layout, my client focused in on all the details I had added.

Since we have a good and long working relationship we were able to talk through things during phone call and get the project on track, though not as quickly as I preferred.

Client 3 — is not the most effective communicator and I have less of a sense of what this person wants. Again I sent wireframes on the high fidelity side. This client couldn’t focus on the layout at all after being presented with the details.

Emails and phone calls asking for the details to be momentarily ignored didn’t work. Instead I was asked to provide further wireframes with changed details. And then another round of wireframes with new details.

Eventually we pushed through and reached the development phase of the project, but clearly sending layout and details together was directing focus to the details where I was looking for feedback on the layout.

Thinking about each of these projects has convinced me it’s time to change my process mainly to separate layout and aesthetics in order to iterate over each without holding back the other.

I don’t blame my clients for zeroing in on the details. I don’t expect them to see the grid supporting their content or to make note of the measure and line-height of the copy. I blame myself for giving them too much to consider to keep the project moving forward.

3 Ways to Separate Layout and Aesthetics

There are 3 different approaches I’m looking at to change my process. I’m sure you’ve heard of each. My goal is to to get quicker agreement on a layout so I can build prototypes sooner, while client and myself can shape and refine the aesthetics in a separate process.

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.

Style Guides

Style guides are typically used to define the visual branding across all of a company’s promotional materials, including the website. By having everything written out in one place they serve as a reference for both the project and future projects and help keep the visuals consistent across different mediums.

In a sense I use these now as an tool in development. Instead of opening and closing Photoshop or Keynote all the time, I create a text document listing the different design decisions and values I need to use during development.

These aren’t deliverables I send to clients. They started out as rough documents where I record values and ideas. They tend to include:

Typographic choices — typefaces, font stakcs, font-sizes, line-heights, etc
Color schemes — and which colors will be used for backgrounds, text, etc
Grid math — I’ve been working out grids in these documents and recording the values that will be used in the code.

Over time I’ve included more reference material in these documents and have gone as far as creating a simple html/css page in order to compare different color schemes and typographic choices. I’m thinking I could flesh these out more to show different possibilities to clients before they ultimately go back to being a reference.

Below are a few example style guides.

I’m not sure if I would need to go to such detail, especially early on in the design process. How inclusive the guides become would depend on the given project. I would like to make the guides as visual as possible and in the beginning they’d feature more options for clients to consider.

Creating an effective mood board

Mood Boards

Mood boards are about defining and agreeing on the mood or feel of a design. The goal is to make the client say, “THAT’S how I want my site to feel. They can help set several general directions for the client to choose from.

I don’t know if there’s a formal structure for what needs to be included in a mood board, but they typically include things like:

Structural wireframes
Color schemes
Textures
Images for inspiration
Screenshots of other sites
Typographic details

They’re quicker to create than a design comp and while both are included in the one document, layout and aesthetics are clearly distinguished. Mood boards tend to be high fidelity and their presentation is usually as professional and polished. You might even create several different moodboards for different potential directions.

While I don’t create moodboards as deliverables, I do tend to use the idea behind them to help me design a site. I do create wireframes and collect images, textures, colors, and type for inspiration. I’ve never put everything together into a single document that I send to clients though.

Style Tiles

Style Tiles are a recent idea from Samantha Warren. In her words they “seek to form a common visual language between designer and client and provide a catalyst for discussion.”

What makes a style tile unique from other tools is that it is specifically a method for establishing a visual vocabulary between the designer and the client, rather than setting a ‘mood’ or defining elements that will ultimately be included in a full layout.

Samantha suggests using them for when a mood board is too vague and a design comp too literal. In some respects they seem like unpolished mood boards minus the wireframes, but they have different goals.

They offer a way to show a client what their descriptive words look like visually on the page. They aren’t finished pieces. They’re more an assembly of rougher pieces meant to elicit a quick yes/no response.

Samantha offers a process for building style tiles.

Listen — ask questions and gather information from the client
Interpret — collect adjectives from answers above and group into themes
Define a visual language — match the words and themes above to real styles
Iterate — shape and refine everything with the client

Somewhere in between collecting adjectives and themes and creating styles you want to be thinking about how the words used to describe the design translate into design principles. Do they call for more negative space? An asymmetrical balance? This should then lead to better choices about how to use design elements like line, shape, and color.

Samantha also suggests creating 3 different themes — aggressive, moderate, and conservative. Each is then used as the basis for a different style tile.

The more I’ve thought about style tiles, the more I like the idea. They focus on aesthetics, which would let me keep them separate from structure and layout. I also like that they aren’t meant to be as polished. Early in the process I’d rather keep things rougher and quicker and polish them as we iterate.

Closing Thoughts

Once again, some recent projects have convinced me my process needs to change. In my experience clients tend to focus more on the aesthetic details, while I want to proceed quicker with the layout.

By separating layout and aesthetics into two independent processes, I think prototyping and development will happen quicker. Since clients tend to focus more on the aesthetic details, keeping them in their own iterative process will allow other aspects of the project to proceed and ultimately have clients feel more a part of the overall design process.

I’m not sure exactly how my process will evolve given the changes I want to make, but I’m thinking I’ll use some combination of rougher wireframes, an html/css style guide, and style tiles. I probably won’t work up something as polished as a mood board, though I may incorporate some of the ideas behind them.

Hopefully a few projects from now I’ll be able to share with you some of the details of my new process and how well it’s working.

Have you used any of these documents when working with clients? What kind of success did you have? Did they make the design process quicker and easier?