Critique Web Page Design


1
Critique Web Page Design
Wallpapers
Colors
Backgrounds

• Competency 6.02

2
Web Site Colors

• 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 sites message.
• Color features should enhance your websitenot
  distract.

3
Background and Foreground Colors

• 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.

4
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.

5
Selecting Colors

• Color and how it is perceived are both very
  technical and complex subjects. People perceive
  color differently
• Red seems to be almost universal in marking
  something that is important.
• 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
• Other colors often depend on culture and even on
  the users personal experiences.
• Age of the sites target market can also help to
  determine colors choices.

6
Browser-Safe Color 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 computers calculator or on
  several free site on the Internet.
• Color monitors have three colors in each pixel
  (Red Green and Blue)
• Visit the site below to converts RGB to
  Hexadecimals
• http//www.webdesigns2000.com/WebPage1/rgbhex.htm
  
• Tutorial for RGB and hexadecimals
  http//www.htmlcenter.com/tutorials/tutorials.cfm/
  111/General

7
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 good example
This is a good example
This is a good example
This is not a good exampleespecially if graphics
are being used in the web site.
8
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 doesnt
  work with text on its foreground.
• Slightly embossed patterns make very tasteful
  rich looking pages.
• Pictures and animated GIFs 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.

9
Wallpaper continued
Graphics and photographs are not acceptable as
wallpaper because they make text difficult to
read when it is fighting the busy background.
Join us for the next meeting of FBLA.
WCU Cheerleaders earns 2nd in UCAs National
Championship.
10
Links

• To make followed and un-followed links easier to
  read color should be added. The code is listed
  below with the response
• LINKlink color
• ALINKlink color when mouse moves over the text
• VLINKlink 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 color Click here to view CNN.com
Color when mouse moves over
link Click here to view CNN.com
Color after returning from visiting CNN
11
KISS

• Keep
• It
• Simple
• Short
• Remember Kiss when you are designing a website!