You Are Reading

OUGD603 — Brief 01 - Halleycat 2014 - Web Presence

The current website is hosted on The North Race site ( and is purely a landing page to present the details for the event.

Using the details on their previous site along with the centralised layout for ease of responsiveness over mobile devices.

In the design for the content I used a system of hierarchy to allow for the information to flow in a more digestible and fluid way.

This was then placed over the background image, a photograph taken at a previous Halleycat event of Tim. This photo was far too small and appeared pixelated when stretched so I used the grain filter to make it look like a film photograph. This would be a great way of branding imagery of the event and keeping it consistent cross platform in digital and printed formats.

I sent this to Tim and he said it worked perfectly. I then got on with the social network banners using the same system.

First I chose a photograph for the background out of the selection I was sent. This one worked well for a Facebook timeline image as the focal point is on the right side of the image and won't be hidden by the display photo.

This was then brought down to the correct scale, turned black and white and then noise was added like before.

The original of this photo was a lot brighter than the other so I also had to darken in to show the white content over the top of this. I used a fixed margin that would run alongside the Facebook profile photo of The North Race and finally branded it with the logo in the top right corner in it's minimum pixel dimensions.

As well as The North Race's Facebook page, the event page's banner also needed to be made. At the same pixel dimensions and with the same content, I saw fit to just use up the space I had more effectively and let the logo take more of a stand.

The display photo needed to be legible at a very small size when posts were made on the feed so I decided to use the main logo with a black background.

After seeing it in the limelight and speaking to Danny, I noticed a few amendments that needed to be completed.

Some of the content was hidden by the Facebook page name, and the sponsors were not displayed.

With some experimenting, I created a layout which worked perfectly with it's environment and showed the content without hiding anything or anything being illegible.

This was done by lifting the content slightly, displaying the sponsors right aligned to the margin in the same space, and then placing the straight logotype over the display image. 

This framed the display photo nicely but at the same time, gave me the opportunity to implement the skull branding on the cover image beneath the display image. That way if the page is being looked at, they see the skull on the display image, if they open the cover photo, they see it still but on the cover photo.

I used a similar structure for the event page, however because there is no display photo for it, I made better use of the space and made the skull bigger.

The final element of web presence is the feature Tim needed to send to blogs for promotion. This consisted of a portrait version of basically what the cover photo had on it.

I was inspired by last years on with the way there were several photos blended to one. I gave this a go to see how it would end up.

I was slightly dubious as to how legible the content was considering how eye-catching the background was. I sent it to Tim and without me saying anything he said the exact same thing I was thinking and asked for the background to be blank.

Comments for this entry

Leave your comment


Copyright 2010. All rights reserved.