Wire Framing Presentation

60 %
40 %
Information about Wire Framing Presentation

Published on February 21, 2014

Author: mattgalloway

Source: slideshare.net


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

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

vs. Low-Fi Wireframe Hi-Fi Mockup

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.

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

How to Wireframe: Tools *Pencil & Eraser *Crayon *Dry Erase Board *Markers *Pens *Sidewalk Chalk *Software

How to Wireframe: Technique *Start with a simple outline of the screen (or page, which ever you prefer).

How to Wireframe: Technique *Draw major screen components, to scale-ish.

How to Wireframe: Technique *Minimize the use of color - it’s distracts from function. *General size, layout and function are more important than detail.

How to Wireframe: Technique *Wireframe visualization is more about function than concrete UI.

How to Wireframe: Technique *Use side-by side screens and arrows to show navigation.

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.

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!!!!

Wireframe Examples

All wireframe in this presentation were created with Balsamiq Mockups.


Add a comment

Related presentations

Related pages

A Beginner’s Guide to Wireframing - webdesign.tutsplus.com

Keynotopia "transforms your favorite presentation application into the best rapid prototyping tool for creating mobile, web and desktop app mockups".
Read more

Wire Framing Presentation - Technology - documents.mx

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

Benefit Of Wire Frame In Design | InstantShift

Benefit Of Wire Frame In Design. Posted in Web Design May 9th, 2016 By Diana Ouma 1 Comment. ... The styles, Typography, etc., Wire-framing presentation, ...
Read more

Group Members Nabeel Ahmed Wire framing Functionalities ...

Group Members Nabeel Ahmed Wire framing Functionalities and Feature Sitemap Photography Persona Design Scenario Storyboard Nabeel Khan Functionalities.
Read more

MDR Wed site wire framing by Damian McSweeney on Prezi

Invited audience members will follow you as you navigate and present; People invited to a presentation do not need a Prezi account; This link expires 10 ...
Read more

content strategy and wire framing: Slides

content strategy and wire framing. Ashley Williams, NYCDA. ... Interactive prototype: Anything from a simple keynote presentation to simple HTML, CSS, ...
Read more

10 Free Wireframing Tools for Designers - Mashable

10 Free Wireframing Tools for Designers. 7.2k. Shares. Share. Tweet. Share. What's This? By Grace Smith 2010-07-15 15:40:18 UTC. This series is ...
Read more

MockFlow - Online Wireframe Tool and Design Cloud

MockFlow is an online wireframe tool for software and websites
Read more

Wire-frame model - Wikipedia

A wire-frame model is a visual presentation of a 3-dimensional (3D) or physical object used in 3D computer graphics. It is created by specifying each edge ...
Read more