Concept Header and Footer Designs

Concept Design 1

This design was made using a 1000x250 PX canvas combined with a canvas colour of #FF6600 which is a very vibrant and colourful orange to give a contrasting feel to the web page to make certain aspects of the page stand out amongst the rest and to also make the page more eye-catching.
In an attempt to give the page a professional feel to it, i decided to keep the same canvas colour as before to keep a corporate style that would be consistent throughout all of the pages if i were to use this page as a template to create others from it.

On both the header and footer i decided to use the sans-serif font Arial Narrow as this made the headings and text stand out thus making them easier to read and interpret as they contrast with the chosen background colour.

http://slab.sunderland.ac.uk/~bf92ao/test1/

 

Concept Design 2

This header and footer design was made using the same dimensions as my first header and footer design above with the exception of the canvas colour which was made to be transparent as i was using an image in the background. The image used in the background of this design was created using the paint brush tool in Adobe Fireworks and was exported as a PNG to use in the background.

The image was cut off so that the rest of the image could be used within the navigation bar also so it looks like one image that gives the indication of a smooth flow.

With this design, i decided not to include a footer design as in my opinion if i created one with the same design idea i had used with the header, it would distract the user away from the rest of the page so instead i left it blank with just simple text in an attempt to keep the user drawn towards the header design i made.

http://slab.sunderland.ac.uk/~bf92ao/test2/

 

Concept Design 3

I made this header using Adobe Flash using a combination of image, text and animation in the form of action-scripting. This was then exported as a SWF file and then imported into the document so that the animation would play and loop when the page loads.

With the footer, as it has quite a small area to work with, i decided not to animate this but instead keep within the theme i had chosen and import and edit a series of images with combination of the pen tool and line/fill effects to create a simple and eye-catching footer.

http://slab.sunderland.ac.uk/~bf92ao/test3/