1. Module 3: Designing for Communication LESSON 1 The Elements of Design: Color Module 3: Designing for Communication LESSON 1

2. Module 3: Designing for Communication LESSON 1 Lesson Overview In this lesson, you will:  Explore the use of color as it applies to Web design

3. Module 3: Designing for Communication LESSON 1 Guiding Question  How does color impact the choices you make for the clothes you wear each day?

4. Module 3: Designing for Communication LESSON 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

5. Module 3: Designing for Communication LESSON 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

6. Module 3: Designing for Communication LESSON 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

7. Module 3: Designing for Communication LESSON 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.

8. Module 3: Designing for Communication LESSON 1 Time to Make Some Choices  Color Families  http://www.colorjack.com/ http://www.colorjack.com/  Color Codes  http://www.colorschemer.com/blog/ http://www.colorschemer.com/blog/  http://www.pitt.edu/~nisg/cis/web/cgi/rgb.html 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://meyerweb.com/eric/tools/color-blend/  http://colorblender.com/ http://colorblender.com/  http://www.nickherman.com/colormatch/ http://www.nickherman.com/colormatch/  http://www.colorschemer.com/online.html http://www.colorschemer.com/online.html

9. Module 3: Designing for Communication LESSON 1 Examples of Color on the Internet  Examples of Bad Font Color Choices http://iteslj.org/Articles/Kelly- MakePage/samples/bad/badcolors.html 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 http://www.2fortoys.net/web_design/color-example.htm

10. Module 3: Designing for Communication LESSON 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 http://www.contentquality.com/tutorial/c21.htm

11. Module 3: Designing for Communication LESSON 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

12. Module 3: Designing for Communication LESSON 1 Design Analysis Project

13. Module 3: Designing for Communication LESSON 1 Lesson Review  The Elements of Design – Color  How is color used in Web design?