Quick overview of Wireframing and the use of • PowerPoint text boxes • Balsamiq icons • Andreas Wulf’s free Windows 8 icons • Christian Naths’ free Redacted font set

1. BAPDD2013
This presentation is an introduction to wireframing and
was first presented at the BAPDD 2013 in Columbus,
Ohio on September, 13.
Since many people do not have the Redacted font set
installed on their computer, I have replaced the actual
font with pictures of the font.
This presentation will automatically advance, although
there was a bit of elaboration during the meeting.
Greg Swearingen
gregs@gergman.com

2. BAPDD2013
Wireframing
Overview

3. Wireframing
BAPDD2013
What is wireframing?
Home
Menu
Search
Company Name
Page Title

4. Wireframing
Responsive…
BAPDD2013

5. Wireframing
• A quick sketch
• A visual
representation
of the written
requirements
BAPDD2013
Home
Menu
Search
Company Name
Page Title

6. Wireframing
All you need with
PowerPoint
•A collection of icons
For this wireframe
•PowerPoint text boxes
•Balsamiq icons
•Andreas Wulf’s free
Windows 8 icons
•Christian Naths’ free
Redacted font set
•Paint.Net free graphics
tool
BAPDD2013
Home
Menu
Search
Company Name
Page Title

7. Wireframing
Considerations
•High Fidelity vs. Low Fidelity
BAPDD2013

8. Wireframing
High Fidelity
BAPDD2013

9. Wireframing
Low Fidelity
BAPDD2013

10. Wireframing
Considerations
•High Fidelity vs. Low Fidelity
•Your Team
•ROI
BAPDD2013

11. Wireframing
PowerPoint
•Easy to use
PowerStory adds to PowerPoint
•Use case story boarding
Balsmiq
•Dynamic icons
BAPDD2013

12. BAPDD2013
Resources & Tools

13. Resources &
Tools
BAPDD2013
• Wireframes Magazine -- wireframes.linowski.ca
• Smashing Magazine -- www.smashingmagazine.com
• Christian Naths’ free Redacted font -https://github.com/christiannaths/Redacted-Font -Redacted Font
• PowerStory -- http://power-story.com
• Balsamiq -- http://www.balsamiq.com
• Andreas Wulf’s free icons for PowerPoint --
http://designmodo.com/windows-8-wireframe/