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:
- 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.
- Added a little decoration from the Nat Vignette One font at the end of the introductory text.
- Changed the “and” in the header to a more attractive ampersand.
- 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.
Anonymous April 20th, 2008 at 3:29 pm
Nice work, really…I hope you do post more info about your techniques.
Anonymous April 24th, 2008 at 6:04 pm
I really like your site design.
I was curious how where you able to create the textures on the header of your site to flow really nice?
tony April 24th, 2008 at 10:19 pm
You can find textures here and GoMedia also has a couple of free samples along with sets that you can purchase.
If you meant how I got it to repeat across left to right without the pattern showing: I copied a wide portion of the texture and decided the width that I should have so as to reduce loading times – it’s just about 500px wide. What I did was copy a portion 500px wide and pasted it into a document 1000px wide. I used the clone stamp tool in Photoshop to repeat the textures on the left hand side on the right. By duplicating the layer and moving it across so that it was side by side I could see if it would repeat seamlessly. If not then I continued touching up on it till it worked.
I might do a post on doing this to make it a bit clearer.