Transcript Version 1.2 - Course Module Slide Options

L E S S O N
1
Module 3: Designing for Communication
The Elements of Design:
Color
L E S S O N
1
Module 3: Designing for Communication
Lesson Overview
In this lesson, you will:

Explore the use of color as it applies to Web design
L E S S O N
1
Module 3: Designing for Communication
Guiding Question

How does color impact the choices you make for the clothes you wear
each day?
L E S S O N
1
Module 3: Designing for Communication
Color

The Internet isn’t black and white

Colors can be analogous or complementary

Complementary colors are colors opposite each other on the color wheel
L E S S O N
1
Module 3: Designing for Communication
Why is the choice of color so important?

Color affects the first impression of your site

Color sets a level of professionalism for the site

Good choices increase the chance that your site will be taken seriously
L E S S O N
1
Module 3: Designing for Communication
RGB

RGB = Red:Green:Blue

Numbers represent how much of each color was used to make the new
color

Range from black (0:0:0) to white (255:255:255)

Web development enables the designer to use these number to produce
the exact color desired
L E S S O N
1
Module 3: Designing for Communication
HEX

HEX = Hexadecimal code

Series of six letters and numbers

0 – 9 and A – F

HEX code for white is 000000 and the HEX code for black is FFFFFF

Most Web development software will accept either RGB or HEX
L E S S O N
1
Module 3: Designing for Communication
Time to Make Some Choices
Color Families


http://www.colorjack.com/
Color Codes


http://www.colorschemer.com/blog/

http://www.pitt.edu/~nisg/cis/web/cgi/rgb.html
Use Color Codes to find the Color Family


http://meyerweb.com/eric/tools/color-blend/

http://colorblender.com/

http://www.nickherman.com/colormatch/

http://www.colorschemer.com/online.html
L E S S O N
1
Module 3: Designing for Communication
Examples of Color on the Internet

Examples of Bad Font Color Choices
http://iteslj.org/Articles/KellyMakePage/samples/bad/badcolors.html

Examples of Good and Bad Uses of Color on a Web page
http://www.2fortoys.net/web_design/color-example.htm
L E S S O N
1
Module 3: Designing for Communication

The World Wide Web Consortium also provides
guidelines on the use of color within a Web site. To
view two examples of incorrect uses of color in a Web
site, view the HiSoftware Tutorial at
http://www.contentquality.com/tutorial/c21.htm
L E S S O N
1
Module 3: Designing for Communication
Assignment

Locate a Web site on the Internet
•
You can use any type of Web site
•
It will be used for design assessment
As concepts are covered, examine your site to note how concepts
are used:
Correctly
Incorrectly
•
Examine the use of color on the site
L E S S O N
1
Module 3: Designing for Communication
Design Analysis
Project
L E S S O N
1
Module 3: Designing for Communication
Lesson Review

The Elements of Design – Color

How is color used in Web design?