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

Similar documents
Draft Prototypes. Steps in This Activity. HOW TO Step 1. Select a Prototyping Method. Select a Prototyping Method

Your TOOLKIT 9-11 March 2018

proj 3B intro to multi-page layout & interactive pdf

APP VERIFICATION. Entries Search and Find

Lecture Notes CPSC 491 (Fall 2018) Topics. Peer evals. UI Sketches. Homework. Quiz 4 next Tues. HW5 out. S. Bowers 1 of 11

Scenarios, Storyboards, Wireframes, Critique. Jon Kolko Professor, Austin Center for Design

A short introduction to. designing user-friendly interfaces

Website Design and Development CSCI 311

UI/UX BASICS. What is UX?

CSc 238 Human Computer Interface Design Chapter 5 Designing the Product: Framework and Refinement. ABOUT FACE The Essentials of Interaction Design

Understanding prototype fidelity What is Digital Prototyping? Introduction to various digital prototyping tools

Scenarios, Storyboards, Wireframes, Critique. Jon Kolko Professor, Austin Center for Design

Lecture 5: Generating Designs. February 15

MOBILE APP DEVELOPMENT

UX and Fresh Thinking

2018 Business Chicks Senegal Journey. Setting up a personalised fundraising page

CS/ISE 5714 Spring 2013

Requirement Engineering within an Agile Environment BY KEJI GIWA. Digital Bananas Technology

MARKETING FOR PROPERTY INVESTORS THE QUICK GUIDE

How to use your Participant Center for fundraising success! How to: Login

Mobile UX or WHITEPAPER

I'm a London based product designer who code. Currently working in Soldo.

CS3205 HCI IN SOFTWARE DEVELOPMENT PROTOTYPING STRATEGIES. Tom Horton. * Material from: Floryan (UVa) Klemmer (UCSD, was at Stanford)

3.3 Web Graphics. 1. So why are graphics important?

Flow. Streamlining your creative process so you can pursue your passions. Hi-Fidelity Prototype Report

Information System Architecture. Indra Tobing

Designing. Simon Wilson Interaction designer, DWP Digital

The Power to Prototype

PRO WAYS TO LAUNCH A PRODUCT

ECE-492 SENIOR ADVANCED DESIGN PROJECT

WIREFRAMING 101. Essential Question: Can We Possibly Build an App? Learning Targets: Lesson Overview

interaction design Thanks to JoEllen Kames

By Camille Spruill SPC4, SA, CSM, PMP, CBAP. Raleigh Business Analysis Development Day (RBADD) October 18 th, 2016

CS 147 Let s Do This! Assignment 6 Report

Documentation And Collaborating With Developers

NOTE: Facebook frequently changes how privacy and access settings work. What is described in this document is valid as of Aug

Make $400 Daily. With Only. 5 Minutes Of Work

Week 8: The fundamentals of graph theory; Planar Graphs 25 and 27 October, 2017

Essential Question: What Is Good User Interface Design?

SMK SEKSYEN 5,WANGSAMAJU KUALA LUMPUR FORM

Questions. What came up since we met last? What questions do you have that warrant group discussion?

WEB DESIGN 8 PHASES OF THE DESIGN PROCESS. By da Creative Team

Plus 10: Descending the Design Funnel THE 10 PLUS 10 METHOD. developing 10 different ideas and refinements of selected ideas

Up and Running Software The Development Process

CS -213 Human Computer Interaction Spring Prototyping. Imran Ihsan. Assistant Professor (CS) Air University, Islamabad

How to prototype in Axure (like a badass)

Designing for humans

SAP Fiori UX Design and Build Challenge

Creating a Presentation

Example of Focus Group Discussion Guide (Caregiver)

Design Iteration: From Evidence to Design. Slides originally by: Dick Henneman

Online Scams. Ready to get started? Click on the green button to continue.

Redesigning a Website Using IA Principals

character design pipeline) callum.html

Add Your Product to Clickbank

Building great apps for mobile devices: tips and tricks

COPYRIGHTED MATERIAL. 1Hello ios! A Suitable Mac. ios Developer Essentials

DESIGNING RESPONSIVE DASHBOARDS. Best Practices for Building Responsive Analytic Applications

Google Photos. Ian Whiting 16 th August 2017

App. May 30 th, Navigating the App. Powered by. Guides provided by

UX Intensive Takeaways In Action. J.J. Kercher December 8, 2011

6.148 Introduction to UI/UX

Requirements Specification (SRS) Guide

This tool is actually pretty unique and has evolved over the last 7 years. I have been working with Adobe Connect for quite awhile now and one of the

APPENDIX. Using Google Sites. After you read this appendix, you will be able to:

Website Optimizer. Before we start building a website, it s good practice to think about the purpose, your target

Step by Step Guide. A toolkit for parents. Providing you with detailed instructions on each of the features of the ParentZone App.

Chris Taylor Interaction Design Lead Home Office

Lecture 8: Rapid Prototyping. CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.

What is Sherpa? ENTER A LOCATION CHOOSE EQUIPMENT ORDER SERVICE ENJOY MORE FREE TIME. UXD Presentation Peter Zahn

Saqib Mughal Senior UX Architect

Want the *GUIDED* tour?

Project Proposal: Tree Finder

One of the fundamental kinds of websites that SharePoint 2010 allows

Business Chicks Immersion Program

Over 25 years ago, Adobe s founders Charles Geschke and John Warnock, founded Adobe Research.

App Development. Mobile Media Innovation Module 6

Building a Digital Portfolio With WordPress

Questions. What came up since we met last? What questions do you have that warrant group discussion?

The 21 WORD . That Can Get You More Clients. Ian Brodie

TIE Project Work on Pervasive Systems

STORYBOARDS - CONVINCE THE INVESTORS Orbanie Gayle

Passionate designer with a love for solving design problems using feasible and creative solutions

Fundraiser Guidebook

Department of Digital Media Handbook. Projected Schedule

! ios 10 Feature Guide

Low-Fi Prototyping & Pilot Usability Testing

PRODUCTION PHASES CHANGES

René van de Hulsbeek. My commitment is to develop human-centered design solutions that support people s needs, behaviors and desires.

Introducing Thrive - The Ultimate In WordPress Blog Design & Growth

Cryptography III Want to make a billion dollars? Just factor this one number!

Portfolio. Mihai Marin

Open Source Software for Artists and Illustrators. Jim Larson, RA

ITT Technical Institute. GC2630 Graphic Design for the Web Onsite Course SYLLABUS

Hello! ios Development

Wix Website. Project overview. Step 1: Log onto a web browser and go to Step 2: Click Start Now. Step 3: Click Sign up

Create Reflections with Images

Momental. Adrienne I. (Observer) Juliana C. (Computer) Meredith M. (Greeter/Facilitator) Nhien T. (Observer)

Process Book - Project 2 Cause Social Networking Site

1.7 Limit of a Function

Transcription:

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.

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

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.

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

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

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.