UX Sunday: Advanced Wireframing and Detailed Design

Embed Size (px)


This class was taught as part of UX Sunday, hosted by HourSchool.com: http://hourschool.com/courses/advanced-ux-wireframing-and-detailed-design-sf-in-san-francisco-ca The class covered how wireframing fits into the larger design process, and what tools can be used to create wireframes. We also explored the use of wireframing as a sketching mechanism and thinking tool for user interface and UX design.

Text of UX Sunday: Advanced Wireframing and Detailed Design

  • 1. ADVANCED UX:Wireframing andDetailed DesignHourSchool.com | UX Sundae SF | April 1, 2012
  • 2. Who am I?Christina Transodelightful.comVisual design > fd2s & service design >teaching > ac4d & interaction design > ???
  • 3. What well cover What is a wireframe? How does it fit into the design process? What does my wireframe need to be able to do? What should I use to make one? Now what?
  • 4. But firstWho are you? Vote with your feet Graphic Jam
  • 5. So what is a wireframe?Wireframes are a set of documents that showstructure, information hierarchy,functionality, and contentWireframes are ameans of documenting the features of aproduct, as well as the technical and businesslogic, with only a veneer of visual design. Theyare the blueprints of a product. Designing for Interaction, Dan Saffer
  • 6. Wireframes
  • 7. Wireframes
  • 8. Wireframes
  • 9. Wireframes
  • 10. So what is a wireframe?We often think of wires as deliverables.But wireframing is a process.They are a communication tool between theinteraction/UX designer and: Clients, funders, business people Other designers (visual, industrial, UX) Developers Copywriters His/herself
  • 11. The messy design processCentral Storys Process
  • 12. The messy design processfrog / Jon Kolko Process
  • 13. 0$1%0) The messy design process)$"%)070$%8%-$H)I.()