1 / 28

Color Aesthetics

Learn about color aesthetics, relationships, and themes, as well as typography terms and techniques for effective design. Discover useful links and resources for creating visually appealing and readable designs.

emmaarnold
Download Presentation

Color Aesthetics

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Color Aesthetics • Weinman, chapter 2 • Terms, color themes and relationships, type, layout Aestheticsa 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_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/

  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/colorproject/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 • 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

More Related