Embed Size (px)
Citation preview
- Extracts the idea from your brain
- Generates dialog about a product
- Provides guidance for everyone building the product
- Keeps the idea loose enough to allow for revisions + low risk
Why Wireframe?
Types of wireframes
- Low Fi: Sketching with paper/pencil, whiteboarding
sketches by Anthony Armendariz
When to use Lo-Fi
- Brainstorming stage - To provide quick general guidance
internally
Bad for:- Exact Details
Work broadly and iterate often
Tip:
Types of wireframes
- Low Fi: Sketching with paper/pencil
- Hi Fi: Using software and creating user-flows and/or interactive prototypes
wireframe by Neway Lau
When to use Hi-Fi
- Good for clients, stakeholders - Explains each part throughly
Bad for:- Iteration - Keeping things up to date
Wireframes DO NOT
replace spec documentation!
Keep the wireframes black/white/grey and don’t use images.
Tip:
Where do you start?Break everything into tasks
Mind Map
Example: How does a new user create an account?
- welcome screen - walkthrough - Sign up/ FB - email address/password
Requirements:
logoemail
passwordFB
Sign up
Create Account
Welcome Walkthrough Sign Up Email/Password
(Lo-Fi Example)
Dialog this creates:
- Can we make sign up faster? - What are the key points for the
walkthrough? - Do we need a welcome screen?
logo
password
FBSign up
Create Account
Interactive Wireframes/Prototyping:
- Good for making the static wireframe feel real
- Quickly gives you a good idea on if the flow feels right
- Can hand it to other people to test
Ideas are disposable, you can always make more.
Prototyping Tip:
Paper & pencil + POP app - free!
Wireframe tools
Apple Keynote - free!
OmniGraffle - $100
Balsamiq - $89
Adobe Illustrator - starts $20/mo
Invision - free & Pro options
Sketch - $99Gliffy - free & Pro options
“Sequential art”
If you want to learn more about drawing and telling stories with your wireframes
ALSOScott McCloud, "Understanding Comics"
Now let’s Workshop!
Download POP app
The Task:Wireframe of one flow of your choice
and use the POP app to create a prototype
Remember:These don’t need to be perfect!
Ideas:
Photo-sharing social networkTo-Do App
- create a new list - add an item - mark off item off list - share your list - organize list - add notes - shared task list with
another person
- Choose a photo (or more than one) from your camera roll
- take a new photo - like/comment/share - create a new account - filters
