Wire Framing Presentation
3 likes1,580 views
The document discusses the differences between low-fi wireframes and hi-fi mockups, highlighting the pros and cons of each. It provides practical techniques for creating effective wireframes, such as minimizing color usage and focusing on function over detail. Additionally, it emphasizes the importance of wireframes in design validation and communication with clients and developers.
Wire Framing Presentation
- 1. Why...er...Frames? Or “How to draw like an 8 year old and look good doing it.” Matt Galloway, Architactile September 20, 2011
- 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. 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. How to Wireframe: Tools *Pencil & Eraser *Crayon *Dry Erase Board *Markers *Pens *Sidewalk Chalk *Software
- 6. How to Wireframe: Technique *Start with a simple outline of the screen (or page, which ever you prefer).
- 7. How to Wireframe: Technique *Draw major screen components, to scale-ish.
- 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. How to Wireframe: Technique *Wireframe visualization is more about function than concrete UI.
- 10. How to Wireframe: Technique *Use side-by side screens and arrows to show navigation.
- 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. 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!!!!
- 22. All wireframe in this presentation were created with Balsamiq Mockups.
- 23. Questions?