wireframing 101 essential question: can we possibly build an app? l13.pdf · 2017-03-15 · app...

IT: Wire Framing 101

Pathways to Prosperity Network 1

WIREFRAMING 101

Essential Question: Can We Possibly Build an App?

Learning Targets:

Students will:

Use wireframing to create a design for an app for mobile devices.

Collaborate to make decisions about user flow.

Lesson Overview

This lesson introduces the storyboarding of an app, also known as wireframing. The lesson

begins by looking at comic strips as an introduction to storyboarding. Next, YPs will practice

wireframing using an existing app. The exploration of ideas, content, and flow of the app itself is

then completed through an exercise called paper prototyping.



Lesson Agenda

Opening o How Does This Story Go? (5 min)

Work Time

o Storyboarding & Designing Wireframes (45 min)

Closure o Sum It Up (5 min)

Materials

Young Professional student packet

Projector and speakers

Storyboarding videos to project

5” x 7” index cards (as many as each group needs)

Status of the Class Progress Form

Mobile device/tablet and cable to connect it to the projector for Wireframing 101:

Modeling activity

FACILITATION NOTES

App Inventor Feature Glossary: This glossary will help to translate basic app features to the

programming vocabulary that appears on the App Inventor Tutorial site. The YPs can use this to

narrow down the correct tutorial that will help them program their app feature. Note: Tutorials

appear in writing on the App Inventor site. To find the video tutorials, have the YPs search for

the tutorial on YouTube. For more information on coding features, see:

http://appinventor.mit.edu/explore/resources/beginner-app-inventor-concept-cards.html.

Media: The engaging clip of “Storyboarding for People Who Can’t Draw: Like Me!” shows

exemplars of amazing storyboards, highlights their use in the movie industry, and emphasizes

that one does not have to be an artist to create the board. Use the first 2:45 minutes:

https://www.youtube.com/watch?v=ux_Em1lVsjI. Pause throughout as exemplars are displayed,

and ask students to predict what story is being told.

Wireframing 101 – Modeling: To model the wireframing process, you will select a well-known

app to project and wireframe the user’s experience as they navigate various features. The app

chosen for this lesson is Pokémon, Go! Be sure to download the app in advance on your device

and create an account so it opens directly to the home page. If deciding to use a different app,

be sure to select a familiar app that students use often so they can reference background

http://appinventor.mit.edu/explore/resources/beginner-app-inventor-concept-cards.html

https://www.youtube.com/watch?v=ux_Em1lVsjI



knowledge as they develop new skills in wireframing. Ensure the app is appropriate for your

students and maintains privacy and school policies (i.e. no social media).

Status of the Class: A Status of the Class chart is used at the end of the work time to gain a

sense of the progress of each group in the wireframing process. This protocol is adapted from

the writer’s workshop process and functions to help teachers keep track of student progress on

a project. It also helps students be aware of where they are and where they are going. It also

provides accountability if used before and after a class session.

Extensions: At this point in the unit, consider providing additional coding practice for students,

if time is available in the class schedule.

Presentation Slidedeck: The final project will follow an “Ignite” format, which is designed to tell

a story through photographs and words. Ignite presentations are designed to be 5 minutes long,

