Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this


  1. 1. The Elements of Design: Color Module 3: Designing for Communication LESSON 1
  2. 2. <ul><li>Lesson Overview </li></ul><ul><li>In this lesson, you will: </li></ul><ul><li>Explore the use of color as it applies to Web design </li></ul>
  3. 3. <ul><li>Guiding Question </li></ul><ul><li>How does color impact the choices you make for the clothes you wear each day? </li></ul>
  4. 4. <ul><li>Color </li></ul><ul><li>The Internet isn’t black and white </li></ul><ul><li>Colors can be analogous or complementary </li></ul><ul><li>Complementary colors are colors opposite each other on the color wheel </li></ul>
  5. 5. <ul><li>Why is the choice of color so important? </li></ul><ul><li>Color affects the first impression of your site </li></ul><ul><li>Color sets a level of professionalism for the site </li></ul><ul><li>Good choices increase the chance that your site will be taken seriously </li></ul>
  6. 6. <ul><li>RGB </li></ul><ul><li>RGB = Red:Green:Blue </li></ul><ul><li>Numbers represent how much of each color was used to make the new color </li></ul><ul><li>Range from white 255:255:255 to black 0:0:0 </li></ul><ul><li>Web development enables the designer to use these number to produce the exact color desired </li></ul>
  7. 7. <ul><li>HEX </li></ul><ul><li>HEX = Hexadecimal code </li></ul><ul><li>Series of six letters and numbers </li></ul><ul><li>0 – 9 and A – F </li></ul><ul><li>HEX code for white is 000000 and the HEX code for black is FFFFFF. </li></ul><ul><li>Most Web development software will accept either RGB or HEX. </li></ul>
  8. 8. <ul><li>Time to Make Some Choices </li></ul><ul><li>Color Families </li></ul><ul><ul><li>http://www.colorjack.com/ </li></ul></ul><ul><li>Color Codes </li></ul><ul><ul><li>http://www.colorschemer.com/blog/ </li></ul></ul><ul><ul><li>http://www.pitt.edu/~nisg/cis/web/cgi/rgb.html </li></ul></ul><ul><li>Use Color Codes to find the Color Family </li></ul><ul><ul><li>http://meyerweb.com/eric/tools/color-blend/ </li></ul></ul><ul><ul><li>http://colorblender.com/ </li></ul></ul><ul><ul><li>http://www.nickherman.com/colormatch/ </li></ul></ul><ul><ul><li>http://www.colorschemer.com/online.html </li></ul></ul>
  9. 9. <ul><li>Examples of Color on the Internet </li></ul><ul><li>Examples of Bad Font Color Choices http://iteslj.org/Articles/Kelly-MakePage/samples/bad/badcolors.html </li></ul><ul><li>Examples of Good and Bad Uses of Color on a Web page http://www.2fortoys.net/web_design/color-example.htm </li></ul>
  10. 10. <ul><li>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 </li></ul>
  11. 11. <ul><li>Assignment </li></ul><ul><li>Locate a Web site on the Internet </li></ul><ul><ul><ul><li>You can use any type of Web site </li></ul></ul></ul><ul><ul><ul><li>It will be used for design assessment </li></ul></ul></ul><ul><ul><ul><li>As concepts are covered, examine your site to note how concepts are used: </li></ul></ul></ul><ul><ul><ul><li>Correctly </li></ul></ul></ul><ul><ul><ul><li>Incorrectly </li></ul></ul></ul><ul><ul><ul><li>Examine the use of color on the site </li></ul></ul></ul>
  12. 12. <ul><li>Design Analysis </li></ul><ul><li>Project </li></ul>
  13. 13. <ul><li>Lesson Review </li></ul><ul><li>The Elements of Design – Color </li></ul><ul><li>How is color used in Web design? </li></ul>