Using color in wireframes...is this a "no no"?

Question

Recently, an internal debate was started at work regarding the use of color in wireframes. A junior designer had finished a nice set of wireframes and was told at the end to turn everything into greyscale! They were told that color should not be in wireframes.

I can see a few reasons where designing in greyscale can help:

• for accessibility (so your not forced to rely on colors for differentiation)
• not to mistaken communicate visual design in wireframes (sometimes clients may associate a color choice to be a visual design decision as oppose to a way to communicate visual difference)

I actually use a palette of colored icons and will use color to help communicate visual difference. Sometimes there's only so much you can do with using different shades of grey or using patterns.

What is the standard practice out there? I've seen wireframes with and without color.

Answer 1

Sounds like your colleagues got a little lost in assumptions without thinking about what the purpose of a wireframe is. Let's start with a loose definition provided by Wikipedia:

A website wireframe (also "web wire frame", "web wireframe", "web wireframing") is a basic visual guide used in interface design to suggest the structure of a website and relationships between its pages. A webpage wireframe is a similar illustration of the layout of fundamental elements in the interface. Typically, wireframes are completed before any artwork is developed.

As with any word or term, it's important to consider what it really means. A wire-frame model is a term used in 3D modeling when talking about the representation of the physical structure of a polygonal model, which is rendered by showing connecting points between vertices. What's the point of a wire-frame model? It's to show the "guts" of a structure so as to better understand its composition.

When carried over to website wireframing as Wikipedia discusses it, we should consider how that meaning applies, and Wikipedia's definition nails it: "a basic visual guide used to suggest the structure of a website and relationships between its pages".

As you can tell, there's no mention of colour or how that visual guide should look. All that matters is that it suggests how the structure of the web site works. As long as it achieves that, it's an effective wireframe. So, for instance, these are all "valid" wireframes:

• sketches on a napkin
• sketches in 37signals' Draft or some other app on iPad
• sketchy looking wireframes made using a tool like Balsamiq Mockups
• tighter looking wireframes made using something like Axure or Illustrator
• lightweight designs of a site made in Photoshop, where the structure of the page is made apparent while including elements of design where relevant
• HTML exportable designs in Fireworks that allow you to see what elements a page consists of
• fully interactive HTML/CSS wireframes

It's just a matter of fidelity and detail. Perhaps you should make clear what kind of fidelity is expected in the deliverable and guide your designers along that path. But it's not a matter of "should color be used in a wireframe" - if color helps communicate the structure of the site, then absolutely color should be used in a wireframe!

Answer 2

Agreed.

Typically, color brings emotional/cultural overtones to a discussion that is "supposed" to be about basic structure, layout and IA (information architecture). While that can be debated, we can agree that use of Color will, at the least, convey MORE information to the rendering.

The whole point of the wireframe is to communicate ONLY what is necessary and nothing else.

In my experience in practice, people use the term "wireframe" to mean each and every one of the artifacts Rahul lists.

Answer 3

From my experience, it's mainly the second reason you've listed:

• Sometimes even internal stakeholders get confused by wireframes that look too "real". My Axure mockups are much higher fidelity than other PowerPoint mockups used in my organization, so I sometimes get comments that have to do with graphic design, such as buttons looking differently or panels not adjusting their height according to their content, etc.
• A friend of mine created such a hi-fi wireframe that the customer actually loved it so much that they implemented it right away :)

Answer 4

I have gone from grey-scale to full colour and back again. I find full-colour tends to be a real distraction to the discussions that need to happen.

On a side note, I just happen to be on a project where there is no graphic designer between me and the developers, and so "realistic" or "really pretty" wireframes run the danger of being implemented as-is. This pretty much guarantees disaster because I am no graphic designer...

Answer 5

One drawback of colour on a wireframe is that—along with (what's perceived to be) higher fidelity of controls and such—sooner or later one of your developers will assume they need to make the GUI look just like the wireframe.

I know. I know. This points to a major misconception about the purpose of a wireframe.

But it really does happen.

Answer 6

I tend to reserve use of colour for annotating components. I make sure bits of text which are meant to behave like hyperlinks are in blue and underlined, for example, even though the final site design might have a completely different colour story. Bits of text which are not static and will vary per user input get another colour. If there are various boxes and lines which are in doubt or I know need more polishing then I'll set those to have red lines. Blocks of text which are annotations dropped right on top of the wireframe get a pale yellow background fill.

It's all very scary to look at, visually, but it serves to communicate. Not to represent.

Answer 7

Personally, I think it's fine to use colour if it imparts some sort of functionality.

I tend to use colour on interactive elements of my wireframes, such as links and buttons being blue. This helps to clearly highlight the interactive elements when presenting to the client.

I have also used green, orange and red to denote different warning states in a list of items. I found this helped communicate functionality to the client more quickly, which was less apparent in earlier, purely greyscale versions.

However, I would not use colour as a decorative element, at least not in early wireframes or mockups. As some others have responded, clients can sometimes get caught up in how something 'looks', vs how it works. This can slow the process down a bit.