How to Wireframe

download How to Wireframe

of 23

Embed Size (px)

Transcript of How to Wireframe

Wire-Framing &Product RoadMap

E-I-TWire-Framing &Product RoadMap

Intro to Wireframing

About Me

I am the Chief Operating Officer of 2020shift. I am a Lean Startup expert training over 1000+ entrepreneurs and business professionals around the world.I love helping people create life- styles that are fulfilling and freeing while building success and confidence. linkedin.com/DominiqueAubrytwitter.com/aubrybella

facebook.com/This30slife

(Definition): An image or set of images which displays the functional elements of a website or page

A VISUAL REPRESENTATION OF THE PROCESS A USER GOES THROUGH TO INTERACT/USE/BUY YOUR PRODUCT OR SERVICEWhat is WireFraming

Example 1

Example 2

Example 4

How to Wire Frame

Information Design Navigation Design

Interface Design 3 Parts of Wire Framing

WireFraming Tips

1Be Clear About Your Objective

2Make it Functional, Not Pretty

3Draw on Your Experience

4Avoid Designing Your Wireframe Too Much

5Think About the User

Building Your Wireframe

Select a Wireframe Owner, Timer & Product Map Owner ( 1 minute) You are going to draw out your own wire frame ( 15 minutes) Your wireframe will include 3-5 steps or phases You are going to get out of the building ( 20 minutes) Compile your notes and edits (5 minutes)Create a WireFrame