Intro to Interaction Design

1. Communicating Design III:
Wireframing
INTERACTION DESIGN | APR. 12, 2016
WEEK 11

2. What are Wireframes?

3. The culmination of the interaction designer’s ideas
Used by many others for different purposes
Defines the functionality of your product’s features
Don’t show interactivity very well
WIREFRAMES

4. NOBODY GETS EXCITED FOR
WIREFRAMES.

5. BAD EXAMPLES

6. The Anatomy of a Wireframe

7. SCALE
PROXIMITY
TEXT
FUNCTIONALITY

8. TITLE
PAGE SUMMARY
WIREFRAME
ANNOTATIONS

9. SETTINGSThis screen allows users to manage and configure
their app settings.
1 Tapping this takes the user back to the Home screen.
2 Switching this setting on enables audio notifications to be
played while the app is in use.
3 Switching this setting on enables video overlays to be
displayed whenever one is triggered.
4 Switching this setting on will save any photo taken in the app
to the user’s camera roll in addition to storing it in the app.
5 Switching this setting on will display the Email Address field
below [6]. Having this setting enabled means email reminders
will be sent to the user at the designated email address.
7 Tapping this will prompt the user if they are sure they want
to delete their account. Deleting an account is an
irreversible action that wipes all account information from
the app and sends the user back to the login screen.
6 Tapping this field will take the user to the Email Address
screen where they can type in their email.

11. DON’T FORGET SCREEN
PROPORTIONS.

12. IPHONE 5 / 6
IPHONE 4
IPAD
NEXUS 7
WEB

13. Popular Wireframing Software

15. Homework & Workshop

16. Using your wiresketches and any feedback from the
critique, begin wireframing your 4 key screens.
Wireframes must be created digitally. Be sure to
annotate them and give them titles and descriptions.
This is a graded team assignment, due next week.

17. 10:00
Clan A
10:15
FWABO
10:30
Mark Co
10:45
MJNL
11:00
RJMY
11:15
BEST