Color Theory in Web DesignColor Theory in Web Design

Web Design – Sec 2-2Web Design – Sec 2-2

ObjectivesObjectives

The student will:The student will:– Have a better understanding of effective use of Have a better understanding of effective use of

color on the web. color on the web. – Be aware of some issues people have Be aware of some issues people have

perceiving colorsperceiving colors

Graphic DesignGraphic Design

Primary purposes of graphic design are to:Primary purposes of graphic design are to:– Create a clear visual hierarchy of contrast, so Create a clear visual hierarchy of contrast, so

you can see at a glance what is important and you can see at a glance what is important and what is peripheral what is peripheral

– Define functional regions of the page Define functional regions of the page – Group page elements that are related, so that Group page elements that are related, so that

you can see structure in the content you can see structure in the content

Rules for Web DesignRules for Web Design A simple page grid establishes discrete A simple page grid establishes discrete

functional areas:functional areas:

Rules for Web DesignRules for Web Design As you design menu lists, content lists, page As you design menu lists, content lists, page

header graphics, and other design elements, header graphics, and other design elements, always consider the spacing, grouping, similarity, always consider the spacing, grouping, similarity, and overall visual logic of the patterns you create and overall visual logic of the patterns you create on the page so that you provide easily seen on the page so that you provide easily seen structure, not confusing detail.structure, not confusing detail.

Elements that are grouped within defined regions Elements that are grouped within defined regions form the basis for content modularity and form the basis for content modularity and “chunking” web content for easy scanning.“chunking” web content for easy scanning.– A well-organized page with clear groups of content A well-organized page with clear groups of content

shows the user at a glance how the content is organized shows the user at a glance how the content is organized and sets up modular units of content that form a and sets up modular units of content that form a predictable pattern over pages throughout the site predictable pattern over pages throughout the site

Rules for Web DesignRules for Web Design

Color and contrast are key components of Color and contrast are key components of universal usability.universal usability.– Text legibility is dependent on the reader’s Text legibility is dependent on the reader’s

ability to distinguish letterforms from the ability to distinguish letterforms from the background field.background field.

– Color differentiation depends mostly on Color differentiation depends mostly on brightness and saturation. brightness and saturation.

Rules for Web DesignRules for Web Design

With today’s larger display screens and With today’s larger display screens and more complex graphic interfaces, your web more complex graphic interfaces, your web page is likely to be sharing the screen with page is likely to be sharing the screen with many other windows and desktop elements. many other windows and desktop elements. Use white space to avoid crowding the Use white space to avoid crowding the edges of the browser windows with edges of the browser windows with important elements of your page content. important elements of your page content.

Rules for Web DesignRules for Web Design

Keep it simpleKeep it simple– All users benefit from clear and consistent web All users benefit from clear and consistent web

site design, but for some users it is critical. site design, but for some users it is critical. – Stick with a simple language and navigation Stick with a simple language and navigation

applied consistently throughout your siteapplied consistently throughout your site– Google is great example of simplicityGoogle is great example of simplicity

Web ColorsWeb Colors

Authors of web pages have a variety of Authors of web pages have a variety of options available for specifying colors for options available for specifying colors for elements of web documents. elements of web documents.

Colors on the monitor are produced by Colors on the monitor are produced by combining red, green and blue.combining red, green and blue.– There are 256 levels for each colorThere are 256 levels for each color– The total number of colors a SVGA monitor can The total number of colors a SVGA monitor can

display is 256 (red) x 256 (green) x 256 (blue) = display is 256 (red) x 256 (green) x 256 (blue) = 16,777,216 colors16,777,216 colors

Web ColorsWeb Colors HTML 3.2 defines only 16 named colors:HTML 3.2 defines only 16 named colors:

These are called the standard colors.These are called the standard colors.

Color Hexadecimal Color Hexadecimal Color Hexadecimal Color Hexadecimal

aqua #00FFFF Gra/ey #808080 navy #000080 silver #C0C0C0

black #000000 green #008000 olive #808000 teal #008080

blue #0000FF lime #00FF00 purple #800080 white #FFFFFF

