Post on 26-Jun-2015
Module 3: Designing for Communication
LESSON 1LESSON 1LESSON 1LESSON 1
The Elements of Design: The Elements of Design: ColorColor
Module 3: Designing for Communication
LESSON 1LESSON 1LESSON 1LESSON 1
Module 3: Designing for Communication
LESSON 1LESSON 1LESSON 1LESSON 1
Lesson Overview
In this lesson, you will: Explore the use of color as it applies to Web design
Module 3: Designing for Communication
LESSON 1LESSON 1LESSON 1LESSON 1
Guiding Question How does color impact the choices you make for the clothes you wear
each day?
Module 3: Designing for Communication
LESSON 1LESSON 1LESSON 1LESSON 1
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
Module 3: Designing for Communication
LESSON 1LESSON 1LESSON 1LESSON 1
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
Module 3: Designing for Communication
LESSON 1LESSON 1LESSON 1LESSON 1
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
Module 3: Designing for Communication
LESSON 1LESSON 1LESSON 1LESSON 1
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.
Module 3: Designing for Communication
LESSON 1LESSON 1LESSON 1LESSON 1
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
Module 3: Designing for Communication
LESSON 1LESSON 1LESSON 1LESSON 1
Examples of Color on the Internet Examples of Bad Font Color Choices
http://iteslj.org/Articles/Kelly-MakePage/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
Module 3: Designing for Communication
LESSON 1LESSON 1LESSON 1LESSON 1
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
Module 3: Designing for Communication
LESSON 1LESSON 1LESSON 1LESSON 1
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
Module 3: Designing for Communication
LESSON 1LESSON 1LESSON 1LESSON 1
Design Analysis
Project
Module 3: Designing for Communication
LESSON 1LESSON 1LESSON 1LESSON 1
Lesson Review The Elements of Design – Color
How is color used in Web design?