I disagree. Color can be very useful to describe certain "types" or "States". That is not to say you should have a technicolor rainbow. Take Balsamiq for example. It's mostly B&W, but the little touches of color are very helpful.

There is never a risk of someone thinking the balsamiq mockups are actually graphic design.

With this said, remember, you need to develop a rapport with people where they understand your design quirks. Explain WHY you put something in red. Don't just assume.

Hi Colin

As a rule I try not to use colour in my wireframes as (as you mentioned) it tends to provoke discussion about design which is too premature in the early stages of a project.

Where i do use colour is to show error or success states within the UI.

Matt

Monochrome is my choice. With colour for highlighting an action or something that needs to be highlighted.

Black and white is my choice too - and where I do use colour I make sure it is does not look like I am suggesting a graphic design recommendation - e.g. ugly basic yellow for menu highlight, basic red for error notification etc.

I do tend to use blue underlined for many in-page links though - again this is not a colour design recommendation but a clear indication to all of where the action is and a clear indication to the designers that 'links must be clearly be able to be identified as links'

Another issue related to the colour question is the use of graphics (illustrative rather than a holding box) and real text v lorum ipsum.... hmmm this should probably be a separate question though...

I, too, use black and white for most wireframes. Only occasionally I use colours if the wireframes are extensions of an existing application and rely on color coded information. But then I make sure, that I do not design at this stage.

Wireframes are "work horses" to get the ideas out. They can and must change often and easily to adapt to new or changing requirements or ideas. Anything that takes the focus away from this "conceptual flow" might be a waste of work...

Think about this: replace your monochrome black with red. What feelings do your wireframes portray now? [I'm assuming we're talking about low-fi wireframes here.]

I think the general rule is: Only use colour to convey state, mode or meaning.

If you're applying colour for aesthetic reasons, then you're doing it wrong!

Wireframes, especially low-fi wireframes are used to uncover interaction and business rules. Don't let your wireframes get bogged down by the aesthetic details - that comes after you've designed your interaction intentions and your business case / end goal.

(Unless of course you're creating high-fidelity wireframes, but that's a whole different ballgame!)

I tend to use colours to identify the elements with the same functionality throughout all the wireframes.

Another case for using colours is when I already know the visual vocabulary of an existing website. Then I tend to use the same visual elements (of course in a simplified form) to avoid creating wireframes that cannot be reproduced in the visual design (some large-scale organizations have these strict rules).

Apart from these, monochrome is my choice as well.

Hi Colin,

I thought the same thing, that color would be nice in my wireframes. I also thought the same thing about content, design, and even a certain level of functionality/technology. So I've added them all at one point but not all at once. And every time I've been reminded that one of the best things about wireframes is that they are void of all those things. Because when you add them, it adds another layer of something to critique and takes more time away from the real discussion.

Needless to say all of my wireframes are black-and-white now.

Good luck.

//Michael

I let my wireframes evolve in the course of the project so when the graphic designer have for example designed the top menu I often bring it into my wireframes. So I start out in "monochrome" and end up closer to the final result. Another reason for doing this is that I find it easier to do a usability test if it looks more like a website.

I use Axure as prototyping tool so I only add color and graphics to the parts that can be changed one place and updated everywhere. (Using the "masters"-feature in Axure).

Early in the process I tend to keep it in B & W - only highlighting special features with color like Zoltan says: "same functionality has same color throughout the wireframes".

My wireframes are almost completely grayscale during the initial phases of the information gathering process. Early on, I believe it's valuable to use a modicum of color to represent a specific concept. For example, I'll use standard link colors (blue, purple,...) in the wireframe and skip an annotation about link styles.

I'm not as concerned about people printing wireframes on B&W printers and missing the semantics of color because team members are sharing things digitally or printing on color printers. Therefore, I don't hesitate to use color when it just seems to make sense to codify or style some of the design elements.

In some cases, the discussion of colour is just as important as the layout and functions. If the team is working thru layout issues, color fields, contrasts, etc, might be important factors to consider. Developing the wireframes into prototypes is like painting -- you incrementally add layers of detail until are able to clearly communicate the form, function, and beauty.

Are your wireframes on paper?

On sketched work, I reserve red for text that describes user actions and system responses.

What is a wireframe anyway? The word means different things to different people in different stages of a project.

Depends on the purpose of the wireframes and the stage in the project's life-cycle.

Hello Colin.

I follow the Zen of Wireframes: "you go for maximum simplicity by using only one shape, one font and one colour.

I hope this is useful for you.

Cheers.

I have used colors in the past (red for messages, blue for links, maybe a highlighter to show a changed state) but overall, I have found that just using black and white works best. That said, however, it does save significant paper if you can show those altered state on the same wireframe when doing paper prototyping, and I'm all about saving paper as much as I can.