Web Design Tips for Programmers

I found a good article on dzone today titled Why Programmers Suck at CSS Design. The title is actually misleading, rather than focus on the why, it will actually help you create some better looking pages.

I've often wanted to write a blog entry about the same topic. I don't call my self a web designer, so you can take my advice with a grain of salt, but I have been doing this for over a decade, and I've made some observations that I have wanted to share for quite some time.

So here are my Web Design Tips for Programmers

Alignment

We have all done it. Created a form with a caption followed by an input box, line after line. Yes username and password are both 8 characters so it makes the input boxes almost line up.

When you your UI is missing alignment, it makes your users eyes work very hard to determine what's going on.

Form's aren't the only places that need alignment, this also includes your navigation, layout, and content as well. Form's certainly are the major alignment offender though, you can use this article: Styling your forms with CSS and Labels as an easy way to solve this problem.

Spacing

Spacing is just as important as alignment. When you have text butting up against the border of a table cell it makes the table very hard to read. Try adding some spacing, or in CSS terms padding. Remember whitespace is not the enemy.

Colors

When picking colors, contrast is the most important factor in the decision. Low contrast not only is an accessibility no no, it also looks pretty awful.

So what am I talking about here? One example: Navy text on a red background. Jonathan Snook has built a handy color contrast checker which lets you input the background and foreground colors and it will tell you if there is enough contrast, and brightness difference.

There are some handy tools that you can use to help you pick a color scheme as well:

• Adobe Kuler
• Color Schemer Gallery

Overall picking a color scheme is one of the more challenging aspects of design in my opinion. The hardest part is picking a good base color, you will notice that most designers don't really use the pure reds, pure blues or pure greens. Color like hair styles goes through phases where certain ones are more popular than others, that means you can actually pick colors that make your design look outdated.

My solution to picking a base color is the Firefox plugin ColorZilla. This plugin is an eye dropper, that lets you steal a color from a web page (from either the HTML or a photo on the page). For example you could head over to the iPod nano page, and grab the blue ipod nano color, and use it in your design as the base color (then enter that color into Kuler and find some complimentary colors).

When in doubt stick to gray scale, it looks sharp and professional, and can even look elegant. And you can't get more contrast than black on white, or white on black!