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

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 SecondaryTertiary

Color Relationships Harmonious relationships show a pattern on the color wheel SEE /213_spring01/bohrer/ /213_spring01/bohrer/

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 note difference between warm and cool colors Example:

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

Useful Links 1i1/color/ ect/colorproject/color.html Play with palettes at

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 More on page 41

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 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 yucky

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

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

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