In my company the wireframes are supposed to be in gray-scale because the visual designer takes care of the visuals aspect. For my side project, I wish to add colors to my wireframes. It would be really great if I can have some resources which is really useful and best practice in the industry.

  • Not related to the industry but take a look to Josef Albers - Interaction of Color.
    – Alvaro
    Commented Jan 15, 2017 at 19:03
  • Just adding some links. smashingmagazine.com/2010/01/… smashingmagazine.com/2016/04/web-developer-guide-color And a great tool for choosing complementary colors: colorsupplyyy.com/app Commented Jan 15, 2017 at 21:52
  • 2
    Consider the reason that colours are left out of wireframes (as they generally take the focus away from the content and structure) and see if it still makes sense for them to be in your wireframes. The visual designers have to do some interpretation of the wireframes in their visual design and not just add colours to the wireframes.
    – Michael Lai
    Commented Jan 16, 2017 at 5:42

4 Answers 4


As Michael Lai has said, and let me take it one further...

Blueprints and Wireframes are so named because their entire purpose is to remove connotations of values, weightings, qualities and attributes non-essential to understanding the whole, as a whole, whilst giving balanced, equal importance to each and every detail.

Kind of like the promise and potential of communism.

But instead of red, go with shades of blue, hinting at... blueprints:

enter image description here


It's best practice to keep wireframes in grayscale. Otherwise, people may react to the colors used rather than the structure of the wireframe. Wait until your wireframes are finalized before moving to the visual design phase for your side project.


Ask your colleagues in the visual design department

If you have a decent relationship with your colleagues at work who do the visual design, they would be the ideal place to start (assuming your workplace is not hostile to sideline projects).

The designers that you dove-tail with are the ones who best know how to take your usual deliverable (wireframes) and take it to the next step. Other organizations, or resources on the web, will generally not do things exactly as your organization does.

Most folks are happy to talk about what they do for a living. Let a designer or two that you respect there know of your plans, and tell them you’d be interested in hearing their opinions, maybe over lunch.

Just make sure your boss would be OK with it

The caveat is, you want to be sure there is no possibility this will reflect badly on you in your company. Most employers are smart enough not to forbid their technical workers from getting valuable experience in their free time, but some places don’t understand this.


It's not what your company or colleagues want. If it is your job, and it sounds like it is, to liaise with customers to find out their requirements and create initial wire-frames, then the detail that you include in your wire-frames will be driven by the customer.

Your designer should be less precious and always remember that wire-frames that are produced at this stage will always be low-fidelity and they will produce the high definition frames.

There's an advantage to this that your designer and possibly your boss hasn't realised. The more information you can glean up front and include in your wire-frames, the less work the designer has to do to ensure they get the design right and it has a better chance of being right as you are all better informed.

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.