UX explained: Wireframes and Prototypes

Prototypes and wireframes are two of the most frequently produced UX deliverables. However, there can be some confusion about the meaning of these terms and the audience best suited for each.

A wireframe is a simplified representation of the experience. Wireframes are either hand-drawn or electronic, but in either case, they consist of lines, structural elements and represent priority and focus.

Wireframes are the primary way we communicate design solutions to engineers and stakeholders. They help us to think through the design system and visualise the screens of our final design.

Using the information gathered during the research and content strategy phases, we can sketch out the experience and show engineers and stakeholders what we think.

Prototypes are a little bit more sophisticated. They may contain content, images and can be static or interactive. Commonly put together using digital tools like Figma, Axure or Adobe XD.

Prototypes are one of the most critical steps in the design process. The goal of a prototype is to test our ideas before sinking a lot of time and money into the final product.

Prototyping is essential for resolving usability issues before launch and can reveal areas that need improvement.

A prototype’s fidelity doesn’t have to be high, but producing one close to the final draft of your product can produce useful insights. Prototyping is inexpensive and can be kept as a reference for future iterations.

They are an essential part of the user testing process and enable us to generate data early enough to validate or disprove our ideas. Early feedback and the removal of guesswork about what to build is usually a good idea.

Whether you’re taking a risk on something new, or you’re just not sure about something, this is where prototypes can help.

There are, however, limitations to prototypes, as I have found over the years. Many of them tend not to let you set conditional triggers. Such as detecting whether you’re a ‘returning’ or ‘new’ customer. So it may mean creating a bunch of prototypes for specific flows, whereas, in code, this can be set fairly easily with a couple of lines of code.

Got a project?
Get in touch

Request a callback
Monday to Friday
10:00 to 19:00 GMT
Book here

Based in London, UK.