1 / 43

Color

Color. More & more internet surfers use high quality monitors As a result, color & graphics are becoming increasingly important to Web page design Color use can be a highly subjective. Electromagnetic Spectrum. Monitors. A pixel color is a combination of red, blue, and green

muriel
Télécharger la présentation

Color

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 • More & more internet surfers use high quality monitors • As a result, color & graphics are becoming increasingly important to Web page design • Color use can be a highly subjective

  2. Electromagnetic Spectrum

  3. Monitors • A pixel color is a combination of red, blue, and green • RGB values typically 0 – 255, which means 2553 possible colors • 16,777,216

  4. Color Harmony • Implies a color scene is neither boring nor chaotic • people respond well to the harmonious use of color • creates an inner sense of order & visual balance • Techniques for color harmony: • don’t use too many colors (overwhelming) • Use no more than 4 or 5 colors • don’t use too few (boring) • use proper color contrast • Be conservative in your use of color • Design for monochrome first

  5. Contrast & the Color Wheel • For good contrast: • select colors on opposite sides of the color wheel • color complement • Other contrasts: • by saturation • cool-warm contrast

  6. Color Selection • Use bright colors to emphasize or draw attention • Use contrasting colors to emphasize separation • opposite on color wheel • different saturation • Use similar colors to convey similarity • themes for a site • near each other on color wheel • Warm colors indicate that action is necessary and force attention • Red, orange, yellow • Cool colors to provide status and sometimes background • Green, blue, violet, purple • Pastels for background colors • Be consistent with other color meanings • Yellow – caution • Red – stop • Green - OK

  7. Refocus Issues • Too many colors in a page require refocusing of the eye, resulting in fatigue • Proper choice of colors enhance readability, poor choices result in fatigue • Pure or saturated colors require more refocusing than unsaturated colors • Older surfers have decreased sensitivity to blue • A clear image requires differences in brightness between adjacent objects

  8. Web Page Color Implications • If different parts of the screen are attended to separately, color the parts differently • If screen searching is performed to locate information, color code these items for contrast • If a sequence of information is ordered, color code the sequence • ROYGBIV • If information on a screen is crowded, use color to provide visual groupings

  9. Text • Text in color is not as visible as in B/W • Text in color is not as visible as in B/W • Maintain legibility of color text by increasing the font size or make bold Note this font is not bold Note this font is bold

  10. Color Aesthetics • Terms, color themes and relationships, type, layout • Please remember that you are hearing a talk on color aesthetics from an engineer. Aestheticsa guiding principle in matters of artistic beauty and taste; artistic sensibility

  11. Spectrum & Hue • SPECTRUM: All the possible colors in a color space • HUE: specific location on color wheel or in color spectrum

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

  13. Saturation SATURATION: defines the intensity of a color. Muted refers to colors with little saturation.

  14. Contrast CONTRAST: separation between values. Text color must contrast with background to be readable.

  15. Tint & Tone • TINT: process of adding WHITE to a color • TONE: process of adding BLACK to a color

  16. Color Wheels • Color wheels show how colors are related – imagine a circular rainbow spectrum Secondary Tertiary Primary

  17. Color Relationships • Harmonious relationshipsshow a pattern on the color wheel

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

  19. Complementary colors • opposites on the color wheel

  20. Split complementary

  21. Monochromatic • Single hue with different values of that hue • Examples: http://www.sweetaspirations.com/ http://www.mike-cookson.pwp.blueyonder.co.uk

  22. Applying Color • Saturation and value are as important as hue – need contrast! • Try designing in gray first.

  23. Useful Links • http://webdesign.about.com/cs/color/a/aacolorharmony.htm • http://www.poynter.org/special/colorproject/colorproject/color.html • http://www.colorcombo.com/

  24. 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

  25. 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

  26. 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)

  27. 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

  28. Resources • http://counterspace.motivo.com/ • http://www.rsub.com/typographic/ • http://www.myfonts.com/

  29. 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

  30. 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

  31. 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

  32. Tips • Specify size in CSS (pixel based so won’t look different on Mac) • 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?)

  33. 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

  34. Layout • Rectangles are not particularly pleasing. • Unfortunately HTML was initially designed with rectangles in mind as a layout.

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

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

  37. What is Browser-Safe Color? • Different systems and browsers support color differently. • Some users have 8-bit video (old, hand-held devices) • If user’s system doesn’t have your color, it could SHIFT or DITHER • Netscape & IE share 216 color palette • Linkhttp://www.lynda.com/hex.html

  38. Hexidecimal codes • RGB values are converted to 6-digit codes: • 0 0 00 • 51 33 • 102 66 • 153 99 • 204 CC • 255 FF

  39. Examples • Code: R G B • White FF FF FF • Pale Yellow: FF FF CC • Blue: 00 00 CC

  40. When to Use Browser-Safe Palette • Not necessary any more unless designing for hand-held devices (but nice to know) • For solid areas of color in line art and hybrid images – otherwise, dithering may occur • Hexidecimal colors (text, background in body tag, link, visited link, etc.) – otherwise, color shifting may occur

  41. Swatches • Fireworks default color palette is browser safe • “Websnap Adaptive” option shifts solid color areas to web-safe colors

  42. JPEG • Not browser-safe, so don’t use JPG format if the image includes large areas of solid color (will show blotchy artifacts and file size may be larger than GIF)

More Related