5 Tips for Web Developers doing Web Design

There is this old stigma in dev land that good developers are poor user interface designers.  In my experience, this stereotype is usually right on the money.  Most of the brilliant software engineers I've worked with over the years have been quite terrible when it comes to the user interface.  I too had put myself into the "bad designer" bucket for years until I realized that I was only considering myself a bad designer because somewhere along the line I developed this odd belief pile of crap idea.  All developers will know what I'm talking about.  The idea that design is just too easy and there is no real challenge in drawing pretty pictures.  Bullocks!

User interface and user experience have become very important parts of developing useful web applications (and other apps too).  Notice I said useful.  I'm sure there are, and will continue to be some brilliant feats of engineering hitting the markets that are, for all their code monkey glory, piles of useless crap.  The reason they are useless is that the users can't use them, at least not effectively.  Let's be honest.  99% of the time, without users you have an application that has the same value as the gum stuck to the bottom of my shoe.

At some point in your career you start to design software by thinking about the user experience first and developing good quality code to make those interfaces come to life.  I started taking this approach in the last few years and the benefits to both my business and my clients have been quite substantial.  This post is not about the design-enlightenment of developers.  This post is about showing the web developers out there how they can do a few things to become more user experience friendly, and God forbid, even design nice interfaces when they are put in situations where the artsy folk aren't there to help!

Tip #1 – Learn Photoshop! 

Learn Photoshop!  It doesn't need to be photoshop, but this is definitely my drug of choice for web design.  There are literally hundreds, possibly thousands of online tutorials and sites that provide all the tricks of the trade for creating beautiful designs.  I keep a list of "design" related links in my delicious account so feel free to start there if you have none.

Tip #2 – Good CSS is your friend.

I remember the dark ages, when web designs were table ridden beasts that looked somewhat ok but were a royal pain to maintain and change.  This should no longer be the case.  Don't get me wrong, the table still has it's place in designs but that is a much larger topic of discussion.  The point here is, grab a book on CSS or go through the many fantastic web sites out there i.e. a list apart. If you are already doing software development then CSS is hardly a big challenge for you.  My advice is learn by example.  There are plenty of sites out there with fantastic stylesheets.  Pick them apart and learn from them!

Tip #3 – Create cheat sheets.

I have always found that having cheat sheets taped/pinned/easily accessible around my work area saves me a tonne of time when needing to reference common every day bits.  If you need examples, check out this html cheat sheet and this css cheat sheet.  The point here is that if you are a full time developer then you aren't going to be as skilled at the presentation stuff as a full time designer.  Don't sweat it.  It's like anything else in development.  Half the battle is knowing where to find the answers!

Tip #4 – Experience First, Beauty Second

Just like having great software that is impossible to use, you can have beautiful interfaces that nobody can navigate.  I've seen some very visually stunning web sites that are either A) pathetically slow loading or B) impossible to navigate.  Keep it simple stupid (KISS) is your friend.  By focusing on how users will interact with your design instead of how pretty it is, you will increase the stickyness of your site.  You don't want to frustrate users, you want them to use your creation.  In my humble opinion (and experience) the two best companies I have come across for creating simple, user friendly experiences are FogCreek and 37 Signals.  Both companies produce software that didn't require my brain hamsters to sprint until they died.

Tip #5 – Cross Browser = More users

Most back end / business developers hardly ever concern themselves with the multiple web browsers available to users these days.  If you are a developer being put in a situation that requires you to do web design then you had better wize up to the multi-browser headache fast.  Front end developers have been dealing with this for years.  It has gotten better with time and I'm sure things will only improve as we move forward, but there are still quirks.  I too still struggle with this one.  Even this site has it's small tidbits that don't look 100% identical on each browser.  The important thing to remember is that you want to create interfaces that degrade gracefully and at least work in the major browsers.  I usually test for IE (6,7,8), Firefox, Safari and now Chrome.  Internet Explorer 6 will be the bane of your existence for the first while, but once you learn the bugs you can safely work around them.

Hopefully you have found some use in these tips.  I don't claim to be an expert at anything, just another web developer who loves building web technology but struggles to keep up with it all as much as the next guy.