Wireframes and prototyping

Wireframes and prototyping - Number 10 Downing Street

Once we’ve understood the content and functionality your users need (using personas), the pages they expect to find on your website to hold this content (using information architecture design), we now need to look at the individual page designs.

Wireframes are the first stage of the design process and help us (and you) understand the key user journeys, information structuring, modes of interaction and functionality.

Wireframes or ‘page schematic’ are a basic outline or skeleton of your key website pages, drawn to show the elements of a page, their relationships, position, and their relative importance. They indicate the information types present, navigation, signposting, branding and content areas. They are black and white schematics presented either in PowerPoint or as a clickable web prototype.

Why develop wire frames and bother with web prototyping?

There are many good reasons why low-fidelity web prototyping and wireframing is used in a user centred design process.

Through the persona work, we have detailed insights into what your users want to see on your site. Through the IA work we have looked at grouping of content, labelling and terminology to meet the user’s needs. We now need to make sure we position content, messaging and functionality optimally to give an obvious hierarchy of information and ease them through each page, with clear and relevant call to actions and next steps.

Wire frames are also the perfect point in a project to test page designs with real users - user-testing is our proof-of concept. User testing can be formal, in a laboratory using eye-tracking technology, or more informal using agile and lean paper prototyping tools. This wireframe user testing is a rapid and iterative process and can very quickly hone a page layout ensuring it works hard for you and your audiences capturing and reducing usability issues.

And last but not least, it's a lot more efficient and cost effective to make changes at the wireframe stage than later in the design process or the technical build phase.

Functional and technical specifications

There are many good reasons why low-fidelity web prototyping and wireframing is used in a user centred design process.

Once we’ve developed and tested your key page layouts, we then start work on the remaining page wireframes and processes, navigation and links – this is a very detailed UX plan, highly annotated including functional and technical specification, site accessibility and usability requirements, including any key data flows.

Over the years, we’ve seen some horrific functional specification documents – pages and pages of dry technical text that never gets read – that will inevitably mean project scope problems later down the line.

To combat scope creep, S8080’s wire frames are highly visual documents that simply but accurately explain the technical specification of your website. Every aspect is visually documented and annotated so you know exactly how something will work and our developers know exactly what to build for you.

Other agencies typically provide 6-12 Photoshop wire frames – which may look like text book wire frames but lack detail and have not explored the technical complexities. Our UX team create wire frame documents that are typically highly detailed ranging from 20 to 100+ slides – we feel this helps all parties identify potential complexities earlier rather than pushing them under the carpet until the build phase.

It makes life much easier for all of us.

Can I just say how impressed I am with the fact that you never fail to deliver? The document you sent through clearly demonstrates the level of commitment and thought you and your team are putting in to our project. It goes without saying that we are extremely grateful.

Nadine Silverside - CITB Construction Skills

Read enough? Get in touch

If you would like to chat about how S8080 could help you design and develop your web site, contact us or email [email protected].

Steamy cup