Twentysix Twelve

A blog by Ollie Wells about web, design, work and stuff.

Wireframes and prototypes.


Producing a wireframe or a protoype for a project is often invaluable. But, what are the key differences, and are they mutually exclusive?

Let’s look at what each one is, and more importantly what each one does.


A wireframe, in my eyes, is a representation of a defined information architecture. It allows content to be structured hierarchically, and validates a sitemap.

Wireframes are key to identifying gaps in user journey, and are a way to cross reference requirements with potential solutions.


A prototype is a proof of concept, that is testable. By testable, I mean primary user testing, but can include functional, creative and technical testing, depending on the fidelity.

So which is needed, or do you need both?

It depends. Personally, I think a wireframe in some capacity is always useful. I don’t mean a fully Axure’d version, even sketch “wireframes” are useful.

A wireframe can be referenced

A wireframe puts your thinking down in a tangible format, and something that can be referenced throughout the project lifecycle. It should, if done correctly, flag immediate gaps in information architecture, and validate the IA.

Wireframes are excellent for clarification from the client. If they are suitably low-fidelity, the client doesn’t get caught up in visual elements, and instead starts to think of the site from an architecture and content point of view.

Protoypes confirm

A clickable prototype begins to form the basis of the final solution. Prototypes confirm your initial thinking and estimations. User journeys become something visible and testable; interactions can be worked out and tested; concept becomes production.

A prototype can be produced with production-ready code, which is highly efficient, mitigating the need for code wastage and the need for repeating/increasing workload.

Presentation styles can be applied directly to the prototpye to begin testing the creative solution as well as the technical.

Finally, APIs, or other webservices can be tested and issues flagged far earlier.

So we need one or the other?

In my experience, you can have either, or both. It all depends on the project, the agreed deliverables, the stakeholders involved, size and scope.

Look at what questions you need to answer, then look to see if a wireframe, a prototype, or both answers them.

Leave a Reply

Required fields are marked *.