Last week Reese Spykerman chatted with me on my GoodKarma radio show about website designs. As a follow-up to her interview, here is a guest post from her listing all the great resources she mentioned (my apologies to reese for screwing up her nice looking formatting, i’m still learning wordpress).

Browser/Design Specs

The specs you use, on everything from resolution (width of the design) to color choices should be dictated by your site’s primary audience.

http://htmlfixit.com/free.php#stats_counter - free
http://haveamint.com/ - $30 per domain

These can give you information on the browser specs of people coming to your website, so you can tailor your site accordingly.

Color usage on the web

Any color can be used effectively as long as there is complementary color or set of colors to go with it.

Contrast - is arguably more important in my opinion than the colors you choose. A simple example of bad contrast is white text on a very light grey background. The colors are not different (contrasting) enough for legibility. Contrast can also be useful as a design tool to help differentiate different parts of a site (a sidebar in a light color, main body in a darker color).

One of the best ways to learn about color on the web is to study general color theory. http://www.colormatters.com/colortheory.html - Covers color theory at the basic level and goes over the color wheel

http://colorschemer.com/ - An advanced color tool that I use. Some knowledge of color theory can be helpful, but beginners may also find it useful, as it offers varying palettes based on a color value that you input. The website also offers a bunch of free color schemes that users of the tool upload.

Font Information

Verdana and Georgia were designed specifically for screen reading, though many other fonts are used online.

A good rule of thumb for a beginner using fonts is to stick to 3 or fewer—perhaps even only 2.

A nice trick is to contrast a sans-serif font with a serif font. A serif font has little “feet” on it and includes fonts like Georgia and Times. A sans-serif font doesn’t have the feet, and includes faces such as Verdana, Arial and Helvetica.

http://www.garykingmusic.com/blog/ - To contrast a serif and sans-serif font, you could make your headers and subheads in one (so a serif font like Georgia) and all your body copy in a sans-serif, such as Arial. In the above link, see the way the entry titles are handled versus the body text. It offers nice contrast and keeps things clean.

http://subtraction.com/ - An example of a site that uses few (only 1 or 2) fonts but uses those fonts very well. Varying sizes, styles (bold, italics, underline) and shades of gray make this site’s fonts very easy on the eye and establish a good hierarchy without needing to use a variety of font faces to do so.

Client Success Stories

http://garykingmusic.com/ - Features everything from mp3s to a community forum. It serves as his primary marketing vehicle for his music and new CD. Is completely self-maintainable by client.

http://karmelajohnson.com/ - Author who credits her website for landing her a book contract. Completely self-maintainable by client.

Recommended Content Management Systems

http://wordpress.org/ - Free, but somewhat limited in flexibility. Great for a basic blog or site with just a couple of pages that doesn’t need many bells and whistles) http://www.pmachine.com/ee/ - Expression Engine. Not free for commercial use, but hands down the most robust, flexible and easy to use (for both client and developer) system I’ve encountered.

My Information

Website: http://designbyreese.com/

Email: style@designbyreese.com

I am happy to offer anyone mentioning the Good Karma show 15% off their project fee. I also welcome design-related questions to the above email address and am happy to help people out when I’m able to do so.