wire framing presentation
DESCRIPTION
I used this deck for a presentation I did on wire framing, specifically as part of the mobile app development process.TRANSCRIPT
![Page 1: Wire Framing Presentation](https://reader033.vdocuments.us/reader033/viewer/2022051400/54c78bbc4a795993188b4570/html5/thumbnails/1.jpg)
Why...er...Frames?Or “How to draw like an 8 year old and look good doing it.”
Matt Galloway, ArchitactileSeptember 20, 2011
![Page 2: Wire Framing Presentation](https://reader033.vdocuments.us/reader033/viewer/2022051400/54c78bbc4a795993188b4570/html5/thumbnails/2.jpg)
Low-Fi Wireframe Hi-Fi Mockup
vs.
![Page 3: Wire Framing Presentation](https://reader033.vdocuments.us/reader033/viewer/2022051400/54c78bbc4a795993188b4570/html5/thumbnails/3.jpg)
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.
![Page 4: Wire Framing Presentation](https://reader033.vdocuments.us/reader033/viewer/2022051400/54c78bbc4a795993188b4570/html5/thumbnails/4.jpg)
MockupsPros *Cheap*FaST*Malleable*Ultra Hip*Function Focus*Anyone can do it
Cons*Ambiguous*Looks like an 8 year old drew it
WireframePros *Less Ambiguous*Aesthetic Design*Polished Looking
Cons*Time Consuming*Expensive*Hard to Change*Distracting*Requires artistic skill
![Page 5: Wire Framing Presentation](https://reader033.vdocuments.us/reader033/viewer/2022051400/54c78bbc4a795993188b4570/html5/thumbnails/5.jpg)
How to Wireframe: Tools
*Pencil & Eraser*Crayon*Dry Erase Board*Markers*Pens*Sidewalk Chalk*Software
![Page 6: Wire Framing Presentation](https://reader033.vdocuments.us/reader033/viewer/2022051400/54c78bbc4a795993188b4570/html5/thumbnails/6.jpg)
How to Wireframe: Technique
*Start with a simple outline of the screen (or page, which ever you prefer).
![Page 7: Wire Framing Presentation](https://reader033.vdocuments.us/reader033/viewer/2022051400/54c78bbc4a795993188b4570/html5/thumbnails/7.jpg)
How to Wireframe: Technique
*Draw major screen components, to scale-ish.
![Page 8: Wire Framing Presentation](https://reader033.vdocuments.us/reader033/viewer/2022051400/54c78bbc4a795993188b4570/html5/thumbnails/8.jpg)
How to Wireframe: Technique
*Minimize the use of color - it’s
distracts from function.
*General size, layout and function are more important
than detail.
![Page 9: Wire Framing Presentation](https://reader033.vdocuments.us/reader033/viewer/2022051400/54c78bbc4a795993188b4570/html5/thumbnails/9.jpg)
How to Wireframe: Technique
*Wireframe visualization is
more about function than concrete UI.
![Page 10: Wire Framing Presentation](https://reader033.vdocuments.us/reader033/viewer/2022051400/54c78bbc4a795993188b4570/html5/thumbnails/10.jpg)
How to Wireframe: Technique
*Use side-by side screens and arrows to show navigation.
![Page 11: Wire Framing Presentation](https://reader033.vdocuments.us/reader033/viewer/2022051400/54c78bbc4a795993188b4570/html5/thumbnails/11.jpg)
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.
![Page 12: Wire Framing Presentation](https://reader033.vdocuments.us/reader033/viewer/2022051400/54c78bbc4a795993188b4570/html5/thumbnails/12.jpg)
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!!!!
![Page 13: Wire Framing Presentation](https://reader033.vdocuments.us/reader033/viewer/2022051400/54c78bbc4a795993188b4570/html5/thumbnails/13.jpg)
Wireframe Examples
![Page 14: Wire Framing Presentation](https://reader033.vdocuments.us/reader033/viewer/2022051400/54c78bbc4a795993188b4570/html5/thumbnails/14.jpg)
![Page 15: Wire Framing Presentation](https://reader033.vdocuments.us/reader033/viewer/2022051400/54c78bbc4a795993188b4570/html5/thumbnails/15.jpg)
![Page 16: Wire Framing Presentation](https://reader033.vdocuments.us/reader033/viewer/2022051400/54c78bbc4a795993188b4570/html5/thumbnails/16.jpg)
![Page 17: Wire Framing Presentation](https://reader033.vdocuments.us/reader033/viewer/2022051400/54c78bbc4a795993188b4570/html5/thumbnails/17.jpg)
![Page 18: Wire Framing Presentation](https://reader033.vdocuments.us/reader033/viewer/2022051400/54c78bbc4a795993188b4570/html5/thumbnails/18.jpg)
![Page 19: Wire Framing Presentation](https://reader033.vdocuments.us/reader033/viewer/2022051400/54c78bbc4a795993188b4570/html5/thumbnails/19.jpg)
![Page 20: Wire Framing Presentation](https://reader033.vdocuments.us/reader033/viewer/2022051400/54c78bbc4a795993188b4570/html5/thumbnails/20.jpg)
![Page 21: Wire Framing Presentation](https://reader033.vdocuments.us/reader033/viewer/2022051400/54c78bbc4a795993188b4570/html5/thumbnails/21.jpg)
![Page 22: Wire Framing Presentation](https://reader033.vdocuments.us/reader033/viewer/2022051400/54c78bbc4a795993188b4570/html5/thumbnails/22.jpg)
All wireframe in this presentation were created
with Balsamiq Mockups.
![Page 23: Wire Framing Presentation](https://reader033.vdocuments.us/reader033/viewer/2022051400/54c78bbc4a795993188b4570/html5/thumbnails/23.jpg)
Questions?