Wire Framing Presentation

790 views

Published on

I used this deck for a presentation I did on wire framing, specifically as part of the mobile app development process.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
790
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Wire Framing Presentation

  1. 1. Why...er...Frames? Or “How to draw like an 8 year old and look good doing it.” Matt Galloway, Architactile September 20, 2011
  2. 2. vs. Low-Fi Wireframe Hi-Fi Mockup
  3. 3. Disclaimer: “Wireframes” are a type of mockup, but when I say “mockup” I usually mean a hi-fi mockup, not a lo-fi wireframe mockup.
  4. 4. Wireframe Pros *Cheap *FaST *Malleable *Ultra Hip *Function Focus *Anyone can do it Cons *Ambiguous *Looks like an 8 year old drew it Mockups Pros *Less Ambiguous *Aesthetic Design *Polished Looking Cons *Time Consuming *Expensive *Hard to Change *Distracting *Requires artistic skill
  5. 5. How to Wireframe: Tools *Pencil & Eraser *Crayon *Dry Erase Board *Markers *Pens *Sidewalk Chalk *Software
  6. 6. How to Wireframe: Technique *Start with a simple outline of the screen (or page, which ever you prefer).
  7. 7. How to Wireframe: Technique *Draw major screen components, to scale-ish.
  8. 8. How to Wireframe: Technique *Minimize the use of color - it’s distracts from function. *General size, layout and function are more important than detail.
  9. 9. How to Wireframe: Technique *Wireframe visualization is more about function than concrete UI.
  10. 10. How to Wireframe: Technique *Use side-by side screens and arrows to show navigation.
  11. 11. How to Wireframe: Technique *Pretend to use the interface (like really press the pretend wireframe buttons.) *Ask functions questions of the UI. For example “How do I create a store?” (In this wireframe it’s certainly not obvious.) *Biggest problem with wireframes is missing functionality.
  12. 12. How to Use Wireframes *Validate your own design *Communicate design to client *Communicate design to developer * Perform usability testing on design - pre-coding! *Capture functional requirements *Use as basis for aesthetic design WIREFRAMES ARE NOT JUST FOR PROFESSIONALS!!!!
  13. 13. Wireframe Examples
  14. 14. All wireframe in this presentation were created with Balsamiq Mockups.
  15. 15. Questions?

×