Monday, 18 October 2010

Researching header and footer designs.

For my second task I moved on to looking at header and footer designs. As part of my research I looked at a website http://www.csszengarden.com/ which is essentially the same HTML code displayed in different ways using different style sheets.

There really are some beautifully interesting designs, which are a real eye opener as top how simple graphics can be used as header and footer to really enhance a web page.

The thing that I really like about this web design is how well the header and footer bland into the web site. To me this looks really effective. All that this designer will have done is to make the back ground colour of the main website the same as the background on the image so the image and back ground blend together so you can’t see where it joins.


This is a really simple graphic that really sets the tone for the website. The header is the first thing that the viewer will see of the webpage. Therefore it is really crucial that it sets the right mood and tone.#

This is the footer of the page. Notice how it appears to blend in with the main body of the website so again you can't see where they join.


You can see here where the banner merges with the main body of the webpage. Rather than using one image for the back ground they will have used two different images for the header and footer and blended them in with the back ground. One advantage of this is that the load up time for the webpage will be much quicker as large images slow loading the webpage right down. It is much more efficient to have as smaller image files as possible to load as this reduces the time to load the webpage in a browser.


Here too are examples of how the header and footer can merge with the background colour to give the effect of them all been the same image. These designs are much simpler as they are not photographs but simple illustration. However they still serve their purpose set the mood and tone for the website, but it just goes to show that header and footer designs don't have to be over complex to have an impact.  


 As well as not seeing the join looks neater it seems to be a common convention of header and footer design at the moment.

In this example below they do make more of a feature of the header and footer, however it is just essentially text placed on a texted background. However it is really effective. This again shows that Headers and footer do not have to be over complicated to be affective.  



I choose the below example because to me it sort of breaks the conventions. The header does blend in with the background colour and is a main feature of the web page.



After looking at some of the header and footer designs out there and how simple designs can really enhance a web page I will now go on too sketching out some designs for my own header and footer.

No comments:

Post a Comment