I’ve been designing websites since 1996, albeit them not being very pretty at the time, of course. None were, actually, something you might or might not remember, depending on your age. Most of my design during the 90s and early 00s were for my own benefit, projects I started. At one time I had 37 gaming websites running (in Swedish), which was madness of course…
Anyway, post-dotcom and I’ve found myself doing a fair share of design work for clients. This last year’s been a good one for me, so I thought I’d share my design process with you guys. Maybe it’ll help you organize your work a bit better. Or not.
First, Consider the Problem
To me, every design is a problem. That means I need to evaluate it, turn it around, and assess every possible kink in the design. This could include making decisions that I know are easy to implement code-wise, especially if it’s a time-crunched job.
This is also when I figure out what the design want to say to the visitor, and take the directions given by the client.
Second, Bring Out the Sketchbook
I do design sketches by hand, usually pretty rough ones these days, before I even fire up the workstation. Doing the sketches by hand can usually make sure you won’t run into dead ends, forgetting about important elements and things like that. It’s a very visual way to see how things fit together.
When sketching by hand, I find that it helps drawing the various parts of the design as squares. They’re not necessarily squares in the final design, but it’s a good way to see how well these element add up, and make sure there’s balance in the design. You don’t want the one side be crammed with small stuff, and the other just have one big element – unless they fit, of course.
Sketching by hand helps, and actually saves time. Still, I must confess that I fire up Photoshop right away more and more often, but that’s due to the fact that I’ve got a very clear idea of how the design should be. Sketching by hand certainly helps unless you’ve got a very clear image of what you’re doing.
Third, Do that Mockup Thing
When you’ve got a concept, it’s time to start mocking up the design. I never go straight to the code, but then again I rarely really finish the mockup either. It kind of depends on the client.
Anyway, I mockup the design, more or less. I use Photoshop for this, but some people prefer Illustrator. There are a bunch of other pieces of software that you might prefer.
Fourth, Time to Code
I might not be the one doing the actual code all the time, but most blog designs are coded by me. My editor of choice is Coda, thanks to the included FTP functionality mostly.
I get a version up and running in Firefox first, then I use VMware Fusion to bug test in the various versions of Internet Explorer, Opera and so on.
Finally, Deliver and I’m Done
That’s about it. Delivery is usually a zip file with some instructions. I rarely do implementation work myself, and if I do I make sure the pay for it is good since there’s the possibility of things going wrong that might end up not being my fault, and I really hate that.
That’s my process. How do you go about when designing websites?
