Getting the most from Color

What makes the most immediate visual impact on the viewer and sets the tone for the page is the use of color. A page doesn't really look finished without color. And adding color is one of the fun parts about building a ME  page. -- Workshop materials prepared by *zip

Set the Mood

Color can set the mood for your page long before anyone reads the content. Do you want your page to be fun and frivolous or serious and businesslike? Do you want to appeal to a certain audience? Men? Women? Mothers of small children? The Gaming Crowd?

If you think about it, you already know what looks serious and what looks playful...that pastels feel more feminine for example. Start to notice the color of various pages and the feeling it evokes in you.

Adding Color

Adding color can be as simple as a border, a logo, a photo. The strategic use of color in titles and section headers can help visually separate the content on the page for easier comprehension. Color can help lead the eye to focus on the content.

Tip: A little color can go a long way.

We've all seen pages with screaming colors that clash. Or pages where the color totally overshadows the content instead of enhancing it. Do you ever find yourself wondering what that person's home must look like?

You say you're not an interior decorator? That you are color-challenged? Fortunately, there are some great tools on the internet that will help you select a pleasing palette of colors. And even interior decorators use a color wheel.

This screenshot on the right is a good example of how little color it takes to make a page memorable and how a great photo can serve as the basis for the color on the rest of the page. The logo was made using several of the colors in the photo and the thin green border is the same color as the parakeet. The page gives you a feeling of whimsy which is supported by the tone of the text.


The page on the left has a particularly pleasing set of colors. It has a very harmonious, peaceful feel that sets the tone for the pictures of Indian medicine bags.

Color Ideas

Pleasing color combinations exist in many places. We found these historic paint palettes at sherwin-williams.com. Each row has three colors that go together and the rows are gouped to represent an era in history.
 


And here is an arbitrary sampling of colors that go together.

 

Color Tools

eBay Store presets - These preset store palettes are a great place to start. And if you have a store, your store header will show on your ME page. So why not use your same store colors to give the page continuity?


 

Rainbow  is a small free program by Shipscript that you can download. You can import a photo or graphic and pick off colors in the image. If you don't have a store, but do have that perfect photo, the page will look more together if the borders compliment the image.

ColorMatch5K - (IE only) Click on any color and this page will give you a palette of complementary colors. Included are lights and darks in each palette.
http://www.colormatch.dk/


Blended Color Tool  - Do you have that perfect color but you want a lighter shade? Pehaps a shade between two colors? Try this tool to give you both lighter and darker shades of a color or to find that perfect blend between the two.

Color Codes - all the named internet colors and a paletter of hex colors
http://www.isdntek.com/demo/internetcolors.htm

Color Theory

If you really want to get into color theory, this is an excellent site that explains complementary, analogous, triad and monotone color combinations and color contrasts. There is also a fun color palette tool.
http://www.worqx.com/color/index.htm

Color and Text

Blue text on a black background or yellow text on a white background will cause eye fatigue because there is not enough contrast between the two. Bright red text on a bright blue background may cause the text to appear to vibrate because of the simultaneous contrast.

Some people are red-green colorblind, others don't see the difference between blue and yellow. So if a page uses color to impart important information, you want to make sure that important information is not lost if that color is missing to the viewer.

Tip: For maximum readability and the least eye fatigue, black text on a white background is the best. A rainbow of font colors does not help readability. Stick to one basic font color, with perhaps a second font color for titles and section headers.




Workshop tutorial prepared by *zip

The Design Basics Workshop Series

Summary  - The 10 Design Basics for a Better ME page
Design Basics 1  - Getting the most from Color
Design Basics 2  - Using Fonts
Design Basics 3  - Effective use of White space
Design Basics 4  - Using Photos
Design Basics 5  - Backgrounds and Borders
Design Basics 6  - Multimedia
Design Basics 7  - Top 10 Common Mistakes

 

 Copyright © 2005 shipscript, *zip, merrygocats