Last night I came across a new post on stuff and nonsense entitled Could you be a dick? in which Andy Clarke challenges the world to come up with a spoof business card for a private investigator.
I was rather amused by this proposition and set to work on my own idea which has now been uploaded to the Hardboiled card flickr group. The nine best entries (as judged by Mr Clarke himself) will go on to feature in the pages of his forthcoming book “Hardboiled web design” to assist in the explanation of CSS3 selectors.
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.
Richard Pryn is a talented media composer based in Swindon who has worked with the likes of Ikea, Evian and Nokia. Richard came to me wanting a website to showcase his portfolio of compositions as well as a showreel of his television and film soundtracks. Due to the large volume of rich media content on the site I decided to build the project in flash and actionscript.
Read the rest of this entry »
