Principles of Interface Design: Colour
Whether designing graphics for print or the web, there are some basic principles worth noting if we want our designs to be well received. The technicolour horrors of the past can still be seen in the far reaches of the interweb, where these rules were obviously never applied.
Murch, G. M. in his book; ‘The Effective Use of Color’ (1983) makes these recommendations:
- Avoid pure blue for text.
- Avoid thin lines and small shapes.
- Avoid red and green in the periphery of large-scale displays.
- Note that all colors are equally discernible.
- Do not overuse color.
- Use similar color to convey similar meaning.
- Use common background color for group-related elements.
- Use brightness and saturation to attract attention.
- Taking into account color-deficient viewers, avoid single color distinction.
Color combinations for user interfaces with graphic displays (Brown & Cunningham, 1989):
Background | Best colors | Worst colors |
White | Black, Blue | Cyan, Yellow |
Black | Yellow, White | Blue |
Red | Black | Blue, Magenta |
Green | Black, Red | Cyan |
Blue | Red, White, Yellow | Black |
Cyan | Blue, Red | Green, White, Yellow |
Magenta | Black, Blue | Cyan, Green |
Yellow | Black, Blue | Cyan, White |
Reference: Principles of Interface Design
Image: Emotional and Psychological Meaning of Colours
[…] Images source: http://www.xaraxone.com/webxealot/workbook02/page_3.htm – http://www.kirupa.com/design/little_about_color_hsv_rgb.htm – http://en.wikipedia.org/wiki/Electromagnetic_radiation – ledlightingbyus.com – https://kindlevision.com/blog/principles-of-interface-design/ […]