Behind the curtains: wireframe to website prototype

Val Cartei, from our IT team offers her thoughts about some of the work that's gone into developing the MHMS website.

- - -

Wireframes and prototypes are a must when it comes to creating projects that need to cater for many and different needs from many and different stakeholders, and MyHouseMyStreet (MHMS) is no exception to the rule.

Comic strip diagram of overly-complicated product development process

First things first. Wireframes are basic illustrations of the structure and components of a web page. To create them, Dave and I would met in pubs and, with the help of a glass or two, started brainstorming on scraps of paper. You can see our efforts on Flickr:

At a second stage, we translated our sketches in OmniGraffle to create  a digital version of the wireframes so that they could be shared with the other team members. This helped communication across the board, from the project manager to the designers, from the the developers to the volunteers involved. 

The next step was to create a prototype of the site. Prototypes are semi-functional webpage layouts of a mockup/comp that serves to give a higher-fidelity preview of the actual site being built. OmniGraffle professional has some really useful tools for GUI and Prototype design, which let you add interactivity to your pages and export them in HTML. So that you can open your prototype in any browser and navigate your way through as if you were a user!

Lessons learnt? With wireframing and prototyping you can really have your cake and eat it. However, to make everyone happy, they must be developed as a collaborative exercise. Designers, developers, product owners and of course users should all be involved in creating, critiquing and evaluating prototypes from the beginning, to avoid bas surprises!

For a more comprehensive list of tools for wireframing and prototyping: