Everyone designs in different ways, some people use Adobe Photoshop, some people use Adobe Fireworks; some people start their coding from scratch, some people slice. I tend to use a variety of frameworks, and this is how I do it:
Design in Adobe Photoshop
I make my initial design in Photoshop. I open a new 960 grid system template for Photoshop, usually the 24 column one, but it depends on the project at hand. The 960 grid system is a great tool, and save a lot of time as you do not need to faff about with grid lines and measurements.
I have various methods to make sure my lines are pixel perfect – I can’t stand it when you see boxes or lines with blurry edges! One quick tip is to select “Snap to Pixels” from the options of your shape tool.
Once my design is complete in Photoshop, I move to the Coding Stage.
Open up Dreamweaver
Yes, I use Dreamweaver. Not for its design view, but for its code colouring, formatting and FTP.
Although the 960 Grid System comes with some HTML and CSS templates, I tend not to use them as they are usually fairly bloated for my needs; instead I code it from scratch.
A method I have adopted recently is to develop the main structure, then use HTML-Ipsum to sort out the typography. HTML-Ipsum allows you to copy and paste a large variety of HTML typography tags, enabling you to style them all at the start of your project.
Another good thing to do is to download the Blueprint CSS framework and copy the typography styles across to your stylesheet – this gives you a good base to work from.
Is that it?
Yes, I am afraid that is it! I find by sticking to the methods above I can shave a fair amount of time off my web design projects. I hope to find more frameworks and quick tips that can help speed up my workflow, so let me know of anything I’ve missed!