fuchsia #FF00FF maroon #800000 red #FF0000 yellow #FFFF00

HTML5 ColorsHTML5 Colors

There are now 147 named colors:There are now 147 named colors:– http://www.w3schools.com/html/html_colorname

s.asp

Web Safe ColorsWeb Safe Colors

Another set of 216 color values is commonly Another set of 216 color values is commonly considered to be the "web-safe" color considered to be the "web-safe" color palette, developed at a time when many palette, developed at a time when many computer displays were only capable of computer displays were only capable of displaying 256 colors (displaying 256 colors (http://en.wikipedia.org/wiki/Web_colors))

Web Colors – Color BlindnessWeb Colors – Color Blindness About 10% of the male population has some form About 10% of the male population has some form

of color blindness.of color blindness. The most common broad category of color-The most common broad category of color-

blindness is often called red-green color-blindnessblindness is often called red-green color-blindness– Does not mean that these people cannot see reds or Does not mean that these people cannot see reds or

greens. They simply have a harder time differentiating greens. They simply have a harder time differentiating between thembetween them

– There is some evidence that people with red-green There is some evidence that people with red-green color-blindness see reds and greens as yellows, color-blindness see reds and greens as yellows, oranges and beiges.oranges and beiges. This means that yellows, oranges, and beiges can be confused This means that yellows, oranges, and beiges can be confused

with greens and reds. The colors least affected are the blues. with greens and reds. The colors least affected are the blues.

Color Blindness Color Blindness Red DeficienciesRed Deficiencies

– Reds look more like beiges and appear to be Reds look more like beiges and appear to be somewhat darker than they actually are. The somewhat darker than they actually are. The greens tend to look similar to the reds greens tend to look similar to the reds

Color Blindness Color Blindness Green DeficienciesGreen Deficiencies

– Similar to red deficiency, with the exception that Similar to red deficiency, with the exception that reds do not look as dark reds do not look as dark

Color Blindness Color Blindness Blue DeficienciesBlue Deficiencies

– Blue deficiency is much less common. In general blues Blue deficiency is much less common. In general blues and greens can be confused, but yellows are also and greens can be confused, but yellows are also affected in that they can seem to disappear or appear affected in that they can seem to disappear or appear as lighter shades of red. as lighter shades of red.

Designing for Color Blindness Designing for Color Blindness

When designing web content for people who When designing web content for people who are color-blind you do NOT have to convert are color-blind you do NOT have to convert all of your images to black and white or get all of your images to black and white or get rid of your images entirely. In fact, you may rid of your images entirely. In fact, you may not have to change any of your images at not have to change any of your images at all. Here is the key:all. Here is the key:

Make sure that colors are not Make sure that colors are not your only method of conveying your only method of conveying

important information.important information.

SummarySummary

Graphic Design is important to creating a Graphic Design is important to creating a web site that people like and understand.web site that people like and understand.

Try to limit the use of colors to the 216 web Try to limit the use of colors to the 216 web safe colorssafe colors

Consider how your web site will look to Consider how your web site will look to people who are color blind.people who are color blind.

ResourcesResources Web Style Guide: Visual Design Wikipedia: Web Colors WebAIM: Color Blindness

Know these – they may be on a quiz…Know these – they may be on a quiz…– What are the three basic colors that monitors What are the three basic colors that monitors

transmit? transmit? – How many How many namednamed colors are defined in HTML? colors are defined in HTML? – How many different colors are there in the web-How many different colors are there in the web-

safe palette? safe palette? – Are the majority of people we refer to as color Are the majority of people we refer to as color

blind unable to see any color at all? blind unable to see any color at all? – What is the key to designing sites that are What is the key to designing sites that are

accessible to people who are color blind? accessible to people who are color blind?

Rest of TodayRest of Today

Click on the link below and answer the Click on the link below and answer the questions.questions.– Note you will need to login into Google using Note you will need to login into Google using

your CPS login and password.your CPS login and password.

https://docs.google.com/a/cps.edu/spreadsheet/viewform?fromEmail=true&formkey=dFd5UGRoeEVJYVlyM2o0RnFRUUV1VkE6MA