Wireframing our pages

Posted by Richard Brierton, Internet Services Manager, Corporate Information and Computing Services

In this update we'll give a quick overview of wireframes and how we're using them.

What is a wireframe?

You'll see us referring to wireframes a lot on this project, and one of the most common things people say is "what exactly is a wireframe?". A wireframe is a drawing of a single web page, which shows the layout of that page without any specific content on it.

Its purpose is just to give the team an idea on:

  • how a page might be structured
  • what type of content it will have (videos, carousel, lists, images etc)
  • if there are any special features a page needs, they may be noted down.

They don't concern themselves with colours, fonts, navigation items or specific content. That level of detail isn’t needed yet.

There’s loads of information online about wireframes so it may be worth watching this youtube video which gives a great summary of wireframes:

Student life page wireframe

The image below is an example of the sorts of wireframes we're creating, and this one shows our initial ideas for the landing page pointing out the key areas of the student life section. On its own it shows what elements are on the page, we can use it to ensure we’re remember what key content will feature on the page too.

Wireframe of the student life web page

The next stage is to create a webpage of the wireframe. To do this we're just using the standard elements or patterns which come with the Drupal CMS, but still not really filling in all the content. They may not be styled how we'll have them on the final website, but they are a good starting point.

Screenshot showing visual design of Student Life page

The next steps for this particular page will be to refine the content, so it's got the right sort of images, text and actions we want. Once that’s done we'll be able to test the journeys this page is part of, and make any changes to the page to improve it based on the feedback and testing.

We then just repeat this process with the other key pages on the site - wireframes, basic web version, testing and iterating.

See how this page looks on the alpha site