Upload
jenni-leder
View
1.970
Download
0
Tags:
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?
When to use Lo-Fi
- Brainstorming stage - To provide quick general guidance
internally
Bad for:- Exact Details
Types of wireframes
- Low Fi: Sketching with paper/pencil
- Hi Fi: Using software and creating user-flows and/or interactive prototypes
When to use Hi-Fi
- Good for clients, stakeholders - Explains each part throughly
Bad for:- Iteration - Keeping things up to date
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?
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
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"
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