C ritique Web Page Des ign Wal lp ap e rsC o lo rs ds un g ro B ac k C ompetency 6.02
Web S ite C olors Printing color is expensive so color is used sparingly in the printed media. Color is virtually free on the web so web designers can incorporate any amount of color that is appropriate for their sites. Color should be used to set the mood of a site and to achieve a purpose. Too much color variety can obscure, rather than clarify the site’s message. Color features should enhance your website—not distract.
B ackground and ForegroundC olors Light on dark or dark on light works best for text. See below: This is a good example This is a bad example This is a good example This is a bad example This is a good example This is a bad example This is a good example This is a bad example Contrast between the background and foreground must be considered when selecting color. Generally, light on dark, or dark on light works well. Color blind people cannot distinguish red/black or green/black combinations. So avoid these combinations, even though they may look okay to you. A light text on a dark background may not print. White text on a black page usually does not print. Use harmonizing color schemes and contrasting colors for text.
Background Colors Mid tone grey background with dark text will be best for most eyes. Bright white and light colored backgrounds are hard on most eyes. Certain color combinations are difficult to read: • Red type on blue background or black on dark grey background. Adequate contract between background and text (foreground) is needed. • A background that differs from the foreground text only in color and not in brightness can strain the eyes.
S electing C olorsColor and how it is perceived are both very technical and complex subjects. People perceive color differently: o Red seems to be almost universal in marking something that is important. o Colors can also set the mood of your website: Red Generates energy and excitement Green Encourages people to think Yellow Signifies optimism and confidence Blue Relaxes and calms by lowering blood pressure and pulse rate, so too much blue can impair concentration o Other colors often depend on culture and even on the user’s personal experiences. o Age of the site’s target market can also help to determine colors choices.
B rows er-S afe C olor Palette Monitors support at least 24-bit color with most supporting a 32-bit. A 24-bit color monitors can display 16.7 million colors and are considered browser-safe. RGB colors must be converted to hexadecimal system numbers to use in a web site. These can be converted on the computer’s calculator or on several free site on the Internet. Color monitors have three colors in each pixel (Red, Green, and Blue) o Visit the site below to converts RGB to Hexadecimals: http://www.webdesigns2000.com/WebPage o Tutorial for RGB and hexadecimals: http://www.htmlcenter.com/tutorials/tutorials
Wallpaper Websites often use wallpaper (background design). Using wallpaper requires the designer to be more careful with the selection of text, colors, and textures to maintain optimal readability.This is a goodexample This is a good example This is a good example This is not a good example—especially if graphics are being used in the web site.
Wallpaper continued… Using distinct patterns usually results in pages that are difficult to read and have too much distraction. Wallpaper may be pretty by itself but doesn’t work with text on its foreground. Slightly embossed patterns make very tasteful, rich looking pages. Pictures and animated GIF’s should not be used as wallpaper because they create too much distraction. Test the results of different blends of background with different text to be sure they are legible. If your web site has pages that viewers may want to copy, be careful with colors and background selections.
Wallpaper continued…Graphics and Join us for thephotographs are next meeting ofnot acceptable FBLA.as wallpaper…because theymake textdifficult to readwhen it isfighting the busy WCU Cheerleaders earns 2nd inbackground. UCA’s National Championship.
Links To make followed and un-followed links easier to read, color should be added. The code is listed below with the response: LINK=link color ALINK=link color when mouse moves over the text VLINK=link color after viewing the followed hyperlink page When using graphics as links, give the same consideration for all graphics used in the site.Click here to view CNN.com Original colorClick here to view CNN.com Color when mouse moves over linkClick here to view CNN.com Color after returning from visiting CNN
KIS S Keep It Simple & Short Remember “Kiss” when you are designing a website!
A particular slide catching your eye?
Clipping is a handy way to collect important slides you want to go back to later.