Wireframes and colors

A graphic design mock-up and a high fidelity wireframe share several characteristics which makes difficult to see where the work of the UX expert ends and the graphic designer’s starts. Not yet prevalent in Hungary, smart project planning beyond the waterfall model makes possible for the UX and the graphic designer to work on the same task together.

Mel Hogan’s wireframe
Thomas Schrijer’s wireframe
Mitch Shepherd’s wireframe

Several UX designers avoid using images and colors while creating wireframes. Colors direct the user’s eyes, convey meaning and help to separate elements therefore I believe that a detailed wireframe must involve colors. Using colors in a wireframe is not about beauty. For example to display error messages we can use any kind of red but must avoid blues and greens. The task of the graphic designer is to decide the final shade of the color. Jakub Linowski, well-known author on wireframing states:

“Perhaps it has something to do with the tradition that colour is often avoided at the wireframe level. I still use colour just to emphasize certain elements, and red for actions.”

Read more on colors in wireframing by Jakub Linowski

 

Basic colors to use on wireframes

The following colors are helpful on smaller projects as well.

Black: Majority of our wireframe will be displayed in black.

Gray: To help texts, less important information.

White:  To label dark or colored buttons.

Red: For error messages. If the client’s brand color is red as well (e.g. vodafone.hu) we should use a different type of red for error messages. Use exclamation mark after or warning sign before error messages.

Dark blue: Mark links with underlined dark blue font for functional clarity even if the graphic design will use different colors.

Green: Positive meaning, use for positive feedback following a successful user action, e.g. “Your order has been placed successfully“.

Highlighter: We must choose one additional color that we will use consistently to highlight important elements.

Additional colors for more complex projects

Secondary highlighter: We may use two colors to highlight text if we wish to promote different information. E.g.  general highlighter is blue and important information regarding shopping is marked with orange.

Pale pink: Use as a background color to put more emphasis on error messages.

Pale yellow: Use as a background color for informational messages. For example to discretely inform the user to activate her registration use a pale yellow ribbon at the top of the page which does not disturb her in her work. Use to highlight search results.

Orange: Use for warnings and blocking but not urgent issues.

Keep in mind, that the primary audience of our work contains marketing experts and managers who need colors to understand and interpret the wireframes. Without benefiting from the use of colors these stakeholders might miss important features in our wireframes.

Share your opinion with us

    Please type your message

    Please type your email!

    Please type your message

    Send comment

    We create exceptional websites, mobile applications and software to help you realise your business goals.

    Dear Ergo,

    My name is
    . My email is
    . And I have the following message for you:

    recommended
    articles

    Find out more about the topic

    Say Goodbye to the UX Agency Next Door – The Beginner’s Guide to Nearshoring

    June 16, 2020 | 9 min read

    If your company has a UX project, and it does not have (enough) specialized designers, it’s a no-brainer to go and hire an agency or consulting firm for that work. But where do you find that agency that...

    I’ll give it to you straight: how does it make sense to develop a voice-based game?

    April 27, 2020 | 9 min read

    Microphones, in addition to physical input devices (keyboard, mouse, touch screen), are undeniably everywhere. Naturally, they are included in all mobile phones, but are also becoming more and more common...