Week4 : Wireframes and Sketching

  • View

  • Download

Embed Size (px)

Text of Week4 : Wireframes and Sketching

  1. 1. UX Week 4 Sketching & Wireframes
  2. 2. Site Diagram & Sketching Lots of thumbnails Work on Site Flow
  3. 3. Site Diagram & Sketching Ignore style and look Use shades of grey; color will confuse If there is preexisting material(eg. Logo) attempt to make it gray-scale. Shows page hierarchy Its a macro view of the site functions and how elements relate to each other Shows main views of the product
  4. 4. https://www.flickr.com/photos/43868681@N02/4066039551/
  5. 5. Wireframe Shows Objectives What are the user goals Show an example use case Show the intent of the page Show the content organization and hierarchy
  6. 6. Vimeo http://www.flickr.com/photos/soxiam/2182204230
  7. 7. Creating the Wireframe What content is going to be on the view How is the content organized What is the most important information What is the goal of this page How does a user navigate Where is the user(context)
  8. 8. Audit the Wireframe The most important content is the first thing you notice Everything contributes to the section objective Navigation is easy to find and use Labels are consistent and easily understood by the user
  9. 9. Twitters Original Sketch https://www.flickr.com/photos/jackdorsey/18261 3360/
  10. 10. Getting Ideas http://useyourinterface.com/ Library of transitional interface and interaction design patterns http://archive.hi-res.net/ Old Flash Sites (Donnie Darko, Night at the Museum) http://wireframes.tumblr.com/
  11. 11. Ideation Work from a focused list to be solved Improv doctrine http://blogs.kqed.org/mindshift/2015/01/how-improv-can-open-up-the-mind-to-learning-in-the-classroom-and-beyond/
  12. 12. Tools
  13. 13. OmniGraffle Illustrator Fireworks InDesign Tools
  14. 14. Omnigraphle Quick templates Multiple developers making frameworks and symbols Easy annotation
  15. 15. Fireworks Quick steps to Photoshop Showing interactive elements Export to Web
  16. 16. Illustrator Symbols make working quick Clean lines Export to Photoshop layers
  17. 17. InDesign Text styles Master Templates Interaction modeling
  18. 18. Annotation Not all aspects of functionality can be displayed visually In the sketch phase, making notes will help you organize and remember your concepts Team communication Client buy-in. Dont rely on your clients imagination.
  19. 19. Annotation on Sketch
  20. 20. Formal Annotated Wireframe
  21. 21. Homework Wireframes are a critical starting point to your design. Wireframes help a designers workout complex interactions and cheaply identify challenges. There are holes in the interaction and UI. Keep the sketched loose. Draw wireframes for at least 5 sections of your project. Show the primary landing page for your project and 4 other pages, interaction or user feedback. Please use paper and pencil. Post images to canvas.
  22. 22. Homework Submit sketches Submit digital wireframes with annotation as PDF Use shades of grey, no color Convert logos to Black and White(if existing) Focus on Hierarchy and goals WHITESPACE is not WASTED SPACE: http://uxmyths.com/post/2059998441/myth-28- white-space-is-wasted-space