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. Where a wireframe can be great for demonstrating your initial idea and intent, a low-fidelity prototype is the best way to demonstrate to stakeholders what your final design might look like from both a functional and aesthetic point of view.

What is a wireframe prototype?

You may see the term "wireframe prototype" used however, wireframes and prototypes are actually two separate things. A wireframe can be a drawing or a graphical sketch that demonstrates the basic layout of your website or app, and can often be depicted in diagram format to demonstrate all the pages of your design (you can find out more about what wireframes are in our beginner's guide to wireframes).

Conversely, you can think of a prototype as a functioning model of your website or app design. Essentially, a low-fidelity prototype retains the look of a wireframe but includes all the cross page interactions and demonstrates to stakeholders how the finished product should function. Once you include all the bells and whistles in that low-fidelity wireframe (visual elements and editorial copy), you then have yourself a high-fidelity wireframe.

So, with this in mind, how do we get from a rough and ready wireframe sketch, to a functional, low-fidelity prototype?

How to transform a wireframe to a low-fidelity prototype

As mentioned, 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. You can get from wireframe to prototype in three easy steps:

  1. Map out your wireframe properly (establish your page connections)
  2. Apply your interactions in your prototyping software (link the pages)
  3. Test those interactions to explore how smooth your user experience is

1. Map your wireframe to make sure it’s ready for low-fidelity 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.

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.

  • 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.
  • 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.
  • 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 wireframe map examples on Dribbble.

2. Create your low-fidelity prototype 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 your wireframe 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 using Uizard's Design Assistant (even if you just sketched your wireframe on paper). To do this, use the 'Upload wireframe' button:

Uploading a wireframe in Uizard

Link your interactive elements

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 low-fidelity 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.)

Fidelity switcher in Uizard
Fidelity switcher in Uizard

Build and share low-fidelity prototypes with 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 design templates that help even non-designers easily add styles).

You can sign up to Uizard for free here or head over to the Uizard blog to find out more about the world of design.