Wireframes are an important step in the creative process & Design Thinking. It's one of the first times that your team actually sees the product come together. The presentation explores the basics of wireframes and how they fit into the process of Human-centered Design. This deck was part of workshop held by General Assembly on the Intro to Wireframing on 2-10-2015

1. INTRODUCTION TO BUILDING
WIREFRAMES
Priya Dandawate, Product Designer

2. Product Designer
Vera Beauty
3D Maps
Bing
Wireless gaming
peer-to-peer, Windows RT
Tap to connect
NFC across Windows, Phone & Device setup

3. AGENDAAGENDA
1 Wireframes · how to think about and work with them
2 Design a Wireframe · how to build wireframes (Photoshop & PowerPoint)
3 Design Thinking & Testing · how to use wireframes effectively

4. PART I
Wireframes

5. “Human-centered design (HCD), is an approach
that puts human needs, capabilities, and behavior
first, then designs to accommodate those needs,
capabilities, and ways of behaving.
Good design starts with an understanding of
psychology and technology.”
Don Norman
everyone interprets the world differently
HCD
The Design of Everyday Things

6. Berkeley · User Interface Design & Development
http://courses.ischool.berkeley.edu/i213/s07/lectures.html
Personas
Describe a person in terms of their goals in life,
capabilities, inclination & background.
Why? Makes hypothetical arguments less hypothetical
Q1: “What if this user wants to print this out?”
A1: “The user won’t want to print often.”
A2: “Emilee won’t want to print often.”
ex. social sally · tommy timberlake · normal norman

7. Wireframes
Learning iOS Design
“In the grand hierarchy of pictures of imaginary software,
wireframes exist somewhere between sketches and mockups.
Their purpose is to nail down the details that sketches leave out:
what exactly exists on each screen and how it all fits together –
the geography of an app.”

8. wireframe with a purpose
The Mental Sweep
goals, non-goals & scoping
Learning iOS Design
Identify tasks that need to be particularly fast or easy
Identify tasks that should be supported, though
ancillary to the main purpose
Types of data and how to manipulate it: view, add, edit,
& delete
Grouping and hierarchy
WHAT is the goal of the website/app/experience?
WHO is the audience?
WHAT is the website definitely NOT for?
WHO is NOT part of the audience?
WHEN, WHAT, and with WHOM to share?

9. wireframes are like a storyboard
ea ch fra me rep res ent s a s cene, find t he r i gh t mes s a g e t o co nv ey

10. “What then is this thing called Design?
It is planning:
the planning of everything as objectively as possible…
It is planning done without preconceived notions of style,
attempting only to give each thing
its logical structure and proper material,
and in consequence it’s logical form.”
Bruno Munari
Design as Art

11. A box is the
visual building block
of wireframes.
Box

12. Logo
Inbox(es)
& Folders
Search
Navigation
COMPOSE
Content
Web clip/advertisement

13. Let’s break it down.
Deconstruct the wireframe of Google
boxes only

15. Logo
Input search
Navigation
Actions
Search or Quick search
Inspire

16. http://www.powermockup.com/
Quick Search Button (normal)
Button Button (hovered)
Button Button (pressed)
Search
Navigation P1 P2 P3 Login
Search

17. search is part of a
much bigger journey
Help me
understand
…
What is a
…
How do I
…
Search
So lv ing p ro b lems
is fas t er , s i m pl e r , & mo re int uit iv e.

18. conceptual models are powerful
Workflows are dynamic non-linear user activity between wireframes

19. “Conceptual models are valuable in
providing understanding,
in predicting how things will behave,
and in figuring out what to do
when things do not go as planned.
A good conceptual model allows
us to predict the effects of our actions.”
work towards building a common understanding of the
navigation · workflow · terminology · functionality
The Design of Everyday Things · 7 myths about paper prototyping
“It is the conceptual model
that provides true
understanding.”

20. PART II
Design
a wireframe

21. Ready to try?
Deconstruct the wireframe of Medium.com
CEO Evan Williams
Co-founder of Twitter & Blogger

22. What is the goal of medium?
Medium connects people, stories
and ideas that matter to you
Your stories and ideas.
Effortlessly beautiful.

24. unity is the goal
Visual weight size & contrast
Similarity & Distinction
Proximity & Distance
Alignment the guide test
Visual Rhythm scale
Margins & Paddings
Balance
Understatement
Typography
Learning iOS Design
Principles of Layout

25. PART III
Design Thinking
& Testing

26. Make observations on the intended
target population, generate ideas,
produce prototypes and test them.
Repeat until satisfied.
The Design of Everyday Things
The Iterative Cycle of
Human-Centered Design

27. Learning iOS Design
Interpreting customer feedback

28. QA