What are website prototypes good for?

Wireframes are good to show how the web will look like. Sitemaps are used to show the navigation structure.

But none of them show how a website works.

The main focus of a prototype is not the appearance of the website, but content, structure and functionality. Back in the 90's, HTML didn't allow for much more than visual presentation of text and static images with links. Nowadays, there are plenty of sites that work as software, interacting, changing behaviour and content according to user's responses. This makes the working part of a website the most important thing to be focussed, discussed and planned.

So, before building any software or website that's more complex than a printed leaflet, you should build a prototype of it to understand how it's going to work, and plan ahead how you're going to build it.

Structure is basically naming and organizing elements of the pages, such as links and categories. It also involves the basic sizes and shapes of objects, but not in a way that hinders designers' work. The low fidelity wireframes stand in this part of the project.

Categorization is normally done with card sorting and text files, but as projects get more and more complex, it's becoming even more necessary to simulate them.

Content also is very important, and it is great to have clients approve it before seeing the visuals. Many people get obfuscated with logos, colours and shapes, and can only think about that when they were supposed to analyse the texts, the information and the story being told. If you present a black and white prototype, it's easier to get everyone focused on what's written, and after that pass on to the design.

Functionality is very important, and cannot be visualized with old paper wireframes, or plain mockups. With rich interaction, you can simulate clicks, filling forms, voting, wrong passwords, and most of the experiences a user have with real websites. That way, it's possible to prevent mistakes such as asking too much information in your login forms, or users being unable to click on determined objects when they want to.

It is important to discuss and decide the technical functions before start coding, because most of software bugs come from changing plans along the coding stage. It also helps reduce production time, since the rewriting normally takes longer than coding once.

Justinmind Prototyper is an authoring tool for high fidelity wireframes and prototypes. If you're interested, follow our blog's feed or follow us on twitter.