Okay, It’s a fact. Spoongraphics (run by freelance graphic designer Chris Spooner) is one of the biggest Graphic Design Blogs around on the internet. If you’re a graphic designer, the chances are pretty high that you know who he is, and you’re probably subscribed to his blog, too.
Over the years, Chris Spooner has been a great inspiration to me, for his brilliant design (my personal favourite is the MyNiteLife logo – see the design process here) and his style of communication. But enough of the blubbering… At the end of this post, there is a short QA session with Chris Spooner! Read on to see it!
When you first log onto blog.spoongraphics.co.uk, you are confronted with this beautiful header:
Now, that seems to top every other header I can remember. Just look at the great use of swirl vector shapes, circles and arrows, and the paper-aeroplane, which provide the perfect backdrop to the ‘Post-it Note’ styled header. It’s some real eye-candy, and it brilliantly sets the colour scheme of the site. There’s really too much going on to describe, but it definitely makes a great impact.
The next thing that you notice is the brown-paper styled subscribers box, with the paper clip holding it to the header. The attention to detail is astounding, but the best part seems to be the rollover on the RSS Feed:
A really good part is the lucrative images used at the beginning of the tutorials – the image is a really strong part of getting you to read that post: and it’ll be worth it too: here’s one of the latest tutorials.
Notice the faint dotted border around the image, and the great ‘Read More’ button with it’s arrow.
Delving into the CSS, here is a look at the fonts used for this:
Title: GraublauWeb, Trebuchet MS… With a colour of #707070 and size 22px
Text: Arial, Colour #333333 and size 13px.
Next, we’ll look at the Sidebar Title – the background image is akin to a floral swirl, and it’s faint colour subtly adds to the beauty.
The search bar is delicate, and has a really fun style to it: It keeps within the ‘Post-it note’ or ‘page curl’ idea, and really makes the search important. What I find on some blogs, is that the search bar look similar to the newsletter sign-up form, or that it is part of an advert program. Instead, the text titled “I’m looking for…” will certainly not confuse you.
Next, just look at the Bullet Points: they’re a great use of bit’s of the Spoongraphics Logo.
And as a final part to the Blog section of the site: the jaw-dropping footer:
Now I have no idea how such a being can be created by mortals, but one thing’s for sure – it’s amazing. It’s been featured on countless posts about footers (here’s an example) and the brown paper texture is great, coupled with the beautiful fonts in light red, and the vector illustration above (I have no idea why it’s there, but it’s definitely the best bit)
Now onto the main portfolio site:
That’s definitely one of the largest content-sliders seen in a long time. Here are some things to notice about this page:
(The effect of hovering on the logo) yes, forgive me – this is a screenshot of the portfolio page, not the home page… 
Look at the two columns used, the fact that the links have a beautiful background, and interestingly, the Asterisk next to his name: it’s a link to his personal blog!
Now onto the about page – look at the Round-up section and the detail there:
The fingerprints really help to build the ‘Dossier’ effect, and the worn effect on the word “Who?” is perfect. The signature is also a work of art!
An important thing of note is that the background is not a single colour, but a texture. It’s not immediately obvious, but if the site had a plain colour in place, it would look much less interesting.
The Portfolio page has a great view of Chris’ work, which displays in a great thumbnail view, but when clicked opens up in a lightbox style, as a huge content slider:
One of the joys of typing in a misspelt URL on spoongraphics.co.uk is that you are confronted with a brilliant 404 page: 
The light humour is great, and the image (one of Chris’ Own) is just brilliant for those fortunate to come across it!
Short interview with Chris Spooner
1) What inspired you to use the colour scheme and collage effect that you use?
The blog started out as an extension of my main portfolio (but soon became the primary site on the domain!), so the original design simply continued my personal brand of browns/beiges. As the site developed I wanted to build something more creative, and paper based designs and collage effects are just styles that link in with my personal taste. Being pretty much a personal site, I had the creative freedom to build something that I liked.
2) What (do you think) is the most important part of any Portfolio/Blogging website?
I think the connection to the person behind the site has become an important part of any site, whether it’s a blog, portfolio or full business site. Having a personal dialect and links through to the owner’s personality with photos and casual profiles can really help users interact with the site and it’s owner.
3) How do you avoid designers block (if you have it)?
Sometimes I’ll simply not feel like designing anything, or things just won’t go right. Luckily though there’s always something else I can look into while the block is there. For instance I publish a creative roundup of web designs and design articles each week, so heading off and putting this post together can help clear my mind. It’s more of a straight forward task that doesn’t require any creative thought, plus, it can often help develop new ideas by checking out the content others are publishing.
The last word:
So what can we learn from Chris Spooners Website, for use in everyday design?
- The header is king – it’s the first thing people see, and therefore, one of the most memorable bits.
- Attention to detail – it makes Chris’ sites all the more interesting to browse (e.g. Search bar, rollovers, Bullet Points)
- Fonts are the word! – They really build on your theme, so choose your fonts wisely.
- Footers – they’re more interesting if the’re fun (mine’s not really anything to write home about though…)
- Keep it friendly – it gives a good vibe
- Leave no page on your site behind – Chris has made every page beautiful…
- Have an interesting, but very User Friendly portfolio page.
- 404 Pages are cool – keep them that way (I’ve changed mine for the occasion)
Many thanks to Chris Spooner for allowing me to write this post!
Please do subscribe for more posts to come, tutorials, interviews and more.
Related posts:
- Design a Vintage WWII Poster: a Photoshop Tutorial
- Create a Sleek Web 2.0 Style Website Layout: a Photoshop Tutorial (Part 2)
- Design an Online Advert Set in Photoshop
- Create a Sleek Web 2.0 Style Website Layout: a Photoshop Tutorial (Part 1)
- Design a Warm Nature Website Layout: a Photoshop Tutorial
Tags: chris spooner, Graphic Design, inspiration, interview, review
