300 likes | 501 Views
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
E N D
Color Aesthetics • Weinman, chapter 2 • Terms, color themes and relationships, type, layout Aestheticsa 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 Secondary Tertiary Primary
Color Relationships • Harmonious relationshipsshow a pattern on the color wheel • SEE http://cis2.cuyamaca.net/jreed/examples/213_spring01/bohrer/
Analogous • 3-5 colors next to each other on color wheel
Complementary colors • opposites on the color wheel
Monochromatic • Single hue with different values of that hue • note difference between warm and cool colors • Example:http://www.sweetaspirations.com/
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 • http://www.webdesignclinic.com/ezine/v1i1/color/ • http://www.poynter.org/special/colorproject/colorproject/color.html • Play with palettes athttp://wellstyled.com/tools/http://www.colormatch.dk/
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://www.rsub.com/typographic/ • http://www.themeworld.com/fonts/ • http://www.myfonts.com/ • 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 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
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