Transcript PowerPoint: Elements of Design

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 white 255:255:255 to black 0:0:0

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
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
•
Today, you will examine the use of color on the site.
•
See next slide for the rubric
L E S S O N
1
Module 3: Designing for Communication
Design Analysis
Project
You can find this
Rubric in the Day 1
Files for Module 3.
L E S S O N
1
Module 3: Designing for Communication
Lesson Review – You should have completed to things by the
end of the lesson:
1.
Chose a website that you will use to analyze for the design
analysis project. Use the rubric to analyze color.
2.
Decided on an imaginary business for which you will design a
website. Here are some examples:

Video game manufacturer with a new game

Dog groomer wanting to advertise services on the Internet

Musical group selling CDs (a new rock band)

New clothing line wishing to expand customer base through
Internet sales

Athletic shoe manufacturer with a new shoe line

Soda manufacturer wishing to educate consumers about its new
energy drink