User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
What is the best way to indicate color on low fidelity wireframe? I'm creating a low fidelity wireframe and I've been instructed to not use any specific colors aside from the basic (the visual designer will handle all that) but there are certain banners, elements, and text that need to be a specific color aside from black and white.
What is the best way to display this? Is it best to shade the interior of the element gray to show that it will need color?
Decisions of color usage, specific color scheme, etc. are beyond low fidelity wireframe. Lo-fi wireframes are great for ideas generation, communication and problem exploration.
Concentrating on concrete details will loose your focus on concept, which is more important at this stage. And be ready for some of your sketches to be throwed out, that could be stressful if you spend a lot of time on it.
Having just pen and paper or the same tools in wireframe software, you could use some tricks to express your thoughts without colors:
Use shades of grey to show the different options.
That said,color is a very dangerous way of representing information and I would recommend also using a legend along with the color coding to show the data as color blind people might not be able to view the color or differentiate it.
To quote the W3C principle
Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)
I believe your entire wireframe when turned to a visual comp will have those specific colors.But in case you wish to show these color blotches - it could be in the greyish shades, alternatively - you may try brown/tan tinges, say neutral colors. These Brown shade will be something closer to Grey, mostly it seamlessly merges with the b/w wireframes - as the neutral color do not create any dissonance.
Otherwise making a glow or boundary around the specific areas with a distinguishable neutral color also helps.
But said so, I also feel that you can assemble a seperate Style Guide or Color Guide to say which are those specific colors. Doing this you may have served the Client, Visual designer and yourself!
I don't think that the wireframes necessarily need to be only black and white (or gray). For example for Cancel or delete I use red color. If I don't then the usability testing can lead to incorrect results.
The goal is that you want to focus on the problem that wireframes solve.. which is ideation and validation of the functional side of things. The color however, sometimes plays a role in that and it's okay to use it in my opinion. If the use of color goes beyond the functional purpose, then it distracts the core effort.
