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.