Color Aesthetics

1
Color Aesthetics

• Weinman, chapter 2
• Terms, color themes and relationships, type,
  layout

Aesthetics a guiding principle in matters of
artistic beauty and taste artistic sensibility
2
Spectrum Hue

• SPECTRUM All the possible colors in a color
  space
• HUE specific location on color wheel or in color
  spectrum

3
Value

• VALUE describes how light or dark something is.
  The following example shows a red hue at varying
  values

4
Saturation

• SATURATION defines the intensity of a color.
  Muted refers to colors with little saturation.

5
Contrast

• CONTRAST separation between values. Text color
  must contrast with background to be readable.

6
Tint Tone

• TINT process of adding WHITE to a color
• TONE process of adding BLACK to a color

7
Color Wheels

• Color wheels show how colors are related
  imagine a circular rainbow spectrum

Secondary
Tertiary
Primary
8
Color Relationships

• Harmonious relationshipsshow a pattern on the
  color wheel
• SEE http//cis2.cuyamaca.net/jreed/examples/213_sp
  ring01/bohrer/

9
Analogous

• 3-5 colors next to each other on color wheel

10
Complementary colors

• opposites on the color wheel

11
Split complementary
12
Monochromatic

• Single hue with different values of that hue
• note difference between warm and cool colors
• Examplehttp//www.sweetaspirations.com/

13
Applying Color

• Saturation and value are as important as hue
  need contrast! See example on page 22
• Try designing in gray first.
• See textbook for color examples

14
Useful Links

• http//www.webdesignclinic.com/ezine/v1i1/color/
• http//www.poynter.org/special/colorproject/colorp
  roject/color.html
• Play with palettes athttp//wellstyled.com/tools/
  http//www.colormatch.dk/

15
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

16
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

17
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)

18
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

19
Resources

• http//www.rsub.com/typographic/
• http//www.themeworld.com/fonts/
• http//www.myfonts.com/
• More on page 41

20
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

21
Pictures of text

• Created in graphics application
• Saved as gif, jpg, or swf file
• Cant be searched or copied, so use for titles
  buttons

22
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

23
Tips

• Specify size in CSS
• 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?)

24
Flash

• Vector graphics, so scales nicely and creates
  small file
• Full control over font graphics
• Supports audio and video
• Requires plug-in
• Less searchable
• Cant link to particular page

25
Layout

• Rectangles are yucky

26
Rectangle-itis

• HTML is rectangle-oriented (images, frames,
  tables, browser window)
• Examples on pages 56 57
• TIPS
• Round edges
• use graphics backgrounds to break lines
• Empty space is good
• Vary sizes and weights
• Use irregular shapes (title rectangles?)

27
More tips

• Grids help with alignment see pages 58-61
• Use tables to limit line width
• WHITE SPACE!!!! Page 63
• Remember the fold important info on top, assume
  800 x 600 resolution
• Limit animation

28
PHEW!!!

• Lots of info, eh?
• STUDY the chapter and refer back to it to help it
  stick.
• I will revisit the concepts throughout the
  semester