View
216
Download
1
Category
Preview:
Citation preview
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 boldNote 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 relationshipsshow 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/aacolorharmony.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, hand-held 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 0 00– 51 33– 102 66– 153 99– 204 CC– 255 FF
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)
Recommended