Considering a lot of the work I do is taking my design and crafting it into code, I thought I would write a mini tutorial on how I go through this process. I’m sure my process is fairly similar to mosts after all there are only a limited number of things you can do differently to get the result, but I thought it may be a good way to bring insight into both my working process and be also of interest to someone who may not have done it before.

The two way step

The way I progress the first 2 stages depends on if I’ve had a lengthy mapping process and wire framing. If I have then the first two stages I’ve done already. Sometimes though I may not have this or may be working on a design that is not mine so these two stages are my first call.

Stage one: Finding out the lay of the land

Once I’ve got the design approved I open it up in Photoshop and mark sections off using grid lines. I then get my moleskin and draw the rough layout of my website. I tend to think in blocks at this point. For instance I may have a banner of 100px in height and the site is 980px wide. I will note this on the block layout I am creating and from there I can easily do block code in a later stage. Quickly I can have a sheet from which I can create the basic layout of the site without referring to the psd.

Stage two: Assigning style

Still with the psd open I then add to a page what the header elements and what style (colours, background images and positions) the elements I’ve blocked out have. This is where I go for colour picking and things like type face and font properties. I also create all the style names in this stage and mark them by writing them onto the skeleton. What the aim of this is to create a blue print of everything you need to then just write the code even without the design open. I find by focusing on the code like this it becomes a far more efficient process.

Stage three: Image creation

The final stage in Photoshop is where I separate out all image elements and then save these, noting on the skeleton I’ve made what their names are and what position or if they repeat or not. This is the final stage to having a complete draft which I can easily follow outside of Photoshop to quickly make up the code.

Stage four: Skeleton code

My next stage is using textmate where I set out the core CSS elements. This is the skeleton of the site and after the CSS I move into the XHTML to get a blocked out design. This is where spending the time before hand in the other stages really comes into time saving as you can focus on just creating the code with a nice blueprint to go by and all the images all done.

Stage five: Putting make up on

The final stage is to link in the visual styles from text styling to other styling. This is where the end result comes in and during this phase I tend to have a jpg in preview open along with the text mate show in web view. After this of course comes the browser checking.