Color (the principles of beautiful web design, by jason beaird) Leong Lee, Ph.D. University of Missouri (MS&T) Assistant Professor, Dept. of Computer Science Austin Peay State University, Tennessee
Dec 27, 2015
Color(the principles of beautiful web design, by jason beaird)
Leong Lee, Ph.D. University of Missouri (MS&T)Assistant Professor, Dept. of Computer Science
Austin Peay State University, Tennessee
2
Color
• Choosing color is no simple matter
• Aesthetic, identify and usability considerations
• Most modern displays can render > 16 million colors
• Infinite number of horrible color combinations waiting to happen
3
The Psychology of Color
• Color psychology is a field devoted to analyzing the emotional and behavioral effects produced by colors– bedroom color ? -> tranquil Zen retreat
• Certain colors are rooted in individual experience• Many cultures have completely different interpretations of
colors
4
Color Associations - Red
• Stimulating adrenaline and blood pressure
• Exciting, dramatic, and rich color
• Color of passion• Darker shades of red
(burgundy and maroon) have a rich, indulgent feeling - wine, fine living
• Sometimes evoke anger
5
Color Associations - Orange
• Active, energetic• Doesn’t evoke the
anger that red sometimes does
• Happiness, enthusiasm, creativity
• More informal, less corporate
6
Color Associations - Yellow
• Highly active, visible• Taxicabs, caution signs• Happiness and energy• “Babies cry more in
yellow rooms, husbands and wives fight more in yellow kitchens…”
7
Color Associations - Green
• Nature• Very soothing color• Symbolizes growth,
freshness and hope• Easier on the eyes,
and far less active
8
Color Associations - Blue
• Symbolizes openness, intelligence and faith
• Physiologically, blue has been found to calm people down
• It can also reduce appetite
• Sky and sea (airlines, cruise websites)
• Stability and clarity or purpose (IBM, Dell, HP and Microsoft)
9
Color Associations - Purple
• Historically, royalty and power
• Wealth and extravagance
• Often connected with flowers, gemstones and sunsets
10
Color Associations - White
• Clean• Perfection, light and
purity• Bride wears a white
dress• Default use of white as
a background color
11
Color Associations - Black
• Power, elegance and strength, depending on how it’s used
• There is no wrong color to use
• The success of a color scheme depends on the harmony that exists between all colors chosen
12
Color Temperature - Warm
• Warm colors: red to yellow, including orange, pink, brown and burgundy
• Represent both heat and emotions
13
Color Temperature - Cool
• Cool colors: green to blue, some shades of violet (intermediate between red and blue, so closer to blue)
• Calm people down and reduce tension
14
Color Value
• Lightness or darkness• Lightness – good• Darkness – evil
• Tint – pure color + white• Shade – pure color + black
15
Color Saturation / Intensity
• Brightness or dullness• Intense, vivid colors
stand out• Add gray (black and
white) to a color, it starts to become dull and desaturated
16
Color Theory 101
• Computer screens: red, green, blue (RGB), additive color model
• Prints (color printer): cyan, magenta, yellow and black (CMYK), subtractive color model
17
Color Theory 101
• Color wheel (RGB)• http://www.cs.unh.edu/cit/502/resource/tutorials/
fall10/kaj75/index.html
18
The Scheme of Things
• How do we find multiple colors that work together?
• Color Schemes– Monochromatic– Analogous– Complementary– Split complementary– Triadic– Tetradic (double complementary)
19
Monochromatic Color Scheme
• Single base color• Any number of tints or shades of that color• http://leeleong.com/UNCGsubjects/2011Spring_CSC330/index.htm
20
Analogous Color Scheme• Colors adjacent to one another on the color wheel• Don’t take a slice bigger than one-third of the whole (you will make
somebody sick)• http://www.regines.net.au/
21
Complementary Color Scheme
• Colors opposite each other on the color wheel• Such as green and red, yellow and violet, or orange and
blue (http://www.ufl.edu/)• Beware of pitfalls (simultaneous contract: too different)
22
Complementary Color Scheme
• Beware of pitfalls (simultaneous contract: too different)
•My Eyes, OH My Eyes, I am going to be blind!
23
Split-complementary, Triadic and Tetradic Color Schemes• Split-complementary: two colors adjacent to your base
color’s complementary
24
Create a palette
• After choosing a color scheme, create a palette (more solid color choices to work with).
• Hexadecimal color codes helps• Now just do it
Color::: questions?
Leong Lee, Ph.D. University of Missouri (MS&T)Assistant Professor, Dept. of Computer Science
Austin Peay State University, Tennessee
CSCI 3350 ::: Web User Interface Design
::: Fall 2012
Basic web design principles emphasizing alignment, proximity, contrast and repetition. Web design topics incorporating layout,
color, texture, typography and imagery. User interface design principles for web pages: client side
programming, web site planning, process of designing and developing user interface mock-ups/prototypes for dynamic
back-end database driven web applications.