1 / 13

Wireframing Overview

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.

gaston
Download Presentation

Wireframing Overview

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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. Wireframing Overview

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

  4. Wireframing Responsive… Search Home Menu Company Name Page Title

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

  6. Wireframing • All you need with PowerPoint • A collection of icons Home Menu Search Company Name Page Title • 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

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

  8. Wireframing High Fidelity

  9. Wireframing Low Fidelity

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

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

  12. Resources & Tools

  13. Resources & Tools • 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/

More Related