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
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
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
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.โ
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