Published on February 21, 2014
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!!!!
All wireframe in this presentation were created with Balsamiq Mockups.
Keynotopia "transforms your favorite presentation application into the best rapid prototyping tool for creating mobile, web and desktop app mockups".
I used this deck for a presentation I did on wire framing, specifically as part of the mobile app development process.
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, ...
Group Members Nabeel Ahmed Wire framing Functionalities and Feature Sitemap Photography Persona Design Scenario Storyboard Nabeel Khan Functionalities.
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 ...
content strategy and wire framing. Ashley Williams, NYCDA. ... Interactive prototype: Anything from a simple keynote presentation to simple HTML, CSS, ...
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 ...
MockFlow is an online wireframe tool for software and websites
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 ...