How to go from paper wireframe to interactive prototype
Pick up the pencil and sketch paper wireframes before creating your interactive prototypes
There’s a lot that goes into building a clickable, interactive prototype. Most of the time, we only see the final product; taking for granted all the work that goes into the design process beforehand.
But every decent mobile app and website has a design past. The journey from idea to fully fledged product is a long and arduous one and often starts with putting pencil to paper.
Wireframing tools like Justinmind help make that journey smoother so let’s look at how to get from paper wireframes to interactive prototype.
Before you prototype, iterate your ideas
Before you even think about paper, pencils and interactive wireframes you need an idea.
This is an idea that you will discuss with a client, with yourself and your stakeholders – whoever is involved in the design process.
At this stage, however, don’t worry about having The Perfect Idea. Ideas come and go and change as quickly as the weather. You have time to develop and iterate ideas before you make any commitments and this is where sketching comes in.
Sketching your ideas and iterating through them rapidly is a great way to experiment. The prototyping process means you’ll be refining as you go but it’s always best to start as you mean to go on.
Also, sketching your iterations can help you gather initial feedback that you can use to develop your mobile app or website before taking it to the prototyping stage.
Think about feature lists, user personas and journeys then start drawing.
Get in the know: what’s the difference between a wireframe and a prototype
But what if I can’t draw?
Many a designer is stopped in their tracks because of the unyielding belief that they cannot draw.
As mentioned, we live in a world where we’re presented with the final product – the same can be said of sketching and drawing. It’s doubtful Leonardo da Vinci’s first time putting pencil to paper resulted in pure genius.
The point is your sketches don’t have to be amazing. This stage is more about communicating your ideas effectively. Don’t worry about perfectly replicating the UI design either – that comes later.
Remko van der Lugt, of the School of Industrial Design Engineering, put it best:
“The interaction that designers have with their sketches is seen as essential to creativity in design activity”
If you’re still nervous about sketching, there are many templates online that you can print off – templates of various screens, buttons and UI elements as well as tools such as user interface stencils.
Download Justinmind and turn your paper wireframes into interactive prototypes
Why should I draw before creating an interactive prototype?
It’s not only time efficient to make quick sketches of your ideas but there are other benefits of paper prototypes:
- Cheap – pencils and paper cost next to nothing.
- Get feedback faster and implement notes.
- Creative – everybody is familiar with the pencil, not everybody is an expert in prototyping software. Sketching allows for easy experimentation.
- Explore alternatives with little consequence.
- Design more iterations.
- It’s fun!
How to paper prototype
First, relax. Shake off any nerves before you get into it. If you’re nervous or stiff, this will translate into your sketches.
You need paper. That’s essential. It doesn’t need to be fancy paper or anything expensive. The cheaper the better, frankly.
Pens. Lots of pens. Pencils, too. You can use a mixture of pens and pencils to help you create depth and a hierarchy of items.
You want to design mobile first. Designing mobile first will take up less time and space when sketching out your ideas. This will allow you to prioritize important content and elements. It is these constraints that will force you to really consider which UI elements you need in your app.
At this stage, it’s best to try and stay in a state of non-judgement. This will help your creativity and encourage new ideas. Iterate your ideas as you sketch your paper wireframes. Because sometimes a good thing can arise out of a bad thing.
When you have all your sketches complete and planned – go ahead and cut them out.
Why do you cut out the paper sketches? Good question. With your cut outs, you can move screens around freely. You can move different UI elements like buttons around and overlay parts of screens to come up with user journeys.
Since this part of the prototyping process is tactile, you can experiment with UI patterns like navigation slide menus to see how naturally they fit into your workflow.
Creating an interactive wireframe in Justinmind
Taking your low fidelity sketches and turning them into high fidelity interactive wireframes takes very little time because you’ve done a lot of the initial prep in the idea development and sketching stage. So, bravo! Now the nitty gritty starts.
High fidelity wireframes are a great tool for helping stakeholders visualize and understand your idea early. With Justinmind we’ll talk you through how to create an interactive wireframe.
You first need to download Justinmind.
Once you’ve downloaded Justinmind, open it up and create a new prototype. Choose the device you want to create your prototype on – remember mobile first will help you.
Thankfully making your app or website responsive is easy to do in Justinmind.
When you start a new prototype, you’ll be asked whether you want to start it from Empty, Images, Example or Another.
Empty will create an empty prototype for the device you chose.
Images will let you create an interactive prototype from any images you create in Photoshop. This means any changes you make to an image will change automatically in Justinmind.
When you click Example, you’ll be furnished with myriad examples of possible prototypes that have been made with Justinmind.
Another means you can open a project using an existing .vp file. This is useful should you wish to convert a mobile prototype into a web prototype for example.
And there you have it. Prototype created. Your next step is to play around with the extensive widget libraries and take your paper wireframes and turn them into beautiful and elegant interactive prototypes.