19

I got a mail from a designer to do some wireframes. He has told me that the wireframe should have logical colors. Is there really some theory to the colors for wireframes?

I have made some wireframes before. Do these use logical colours? If not, why?

Wireframe example

3 Answers 3

25

Logical colors would be to show visual hierarchy with a range of one color. Exactly like you did in your wireframe. I can see clearly how text is built (title vs body), what the position and hierarchy of buttons and images are, etc

The most commonly used colors are shades of grey. It is more neutral. That's the only feedback I have.

When you show this to someone that person might ask; why elements are purple. When you make your wireframe grey someone might ask; what color would fit here.

'What color' is a far more constructive question than 'why this color'.

1
  • 4
    'What color' is a far more constructive question than 'why this color' — agreed 100%. Wireframing is most effective (in my opinion) before discussion about aesthetics and theme decisions. Dec 13, 2017 at 21:31
10

I always made wireframes as low-res as possible to encourage the client to focus on structures and interactions rather than colors, fonts, and copy. So I stuck to greyscale. The closer to their corporate colors (and fonts, icons, logos), the more they focused on those things.

In my experience, color is the responsibility of the Visual Design team, not the UX Design team. So if clients asked about that I'd say, "Colors haven't been determined yet. First, we need to finalize this stuff."

Also, sometimes we sent wireframe documents to the client and never knew if they would be printing the wireframes on a black and white printer.

2

With low fidelity wireframes, like the ones you made, I prefer to add a pop of color as well.

Why? Because it pleases my eye. I don't like looking at endless grey icons.

There is no reason to use any color while wireframing, but using different shades to indicate layers and hierarchy is very efficient. You could use ie the company color in different shades to make wireframes, or just stick to shades of grey.

In the end, the color shouldn't have any effect on your wireframe so if you do decide to use color, keep it simple.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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