This document discusses color and its use in web design. It explores how color impacts first impressions and professionalism of a site. Different color models like RGB, HEX and color wheel concepts are introduced. Examples of good and bad color usage are provided along with resources for finding color codes and schemes. Assignments are given to discuss how color is used in web design and to examine a site to analyze its color implementation.
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
Notas do Editor
Lesson 3 Overview
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.
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.
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.
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.
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.
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.
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.