wireframing an overview

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 Swearingengregs@gergman.com

BAPDD2013

Wireframing Overview

BAPDD2013

Page Title

What is wireframing?

Company Name

Home Menu Search

Wireframing

BAPDD2013WireframingResponsive…

BAPDD2013Wireframing

• A quick sketch• A visual

representation of the written requirements

SearchHome Menu

Company NamePage Title

BAPDD2013WireframingAll you need with PowerPoint •A collection of iconsFor 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

SearchHome Menu

Company NamePage Title

BAPDD2013Wireframing

Considerations•High Fidelity vs. Low Fidelity

BAPDD2013

High Fidelity

Wireframing

BAPDD2013Wireframing

Low Fidelity

BAPDD2013Wireframing

Considerations•High Fidelity vs. Low Fidelity•Your Team•ROI

BAPDD2013Wireframing

PowerStory adds to PowerPoint•Use case story boarding

Balsmiq•Dynamic icons

PowerPoint •Easy to use

BAPDD2013

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/

Resources & Tools