The Elements of Design - Color
- 2. Lesson Overview In this lesson, you will Explore the use of color as it applies to Web design
- 3. Guiding Question How does color impact the choices you make for the clothes you wear each day?
- 4. 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. Color 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. Color - 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. Color - 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. Color Choice Resources 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
- 9. Color Examples 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
- 10. W3C 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 the following address http://www.contentquality.com/tutorial/c2 1.htm
- 11. Color Assignments Discussion Forum Go to the Discussion forum and create a thread to answer the following question: How is color used in Web design?
- 12. Color Assignments Activity 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
Editor's Notes
- #3: Lesson 3 Overview
- #4: 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.
- #5: 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.
- #6: 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.
- #7: 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.
- #8: 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.
- #9: 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.
- #10: 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.
- #12: Discuss the assignment as listed above.