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

    UX workshops in product design

    September 13, 2020 | 13 min read

    Imagine designing a new car. There are a gazillion things to consider, including what function it will have – sporty, family run-about, off-road? How many passengers, how will it be powered, what safety...

    UX-UI collaboration: augment your team onsite, or remotely

    August 6, 2020 | 7 min read

    Providing effective solutions How do you go about building a rocket to take you to Mars? One answer is: very carefully. Another is: check out if there’s a YouTube video. These strategies will not be enough...