Archive for March, 2009

Mozilla Firefox 3 T-Shirt Design26

Some time ago I learned about the Firefox 3 T-shirt Contest which was being used as part of the promotion for the new release of Firefox 3. Quite excited by this prospect I joined the flickr group, opened up Illustrator and started working on some ideas.

By the time the closing date arrived there where over 1,700 designs submitted which the team at Mozilla HQ then had to narrow down to their five favourites for the grand final. The top 5 designs where then announced to the public who had the opportunity to vote for the overall winner. Despite being well received by the flickr community my designs sadly where not selected and the winner of the competition was egirluk whose design (which I voted for) you can find out more about in the Mozilla store blog.

Several weeks later I received an exciting email from the comments form on my old website. It was an email from Mozilla HQ asking for permission to use one of my t-shirt designs (pictured below) to give away as the prize for their next competition. Naturally I was delighted and shipped the original Illustrator files off to Mountain View, California straight away. I understand that the screencast competition was a big success and I have since received my very own complimentary T-Shirt courtesy of the gang at Mozilla.

Thanks Mozilla.

The t-shirt design selected by Mozilla for use in their screencast competition.

If you would like to buy one of my T-shirts then you are able to do so at the Mozilla community store.

New blog theme finished23

Late last night I finished designing my new blog theme. I was feeling pretty tired and decided that it was time to hit the sack. I was on my way to the bathroom to brush my teeth when something rather strange happened.

Green shoes against a red textured wallpaper

En route to the bathroom I walked past a pair of shoes which my girlfriend had dropped in the hallway by the front door. I stopped mid step and did a double take, then it hit me… these shoes where a very similar colour to the main background colour used in the new blog theme.

Although this suprised me a little I didn’t think too much of it, after all there are lots of green things in my house. It was then that I noticed the wallpaper.

Much to my disbelief the wallpaper in the hallway (dusky red/pink colour) was almost identical to the other main accent colour from the new design. I had been walking down this same hallway many times a day since starting the new theme, was there some kind of connection or was I imagining it? Feeling somewhat confused I went back to the study and got the camera, above is the picture I took. I did not change any of the colours in photoshop and did no further design work on the blog after taking it. As you can see the similarity is quite astonishing.

How long had the shoes been lying there? Had the shoe/wallpaper combo subconsciously influenced my new blog theme? Or was the whole thing just a coincidence? I have no idea.

Halo Public Relations16
Mar Vista gadget15

The Vista gadget project was a follow on from the google gadget project. Unsuprisingly the functionality and design of the main body of the vista gadget is very similar to it’s google counterpart.

The default view (docked view) of the gadget is simply a logo. This decision was made to minimise the amount of space the gadget took up on the sidebar. Clicking the docked gadget displays a secondary screen (AKA flyout) with a three box business search form. Clicking the map tab opens up a new form enabling the user to search for a map of their entered location. Vista gadget screenshot

In addition to the docked state and the two flyout views there is a user preferences tool panel for the gadget. This allows the user to customise the gadget to suit their personal needs.

  • A default location can be entered (perhaps the user’s home town) to pre-populate the search flyout.
  • The default flyout can be changed from the business search to the maps search.
  • The gadgets tooltips can be hidden, this is a feature which displays on the maps tab and alerts users to options available in the tool panel.

Vista gadget user preferences tool panel

The gadget is largely built using html, css and javascript but it also makes use of the Vista gadget API to display background images, trigger flyout animations and to set/get user preferences. Once completed the gadget project folder is zipped up, renamed from .zip to .gadget and uploaded to the Windows Live gallery where it can be downloaded, rated and reviewed by anyone running Windows Vista.

So far the Vista gadget has been downloaded 1684 times and has generated over 6,000 searches in the last 12 months. If you are a Windows Vista user you can get the gadget for free from the Windows Live gallery.

Jamie Raven redesign12

Jamie Raven is a magician who lives and works in London, England. Jamie wanted a website to promote the many services that he offers whilst also cataloging his extensive achievements over the past few years.

When I first met Jamie to talk about his website he had two carrier bags full to the brim with travel tickets, trade show passes, security badges, matchbooks and thank you letters. He went on to explain that my challenge was to incorporate this scrapbook of history into the website. This challenge started with scanning… lots of scanning.

My scanning in-tray!

Once I had successfully transferred two bags of “stuff” into one image folder of slightly more manageable “stuff” I began to make custom headers and footers for each of the main pages in Jamie’s website. I used hotel matchbooks, plane tickets and currencies to reflect all the traveling involved in the Clients & Appearances section. On the Consultancy page I used corporate photos and security passes and to decorate the Testimonials page I used thank you letters and cards.

In contrast to this the contact page is filled with empty placeholder programs, badges and photos. The idea here was to illustrate the fact that users of the site, who are presumably planning their own event or special occasion could very well be Jamie’s next appearance.

Screenshot of

To accompany the website I also designed Jamie a double-sided business card and a double-sided A5 flyer using the same imagery and branding as the site.

Business card and A5 flyers for Jamie Raven

NB – After the site was completed Jamie hired an SEO agency to do some work. The hidden div of spammy keyword content at the bottom of every page is nothing to do with me. :0)

The Wheelhouse at Noss09

Of all the websites that I have created this remains one of my favourites. It was a refreshing project because for once I had all the content for the site before I actually started designing, a rare luxury in this industry. The main idea behind the site was that all the content would be written on the back of a seaside postcard. I thought that this would give the site a relaxed feeling and provoke site users to make a positive association between the site and their previous holidays.

A screenshot of

The illustrations for the site where created using Fireworks CS3 on the mac. To create the gradient colour scheme for the background I used a colour picker to carefully select swatches from a photo of an idyllic desert island beach which i found on flickr. The swirly font used for the site is Giddyup Std and it is implemented using a combination of background images and sifr.

The handwriting style font along, the crimped, stamp-like edges for photos and the homemade Noss Mayo postmark all help to reinforce the postcard themes that I wanted to get across. These same themes where also used to create some double sided postcard layouts for The Wheelhouse to use as oversized business cards/flyers (see below).

Double-sided postcode print layouts created for The Wheelhouse

Following it’s release the website was featured on numerous CSS galleries and was later included in Vandelay Design’s
25+ Inspiring Designs by Land, Sea & Air blog article and psd.tuts+ Inspiration: Water and Ice blog. It is always nice to find out that your work is appreciated.