Color
- Computers use RGB rather than CMYK color. Colors as printed on a company's stationary or printed brochures may not precisely match the color in the Web site. You can carry a Pantone Color Reference Card with you to a client's office to obtain the best match with their printed logo and stationary. Or, you can simply bring up a Web browser to a page like Weinman's browser-safe palette. Pantone sells a number of tools for web developers.
- You have about 7 seconds to get the user's attention...try doing it with color! But you probably shouldn't use more than 4 colors in a site. See Weinman's color inspirational sites
- The color resolution settings (256, thousands, or millions of colors) of a person's computer can cause the colors that you choose to be displayed differently than you expect. A client's monitor may show colors differently from your computer even if they are both Windows PC's! This is due to the fact that a monitor with a lower color resolution setting will dither graphics. Activity: View a web page under two or more different levels of color resolution.
- Use the Web palette (brower-safe palette) of 216 colors if you can so that your pages look consistent on all computers including older ones where the color resolution is set rather low. Especially, if you are creating a gif or flat-color logo, then you should use a color from the 216 so that you can be sure it won't be dithered on a user's computer. Flat-color areas look really bad if they are dithered.
- Web 216 arranged by hue
- Web 216 arranged by value
- Weinman recommends designing graphics in shades of gray to appreciate the use of values and contrast in addition to hues. Try copying a graphic from a professional Web site and change the graphic to grayscale in Fireworks to see appropriate use of value and contrast.
- Activity: Find the Web 216 palette in Fireworks, Dreamweaver, and Flash.
- But, since most people now have color resolution settings in the thousands or millions of colors, you really do not need to limit yourself to the Web 216 (PC & Mac) or Web 256 (PC only) browser-safe palettes. See lynda.com/hex.html for a full explanation. You definitely should not limit a real-life photo to one of these restricted palettes since the resulting dithering will degrade the image unnecessarily for most of your audience. Rather, you should use an adaptive palette with no dithering and let the user's browser perform the dithering where necessary.
- Consider the use of analogous and monochromatic color schemes.
- Activity: Look at intentional color schemes in professional Web sites.
- Activity: View the Weinman color schemes under Dreamweaver's Commands/Set Color Scheme... menu command
- You can use this color schemer to choose an effective combination of colors for your web site. Remember to use color for consistency and variety throughout your site. Learn more about the use of color at webdesignclinic.com (mood & more).
- Activity: Choose the base colors or color scheme for the site that you are developing for this workshop. Are there any natural colors to choose that fit the theme of your site? If appropriate, set a background color in your CSS stylesheet.