Review

Review of the Web Design Process

1. Identify the types of users you need to communicate with
2. Identify what each user type needs to be able to do
3. Organize your content semantically
4. Compose appropriate layouts for your content
5. Create visual hierarchies for your content with type
6. Apply design principles to emphasize relationships between elements
7. Create mood and enhance your visual hierarchies and element relationships using color
8. Breath life into your design with behavioral feedback
9. Test, rinse & repeat!

Color

Color is how we perceive different wavelengths of light. When we see a color in the real world, it represents the wavelenght or combination of wavelengths that are reflected by the object. If we see a black cat, that cat's fur absorbs most wavelengths of light so we don't see light reflected. If we see a white cat, that cat's fur reflects most wavelengths of light, so we see them all together – as the color white.

Digital Devices & Color

Digital devices present color differently. On a digital device, the screen is made up of thousands of little light emitters that are black by default. We call these emitters pixels. Depending on the device, these pixels can emit anywhere from 256 to over 16 million colors, which is accomplished by emitting combinations red, green & blue light, all colors off is black, and all on is white.

Device Color Depth

• 8 bit color = 256 colors
• 16 bit color = 4096 colors (high color)
• 24 bit color = 16,777,216 colors (true color) *the human eye can distinguish up to 10 million colors
• 32 bit color = 24 bit color with an 8 bit transparency channel

More info on web and device colors

Representing Color with CSS

CSS Properties that take a color value

You can apply color to content elements using the following CSS properties:

• color: (for text)
• background-color: (for backgrounds)
• border-color: (for borders)
• border-top-color:
• border-right-color:
• border-bottom-color:
• border-left-color:

Color values for the above properties can be represented using hexadecimal, RGB, RGBA, HSL or HSLA color values.

Hexadecimal Color Values

Hexadecimal is a numbering system based on the number 16. Number values range from 0 to 9 and then A to F, where 0 = 0 and F = 15. You can combine hexadecimal digits to get bigger numbers. Hexadecimal colors have 3 components, red, green & blue, each represented by two hexadecimal (00-FF) value positions representing 0-255.

Examples: (# indicates this is a hex value)

• #000000 0 red, 0 green, 0 blue = black
• #ffffff ff (256) red, ff (256) green, ff (256) blue = white
• #ff0000 ff (256) red, 00 (0) green, 00 (0) blue = bright red
• #00ff00 00 (0) red, ff (256) green, 00 (0) blue = bright green
• #0000ff 00 (0) red, 00 (0) green, ff (256) blue = bright blue

RGB – Red, Green Blue

Similar in concept to hex color, RGB Color uses decimal numbers from 0-255 for each color channel:

• rgb(0,0,0) black
• rgb(255,255,255) white
• rgb(255,0,0) bright red
• rgb(0,255,0) bright green
• rgb(0,0,255) bright blue

RGBA – Red, Green, Blue, Alpha

Same as RGB but with an 8 bit alpha channel for transparency:

• rgba(0,0,0,1.0) black, fully opaque
• rgba(255,255,255,0.5) white, 50% transparent
• rgba(255,0,0,0.75) bright red, 75% opaque
• rgba(0,255,0,0.25) bright green, 75% transparent
• rgba(0,0,255,0.90) bright blue, 90% opaque

HSL – Hue, Saturation, Lightness

HSL stands for Hue, Saturation and Lightness, where Hue is the base color on the color wheel (0/360 = red, 120 = green, 240 = blue), Saturation is how much color (0% is no color, 100% is full color) and Lightness is the brightness (0% = black, 100% most bright):

• hsl(0, 100%, 100%) bright red
• hsl(0, 100%, 25%) dark red
• hsl(120, 50%, 25%) dark gray-green
• hsl(120, 100%, 25%) dark green
• hsl(240, 50%, 75%) light blue-grayv

HSLA – Hue, Saturation, Lightness, Alpha

Same as HSL but with an 8 bit alpha channel for transparency:

• hsla(0, 100%, 100%, 1.0) bright red, fully opaque
• hsla(0, 100%, 25%) dark red
• hsla(120, 50%, 25%) dark gray-green
• hsla(120, 100%, 25%) dark green
• hsla(240, 50%, 75%) light blue-gray

More info on CSS color values

The psychology of color

Colors have a strong psychological effect upon users of your site, and can be used to establish a mood as well as create similarity, contrast, rhythm and dominance:

• Warm & cool colors (warm colors have more energy, cool colors are calming)
• darker colors recede
• lighter colors pop

Demos

JSFiddles

• better body copy - when text is the same color, smaller text appears lighter and may need to be darkened to maintain contrast
• faded underlines - underlines can interfere with descenders and may need to have contrast lowered between the underline and the background
warm up or cool down a background - to emphasize mood, you may want to warm up or cool down your background

Choosing colors

There are a number of approaches to selecting color schemes outlined in Design for Hackers, but they should all be used in support of the research you did with your User Personas and User Stories. Once you have an idea of who will be using your site and why, you can apply the methods outlined in the book. Tools like Color Scheme Designer can also help.

Exercise

Log into Github and experiment with color on your project from last week. Pay particlular attention to using color in support of your content hierarchies and design principles from last week.

• Try using the color: property to color your text
• Try using the background-color: property to differentiate sections or headings
• Can you use color to create dominance for an element on your pages so the user's eye will go there first?
• Can you use color to identify links on your page?

Assignment 7

Reading

• Chapter 8 & 9 in Design for Hackers

Design

Revise Your Project Using Color

Revise your project from last week by layering on color treatments to your content hierarchies. What mood do you want to convey for your message? Use warm or cool colors to set the mood of your project. Which content should dominate? Make it pop using color. How do you signal the different states of your links? In addition to the text-decoration property, try using color to signal the different states of your links (link, hover, active and visited).