Wireframes provide guidance for product development by extracting ideas from concepts and generating discussion. They keep designs loose enough for revisions while managing risks. There are two main types: low-fidelity sketches created with paper/pencil, and high-fidelity digital prototypes. Lo-fi wireframes aid brainstorming and guidance, while hi-fi are suited to explaining details to clients. Both should avoid unnecessary images or colors to focus on functionality. Effective wireframing breaks tasks into individual flows that can then be prototyped using tools like POP to test designs iteratively at low cost.

1. A brief overview
Wireframes!
photo via http://speckyboy.com/
Jenni.Leder@gmail.com
@thoughtbrain

2. - 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?

3. Types of wireframes
- Low Fi: Sketching with paper/pencil,
whiteboarding

4. sketches by Anthony Armendariz

5. When to use Lo-Fi
- Brainstorming stage
- To provide quick general guidance
internally
Bad for:
- Exact Details

6. Work broadly and iterate often
Tip:

7. Types of wireframes
- Low Fi: Sketching with paper/pencil
- Hi Fi: Using software and creating user-
flows and/or interactive prototypes

8. wireframe by Neway Lau

9. When to use Hi-Fi
- Good for clients, stakeholders
- Explains each part throughly
Bad for:
- Iteration
- Keeping things up to date

10. Wireframes
DO NOT
replace spec
documentation!

11. Keep the wireframes black/white/grey
and don’t use images.
Tip:

12. Where do you start?
Break everything into tasks

13. Mind Map

14. Example: How does a new
user create an account?
- welcome screen
- walkthrough
- Sign up/ FB
- email address/password
Requirements:

15. logo
email
password
FB
Sign up
Create Account
Welcome Walkthrough Sign Up Email/
Password
(Lo-Fi Example)

16. Dialog this creates:
- Can we make sign up faster?
- What are the key points for the
walkthrough?
- Do we need a welcome screen?

17. logo
email
password
FBSign up
Create Account

18. 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

19. Ideas are disposable, you can always
make more.
Prototyping Tip:

20. Paper & pencil + POP app - free!
Wireframe tools
Apple Keynote - free!
OmniGraffle - $100
Balsamiq - $89
Adobe Illustrator - starts $20/mo
Invision - free & Pro options
Sketch - $99
Gliffy - free & Pro options

21. “Sequential art”
If you want to learn
more about drawing and
telling stories with your
wireframes
ALSO
Scott McCloud,
"Understanding Comics"

22. Now let’s
Workshop!

23. Download POP app

24. The Task:
Wireframe of one flow of your choice
and use the POP app to create a prototype

25. Remember:
These don’t need to be perfect!

26. 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