Skip to main content

Home page design process

This page summarises four steps in the homepage design process using a redesign for the Department of Philosophy as an example.

  1. Consider your audience, their purpose and goals
  2. Sketch a wireframe and write the content
  3. Realise the design
  4. Test

We reviewed and redesigned the Department of Philosophy's homepage in early 2013.

Step 1: Consider your audience, their purpose and goals

The original Philosophy homepage was geared towards current students. The visual hierarchy prioritised news and events at the top left of the page.

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

The Philosophy team identified four distinct audiences to target and ranked them in order of priority:

  1. Prospective undergraduate students
  2. Prospective postgraduate taught students
  3. Prospective postgraduate research students
  4. Current students

The team considered the prospective undergraduate audience's needs such as:

  • Why should I choose Warwick to study philosophy?
  • What philosophy degree programmes are there?
  • What grades do I need?
  • What will studying philosophy at Warwick be like?
  • I have received an offer letter – what do I do next?

They continued the same process, analysing the other audiences' needs.

Once you are clear about your audience and their goals, and understand the priority order, you can then consider the information and services to promote.

Step 2: Wireframe and content

Based on the questions you identified in your audience research, and considering what you 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 the content that should come first and the content to group, in order to work out the relative importance of the content. Start sketching this out – use a white board or a paper and pen.

The Philosophy team's priority was to appeal to prospective undergraduate students to choose to study philosophy at Warwick.

The second and third priority was to appeal to the two prospective postgraduate audiences (taught and research).

The fourth priority was to serve information relevant to current students, such as news and events, and frequently accessed tasks.

We designed the new homepage to prioritise information relevant to those people considering applying to study philosophy at Warwick, with clear links for each audience. We placed further sections linking into research, information for current students and news beneath in a row of three columns.

This is a wireframe we produced for Philosophy's homepage:

Wireframe showing sketched layout ideas for Department of Philosophy homepage

Note no design involved at this stage. We're really just concerned with the content, how to group it together, and which group of content is most important.

Notice we numbered different groups of content. These numbers indicate the relative importance of the content (with 1 being the most important) so we know to give extra visual weight to the more important content. In the Philosophy example, the top two sections are a block of content for students “thinking of applying”, followed by a video of a current student.

Extra visual weight helps guide people around the page when they are scanning it. In the final design, you can see the more important content is placed on a dark background contrasting with the rest of the homepage:

Screenshot showing contrasting dark grey and white backgrounds on Department of Philosophy

And how do you decide which content is most important? Well, that's down to the key tasks identified in your target audience research.

Step 3: Realise the design

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

Use the features 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 some more. Work with it so that it fits into the your framework.
  • Make use of SiteBuilder's box styles to give visual weight to the most important content.

Use our design service

The IT Services Web Team can design and implement your homepage for you. We can help you to identify the purpose, audience and goals for your website. The Web Team has specialists in user interface design, graphic design and online copywriting, and we can draw on these skills throughout a project. (This is the approach the Philosophy team used.)

Contact us at webteam at warwick dot ac dot uk and we will produce a quote for you.

Step 4: Test

A tricky part of designing websites is you can't guarantee how users view them. It's not like getting a book printed, where you have complete control over the finished format. People use different computers, browsers, mobile devices and monitors to view your page.

The best way to ensure all users have a good experience 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, the Web Team has a bank of test machines you can use to check your page design – just contact us at webteam at warwick dot ac dot uk if you'd like to use them.