How to make a prototype? A step-by-step. Step 1. Start with a paper prototype

Transcription

1 How to make a prototype? A step-by-step Step 1. Start with a paper prototype The very first step is to sketch your idea on a sheet of paper. If you consider yourself to be a bad artist - don t let that stop you. A paper prototype isn t about art, it s about presenting the idea in a simplified way. Take a sketchbook and a pen and try to put your idea on paper. To make it more visual, you can use a sketchbooks with phones templates on every page, or download and print such templates. This allows you to get a clear view of how the app will look on the device screen. It is important to sketch all the screens of the app to get a clear structure. If your product includes many screens - present them on a single page, and add the connections.

2 What s the problem? Let s make up an example You wanna build an application for a pizza delivery service.

3 The ultimate goal for this service is, that your average customer John, 28, may painlessly and easily place an order with his phone, based on the following criterias: John wants to order two pizzas. One is spicy salami, the other one he is not sure about yet. John wants to deliver to his work address. And he wants to be able to pay with his credit card. A main goal, personas, scenarios, user journeys or even storyboards should have been set up before you start prototyping. Based on this knowledge you start drawing interfaces that allow your user to perform this particular task.

4

5 Step 2. Create a digital wireframe After the structure of the app is more or less clear, it s time to create a digital wireframe, which is a blueprint that represents the skeleton of the future app. The term digital wireframe speaks for itself - it is created with the help of digital prototyping tools. If you really like your paper prototype and think it includes all the necessary UI elements - you can save time with invisionapp. It will help you transform a pen-and-paper prototype into a digital one. You just take photos of your sketches, and

6 the tool will upload them as screens of your future app. It s even possible to add different types of interactions. There are also dozens of apps for professional prototyping as well. But don t let the word professional scare you. They are all easy to learn, and most of them have trials or free plans. The advantage of the digital wireframe is the ability to share it with anyone in any corner of the planet, which is impossible to do with the paper prototype. Digital prototyping tools enable you to share prototypes with whoever you want. InVision, for

7 example, makes it possible to leave comments and discuss the website prototype online. So how to make a prototype work for you? Step 3. Share with friends Ask for their opinion. Ideas from another perspective might be unexpected but quite valuable. Step 4. Share with the designer Having a skeleton of the product you can then involve a professional to create an attractive and friendly UI/UX design. Step 5. Share with potential users Contact your potential clients to get their feedback concerning the product and its logic. No one can understand the product better than people who are meant to use it. Step 6. Share with investors If you want to raise money, you have to show your potential investors something convincing, an interactive prototype, for example.