Designing in the Browser

For the past few revisions of this site I have designing the site in the browser.

To start the process I grab my HTML5 markup and save it locally on my machine with fresh CSS files that hide every element to begin with so I have my blank canvas.

For this revision of the site I decided I wanted to go down the 960 grid route so grabbed an image of the grid and set it as the background for the site. This worked very well as I was able to position all of my content over it and line it all up with pixel precision just like I would if I were to design it in Photoshop.

Once the grid was in place I started to go through the elements of the page one by one styling them. Starting with the header, which I decided would be once again fixed but not a vertical header like the last design.

After some pixel precision positioning I was happy with the overall layout. Passing the link around to people I work with and people I admire due to the work they do. A few tweaks were made based on the feedback I received, which was mostly positive.

After tweaking, I set about giving it a lick of paint, using the usual pink for a few elements and using Photoshop to create a very basic background for the site as well as a gradient for the buttons.

The main change I have been wanting to do for a while was to make my homepage a homepage and not just the list of latest blog posts like it has been for a while. It now displays the latest bits and bobs from the various sections of the site and includes my Flickr stream as well.

Now I started this on a Friday evening over a coffee after having the urge to design something. I completed the layout on the Saturday with very little tweaks thereafter. WordPress integration was completed on the Sunday however I tool it upon myself to get my site working in IE6 once again. I launched the site on Tuesday, which in my eyes is a pretty good turn around for a redesign.

I hope you still like the design.

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.