No Need for Wax, IWF Is Shiny Enough
Posted by Matt on January 6, 2009
The Independent Women’s Forum came to us in early 2007 for an update on their site design and ended up with the sparkly interface you now see. The design of the site lends itself nicely for a journey through the magical land of color distribution. So grab a cup of coffee and buckle up as the ride begins.
To help explain what we mean by color distribution, take a look at this little map we created using IWF.org as a base.
On occasion, we start layouts by grabbing all the content the client would like to see on the main page, making it black, and dumping it all into a new Photoshop file. Next, we make textual hierarchy changes by pumping up the weight and size for headings and subheadings. After some spacing and alignment changes its ready, but start collecting color only after these steps have been completed
First, we establish any existing colors which will need to be incorporated into our palette due to existing branding. In the example using IWF.org, the red from the logo needed to be added.
We needed to pay attention to an additional client request, which was that we keep the site feeling open and bright. Yellow or yellow used as a gradient is good for this.
You can add two colors to the palette by choosing one with a rich hue (aka saturation), in this case blue, then branch off by grabbing a tint of the same hue.
We also always grab something fairly neutral to use as borders, or for headings and backgrounds which require less emphasis than areas with brighter hues. For IWF.org, we chose a medium gray that is used on all borders and dividing lines.
Now the color palette is ready. Most, if not all of your color usage will be dictated by the palette. You can deviate, but only by shifting the base hue with shades and tints. Start by identifying which elements should use the same color. For example, all links within the main content area need the same color. All first-level headings need the same color as well.
Now you can experiment by using the colors in your palette in these positions. Any colors that are too light can be used for text as long as there is a background behind it with good color contrast to make everything readable.
Remember to use white as a color as well, not just for backgrounds. Any of the colors in your palette can be used for a background, which means any text on top of it can be white (depending on readability).
