Wireframes are low-fidelity representations of interfaces that show the structure and functionality of a design. They help solidify concepts by providing structure and are used by interaction designers, visual designers, copywriters, developers, and clients. The document discusses key elements of wireframes like scale, proximity, text, and functionality. It provides examples of wireframes and annotations describing their intended functionality. Finally, it assigns homework for students to create elevator pitches, task flows, and hand-sketched wiresketches for their final projects.

1. Communicating Design II:
Wiresketching
INTERACTION DESIGN | APR. 5, 2016
WEEK 10

2. WHAT’S YOUR
ELEVATOR PITCH?

3. We’re a social media platform that allows
users to post short-form messages on a
personal feed that others can follow.
Elevator Pitch 1

5. We’re an online bulletin board service that
inspires communities to curate and collect
items of personal interest.
Elevator Pitch 2

7. Our product is a cloud-based storage
platform that allows users to upload, store,
and distribute their files online.
Elevator Pitch 3

9. What are Wireframes?

10. WIREFRAMES ARE
BLUEPRINTS

14. The culmination of the interaction designer’s ideas
Helps solidify concepts by providing structure
Used by many others for different purposes
Don’t show interactivity very well
WIREFRAMES

15. WIREFRAMES ARE
USED BY MANY

16. VISUAL DESIGNERS
COPYWRITERS
DEVELOPERS
CLIENTS

17. Use wireframes to see what they need to design
Helps determine hierarchy and layout
Helps determine interactivity of screen elements
Informs the amount of visual production work needed
VISUAL DESIGNERS

18. Use wireframes to see what needs to be written
Determines how much copy is needed
Determines the type of copy that’s needed
COPYWRITERS

19. Use wireframes to scope what needs to be built
Shows them of how a feature should work
Informs them of how to handle various use cases
DEVELOPERS

20. Review wireframes before approving a direction
Informs them of how features will work
Lets them see the scope of work required for the project
CLIENTS

21. Elements of a Wireframe

22. SCALE
PROXIMITY
TEXT
FUNCTIONALITY

23. Headline Goes Here
Consectetur adipiscing elit. Phasellus tincidunt varius fringilla. Curabitur
tempor volutpat vehicula. Aenean faucibus, tellus sed ullamcorper ornare,
sem enim lacinia mauris, non imperdiet velit ligula eget tellus. Ut
consectetur molestie est a fringilla. Integer interdum, diam eget blandit
pretium, mauris justo bibendum nunc, id ornare augue quam eu ligula.
MAIN IMAGE/STORY
STORY 2
STORY 3
STORY 4
NAVIGATION
Profile Settings
Read More

24. 10 Things Designers Can’t Get Enough of
Whether it’s color palettes or the most up to date version of Adobe Creative
Suite, designers definitely have things they love and hate. This article
though will focus on the things that make them sing – the items in their
lives that make the world go round and the things they’ll gladly take a bullet
for... well, that might be taking it a bit too far but you know what I mean.
THINGS
DESIGNERS
LOVE
About Work Articles Location Contact Us
Profile Settings
Read More
ADOBE CS TIPS
PHOTOSHOP
FILTERS
HOW WE WORK
DESIGN
GUYS
SCALE

25. 10 Things Designers Can’t Get Enough of
Whether it’s color palettes or the most up to date version of Adobe Creative
Suite, designers definitely have things they love and hate. This article
though will focus on the things that make them sing – the items in their
lives that make the world go round and the things they’ll gladly take a bullet
for... well, that might be taking it a bit too far but you know what I mean.
THINGS
DESIGNERS
LOVE
About Work Articles Location Contact Us
Profile Settings
Read More
ADOBE CS TIPS
PHOTOSHOP
FILTERS
HOW WE WORK
DESIGN
GUYS
PROXIMITY

26. 10 Things Designers Can’t Get Enough of
Whether it’s color palettes or the most up to date version of Adobe Creative
Suite, designers definitely have things they love and hate. This article
though will focus on the things that make them sing – the items in their
lives that make the world go round and the things they’ll gladly take a bullet
for... well, that might be taking it a bit too far but you know what I mean.
THINGS
DESIGNERS
LOVE
About Work Articles Location Contact Us
Profile Settings
Read More
ADOBE CS TIPS
PHOTOSHOP
FILTERS
HOW WE WORK
DESIGN
GUYS
TEXT

27. 10 Things Designers Can’t Get Enough of
Whether it’s color palettes or the most up to date version of Adobe Creative
Suite, designers definitely have things they love and hate. This article
though will focus on the things that make them sing – the items in their
lives that make the world go round and the things they’ll gladly take a bullet
for... well, that might be taking it a bit too far but you know what I mean.
THINGS
DESIGNERS
LOVE
About Work Articles Location Contact Us
Profile Settings
Read More
ADOBE CS TIPS
PHOTOSHOP
FILTERS
HOW WE WORK
DESIGN
GUYS
FUNCTIONALITY

28. ANNOTATIONS DESCRIBE
FUNCTIONALITY

29. Find Items
Current Item Listing Page
Page Overview
This is the current Items list page on the WoW Community website. Users can
click on individual items to go to the Item Detail page, or they can directly add
items to any of their Wish Lists using the “Add To...” button.
Ideally, this page will display results relevant to the player’s character and level.
The logic would determine what their class, current level, and average item level
is, and display items within a range that’s acceptable for the character.
For example, if the character is a Level 85 Rogue with an average Item Level of
373, the items in the list should be useable by Rogues, equippable at level 85,
and be near or above the 373 item level.

30. Sketching Wireframes (Wiresketches)

37. Wiresketches Wireframes Visual Design

41. Homework & Workshop

42. In your teams:
1. Elevator Pitch
2. Create a task flow for your final project.
3. Create wiresketches of the screens that will be
shown in your final project. Sketch these screens
by hand so that you can reference them next week
when designing full wireframes.
This is a graded group assignment, due next week.
You will need to turn all of these in as one PDF.