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.

Questions?

Add a comment

User name:

Comment:

Related presentations

Related pages

Wire Framing Presentation, SlideSearchEngine.com

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

10 Free Wireframing Tools for Designers - Mashable

MockFlow - Online Wireframe Tool and Design Cloud

MockFlow is an online wireframe tool for software and websitesRead more

SlideSearchEngine.com is a specialised online agregator and search engine! We collect presentations from publicly available sources.
These presentations are classified and categorized, so you will always find everything clearly laid out and in context.
We are staying up to date! We are looking for more relevant data on social networks.