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.

Let's experiment using CSSDeck

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

Let's experiment with hexadecimal color using CSSDeck

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

Let's experiment with RGB solor using CSSDeck

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

Let's experiment with RGA color using CSSDeck

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

Let's experiment with HSL color using CSSDeck

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

Let's experiment with HSLA color using CSSDeck

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

descenders vs. underlines

• 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

Open up your text editor or CSSDeck 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?

Vision Document

The Vision Document is where you write down your idea for your project and provide details about what it should do, who it's for and how it should be made. The Vision Document will count toward as your mid-term grade and will be the basis for your final project. It's a living document, in that you can (and probably will) update it over the coming weeks as you work through your final project.

The Vision Document is due next week, Thursday Oct 9, 2014.

Assignment 6

Reading

• Chapter 8 & 9 in Design for Hackers

Design

Write up your Vision Document for your final project

After you have completed the reading assignment, download the Vision Document Template, review it and write your own. You'll need to create some User Personas, User Stories and a site map in support of your Vision Document

The Vision Document is due next week, Thursday Oct 9, 2014.