| layout | title | author | image |
|---|---|---|---|
post |
Design for Programmers |
James Strong |
images/design_programmers.png |
Too often I encounter web programmer who want to do a small web based application by himself, but can't pull the feat off because of a complete lack of any sort of design skills. He might be trying to setup a personal blog, a website to advertise his open source library, a product, or something completely unrelated. But, with only a barebones understanding of CSS and no understanding of good design patterns, the project goes nowhere.
It is absolutely essential that every web developer know the basics of web design. You don't have to be an expert, but knowing a few of the key concepts behind web design go a long way to improving your overall skills. A web programmer who doesn't know anything about web design is like a software programmer who doesn't have the faintest clue about computer hardware. It might not be your job, but forms part of a basic skill set that is necessary to adequately perform your job.
I'd like to run down some of the most common mistakes I see programmers make when they try to do a simple web design:
Probably the most common mistake I see developers make is they tend to exaggerate all the features of their design. Exaggerated backgrounds, exaggerated colors, exaggerated gradients, exaggerated shadows and the list goes on and on. The end result is a gaudy looking mess that is hard to read and distracting.
The solution to this problem is to simply think in terms of percentages. Don't go to a color pallete and pick two shades that seem to blend together according to your eye. Instead, pick a base color and work around that color by proportionally changing the hue, saturation, and brightness levels by a very subtle amount. By simply sticking to percentage values, you can avoid most exaggeration probems.
When it comes to everything except text contrast, anything above 15% is excessive. If you're going to create a highlight, increase/decrease the brightness of your base color by 10%. If you're going to create a drop shadow, simply use 5% or 10% opacity of your background color. If you want to create a gradient, increase the saturation of your base color by 5-10%.
Example:
When I tried to eyeball two colors that I thought would make a good gradient, the end result looks atrociously bad! Instead, by simply sticking to the 15% rule, the gradient looks good.
To highlight the 15 percent bit of text in the image above, I simply decreased saturation and increased brightness by 15 percent. The drop shadow is 8% opacity of black. No more is needed.
Making sure you design is consistent is very important. Applying some simple rules here works well:
-
Use a line height of 150% your font base size.
-
General headings twice the size of your body text.
-
Scale your h1, h2, h3, p elements proportionally.
-
Use margin and padding values that correspond to your baseline. e.g. 10, 20, 30, 40px or 15, 30, 45, 60px.
There are many different tools available to create a pallette before you start designing, but by far the most popular of these is Adobe Kuler. Picking the right colors for your design can be difficult, but using Kuler makes it easy. Once again, the color schemes you can define in Kuler are proportional with regards to the color wheel, which gives consistency to your design.
Look at the colors used on other websites. Take snapshots of good websites and observe the colors they use. Feel free to experiment with those colors on your own website. Take a look at the difference in hue/saturation/brightness between the different colors used in the color scheme of a website. It isn't until after you've done this for a while that you'll start to get a good grasp of color.
Last but not least, ironically, many web developers that focus on the server side of things struggle a lot with CSS coding.