Color
• More & more internet surfers use high
quality monitors
– As a result, color & graphics are becoming
increasingly important to Web page design
• Color use can be a highly subjective
Electromagnetic Spectrum
Monitors
• A pixel color is a combination of red,
blue, and green
• RGB values typically 0 – 255, which
means 2553 possible colors
– 16,777,216
Color Harmony
• Implies a color scene is neither boring nor chaotic
– people respond well to the harmonious use of color
– creates an inner sense of order & visual balance
• Techniques for color harmony:
– don’t use too many colors (overwhelming)
• Use no more than 4 or 5 colors
– don’t use too few (boring)
– use proper color contrast
• Be conservative in your use of color
– Design for monochrome first
Contrast & the Color Wheel
• For good contrast:
– select colors on
opposite sides of the
color wheel
• color complement
• Other contrasts:
– by saturation
– cool-warm contrast
Color Selection
• Use bright colors to emphasize or draw attention
• Use contrasting colors to emphasize separation
– opposite on color wheel
– different saturation
• Use similar colors to convey similarity
– themes for a site
– near each other on color wheel
• Warm colors indicate that action is necessary and force attention
– Red, orange, yellow
• Cool colors to provide status and sometimes background
– Green, blue, violet, purple
• Pastels for background colors
• Be consistent with other color meanings
– Yellow – caution
– Red – stop
– Green - OK
Refocus Issues
• Too many colors in a page require
refocusing of the eye, resulting in fatigue
• Proper choice of colors enhance
readability, poor choices result in fatigue
– Pure or saturated colors require more
refocusing than unsaturated colors
– Older surfers have decreased sensitivity to
blue
– A clear image requires differences in
brightness between adjacent objects
Web Page Color Implications
• If different parts of the screen are attended to
separately, color the parts differently
• If screen searching is performed to locate
information, color code these items for contrast
• If a sequence of information is ordered, color
code the sequence
– ROYGBIV
• If information on a screen is crowded, use color
to provide visual groupings
Text
• Text in color is not as visible as in B/W
• Text in color is not as visible as in B/W
• Maintain legibility of color text by
increasing the font size or make bold
Note this font is not bold
Note this font is bold
Color Aesthetics
• Terms, color themes and relationships,
type, layout
• Please remember that you are hearing a
talk on color aesthetics from an engineer.
Aesthetics
a guiding principle in matters of artistic
beauty and taste; artistic sensibility
Spectrum & Hue
• SPECTRUM: All the possible colors in a
color space
• HUE: specific location on color wheel or in
color spectrum
Value
• VALUE: describes how light or dark
something is. The following example
shows a red hue at varying values
Saturation
SATURATION: defines the intensity of a
color. Muted refers to colors with little
saturation.
Contrast
CONTRAST: separation between values.
Text color must contrast with background
to be readable.
Tint & Tone
• TINT: process of adding WHITE to a color
• TONE: process of adding BLACK to a
color
Color Wheels
• Color wheels show how colors are related
– imagine a circular rainbow spectrum
Primary
Secondary
Tertiary
Color Relationships
• Harmonious relationships
show a pattern
on the color wheel
Analogous
• 3-5 colors next to each other on color
wheel
Complementary colors
• opposites on the color wheel
Split complementary
Monochromatic
• Single hue with different values of that hue
• Examples:
http://www.sweetaspirations.com/
http://www.mike-cookson.pwp.blueyonder.co.uk
Applying Color
• Saturation and value are as important as
hue – need contrast!
• Try designing in gray first.
Useful Links
• http://webdesign.about.com/cs/color/a/aac
olorharmony.htm
• http://www.poynter.org/special/colorproject
/colorproject/color.html
• http://www.colorcombo.com/
Color Summary
• Strive for high contrast (readability)
• Effective color schemes are simple and
harmonious
• Use different colors or values for important
information to attract attention
• Begin a file (bookmarks?) of designs you
like
Typography
• Text is created in a graphics application
(Fireworks, Photoshop, etc.) OR within HTML
• HTML text can be searched, selected, and
copied (but less control over font and color)
• Text within graphics allows you full control (font
face, spacing, effects, layering, etc.) but cannot
be searched or selected
Typography Terms
• Serif (has stroke on edges, default) vs sans serif (easier
to read on screen)
• Monospace – same width for each letter
(courier)
• Leading – space between lines (can be adjusted in
graphics app or via CSS using letter-spacing property)
• Spacing – space between letters or words (adjust with
KERNING or TRACKING in graphics app or via CSS
using letter-spacing property)
Typography Terms
• Drop Caps – can be set in HTML
or CSS
• Small caps – can be set in CSS
• Body Text – main block of text in a document
(should be HTML text)
• Headline text –use H1-H6 HTML tags and
change look with CSS
• Baseline shift – move character up or down
• Anti-aliasing – edges of text are blurred to get rid
of JAGGIES
Resources
• http://counterspace.motivo.com/
• http://www.rsub.com/typographic/
• http://www.myfonts.com/
HTML text
• You can specify font face & size in HTML
or CSS, but the end user must have the
font installed to view it
• See font list on page 32
• You can specify a LIST of fonts –
Dreamweaver automates this
• Use HTML for body text
Pictures of text
• Created in graphics application
• Saved as gif, jpg, or swf file
• Can’t be searched or copied, so use for
titles & buttons
Legibility & Readability
• sans-serif is easiest to read – Verdana is a good
choice
• For serif, use Georgia
• High contrast
• Avoid noisy backgrounds
• Small text should not be anti-aliased
• Use simple, sans-serif font for buttons
• CAPS ok for titles & headers, but not for body
Tips
• Specify size in CSS (pixel based so won’t
look different on Mac)
• Choose a FEW FONTS for your site
• Large text looks better anti-aliased
• Break up body text with paragraphs,
headings, etc. Make it EASY TO SKIM
• People print pages, so make sure it works
(print version? PDF?)
Flash
• Vector graphics, so scales nicely and
creates small file
• Full control over font & graphics
• Supports audio and video
• Requires plug-in
• Less searchable
• Can’t link to particular page
Layout
• Rectangles are not particularly pleasing.
• Unfortunately HTML was initially designed
with rectangles in mind as a layout.
Rectangle
• HTML is rectangle-oriented (images,
frames, tables, browser window)
• TIPS
– Round edges
– use graphics & backgrounds to break lines
– Empty space is good
– Vary sizes and weights
– Use irregular shapes (title rectangles?)
More tips
•
•
•
•
Grids help with alignment
Use tables to limit line width
WHITE SPACE!!!!
Remember the fold – important info on
top, assume 800 x 600 resolution
• Limit animation
What is Browser-Safe Color?
• Different systems and browsers support
color differently.
• Some users have 8-bit video (old, handheld devices)
• If user’s system doesn’t have your color, it
could SHIFT or DITHER
• Netscape & IE share 216 color palette
• Link
http://www.lynda.com/hex.html
Hexidecimal codes
• RGB values are converted to 6-digit
codes:
–0
– 51
– 102
– 153
– 204
– 255
0
33
66
99
CC
FF
00
Examples
•
•
•
•
Code: R G B
White FF FF FF
Pale Yellow: FF FF CC
Blue: 00 00 CC
When to Use Browser-Safe
Palette
• Not necessary any more unless designing
for hand-held devices (but nice to know)
• For solid areas of color in line art and
hybrid images – otherwise, dithering may
occur
• Hexidecimal colors (text, background in
body tag, link, visited link, etc.) –
otherwise, color shifting may occur
Swatches
• Fireworks default color palette is browser
safe
• “Websnap Adaptive” option shifts solid
color areas to web-safe colors
JPEG
• Not browser-safe, so don’t use JPG format
if the image includes large areas of solid
color (will show blotchy artifacts and file
size may be larger than GIF)