Josh

I'm a developer in Melbourne, Australia, and co-founder of Hello Code.

Published Mon 27 August 2007

← Home

5 Web Design Tips for Programmers

Web-two-point-oh. Big shiny buttons, gradients everywhere, and applications that you never even install. With all these 'functional sites' it's hard to separate roles of those creating the content. As a web designer you probably need to know more than a little Javascript and server–side scripting to be able to implement your sites, or at least get along with the programmers. And as a web developer, you can't always avoid creating interfaces for the code you write.

As a developer in a small company, I handle the entire process myself... But I started as a programmer and still think like one. So I know it can be hard getting into the 'designer' mindset when you need to. Especially without a Mac and a turtleneck. So with that in mind, here are some tips on making your forms and interfaces a little better. I've geared this more towards web applications, because the benefits are more immediate. And it's easier to write about :)

Though how much authority I have on the topic of designing is debatable, without further ado:

1. Learn CSS – know it, inside out

This might be a bit of a cop out but the best thing you can do is know your tools. There are plenty of excellent tutorials out there, find them and eat them. With your mind. CSS positioning isn't as important as knowing how to style an element properly and consistently. Learn the cross–browser quirks and learn the best way to do things.

2. Be consistent

This and the next point go hand in hand. If you have some nice styles defined, stick with them. Keep your pages consistent. This may seem like an easy thing to do on a large scale – your navigation is always along the top, page headings are always H2 – but the smaller things often go overlooked. If you are zebra-striping a table, don't change it on another page. Use the same styles for buttons that have the same effect to reinforce trust in the user. They'll learn quicker than if you're constantly surprising them with an inconsistent interface.

A black button saves or submits the page.
Fig 1. A black button saves the page and completes an action.

A grey toolbar button performs an action on the page.
Fig 2. A grey toolbar button performs an action on the page.

If your text boxes have been styled with a 1px solid border, don't leave the textareas with an inset border. If your page text is 12px, don't leave your table cells to default to 14px. Be consistent.

3. Have attention to detail

As I mentioned earlier (am I repeating myself much?), this is really a different take on number two. Have an eye for detail, know when something doesn't look right. The problem when you're starting out is that everything you manage to achieve looks great – to you. It's only when you look back you realise what you've left out. And as programmers we're a lazy lot when it comes to design. "I'm not a designer, that'll do," we claim. "Near enough is good enough." That's exactly the image you have to battle against! It's not all that much extra effort to get things right – if you have a set of core styles, get them right the first time, then apply them to everything that fits.

And test it all in Firefox and IE.

4. It's the little things – gradients, borders, icons

Here's an easy one to implement that gives you some real results. Little interface bells and whistles can go a long way – it's kind of like designer shorthand. Maybe.

Gradients are big in the second major release of the web (are we out of beta yet?) and there's a reason why – they're subtle but they add a lot of depth. I prefer greys, because they go with everything.

How many gradients can you see?
Fig 3. How many gradients can you see in this picture, kids? (Answer: Five.)

Gradients give your textboxes depth, and a non-standard border adds a bit of class. The action buttons are consistent – they add another row to the form, and remove a row, respectively. The gradient and border on the area also show the end of this fieldset.

And icons are a great way to add some colour and recognition to your interface. Keep the same icon for all 'Add' buttons, for example, and your user will always know what they're getting.

Oh and I use the excellent Famfamfam Silk icons. They're free, and very nice.

5. Plagiarise.

And finally, the best way is to learn off someone who's already done it. I don't mean shamelessly plagiarise, but borrowing interface paradigms is a great idea. For example, in Figure 2, we've exploited the folder view from Explorer for our online file browser. Why? Because it's familiar and it works.

As far as website showcases, I have a few I like:

But there are tons more. Look at as many as you can, and eventually you'll just know what works.

So I hope this has helped somebody, and I don't just come off as sounding pretentious. Over and out.

Screenshots from OurIntranet

To top