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

Lesson Overview In this lesson, you will: Explore the use of color as it applies to Web design Lesson 3 Overview

Guiding Question How does color impact the choices you make for the clothes you wear each day? Use the guiding question as a class starter, allowing the students time to answer the question in their journal. Discuss student answers to the question.

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 Many of us are concerned with how the colors in our clothes go together as we get dressed each morning. A Web designer should also be concerned with how the colors in a site go together. Putting some thought into this process can help with the design of the site.   Since most people using the Internet are not interested in looking at sites that have only a white background and black font, the Web designer must choose colors to use for the site. When choosing colors for a Web site, a designer should remember to choose colors that create a contrast with each other. This contrast makes the information easy to see on the site. Use a color wheel to find complementary colors. Complementary colors are those that are opposite each other on the color wheel.

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 The colors that you choose to use on your Web site will make the first impression of your site and the authority of the site. If you make poor choices in your colors, then your site might not be taken seriously. So how can you get some help in making the right choices in choosing colors for your Web site? There are many Web sites on the Internet that were created for this purpose. 5

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 When using the Internet to search for color choices, you will encounter two codes. The first of these codes is an RGB code. RGB stands for red, green, and blue. Each letter will have a number value to designate how much of each color (red, green, and blue) were used to make the color. The numeric values range from 0 to 255. The RGB value for white is 255:255:255 because white is the mixture of all the colors. Black on the other hand would be 0:0:0 because it is the absence of all color. You will be able to use these numbers to ensure you are getting the exact color that you want for your site. Your Web development software will have a place for you to enter these numbers. 6

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 Another designation for color that you will encounter is the HEX code or Hexadecimal code. This code is similar to the RGB system but uses a series of six letters and numbers to identify the colors. This code uses the number 0–9 and the letters A–F to identify colors. For example, the HEX code for white is 000000 and the HEX code for black is FFFFF. In most Web development software, you can use either the RGB or HEX code to ensure the proper colors. 7

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 Now it is time to make some choices. Look through the following Web sites and make some choices for the family of color that you want to use in creating your own Web site.

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 Show students how the choices of text color and background color can affect the way a Web page looks using the “Examples of Bad Font Color Choices” Web page at http://iteslj.org/Articles/Kelly-MakePage/samples/bad/badcolors.html. This page allows the user to change the background color of the page to see how different font colors appear against the chosen background color. To show students an example of the good and bad use of color in a Web page, use http://www.2fortoys.net/web_design/color-example.htm. At the bottom of this Web page, you can switch to how the Web page might look if better colors are chosen for the same site.

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

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 Discuss the assignment as listed above.

Design Analysis Project Take some class time to give each student a copy of the rubric for the Design Analysis Project (T.3.1_3_4_5_6.R_Design) and go over the expectations of the project. The students will be expected to use the rubric to guide them through the project. For the Principles Analysis Project, students will need to take the Web site that they have chosen and critically analyze each of the 5 Design principles in the Web site. The title of the Web site as well as the URL must be provided at the top of the justification paper. The classroom teacher should take some time now to set their expectations as to what is meant by critical analysis and justification paper (i.e., length, style, etc.). At this point, the classroom teacher should also set a due date for the project. A suggestion for a due date would be the day of Lesson 8.

Lesson Review The Elements of Design – Color How is color used in Web design? This is the last slide of the presentation.