with 20 slides that automatically advance every 15 seconds (for an example, see:

http://www.ignitetalks.io/videos/vaccinate). In the remaining lessons, the exit tickets will be

content that students can add to their slidedecks, with optional usage in the final class period.

IN ADVANCE

Preview the storyboarding video: https://www.youtube.com/watch?v=ux_Em1lVsjI.

Select/download the app you plan to use for the Wireframing 101: Modeling activity.

Set up the Status of the Class Progress Form on large chart paper with headers for

students to fill in following the wireframing activity.

Vocabulary

Content Tier II

wireframing, storyboarding, prototype,

features, troubleshoot

creative, artist, linear, outcomes

http://www.ignitetalks.io/videos/vaccinate)



Opening (5 min)

How does this story go?

Today we’re going to think about how storytelling relates to coding. When you write stories,

read, or watch television, you probably understand that strong stories contain a beginning,

middle, and end. They can be long, or quite short. Comic strips are one type of storytelling that

can illustrate short stories quickly.

1. Project the <Comic Strip Activity>.

2. Explain that this comic strip is out of order. Ask “What do you think is happening in this

story?”

3. Invite YPs to discuss their responses with nearby classmates.

4. Ask YPs to write down or re-draw the comic in the correct order.

5. Project the re-organized strip <Comic Strip Activity 2>. Have students compare their

ideas with the screen.

6. Reflect on the activity. Ask “Were you able to put the strip back in the correct order?

What visual cues helped you make that decision? If you were to add another square,

what would happen?” Solicit responses from the group.

Work Time (50 min)

Storyboarding & Designing Wireframes (30 min)

Being able to understand the order of events is critical to app design. Before struggling through

the actual coding of the features, many programmers “storyboard” the pages of the app on

paper. In a storyboard, a programmer draws a rough sketch of the app on paper to show the

design and function of each feature; by working out our ideas on paper first, we are ensuring

that we’ll know exactly what we want to create when it’s time to start coding. Storyboarding is

used in many fields to help visualize the final product, particularly in movie-making, theater, and

even comic books. Let’s look at how storyboarding is used in the movie industry. Our process

will mimic some of the outcomes of storyboarding, and in the programming world is known as

wireframing.



Using sticks

of fate, or

equity sticks,

is a strategy

for cold calling

on students in

a way that

feels

authentically

random

(compared to

teacher

selection).

The instructor

has a jar full

of Popsicle

sticks, with

each stick

bearing the

name or seat

number of a

student in the

class. When

using sticks of

fate, the

instructor

simply pulls a

stick from the

jar and calls

on the student

listed on the

stick.

1. Distribute the <Storyboarding Note-catcher> to students.

2. Tell students to catch notes to the questions as they view the video clips.

3. Project the <Storyboarding for People Who Can’t Draw: Like Me!> video:

https://www.youtube.com/watch?v=ux_Em1lVsjI. (You can stop at 2:40.)

4. Pause the video when exemplars are shown to highlight impressive storyboarding. Ask:

What do you think is happening in this scene?

5. Invite students to turn to a partner and share the answers to the questions on the note-

catcher.

6. Use <equity sticks> to call on students to provide answers to the questions. Listen for:

Storyboards give you a clear plan. They give you the ability to be more flexible when

you’re actually making the final product. You don’t have to be a good artist, because

you know what you have drawn. You want to do a storyboard for an app because you

need to have a clear plan for the screens and how they interact.

We have already experimented with wireframing in a previous lesson, which differs slightly

from storyboarding. In movies, for example, the final product is linear—the story occurs from

one scene to the next. In an app, the final product is more like a “choose your own

adventure”—the users choose how they will move through an app’s pages. Today we are

going to use wireframing to mimic this kind of use. The sketches will represent what users

would see on each screen. They will show the content of the app and the flow.

Wireframing 101: Modeling

Before wireframing our own apps, let’s think back to the screenshots we observed for the

“Zombies, Run!” app (project). What choices did the user have at each page? (Listen for:

One page allowed the user to select the story mission they wanted to complete. The other

page allowed the runner to see the path they completed on a map with the pace of each

kilometer.)

Now, let’s look at another popular app that has helped people get off the couch and exercise:

Pokémon, Go! Using this app, we will navigate and wireframe some of its features.

1. Distribute several 5” x 7” index cards to each student.

2. Project the home screen of the app, Pokémon, Go! Model drawing a design of the

home page on the whiteboard.

3. Have students draw their own interpretations of the home page on their index cards.

https://www.youtube.com/watch?v=ux_Em1lVsjI



4. Ask: What is the user’s experience on this page? Is this reflected in your wireframe

drawing?

5. If a Pokémon appears, click on it. On the whiteboard, model wireframing what appears

on the screen, and have the YPs draw their own interpretations on their index cards.

6. From the main menu, select 2-3 additional pages, and repeat the process.

7. Check for understanding: Do the images you drew describe the user’s experience?

How? Answers will vary depending on the pages selected for the activity. In the YPs’

responses, be sure connections are made between their drawings and the user’s

experiences.

Wireframing Your App

Now that we’ve practiced the skill, you will begin to wireframe pages for your own apps,

starting with storyboards. Your storyboard will outline the user experience, before you begin

the actual digital coding process. Like in movies, you want to troubleshoot, or solve

problems, before you invest time and money into the coding of your app. Today, your design

team will draft the first three working pages of your app.

1. Distribute 5” x 7” index cards to each design team.

2. Invite students to begin working on the wireframe of their app in their Design Teams. As

each team member contributes their ideas, remind them to also serve one of the

following roles (project roles with descriptions):

o Taskmaster: Ensures the team remains on task at all times and focuses on the

user experience.

o Organizer: Helps the team organize their thoughts into a logical storyboard that

makes sense to the user.

o Artist: Takes notes throughout the brainstorm process and draws a draft of the

storyboard with input from the team.

o Communicator: Ensures the draft storyboard is ready for presentation and

shares the storyboard with the class.

3. Circulate and provide assistance to teams as needed.

Throughout the

wireframing

process,

encourage

teams to

maintain an

exploratory

mindset,

generating as

many ideas as

possible and

keeping an open

mind while

respecting all

ideas.



Closure (5-10 min)

Sum it up (5-10 min)

1. Distribute the <Presentation Slidedeck>. Ask YPs to locate the page on

Wireframes.

2. In teams, ask groups to identify three characteristics about their apps that will require

coding. Have each YP include this in their note-catcher.



Name:

Date:

WIREFRAMING 101: Can We Possibly Build an App?

Today’s Learning Objectives:

I can:

Use wireframing to create a design for a mobile app

Collaborate to make decisions about user flow

This lesson introduces the storyboarding of an app, also known as wireframing. The lesson

begins by looking at comic strips as an introduction to storyboarding. Next, YPs will practice

wireframing using an existing app. The exploration of ideas, content, and flow of the app itself is

then completed through an exercise called paper prototyping.

Today’s Activities:

How Does This Story Go?

Storyboarding & Designing Wireframes

Sum It Up



App Inventor Feature Glossary

I want my app to: As a developer, this also

might be known as:

Notes

Have an animation

Have characters or

items that I can

move on-screen

Characters and items

(really, any

object/item/person that can

be programmed) are called

sprites. You’ll need to

understand how to program

a sprite to begin.

Do something when

I shake or move my

phone

A phone’s accelerometer

can measure movement,

speed, and more

(depending on model). You

can also use this

information to program

sensors! You can also

program sprites to move

when you tilt your phone.

Send a message to

a friend

Using short message

services, or SMS, allows

you to send text messages

from your app to other

devices.

Know where I’m at To make app that uses your

location, you’ll need to use

the LocationSensor.

Take pictures In-app photos require use of

a phone’s camera.




might be known as:

Notes

Have a timer To create an app that

measures time (like a speed

race) or has a countdown

clock, you’ll need to use the

Clock component and

Timers.

Play music or have

sound effects

You’ll want to be adding

sound.

Move a sprite

when a button is

pushed

Look at Movement with

Buttons.

Let me draw

pictures with my

finger

Like in real life, artists (and

programmers) can draw

using the Canvas tool.

Say words or

phrases randomly

You’ll want to program a

list.

Have a menu of

options, or a list of

words or pictures to

choose from

Programming buttons can

help users select from a

“menu” of options.

ListPicker is also used to

program using a list of

options.

Type a word or

phrase and have

the phone read it

aloud

When a phone can read

what you’re typing, that’s

often referred to as text to

speech.




might be known as:

Notes

Have a list of

places to help

people find a place

to go

Programming buttons can

help users select from a

“menu” of options.



options.

If your app has

more than one

page of content, or

makes a user move

to other pages

If your app has more than

one screen, you’ll need to

look at how to program

multiple screens.

Click on a phone

number to call

To use the PhoneCall

command, try looking at the

PicCall tutorial.

Search for certain

words or phrases in

the app

The ListPicker button can

be used to create a search

feature within your app.

Sends items to a

personal calendar

If you have a Google

Calendar, you can look at

tutorials that discuss using

Google Calendar’s

Application Program

Interface (API).

Sort places based

on proximity to you

or to a certain zip

code

Researching how to use the

location sensor and

activity starter can help

you use global positioning

systems (GPS) in your app.



Storyboarding Note-catcher

Directions: Answer the following questions as you watch the two videos about the

storyboarding process.

1. How are storyboards used?

2. Why don’t you have to be good at drawing to create storyboards?

3. Why would we use storyboarding to map out an app?



Design Team Roles

Taskmaster: Ensures the team remains on task

at all times and focuses on the need-idea chosen

to prototype.

Organizer: Helps the team organize their

thoughts into a logical story that makes sense for

the app description.

Scribe: Takes notes throughout the brainstorm

process and scribes the draft paragraph of the

app description with input from the team.

Communicator: Ensures the draft description is

ready for presentation and communicates the app

description to the class.



Facilitator Documents:

App Inventor Feature Glossary- With Notes

Level of

Difficulty


might be known as:

Notes

*** Have an animation

Have characters or

items that I can

move on-screen

Characters and items

(really, any

object/item/person that

can be programmed) are

called sprites. You’ll need

to understand how to

program a sprite to begin.

Really complicated tutorial

(ball bounce), but it does

exist (with video).

Simple movement can be

found on concept cards.

* Do something

when I shake or

move my phone

A phone’s accelerometer

can measure movement,

speed, and more

(depending on model).

You can also use this

information to program

sensors! You can also

program sprites to move

when you tilt your phone.

Easier to program, and a

tutorial exists:

http://appinventor.mit.edu/expl

ore/sites/all/files/hourofcode/T

alkToMePart2.pdf

Testing would be

problematic due to software

constraints.

Also concept card item.

** Send a message

to a friend

Using short message

services, or SMS, allows

you to send text

messages from your app

to other devices.

Tutorial exists, but looks

challenging.

*** Know where I’m at To make app that uses

your location, you’ll need

to use the

LocationSensor.

Advanced.

http://appinventor.mit.edu/explore/sites/all/files/hourofcode/TalkToMePart2.pdf





** Take pictures In-app photos require use

of a phone’s camera.

Needs phone to test.

** Have a timer To create an app that

measures time (like a

speed race) or has a

countdown clock, you’ll

need to use the Clock

component and Timers.

Surprisingly difficult, but

the tutorial is listed under

“basic” (Mole Mash).

Start/stop timer is a concept

card item.

* Play music or have

sound effects

You’ll want to be adding

sound.

Concept card item.

* Move a sprite

when a button is

pushed

Look at Movement with

Buttons.

Concept card item.

* Let me draw

pictures with my

finger

Like in real life, artists

(and programmers) can

draw using the Canvas

tool.

There’s a ‘digital doodle’

tutorial that is short, but

complicated looking. Video

component as well.

Concept card item.

* Say words or

phrases randomly

You’ll want to program a

list.

The magic 8 ball tutorial

eventually shows how to

make a list (#3).

* Have a menu of

options, or a list of

words or pictures

to choose from

Programming buttons

can help users select from

a “menu” of options.



options.

Tutorials exist. Unsure level

of difficulty, but looks okay.

http://appinventor.pevest.com/

?p=107

http://appinventor.pevest.com/?p=107

http://appinventor.pevest.com/?p=107



** Type a word or

phrase and have

the phone read it

aloud

When a phone can read

what you’re typing, that’s

often referred to as text to

speech.

There’s a tutorial for this

(the first one), however,

testing it would be

problematic due to software

constraints.

Speech recognition is a

concept card item.

* Have a list of

places to help

people find a place

to go

Programming buttons

can help users select from

a “menu” of options.



options.

Buttons are in various

beginning tutorials.

* If your app has

more than one

page of content, or

makes a user

move to other

pages

If your app has more than

one screen, you’ll need to

look at how to program

multiple screens.

Concept card item.

** Click on a phone

number to call

To use the PhoneCall

command, try looking at

the PicCall tutorial.

Tutorial exists, but testing it

will be a problem.

*** Search for certain

words or phrases

in the app

The ListPicker button can

be used to create a

search feature within your

app.

Tutorial exists, but

complicated.



*** Sends items to a

personal calendar

If you have a Google

Calendar, you can look at

tutorials that discuss using

Google Calendar’s

Application Program

Interface (API).

Advanced.

*** Sort places based

on proximity to you

or to a certain zip

code

Researching how to use

the location sensor and

activity starter can help

you use global positioning

systems (GPS) in your

app.

Advanced.



Zombies, Run! Screenshot 1



Zombies, Run! Screenshot 2



Sample Storyboarding 101: Modeling Screenshots



Status of the Class Progress Form

Team

Name

What has your team

accomplished today?

To complete your work, where

does your team need to focus?

Does your team need

a conference?



Presentation Template



FACILITATOR DOCUMENTS: Comic Strip to project (Out of Order)

Comic Strip to project (Correct Order)