How to Go From Wireframe to Low-Fidelity Prototype

How to Go From Wireframe to Low-Fidelity Prototype

You’ve made a wireframe, and now you want to turn it into something tangible that you can present to your team and test with your users.

One of the quickest and least expensive ways to do so is by creating a low-fidelity prototype. A low-fidelity prototype is an interactive visual representation of your website. It enables you to simulate the user experience, so you can see how people interact with your app or website before you make large and expensive design and development investments in it.

Here’s a simple 3-step approach to creating your low-fidelity prototype.

1. Map your wireframe to make sure it’s ready for prototyping

A wireframe map catalogs all the ways that a user can navigate between screens of your wireframe. It’s a useful visualization that helps you bridge the gap between wireframe and prototype. You need to map your wireframe because it helps you see how the various elements and pages of your site are connected. It also helps you identify any screens that you may have forgotten to account for when creating your wireframe.

You can create a wireframe map on paper or in the software of your choice — tools like FlowMapp and GlooMaps are well-suited to creating wireframe maps, or you could use Google Drawings.  Whichever tool you choose to create your wireframe map, here are the steps you should follow.

  1. Identify and list all the screens that a user can see when visiting your website. This means all pages of your site, plus any variations of a given page that a user can see by interacting with your site. For example, if a user can click a button on your homepage to cause a video to pop up, you should list that screen separately from the homepage itself.
  2. Put the name of each screen in a box and arrange the boxes so that there’s enough space between them to draw lines connecting them.
  3. For each screen, identify the interactive elements — links, buttons, forms, videos, and any other things that users will be able to click on or interact with in some way. List each element underneath the box.
  4. For each interactive element, identify what should happen when a user interacts with it and what screen the user should see as a result of the interaction. Draw an arrow from each interactive element to the screen that the user will see when interacting with that element.

The more complete your wireframe is before you start creating your prototype, the faster and smoother the rest of this process will go.

To see what a wireframe map might look like, see these examples on Dribbble.

2. Create your prototype’s interactions

Once you’ve mapped all the interactions from your wireframe, you’re ready to bring your prototype to life.

Here’s how even non-designers can use Uizard to easily create interactive low-fidelity prototypes.

Get your wireframe into Uizard

First, you’ll need to get your wireframe into Uizard. There are two ways to do this.

Your first option is to create it directly in Uizard. To do so, create a new project:

Creating projects in Uizard

Then use the editing buttons at the top of the screen to create your wireframe:

Options in Build mode in Uizard

Your other option is to import a drawing of your wireframe into Uizard (even if you just sketched your wireframe on paper). To do this, use the 'Upload wireframe' button:

Uploading a wireframe in Uizard

You can easily link up your interactive elements by switching to Interact mode:

Interact mode in Uizard

Click on the interactive element (such as a button) that you want to link and drag it to where you want the user to go (such as another screen) when they interact with that element.

Prototyping in Uizard

Note: if you created a wireframe map showing all your interactions (see step #1 above), this linking your interactive elements can go a lot faster and help ensure you don’t overlook any interactions.

3. Test your interactions

Before presenting your prototype to others, test your interactions to make sure that a user can navigate your app or website. To do this, switch to Preview mode using the button at the top right:

Preview mode in Uizard

On the preview screen that appears, interactive elements that you’ve linked will be briefly highlighted:

Hotspot hints in Uizard

Click on an interactive element to make sure that what happens is what you intended. (If it’s not what you intended, exit your preview, and return to Build mode to fix it.)

Get closer to a finished product with a low-fidelity prototype

Fidelity switcher in Uizard
Fidelity switcher in Uizard

Once you’ve created a low-fidelity prototype, you can share it with others to get feedback, and then start to turn it into a high-fidelity prototype by adding colors, choosing fonts, and refining other design elements. (Uizard makes this easy, with one-click conversion between low-fidelity and high-fidelity and themes that help even non-designers easily add styles).

You can sign up to Uizard for free here.