Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question
    
Maybe he confused wireframes with mockups. Wireframes shouldn't have too many details. –  mbillard Sep 23 '10 at 19:28
    
I only use color for links. Everything else is grayscaled. –  Tony Bolero Jan 12 '12 at 12:24
    
Whether wireframes or mockups have colours or not is just a matter of clarifying expectations in the level of detail required in a deliverable. If they have been asked to consider this as an issue in design, then it would be necessary to provide some suggestions. I don't think there's a hard and fast rule here. –  Michael Lai Sep 4 '13 at 22:20
add comment

7 Answers

up vote 14 down vote accepted

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!

share|improve this answer
    
As always you should take everything with a grain of salt. Wireframes allow you to iterate and learn, so you should only add the necessary detail for you to learn something. If you are starting to brainstorm, probably you should not waste time on colors since your discussions with stakeholders will be about the colors (and that is not the feedback you need at that moment). –  jff Jan 16 at 13:05
add comment

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.

share|improve this answer
add comment

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 :)
share|improve this answer
add comment

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...

share|improve this answer
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
1  
I think this can be clearly communicated. There can be a disclaimer in the beginning that this is not communicating visual design. But the programmer is not developing with just the wireframes alone, it should be accompanied by a visual screen design from the graphics designer, no? –  milesmeow Aug 29 '10 at 15:38
    
+1 for the disclaimer, but I have seen mockups and other artifacts become sliced up and passed around to an almost unbelievable degree. Far better to have an engineering process that ensures that DEVs work only from approved artifacts. –  Kevin M Aug 30 '10 at 1:18
    
I highly doubt you're ever going to have a developer think that - your stakeholders might have that problem, but developers will not. –  Charles Boyung Aug 30 '10 at 15:54
1  
@Charles: Sadly, from multiple experiences, I can say you are incorrect. It definitely happens on large teams with off-shore developers. As an aside, if you didn't believe me when I wrote "It really does happen" before, then there's little point in me writing "It definitely happens," now. LOL! –  JeromeR Sep 2 '10 at 4:47
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.