Lesson: Wireframing for Apps

What Is Wireframing?

Wireframes are like a blueprint for your app—used to convey an idea, without all the details.

They illustrate the user interface and represent:

• How Content is Laid Out

• Visual Structure of an App

• Types of Interactions

• The Flow of Your App

A wireframe is a schematic diagram of a page in your app

22

22

Why WireframeIt just makes everyone’s life easier!

Wireframes help you put your idea down on paper, by translating a concept into an actual product

They help bring together the different pieces of your app that often feel disjointed in order to:

•Understand or conceptualize how users will move from screen to screen.

•Give direction to your designer or developer

•Inform your information hierarchy

•Help you prioritize features

•Nail down your user interactions

IMAGE

COMBOBOXBLOCK OF TEXT

SEARCH SWITCH

There are also many templates with open source items that you can use if you search for ‘open source mobile wireframe templates.’ These provide you with a good place to start, you can adjust from there.

1

Wireframes are Made of ElementsHere are some commonly used wireframing elements you should know.

Putting it all togetherTaking apps from wireframes to high-fidelity design

22

Low-fidelity wireframe Medium-fidelity wireframe High-fidelity design

6

Annotated Wireframes

1. Complete the wireframe before you annotate

2. Add a moniker to the element

3. Create a key with your notes

4. Annotate top to bottom, left to right

• Nature of the notes depend on who is reading –tailor based on whether you are annotating wireframes for a designer, engineer, or investor

• Notes can include:• Description of what the element is• What happens when users interact with the

element • Why the element is placed where it is• Flexibility on shape/color/iconography

1

7

Tools for Wireframing

Easy to use

Quick

Basic

Harder to use

Time investment

Higher Fidelity

Pen & Paper Google Draw Balsamiq Mockups* Axure Omnigaffle Illustrator/ Photoshop

Free Can create interactive prototypes

*Free license for App Idea Awards participants

8

Thank you!If you have any further questions, please contact us at info@appideaawards.com