Over the weekend I have been redeveloping the skin for my website. It’s not quite finished (I’m on step 4) but for those that are interested I thought I’d share my workflow with you. At work I very rarely design a website from start to finish, more often than not we hire an agency to either deliver the whole site or at least a Photoshop file that I’ll then slice.
When I’m doing something for myself, however, I don’t have the luxury of a talented designer. I often compare it to home cooking, it’s satisfying doing it yourself but the results are rarely as good as a restaurant can deliver.
Step 1 -Sketch some ideas:
I like to sketch out key ideas. I sometimes sketch the whole site, sometimes i just sketch a key element. On the new site the only thing I sketched was the top bar, I tried lots of variations. Sketching is good because it’s easy to change and iterate. My sketches don’t look good, many of the designers I work with produces sketches that look incredible, despite this, the process of getting an idea out of your head onto paper is valuable in itself, I don’t care what it looks like.
Step 2- Produce an image using a 960 template:
This week was the first time I used Expression Design 4 to produce a high fidelity image of the website, usually I’d have used Adobe Fireworks. I love fireworks for this kind of design and I’ve been using it since it was made by macromedia. In terms of speed, I’m much faster in Fireworks than anything else. I used Expression as I currently don’t have a fireworks licence and expression was free as part of my MSDN subscription.
After a few hours of playing around and learning I figured out how to do most things that I do in fireworks.
As a base I use grid960 templates, you can get them for all major design packages including fireworks and expression design.
Step 3 – Convert Image to CSS using 960
Step 4 – Fixing cross browser issues.
I develop my website so that it looks good in my default browser (currently IE9 beta) I will then use Expression Web SuperPreview 4 to compare how it looks in Firefox, Safari, IE6, IE7, and IE8. In general I’m looking to make it look exactly the same in everything but IE6. With IE6 I’m happy once it looks readable, I don’t however worry to much about it looking perfect.
Step 5 – JQuery and progressive enhancement.
Next step is to add in any rollovers, animations and interactions using jQuery, I test the features and capabilities of the browser before adding anything . This means that users that browse my site using a good browser get better features.. Once that’s working in my default browser I will check check manually against all other browsers.
Step 6 – Testing using Selenium