colour & images
DESCRIPTION
Colour & Images. COMPSCI 345 / SOFTENG 350 Jim Warren. Adapted from slides by Safurah Abdul Jalil and Beryl Plimmer Based on Heim Chapter 9. Learning outcomes. Describe colour properties Value Hue Saturation Describe and identify colour schemes Monochromatic - PowerPoint PPT PresentationTRANSCRIPT
http://www.faqs.org/photo-dict/phrase/3962629/sunflower.jpg
Colour & ImagesCOMPSCI 345 / SOFTENG 350
Jim Warren
Adapted from slides by Safurah Abdul Jalil and Beryl Plimmer
Based on Heim Chapter 9
Learning outcomes
Describe colour properties Value Hue Saturation
Describe and identify colour schemes Monochromatic Analogous & Complimentary Ready made colour schemes
Explain how colour is used for branding
Explain how images contribute to the colour scheme of a UI
Apply colour principles to a UI design
Colour
Colour has three distinct properties:1. Value* - lightness or darkness (luminance)
2. Hue - spectral colour name (blue, red..)
3. Saturation - brightness or dullness
Colours with the same brightness levels can appear lighter or darker than each other
3
Light and dark colours Light and dark colours grayscale
*‘Value’ = lightness, almost same as luminance – see
http://en.wikipedia.org/wiki/HSL_and_HSV
Colour: Value
‘Value’ is defined as the perceived lightness or darkness of a colour.
Value can be used to increase/decrease Contrast; consider these examples: Low contrast, ‘low key’ Low contrast, ‘high key’* High contrast High contrast (inversed)
Note: greater contrast makes the darker object more dominant. Hence, inverse is
harder to read – should only be used for titles or emphasis
4
* From the ‘key
light’ in film
making, see
http://en.wikip
edia.org/wiki/H
igh-key_lightin
g
Value
Create Movement Objects of the same value create a static design with all
objects equal in visual importance. varying values gives a more dynamic appearance and creates
a 'pecking order'. Some stand out while others recede. Highest contrast is most important
Mix elements of different values to add visual movement to your design or to create a hierarchy of importance.
5
Saturday, April 22, 2023
Colour: Hue
Colours at the lower (i.e. shorter wavelength) end of the spectrum (e.g. blues) are more comfortable to look at
Based on vector value moving from 0 to 360 degrees on a colour wheel
http://www.wou.edu/las/physci/ch462/
tmcolours.htm
http://
realcolourwheel.com/
Colour wheel
The 12 part colour wheel (Johannes Itten) is based on the three primary colours: Red Yellow Blue
Between the three primaries are the
secondary colours: Green Orange Violet
(They are mixtures of the two primaries they sit
between).
The tertiary colours fall between each
primary and secondary. For example: between yellow and orange is yellow
orange between blue and violet is blue violet …and so on. 7
http://inventoropinion.blogspot.com/2009/05/i-want-to
-invent-something-step-9.html
http://www.johnlovett.com/colour.htm
Colour: Saturation
All the colours at the top of the images below are called saturated colours. They contain no black, no white and none of their complimentary or opposite colour.
Intensity of colour in percentage scale: 100 percent is pure colour, 0 percent is black, white or gray
http://www.xaraxone.com/webxealot/
workbook40/page_5.htm
Colour: Saturation
Highly saturated, or pure, colours E.g. brilliant yellows, reds, and greens, …
Advantages: Evoke energy, vividness, brightness, and warmth. They are daring; they have character.
Disadvantages: When overused, they can tire the eyes.
Most UI designers use them sparingly.
Muted colours make up the bulk of most colour palettes Tints: adding white Shades: adding black Tones: adding some of both (i.e. adding grey – most ‘real’
colours!)(see http://www.color-wheel-artist.com/hue.html)
9
+ Making it work with saturation
The green-and-blue Zen Garden design above
gets away with two saturated colours by using
white borders to separate the green and blue
(and by using the white and dark text) .
Even so, you probably wouldn't want to stare at
that green all day long in a desktop application.
Pure Blue with black font…. Not so good!
Computer colour pickers
Windows colour picker As you move the cursor around watch the rgb values
changing White 255,255,255 Black 0,0,0 Red 255,0,0
Note the transparency White background adding white Black background adding black
Colour Schemes: Monochromatic
12
Monochromatic This colour scheme involves the use of only one hue. The hue can vary in value, and black or white may be added to create various shades or tints.
Monochromatic + White Many interfaces are white background and monochromatic elements
Colour Schemes: Monochromatic
Primary colour: blue monochrome
13
Secondary colour: green monochrome
+ Monochrome and White
14
Many interfaces are white background and monochromatic elements
•
And now it is Blue
15
Colour Schemes: Analogous & Complimentary Analogous
Colours that are adjacent on the colour wheel. The hues may vary in value.
Analogous colour schemes look harmonious
16 http://www.cristinacolli.com/27-examples-of-successful-colour-schemes/
http://www.richardancheta.com/html/
decoration/STAIR-FAUX-FINISH-PAINTING-
DECORATION/stair-faux-finish-painting-
decoration.htm
Analogous and Complimentary (contd.)
Complimentary
Colours that are located opposite on the colour
wheel such as red and green, yellow and purple,
or orange and blue
Complementary colours produce an exciting,
dynamic pattern.
http://www.digitalscrapbooking.co.za/
modules.php?
name=News&file=article&sid=11
http://www.cristinacolli.com/27-examples-of-successful-colour-schemes/
Colour Discord
Monochromatic, analogous, complementary or triadic (120-degree separation) colour schemes are ‘harmonious’
some colour schemes are dissonant (or ‘discordant’).
Discordant colours are visually disturbing - we say they clash. Colours that are widely separated on the colour wheel
(but not complementary or triadic) are discordant.
Discordant colours can be eye-catching and are often used as attention-getting devices in advertising.
18
BUY ME!
Making a Colour scheme
Quite a number of tools have predefined colour schemes Go to the ‘Design’ tab in
Powerpoint
Companies often have an existing colour scheme (look at logos, stationary, brochures)
Colour scheme: Branding
Colour is a crucial element of a brand identity.
‘The National Bank’ brand (and colour scheme)was dropped in 2012
Another – look at WestPac… a bit like Cocacola!
Colour Scheme & Images:
Images are made up of colours
the colours of images you choose can reflect upon the colour scheme of your interface.
Basing colour schemes around photos is a also great technique.
http://vltoday.blogspot.com/
colour Scheme & Images:
colour Scheme & Images:
Colour contrast
Contrast sensitivity decreases significantly with age
Contrast Because black and white have the highest contrast , luminance
(black and white) contrast is more significant than colour contrast One way easy to check your contrast to save an image as grayscale
Colour as code
Sometimes the colours are used as a code to communicate information.
Most well-known is ‘traffic light’ model Not friendly to colour-blind individuals, but
conventional
http://ilign.com/screenshot/executive-dashboard
Outside of ‘digital dashboards’ try not to base you scheme on (presumed) understanding of codes
Summary
Colour is a fundamental element of aesthetics
High contrast is important for readability
Monotone colour schemes are the easiest to ‘get right’
More complex colour schemes can be ‘borrowed’ from colour palettes or company branding
Images are a part of the colour scheme
Use colour as a code sparingly
Learning outcomes
The colour properties V.. H.. S…
Colour schemes M… A… & C…
Colour and branding
Images and the colour scheme of a UI
Design a UI colour scheme (in your assignment)
References
Heim, The Resonant Interface, chapter 9
Further reading: http://daphne.palomar.edu/design/Default.htm http://www.leonardo.info/isast/articles/behrens.html http://www.digital-web.com/articles/
principles_of_design/ http://www.colormatters.com/color-and-marketing/
color-and-branding
28