Insight into the design process of a website

This will be the first in a series of posts where I show some of the in-progress work on the design of some sites that I’ve worked on. I thought it might be interesting to show how the design evolved and some of the thoughts that went into the design process. What better place to begin than my own? So here goes.

I had a very clear idea of exactly what I wanted with the new design - to showcase more of the sites that I worked on and make the blog secondary, a departure from version 2. Along with the former I wanted to make my services and contact information highly visible.

Below is an image of what from when I was still playing around with the layout.

I eventually decided to break out of the conventional layout of having primary information on the left, secondary on the right. While that’s very practical as it allows users with small resolutions to view the most important informatin without having to scroll, I thought it would make the site a bit more dynamic and unusual. And according to Mint less than 1% of my visitors have a horizontal width of less than 960px.

After deciding on the layout, I went to work on some of the finer points, design is, after all, in the details:

I made four little changes here:

1. Improved the contrast a bit to make it brighter and decided to go with Hoefler & Frere-Jones’ Archer for the logo and some of the other headings as it’s really good-looking and friendly.
2. Added a little decoration from the Nat Vignette One font at the end of the introductory text.
3. Changed the “and” in the header to a more attractive ampersand.
4. Used the clone stamp tool in Photoshop to make some of the patterns in the texture less distracting.

I changed the colour in the blockquote from orange, which had given the design too much of a monochromatic feel. I also made the top and bottom borders a little worn and cropped another decoration from Nat Vignette One. Some of the words in the blockquote also have subtle emphasis.

There were other small changes but these had the greatest effect on the overall look and feel of the site.

The design isn’t by any means complete. I still plan on adding the previews of the two more older blog posts as in the first screenshot and to actually work on designing the comments area. I sat on this design for a very long time while trying to make it just perfect, but I realised that time would never come.

This entry was posted on Monday, April 14th, 2008 at 9:16 pm and is filed under Design. You can also view the archives for a list of all categories and posts. You can also subscribe to the RSS feed.