23
Why...er...Frames? Or “How to draw like an 8 year old and look good doing it.” Matt Galloway, Architactile September 20, 2011

Wire Framing Presentation

Embed Size (px)

DESCRIPTION

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

Citation preview

Page 1: Wire Framing Presentation

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

Low-Fi Wireframe Hi-Fi Mockup

vs.

Page 3: Wire Framing Presentation

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

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

How to Wireframe: Tools

*Pencil & Eraser*Crayon*Dry Erase Board*Markers*Pens*Sidewalk Chalk*Software

Page 6: Wire Framing Presentation

How to Wireframe: Technique

*Start with a simple outline of the screen (or page, which ever you prefer).

Page 7: Wire Framing Presentation

How to Wireframe: Technique

*Draw major screen components, to scale-ish.

Page 8: Wire Framing Presentation

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

How to Wireframe: Technique

*Wireframe visualization is

more about function than concrete UI.

Page 10: Wire Framing Presentation

How to Wireframe: Technique

*Use side-by side screens and arrows to show navigation.

Page 11: Wire Framing Presentation

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

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

Wireframe Examples

Page 14: Wire Framing Presentation
Page 15: Wire Framing Presentation
Page 16: Wire Framing Presentation
Page 17: Wire Framing Presentation
Page 18: Wire Framing Presentation
Page 19: Wire Framing Presentation
Page 20: Wire Framing Presentation
Page 21: Wire Framing Presentation
Page 22: Wire Framing Presentation

All wireframe in this presentation were created

with Balsamiq Mockups.

Page 23: Wire Framing Presentation

Questions?