I was recently asked to help out designing a website for a new online marketing consultancy called Firehorse Digital. The original brief asked for a template design with a left column for navigation, a central column for content and a right column for additional information. The company already had a logo but wanted this expanding into a fiery brand for the website template.
The image below accompanied the brief in order to better reinforce their vision.
At first I came up with two designs. The first featured a lot of red and orange and had a left aligned navigation which joined the currently selected page to the main content with a white highlight. The second had a lot more white space and used a right aligned navigation with a subtle color change to show the current page. In this design I also lifted the right hand column off the page with a background colour and a bottom shadow.
In both designs I decided to remove the background colour and surrounding box from the logo and make it white. I felt that this made the logo look more modern and stand out better in the fiery colour scheme. To reinforce the brand further I also used the horse’s head element of the logo in a decorative manner. In the first design it features as a semitransparent watermark on the header and in the second it is used as a footer image in the right hand column.
Feedback from Firehorse was positive and a third design was requested combining their favourite elements from designs one and two. Concept three was based on concept two with the following alterations.
- The horse’s head watermark from concept one was added to the header.
- The navigation was left aligned and the current page was given a more prominent highlight to give a stronger visual tie to the main content
- The left column was given a pale grey background to match the right column. This colour change was needed in order for the navigation highlight to work.
Concept three was nearly there but Firehorse was sad to have lost the fieriness of concept one and was also worried about the amount of vertical space above the main content. For concept four I removed the dark borders on the header and footer and reduced the padding around the central content to ensure that more text could be seen above the fold. I also reintroduced the orangey-red gradient from concept one.
The Firehorse Digital website is currently being built and will hopefully be going live in the near future.
I would like to give a special mention to Regolare a fantastic Italian photographer whose photo many directions where to go I borrowed to use as an example image whilst mocking up the Firehorse designs.
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.
If you would like to buy one of my T-shirts then you are able to do so at the Mozilla community store.
Halo Public Relations is London based PR company with a rapidly growing client base. As a young, start up company I had the exciting challenge of helping Halo to develop a new brand from scratch. The first challenge was to come up with a logo.
For the Halo logo the client was keen to use an actual halo, and the buzzword when we discussed the branding was ‘maverick’. After various ideas and lots of iterations we eventually settled on a concept which used both an angelic halo and some devil horns (the maverick element). Some of the fruits of my labour can be seen below, the final design is the business card mock-up right at the bottom.
For the website design we went with a narrow single column layout and a large decorative background. The background image used combines explosive, meandering vines and radiating beams of light all of which originate from the Halo logo. This image was created in Illustrator CS3 on the mac.
The website was developed using the codeigniter PHP framework and a MySQL database. Particular challenges included the creation of a content management system for Halo to manage the client area of the site and a password protected press area for journalists to download exclusive high resolution promotional photographs.
The site continues to grow and evolve as Halo add more clients and features.
The Yell.com Vista gadget project was a follow on from the Yell.com 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 Yell.com 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.
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.
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 Yell.com 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 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.
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.
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.
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)
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.
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).
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.