The guys from the TQ team have kindly allowed us to use their web site as an example.  The site was reviewed, restructured and redesigned during Summer 2007 and the homepage was redesigned as part of that process.

Before	After

The original Teaching Quality homepage suffered from unnecessary happy talk, too many links and a lack of visual hiearchy (it was hard to know where to look first).

Step one: Purpose, audience and goals

Consider the audiences for your site and the content they might be looking for.  What are their key goals?  What tasks might they want to carry out?

The TQ team asked members of their audiences to list, and prioritise, key tasks they would want to carry out on the TQ web site.  Here are the top ten: 

1. Get information or download a form for course/module approval
2. Find a course regulation/specification
3. Find information on funding/grants
4. Find information about annual/periodic/dept/strategic review
5. Find information about course review 
6. Find SSLC information
7. Find guidance on plagiarism
8. Get relevant University regulations
9. Get contact details
10. Guidance for committee secretaries
    

The new homepage was designed to provide quick and visible links to these key tasks.

Once you are clear about your audiences goals, you can then consider the information and services that you want to promote.

Step two: Wireframe and content 

From these questions and considering what you now know about writing for the web, you should be able to start jotting down some content for the homepage.

The next step is to consider the layout for that content.  Think about the visual hierarchy; identify content that should be grouped and work out the relative importance of the content.  Start sketching this out – use a white board or even a good old-fashioned paper and pen!

This is the wireframe layout that we produced for the Teaching Quality web site.  Note that there's no design involved at this stage.  We're really just concerned with the content of the homepage, how it's grouped together, and which group of content is most important.  You'll notice that different groups of content are numbered; this gives an indication of the relative importance of the content (1 being the most important) so that more visual weight can be given to content that's more important.  This helps to guide people around the page when they are scanning it.  In the final design (shown at the top of this page) you can see that the important content has been given a darker, blue colour to make it stand out.  And how do you decide which content is most important?  Well, that's down to the key tasks as identified by your target audience in step one. 

Step three: Realising the design 

Once you've drawn up the wireframe layout for your homepage, your next step is to implement and realise the design.  At this stage, you generally have two options available to you:

Use the features that are available in SiteBuilder

You can use SiteBuilder's features to implement your homepage design.  Some points to bear in mind: 

• Be prepared to work hard on the text – edit it and then edit it some more!  Work with it so that it fits into the framework that you have.
  
• Make use of SiteBuilder2 box styles to give visual weight to the most important content.
• Sometimes it can be useful to create a table with no borders for layout but this can make the page less accessible
• You may need to buy images or icons (set of icons cost £10 to £40)

Or use our design services

ITS Web Team offers a homepage design service.  Contact us and we'll put together a quote for you.  We will help you to identify the purpose, audience and goals for your site and work with you to draw up a layout for the homepage.  Our graphic designer will then create a design based on the layout and then we'll implement it for you.  This was the process that the Teaching Quality team followed.

Step four: Testing 

One of the tricky aspects of designing web sites is that you can never guarantee how people are going to view them.  It's not like getting a book printed, where you have complete control over the finished format; with web sites you never really know what computers, browsers and monitors people are using to look at your page.  The best way to mitigate this is to test your page on as many different computers and browsers as you can (even if this means borrowing your colleague's computer for five minutes!).  If necessary, ITS Web Team has a bank of 'test' machines that you can use to check your page design - just get in touch with us on webteam at warwick dot ac dot uk if you'd like to use them.