Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Intro to Wireframing, HCD & Design Thinking

10,515 views

Published on

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

Published in: Design, Technology
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • It looks like one of the last slides is missing links to the Resoures used while curating the content. Here you go, Resources include: http://en.wikipedia.org/wiki/The_Design_of_Everyday_Things http://www.amazon.com/Learning-iOS-Design-Programmers-Designers/dp/0321887492 http://courses.ischool.berkeley.edu/i213/s07/lectures.html http://www.amazon.com/Design-As-Art-Bruno-Munari/dp/0141035811 http://www.slideshare.net/folletto/introduction-to-building-wireframes
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hey designers! I wanted to pass along a short video clip that ties well with the presentation. It provides some supplemental context to the slides, hope you find it useful! https://www.youtube.com/watch?v=S8p2BZOc0-8
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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
  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
  14. Logo Input search Navigation Actions Search or Quick search Inspire
  15. http://www.powermockup.com/ Quick Search Button (normal) Button Button (hovered) Button Button (pressed) Search Navigation P1 P2 P3 Login Search
  16. 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.
  17. conceptual models are powerful Workflows are dynamic non-linear user activity between wireframes
  18. “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.”
  19. PART II Design a wireframe
  20. Ready to try? Deconstruct the wireframe of Medium.com CEO Evan Williams Co-founder of Twitter & Blogger
  21. What is the goal of medium? Medium connects people, stories and ideas that matter to you Your stories and ideas. Effortlessly beautiful.
  22. 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
  23. PART III Design Thinking & Testing
  24. 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
  25. Learning iOS Design Interpreting customer feedback
  26. QA

×