Color Theory in Web Design Web Design – Sec 2-2

Objectives  The student will: –Have a better understanding of effective use of color on the web. –Be aware of some issues people have perceiving colors

Graphic Design  Primary purposes of graphic design are to: –Create a clear visual hierarchy of contrast, so you can see at a glance what is important and what is peripheral –Define functional regions of the page –Group page elements that are related, so that you can see structure in the content

Rules for Web Design  A simple page grid establishes discrete functional areas:

Rules for Web Design  As you design menu lists, content lists, page header graphics, and other design elements, always consider the spacing, grouping, similarity, and overall visual logic of the patterns you create on the page so that you provide easily seen structure, not confusing detail.  Elements that are grouped within defined regions form the basis for content modularity and “chunking” web content for easy scanning. –A well-organized page with clear groups of content shows the user at a glance how the content is organized and sets up modular units of content that form a predictable pattern over pages throughout the site

Rules for Web Design  Color and contrast are key components of universal usability. –Text legibility is dependent on the reader’s ability to distinguish letterforms from the background field. –Color differentiation depends mostly on brightness and saturation.

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

Rules for Web Design  Keep it simple –All users benefit from clear and consistent web site design, but for some users it is critical. –Stick with a simple language and navigation applied consistently throughout your site –Google is great example of simplicity

Web Colors  Authors of web pages have a variety of options available for specifying colors for elements of web documents.  Colors on the monitor are produced by combining red, green and blue. –There are 256 levels for each color –The total number of colors a SVGA monitor can display is 256 (red) x 256 (green) x 256 (blue) = 16,777,216 colors

Web Colors  HTML 3.2 defines only 16 named colors:  These are called the standard colors.

HTML5 Colors  There are now 147 named colors: – s.asp s.asphttp:// s.asp

Web Safe Colors  Another set of 216 color values is commonly considered to be the "web-safe" color palette, developed at a time when many computer displays were only capable of displaying 256 colors (

Web Colors – Color Blindness  About 10% of the male population has some form of color blindness.  The most common broad category of color- blindness is often called red-green color-blindness –Does not mean that these people cannot see reds or greens. They simply have a harder time differentiating between them –There is some evidence that people with red-green color-blindness see reds and greens as yellows, oranges and beiges.  This means that yellows, oranges, and beiges can be confused with greens and reds. The colors least affected are the blues.

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

Color Blindness  Green Deficiencies –Similar to red deficiency, with the exception that reds do not look as dark

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

Designing for Color Blindness  When designing web content for people who are color-blind you do NOT have to convert all of your images to black and white or get rid of your images entirely. In fact, you may not have to change any of your images at all. Here is the key: Make sure that colors are not your only method of conveying important information.

Summary  Graphic Design is important to creating a web site that people like and understand.  Try to limit the use of colors to the 216 web safe colors  Consider how your web site will look to people who are color blind.

Resources   Web Style Guide: Visual Design Web Style Guide: Visual Design   Wikipedia: Web Colors Wikipedia: Web Colors   WebAIM: Color Blindness WebAIM: Color Blindness

 Know these – they may be on a quiz… –What are the three basic colors that monitors transmit? –How many named colors are defined in HTML? –How many different colors are there in the web- safe palette? –Are the majority of people we refer to as color blind unable to see any color at all? –What is the key to designing sites that are accessible to people who are color blind?

Rest of Today  Click on the link below and answer the questions. –Note you will need to login into Google using your CPS login and password.   eet/viewform?from =true&formkey=dFd 5UGRoeEVJYVlyM2o0RnFRUUV1VkE6MA eet/viewform?from =true&formkey=dFd 5UGRoeEVJYVlyM2o0RnFRUUV1VkE6MA