Transcript color-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 Electromagnetic Spectrum 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 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 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 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 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 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 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 Color Aesthetics • Terms, color themes and relationships, type, layout • Please remember that you are hearing a talk on color aesthetics from an engineer. 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 Secondary Tertiary Color Relationships • Harmonious relationships show a pattern on the color wheel 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 • Examples: http://www.sweetaspirations.com/ http://www.mike-cookson.pwp.blueyonder.co.uk Applying Color • Saturation and value are as important as hue – need contrast! • Try designing in gray first. Useful Links • http://webdesign.about.com/cs/color/a/aac olorharmony.htm • http://www.poynter.org/special/colorproject /colorproject/color.html • http://www.colorcombo.com/ 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://counterspace.motivo.com/ • http://www.rsub.com/typographic/ • http://www.myfonts.com/ 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 (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?) 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 not particularly pleasing. • Unfortunately HTML was initially designed with rectangles in mind as a layout. 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?) 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 What is Browser-Safe Color? • Different systems and browsers support color differently. • Some users have 8-bit video (old, handheld devices) • If user’s system doesn’t have your color, it could SHIFT or DITHER • Netscape & IE share 216 color palette • Link http://www.lynda.com/hex.html Hexidecimal codes • RGB values are converted to 6-digit codes: –0 – 51 – 102 – 153 – 204 – 255 0 33 66 99 CC FF 00 Examples • • • • Code: R G B White FF FF FF Pale Yellow: FF FF CC Blue: 00 00 CC 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 Swatches • Fireworks default color palette is browser safe • “Websnap Adaptive” option shifts solid color areas to web-safe colors 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)