We know the FFII homepage sucks. Here is my theory of a "perfect home page", which can apply to any organisation, including the FFII.
Main design goals
We want to:
- Focus the new reader's attention on the key message
- Guide the new reader to the key actions
- Help the returning reader navigate to the main areas
- Provide regular new content for the returning reader
"Perfect" means we achieve this without killing ourselves, and we do it in such a way that we can measure and improve the homepage over time.
Overall design elements
- Logo bar - this should be a thin bar along the top
- Navigation menu on all pages - this is a standard left-hand menu broken into areas of interest
- Navigation menu along top - at right of logo bar
- Registration/login box - at right, above or below top menu
- Right side-bar - containing news or other text
- Headline news area - containing headlines
- Headline response area - telling the new visitor how to respond
- Navigation zone - guiding visitors to main areas of interest
- Copyright footer - tiny text along the bottom
+---------------------------------------------------------------------------------------------------+ | login/registration | | LOGO | | |<--------------- Top menu --------------->| | +-------------+---------------------------------------------------------------+---------------------+ | | | | | Left menu | Headline news area | Right side-bar | | | | | | | | | | | Headline response area | | | | | | | | | | | | | | | +---------------+---------------+---------------+---------------+ | | | | | | | | | | Navigation | Navigation | Navigation | Navigation | | | | zone | zone | zone | zone | | | | | | | | | | | | | | | | +-------------+---------------+---------------+---------------+---------------+---------------------+ Copyright footer
Right side-bar
The main reason for this is to prevent the central area from becoming too wide, since long lines are hard to read (this is why newspapers use columns).
A secondary reason for the side-bar is that it is a convenient place to put news stories, which bring people back to the site.
Headline news area
This tells the visitor the "news of the day", a single key message that the front-page is explaining. E.g. for the FFII, it's our main campaign or event. The headline should accurately reflect the current priority for the organisation.
Headline response area
This tells the visitor how to respond - e.g. for the FFII it should ask visitors to register as FFII members or make a donation.
Navigation zone
This comes below the headline response area, and consists of boxes, each with some text and a link off to a main area.
Example
This is an example of the "perfect home page" - http://www.eupaco.org.