Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

Intro to Wireframing, HCD & Design Thinking

•
•
Priya Dandawate
Priya Dandawate

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 of 29
INTRODUCTION TO BUILDING WIREFRAMES Priya Dandawate, Product Designer
Product Designer Vera Beauty 3D Maps Bing Wireless gaming peer-to-peer, Windows RT Tap to connect NFC across Windows, Phone & Device setup
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
PART I Wireframes
“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
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
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.”
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?
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
“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
A box is the visual building block of wireframes. Box
Logo Inbox(es) & Folders Search Navigation COMPOSE Content Web clip/advertisement
Let’s break it down. Deconstruct the wireframe of Google boxes only
Intro to Wireframing, HCD & Design Thinking
Logo Input search Navigation Actions Search or Quick search Inspire
http://www.powermockup.com/ Quick Search Button (normal) Button Button (hovered) Button Button (pressed) Search Navigation P1 P2 P3 Login Search
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.
conceptual models are powerful Workflows are dynamic non-linear user activity between wireframes
“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.”
PART II Design a wireframe
Ready to try? Deconstruct the wireframe of Medium.com CEO Evan Williams Co-founder of Twitter & Blogger
What is the goal of medium? Medium connects people, stories and ideas that matter to you Your stories and ideas. Effortlessly beautiful.
Intro to Wireframing, HCD & Design Thinking
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
PART III Design Thinking & Testing
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
Learning iOS Design Interpreting customer feedback
QA
Intro to Wireframing, HCD & Design Thinking

More Related Content

Intro to Wireframing, HCD & Design Thinking

  • 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
  • 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
  • 13. Let’s break it down. Deconstruct the wireframe of Google boxes only
  • 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.”
  • 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
  • 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