Us designer types just can’t help ourselves when it comes to rebuilding our own sites, just months after giving it a refresh it’s all torn down to start again! I’ve just finished up an overdue redesign of my portfolio over at SpoonGraphics.co.uk, here’s a mini overview of my thoughts behind the refresh.

The last version of the design was put together when I started out working for myself. I went balls out to market myself as a freelance designer and created the site around this main focus, however one year down the line things have changed slightly.

After having the opportunity to manage a good selection of projects over the last year, I’ve found I much prefer projects where I’m conversing on a personal level with the client. Jobs I’ve worked on with fellow designers/developers from the community are included in these favourites, who often get in touch through the blog, or via Twitter. They are the people who know me personally, rather than reading some freelancer sales pitch.

With the new version, I wanted to strip it back down to being a personal portfolio, and to give an insight into my personality and showcase my favourite work. A few ideas I had in mind were to:

• Talk more about my blogs, which now take up a large portion of my day-to-day routine.
• Toot my own horn a little to promote the things I’m proud of, such as working for myself, producing work for worldwide clients and appearing in the odd magazine.
• Display a couple of case studies for the odd project, giving an insight just like the blog posts I sometimes write.
• Remove the search engine optimised areas for ‘freelance designer’ to allow the site to just be a portfolio for Chris Spooner.

One of the main changes was in the site copy, this has been completely rewritten from a first person point of view, with a touch of humour here and there. I wanted to make sure I sat and wrote out the entire copy for the site before getting started on any design work to allow the content to be tied into the overall layout of the site.

Once the copy had been written I then jotted down some notes of the style I was going to pursue based on my recent inspirations. A couple of ideas I had in mind all along were to:

• Tone the interface right down and pay more attention to designing the content.
• Use a larger type size overall, with 14-16px being the standard for body text.
• Use my own design work to create large feature areas, such as the slideshow on the front page.

Other than these little ideas I’d been itching to put into practice, the colour scheme was to stay true to my usual brown/beige branding and the overall theme continue my general grungy/subtly textured look I often go for.

As with a lot of my projects, I started out on paper and sketched out a couple of ideas floating around in my brain. I even went on to produce a mood-board to really flesh out the ideas and styles I had in mind.

When the time came I eventually booted up Photoshop and setup my usual web document structure with 960px grid, guides for visible portions in various resolutions and a large overall canvas to visualise how the site would look on a widescreen monitor.

Subtly was my main aim for the interface, so I created most of the design using the Noise filter with a very low setting, and added the odd distressed mark with Watercolour brushes.

On the homepage I outlined a huge area to display a slideshow of featured work, all blended in with a mix of brush textures. A couple of issues I was worried about was the filesize of these large Jpegs, and how the site would actually work in 1024×768, as this slideshow broke well out of the 960 grid. However when it came to developing the code, a keen eye on the image compression and a little tweaking in the CSS soon brought it all together.

As previously mentioned, the type was all laid out in large sizes and generous line-heights to allow for easy readability. Having seen a bunch of site heading down this route I see it as an upcoming change in the web world.

The portfolio page has also undergone some slight changes, this time there’s a collection of personal projects alongside client work, some of the stuff is even born from tutorials here on Blog.SpoonGraphics.

Four of the portfolio pieces have also been transformed into case studies, complete with text overview and supersized detail shots. Given the popularity of the odd walkthrough I post here on the blog, I figured they would be a good addition to my portfolio.

So, I’m happy with the outcome. For now at least! Feel free to check out the freshly baked site and let me know your thoughts.

Similar Posts

• How To Create a Retro Apple Wallpaper in Photoshop
• 50 Inspiring Abstract Illustrations in Web Design
• How To Build Your Own Single Page Portfolio Website
• Create a Bright Retro Grunge Vector Illustration
• Create a Grid Based Resume/CV Layout in InDesign