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.

0 comments

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.

Dear ergo,

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

recommended
articles

Find out more about the topic

Face and mobile screen recording tools

July 9, 2018 | 5 mins read | 0 comment

What was the task we had to complete? We had a remote UX researcher and an assistant on one side and a tester on the other side. So we had to be able to stream the tester’s face and screen in real-time and additionally, due to post production purposes we also needed to be able to record the session, in order to cut and edit the material. Read more

What we get and could get from the Internet of Things?

June 5, 2018 | 13 mins read | 0 comment

Still invisible to most of us, a huge revolution is unfolding: the Internet of Things, or IoT is exploding, with an increasing number of devices connecting to it, supplying data that is later assessed based on various aspects. According to Gartner’s estimate, by the end of this decade the presence of these devices will be higher by one order of magnitude than the presence of humans. Read more

We like you,
get in touch

Let's make memorable things together

Dear ergo,

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

We reply within 24 hours

Váci Utca Center, 8th floor 1056 Budapest Váci utca. 81.

Visitor info