Chris Bewick

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.