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 Primary SecondaryTertiary

8. Color Relationships Harmonious relationships show a pattern on the color wheel SEE http://cis2.cuyamaca.net/jreed/examples /213_spring01/bohrer/ http://cis2.cuyamaca.net/jreed/examples /213_spring01/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 Example: http://www.sweetaspirations.com/ http://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/v 1i1/color/ http://www.poynter.org/special/colorproj ect/colorproject/color.html Play with palettes at http://wellstyled.com/tools/ http://www.colormatch.dk/ http://wellstyled.com/tools/

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 Can’t 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 Can’t 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