Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

UX Foundations : Sketching UI

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Prochain SlideShare
Let's Sketch Tech [Feb 2019]
Let's Sketch Tech [Feb 2019]
Chargement dans…3
×

Consultez-les par la suite

1 sur 64 Publicité

Plus De Contenu Connexe

Similaire à UX Foundations : Sketching UI (20)

Plus par Kate Rutter (20)

Publicité

Plus récents (20)

UX Foundations : Sketching UI

  1. 1. Sketching UI Workshop • 2020 • @katerutter Sketching UI Workshop A tasty menu of basic concepts in interaction design & UX 2020 @katerutter Concept Cafe
  2. 2. Sketching UI Workshop • 2020 • @katerutter why sketch UI? ‣Generate a lot of new ideas quickly ‣Figure out how an idea works ‣Make optimal choices from many ideas ‣Collaborate with others ‣Communicate ideas to others ‣Make informed decisions & move forward
  3. 3. Sketching UI Workshop • 2020 • @katerutter thinking communicating sketch via @ugleah
  4. 4. Sketching UI Workshop • 2020 • @katerutter See Understand Share Can you see it? Can you understand it? sketch via @glaves It’s not about being “bad” or “good”, it’s about...
  5. 5. Sketching UI Workshop • 2020 • @katerutter Fidelity & feedback rough polished general/directional detailed fidelity feedback the type of visuals you show effects the kind of feedback you get.
  6. 6. Sketching UI Workshop • 2020 • @katerutter “ The more human the picture, the more human the response. ~ Dan Roam
  7. 7. Sketching UI Workshop • 2020 • @katerutter WARM-UPS
  8. 8. Sketching UI Workshop • 2020 • @katerutter Tools } Our kit
  9. 9. Sketching UI Workshop • 2020 • @katerutter 30 seconds
  10. 10. Sketching UI Workshop • 2020 • @katerutter Rapid practice Creating focus Key screen Wire flows Sketching Screens
  11. 11. Sketching UI Workshop • 2020 • @katerutter Screens} Rapid practice
  12. 12. Sketching UI Workshop • 2020 • @katerutter Sketch a quick thumbnail of each screen. 20 seconds Rapid Rounds! 2 sheets, divided in 4 Screens } Mobile UI
  13. 13. Sketching UI Workshop • 2020 • @katerutter screenshot via Workshop Cafe
  14. 14. Sketching UI Workshop • 2020 • @katerutter screenshot via Instacart
  15. 15. Sketching UI Workshop • 2020 • @katerutter screenshot viaYelp
  16. 16. Sketching UI Workshop • 2020 • @katerutter screenshot via Moodle
  17. 17. Sketching UI Workshop • 2020 • @katerutter screenshot via PS Express
  18. 18. Sketching UI Workshop • 2020 • @katerutter screenshot via Meetup
  19. 19. Sketching UI Workshop • 2020 • @katerutter screenshot via Southwest
  20. 20. Sketching UI Workshop • 2020 • @katerutter screenshot via Instagram
  21. 21. Sketching UI Workshop • 2020 • @katerutter BREATHE….
  22. 22. Sketching UI Workshop • 2020 • @katerutter Screens } Web UI Sketch a quick thumbnail of each screen. 20 seconds Rapid Rounds! 2 sheets, divided in 4 Grab another
 2 sheets…
  23. 23. Sketching UI Workshop • 2020 • @katerutter screenshots via BackerKit
  24. 24. Sketching UI Workshop • 2020 • @katerutter screenshot via Google Slides
  25. 25. Sketching UI Workshop • 2020 • @katerutter screenshots via Slack
  26. 26. Sketching UI Workshop • 2020 • @katerutter screenshot via lyft.com
  27. 27. Sketching UI Workshop • 2020 • @katerutter screenshots via @twitter
  28. 28. Sketching UI Workshop • 2020 • @katerutter screenshots via Trello
  29. 29. Sketching UI Workshop • 2020 • @katerutter screenshot via alibaba.com
  30. 30. Sketching UI Workshop • 2020 • @katerutter screenshots via @cars.com
  31. 31. Sketching UI Workshop • 2020 • @katerutter WHEW! Shake it out…
  32. 32. Sketching UI Workshop • 2020 • @katerutter Screens} Creating focus
  33. 33. Sketching UI Workshop • 2020 • @katerutter Yellow marker or pencil Fat Regular Small Gray marker or pencil Sharpie markers Start here More attention Depth:
 Push back Look at me! highlighter or yellow pencil shading lines or grey pencil Screens } Creating focus
  34. 34. Sketching UI Workshop • 2020 • @katerutter DEMO
  35. 35. Sketching UI Workshop • 2020 • @katerutter ACTIVITY ONE: Via Rachel Glaves http://www.rachelglaves.com/ Screens } Creating focus
  36. 36. Sketching UI Workshop • 2020 • @katerutter Screens } Creating focus
  37. 37. Sketching UI Workshop • 2020 • @katerutter Screens} Key screen
  38. 38. Sketching UI Workshop • 2020 • @katerutter Activity: 1. Basic idea 2. Line weight 3. Shading 4. Highlighting 5. Labels 6. Person sketch via @adaptivepath Screens } Key screen
  39. 39. Sketching UI Workshop • 2020 • @katerutter sketch via @adaptivepath Prep: Clean sheet of paper Draw a rectangle Follow along with the example… Screens } Key screen
  40. 40. Sketching UI Workshop • 2020 • @katerutter sketch via @adaptivepath 1. Capture the basic idea Screens } Key screen
  41. 41. Sketching UI Workshop • 2020 • @katerutter sketch via @adaptivepath 2.Add line weight for contrast Screens } Key screen
  42. 42. Sketching UI Workshop • 2020 • @katerutter sketch via @adaptivepath 3.Add shading to push back Screens } Key screen
  43. 43. Sketching UI Workshop • 2020 • @katerutter highlights sketch via @adaptivepath 4.Add highlights to draw attention Screens } Key screen
  44. 44. Sketching UI Workshop • 2020 • @katerutter sketch via @adaptivepath 5.Add labels to show more info Screens } Key screen
  45. 45. Sketching UI Workshop • 2020 • @katerutter sketch via @adaptivepath 6.Keep the person in the picture Add your customer in the sketch:
 
 What are they feeling? 
 What are they doing?
 Where are they? Looks like Jordan fits my criteria… I’ll email him Screens } Key screen
  46. 46. Sketching UI Workshop • 2020 • @katerutter Screens } Common Elements Header Tab User Picture Photo Video Filler text Pop-up Module Arrows Larger ones can communicate weight, or act as labels Side-scrolling Module Drop Shadows Communicate depth and bring attention to callouts or popup boxes Calendar Page curl Mouse Cursor Quietly indicates a rollover state Callouts Can show alerts, help, guidance or sketch annotations Via Rachel Glaves & Adaptive Path © 2011
  47. 47. Sketching UI Workshop • 2020 • @katerutter Remember this? Practice sketching different UI •elements, •components •templates •pages Screens } Common Elements
  48. 48. Sketching UI Workshop • 2020 • @katerutter Screens} Wireflows
  49. 49. Sketching UI Workshop • 2020 • @katerutter Wireflows show how at the interactions in your product connect and play out over time. sketch via @ladylexy sketch via Adaptive Path Screens } Wireflows
  50. 50. Sketching UI Workshop • 2020 • @katerutter Wireflows show how at the interactions in your product connect and play out over time. sketch via @ladylexy sketch via Adaptive Path Screens } Wireflows Use them to prototype interactions and to identify and fill gaps early in the design process.
  51. 51. Sketching UI Workshop • 2020 • @katerutter ASK: How does the interaction flow work for the user? sketch via @ladylexy Screens } Wireflows
  52. 52. Sketching UI Workshop • 2020 • @kateruttersketch via @ladylexy Start with a 
 Key Screen. Sketch a screen that comes after. Sketch a screen that comes before. 3rd 2nd1st Screens } Wireflows
  53. 53. Sketching UI Workshop • 2020 • @katerutter Via Rachel Glaves & Adaptive Path © 2011 Perspective Overlap & Size Reflection Shadows Screens } Communicating depth & movement
  54. 54. Sketching UI Workshop • 2020 • @kateruttersketch via @ladylexy Screens } Wireflows 1st Email Compose new
 email screen 2nd Email screen showing
 after sent 3rd Email screen showing
 before compose Practice Mobile Email 1. Start with a 
 Key Screen. 2. Sketch the screen that comes after. 3. Sketch the screen that comes before. 4. Put the people in the picture “I’m nervous about this email.” 5 minutes “Okay, writing it now…” “Whew! Glad that’s done!”
  55. 55. Sketching UI Workshop • 2020 • @katerutter Post your work on the assignment for
 UI Sketching Practice.
 (You just did all the work. ;) Now it’s your turn
  56. 56. Sketching UI Workshop • 2020 • @katerutter Sample Work
  57. 57. Sketching UI Workshop • 2020 • @katerutter
  58. 58. Sketching UI Workshop • 2020 • @katerutter
  59. 59. Sketching UI Workshop • 2020 • @katerutter
  60. 60. Sketching UI Workshop • 2020 • @katerutter
  61. 61. Sketching UI Workshop • 2020 • @katerutter
  62. 62. Sketching UI Workshop • 2020 • @katerutter
  63. 63. Sketching UI Workshop • 2020 • @katerutter Kate Rutter @katerutter http://intelleto.com Yay!
  64. 64. Sketching UI Workshop • 2020 • @katerutter ‣ @adaptivepath: Adaptive Path [http://adaptivepath.com] ‣ @glaves: Rachel Glaves [http://about.me/rachelglaves] ‣ @katerutter: Kate Rutter [http://intelleto.com] ‣ @ladylexy: Alexa Andrzejewski [http://flavors.me/ladylexy] ‣ @luxrco: Luxr [http://luxr.co] ‣ @ugleah: Leah Buley [http://ugleah.tumblr.com/] Credits

×