A Comprehensive Guide To Wireframing And Prototyping

With the big picture established and your user interface considered, it’s time to start building some prototypes. My sixth article in this series of ten articles dives into the prototyping process.

As I’ve stressed before in the earlier articles in this series, the best design follows an iterative process:

  1. You undertake research, working with users to identify the underlying user requirements that need to be addressed.
  2. With this research in hand, you define the problem you’re trying to solve and establish a hypothesis.
  3. With the problem defined you build a prototype.
  4. Using this prototype you test your assumptions, measuring against your hypothesis.
  5. Finally, you return to stage one, refining your thinking and iterate through the process again, working your way closer to a finished solution.

At each loop throughout the process, the fidelity of your prototypes increases. The earlier in the process you can identify and fix problems, the easier and the less expensive it is. The further into a process you get, as the fidelity of what you’re building increases, the more expensive it becomes to make changes. This is where prototyping comes in.

As designers working today, we’re fortunate to have a wealth of prototyping tools at our disposal. Tools like Adobe XD, in particular, enable us to build immersive clickable prototypes at relatively low cost.

These tools allow us to undertake a great deal of our testing before we get to the expensive part of the process, building fully working products in the medium they will be delivered in.

With the big picture of user flows established and some thought given to building a design system that ensures consistency, it’s time to put together some interactive prototypes.

This article, the third in this series within a series, explores the benefits of wireframing and prototyping, before covering the process from paper prototyping to lo-fi wireframing to hi-fi prototyping with mockups.

The Benefits Of Prototyping

We are fortunate as designers to have a wealth of prototyping tools at our disposal at a wide range of fidelities. At one end of the spectrum, we have lo-fi paper prototypes, while at the other end of the spectrum we have hi-fi digital prototypes.

Digital prototypes allow us to build realistic, clickable proof of concepts that allow users and stakeholders to get a feel for what we’re building. These prototypes enable us to test our assumptions and move progressively towards finished solutions.

Building a clickable prototype using a tool like Adobe XD is considerably quicker than diving deep into HTML, CSS, and JS to build a website or diving into the complex build of a mobile application.

Clickable prototypes also allow us to test our designs with users and other stakeholders, bringing them into the design process in a meaningful way and allowing us to test: information architecture, layout and visual hierarchy, and interactive elements.

There are numerous other benefits of prototyping, including:

  • Saving time and money;
  • Getting everyone involved and bought into the design process;
  • Acting as a bridge between designers and developers.

Let’s dive a little deeper into these and make a case for prototyping — as a bridge between your original idea and your final build — as a core part of the design process.


The golden rule of prototyping — and developing any new idea — is to fail early and fail inexpensively. Prototyping enables misunderstandings to be identified and addressed as early in the design process as possible. The earlier in the process issues are addressed, the better, saving you time and money.

The deeper into a project you are, the more expensive it is to fix mistakes. Prototypes — whether lo-fi paper prototypes or digital hi-fi prototypes — are a cost-effective way of identifying changes that might need to be made before you embark upon a finished build, at which point changes become increasingly more expensive to implement.


Even a modest project will typically encompass a number of different stakeholders. It’s important to engage with everyone involved in a project, bringing them on the journey from idea to finished product.

Prototypes are helpful for including the wide range of participants in a project: designers, developers, project managers, business analysts and everyday users. (This list — depending on the size and scope of the project — is potentially just the tip of the iceberg.)

Prototypes are a great way of getting everyone involved in the design process. They also keep the conversation going, so that designers don’t disappear for weeks on end building complicated solutions to problems that perhaps don’t exist.


As our industry has become more and more complex, the idea of ‘unicorn designers’ — who have deep skills as both designers and developers — is one that’s thankfully being left behind. It is simply too complex now to be ‘a master of all trades.’ We are increasingly working in multi-disciplinary teams, drawing on the strengths of different specialists and in this context, prototypes act as the glue that holds everyone together.

When the design of a product or feature is finished, and it is being passed on to a more skilled developer to undertake the final build, a high fidelity, clickable prototype ensures that the developer has a clear understanding of what’s what.

This is particularly true when it comes to designing interactions. Rich, interactive prototypes are considerably more powerful — not to mention immersive — than a series of flat, visuals that lack interaction. They provide a very clear picture of not only how something looks, but also how it works.

So, with this in mind, let’s explore the process of building prototypes.

Paper Prototypes, Wireframes And Clickable Prototypes

With the benefits of prototyping defined, it’s time to dive deeper into the prototyping process. We can, of course, create product prototypes at a wide range of fidelities and using a wide range of tools. These include:

  • rapid, sketched paper prototypes;
  • lo-fi, monochromatic wireframes; and
  • high-fidelity, clickable mockups.

As we move through the spectrum of prototypes, we can provide a more comprehensive view of our design, including color palettes, typographic choices, and other aspects including interactions and animations. In short, prototyping takes place across a spectrum of fidelity, from low detail to high detail.

As we work our way up the levels of fidelity, we’ll eventually build prototypes in the medium they’ll be delivered in. For example, the final prototypes for a website will ideally be built using HTML, CSS, and JavaScript so that we can tailor them to the medium.

The prototyping process is a journey, transitioning through levels of fidelity. There are many different types of prototypes — low- medium- and high-fidelity — and these are suited to different points on the design journey.

Prototypes are involved at every stage of the design process: from the earliest iterations where you are often ‘thinking aloud’; via clickable prototypes where you start to test assumptions; to detailed prototypes where you begin to implement your design.

At the start of the journey it’s important to focus on low-fidelity approaches that are low cost and fast to implement. Paper is the perfect prototyping tool at this stage in the process. Once you’ve undertaken some initial testing with your paper prototypes, it’s time to move onto something at a higher level of fidelity.

With some feedback gathered, it helps to move to the next level of fidelity, using tools like Adobe XD to create clickable lo-fi prototypes with wireframes. These help your users and stakeholders get a much better picture of how everything works.

Again, with testing done it’s time to move on to high-fidelity prototypes. At this point in the process, we’re increasing fidelity, moving from wireframes to mockups. Creating clickable hi-fi prototypes with mockups provides users and stakeholders with a very clear picture of the end result.

Finally, we move towards the end medium for prototyping, for example using HTML, CSS, and JavaScript for a website. Building a native prototype ensures that what you are creating is as close as possible to the finished product.

Of course, every project is different and — at times — you might need to approach your prototyping in a different order. When building a complex web-based SaaS application, for example, you might need to start prototyping in HTML earlier in the process in order to implement and test web technologies. As always, the approach you choose will depend on the project in hand.

For this article, I’m exploring paper prototyping, lo-fi prototyping with wireframes, and hi-fi prototyping with mockups. If you’re looking for an in-depth and exhaustive — in a good way! — book that covers prototyping in detail, I’d recommend Ben Coleman and Dan Goodwin’s book, “Designing UX: Prototyping“.” It has an excellent in-depth chapter covering HTML prototyping.

By Christopher Murphy

This article originally appeared in Smashingmagazine