, , , , ,

Earlier posts have described what we are trying to achieve with the website. This week we worked with Andy Chapman from 1010Media to develop some wireframes for the website.

Wire what?

Wireframing is an essential part of the website building process. It provides the structure for the website before a design is created for the site’s finished look and feel. A wireframe gives the shape of a page showing where images, text, navigation and any other elements that users need will go. Having a series of wireframes allows developers and project team members to test ideas and check if the navigation makes sense.

Simple wireframe

Simple black and white wireframe

Building on the basics

Once a basic structure is in place we add more wireframe pages to check our ideas about how the site works are correct. This usually involves some rethinking since actually trying to work through a series of pages flushes out any problems. We also start adding visuals to the wireframes to test ideas around the look and feel of the site.

Wireframe with visuals added

Wireframe with visuals added

Getting more complex

Our last stage is to add in wireframes for pages that will have quite a lot of interactivity in them. For this site this is the map and object information. The actual functionality is not included at this stage. This is because we want to make sure the underlying structure and navigation works before spending time on coding. It also allows us to evaluate concepts around functions within pages with the wider project team.

The result of this is a more complex wireframe where functionality is represented visually. The project team now have time to assess the wireframes and to agree or amend them at our next project meeting.

Complex wireframe showing functionality

Complex wireframe showing functionality

Where’s the game?

We are working on the game too but that’s a subject for another post!