Download as KEY, PPTX
Uploaded byJessi Baker
UX Pres MIni version!
The document outlines an introduction to user experience (UX) design. It discusses what UX is, how it differs from user interface design, and provides examples of good UX. It then covers topics like wireframing, scenarios, paper prototyping and user testing to help workshop participants understand the UX design process.
More Related Content
![[2015/2016] User experience design of mobil apps](https://cdn.slidesharecdn.com/ss_thumbnails/02userexperience-160304170558-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BROCHURE] Italy Tour Project | @SlideON](https://cdn.slidesharecdn.com/ss_thumbnails/brochure8-251215152319-2805af68-thumbnail.jpg?width=640&height=640&fit=bounds)
UX Pres MIni version!
- 1. UX Workshop Rik Lomas Jessi Baker @riklomas @jessibaker
- 2.
- 3. User Experience Design
- 4. “Anyone can makethe simple complicated. Creativity is making the complicated simple.” - Charles Mingus
- 5.
- 6.
- 7. The design of experiences Humancentred Interactions
- 8. The design of experiences Humancentred Interactions Different to UI
- 9. The design of experiences Humancentred Interactions Different to UI Access to value
- 10. Examples of good UX
- 11. POST (& otherapps) by Meri Media
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18. Idea Select a platformfor your MVP Goals and tasks Personas Information Architecture
- 19.
- 23. No fonts No colour Nographics
- 24. Wireframe fidelity Low High Sketching Paper Mock up Code Prototype Software Prototype
- 25.
- 26.
- 27.
- 28. Concept Exploration Layout Contenton Pages Brainstorm Interactions
- 29. Concept Exploration Layout Contenton Pages Brainstorm Interactions Storytelling
- 30. Concept Exploration Layout Contenton Pages Brainstorm Interactions Storytelling Build Consensus
- 31. Concept Exploration Layout Contenton Pages Brainstorm Interactions Storytelling Build Consensus Documentation
- 32. Concept Exploration Layout Contenton Pages Brainstorm Interactions Storytelling Build Consensus Documentation Minimize Risk
- 33.
- 38.
- 39. Exercise – Draw asketch of the Twitter profile page on the web version or the app version
- 40.
- 41.
- 42.
- 43.
- 44.
- 45. User Interface isnot User Experience
- 46.
- 47.
- 48.
- 49. Know when tostop
- 50. Demo – Sketch ofPopDown
- 51. Exercise – Draw asketch for your idea.
- 52.
- 53. Do your keyfunctions standout?
- 54.
- 55. Why designs fail? Usersaren’t motivated to achieve goals
- 56. Why designs fail? Usersaren’t motivated to achieve goals Users don’t understand how it works
- 57. Why designs fail? Usersaren’t motivated to achieve goals Users don’t understand how it works Users don’t see things
- 58.
- 59. Errors, alerts &successes
- 62.
- 64. Events (e.g. click,hover, tap and swipe)
- 65. Hover mode -Google maps
- 67. Responsive design andorientation
- 69. Responsive web designexamples
- 70. User flows & Scenarios
- 71. User Flow for1 scenario
- 72. User flow formultiple scenarios
- 73. User flow formultiple scenarios
- 74. User flow forall scenarios
- 75. Scenarios help youdesign and test
- 76. Demo- Scenario for PopDownand wireframing of the user flow
- 77. Excercise - Chose ascenario for your project and wireframe of the user flow with less than 3 key screens
- 78.
- 87. Demo- Paper Prototype forPopDown
- 89. Popdown Paper Prototype- Home screen
- 90. Popdown Paper Prototype- Shop mode
- 91. Popdown Paper Prototype- select a category
- 92. Popdown Paper Prototype- after a category is selected
- 93. Popdown Paper Prototype- shop view hover mode
- 94. Popdown Paper Prototype- product view
- 95. Exercise – Paper prototypeyour site/app
- 96. Making a casefor wireframes
- 97.
- 98. Creativity is inthe making
- 99. Making changes inPhotoshop or code will take much longer than in wireframes
- 100.
- 101. You’re broke! Soit’s even more important to get it right in a lo-fi way...
- 102. Customer experience willhelp you write certain aspects of your business plan
- 103.
- 104. Balsamiq http:// www.balsamiq.com/ Mockingbird https://gomockingbird.com/ Keynote Omnigrafflehttp:// www.omnigraffle.com
- 105. Libraries.... Mockups to go https:// mockupstogo.mybalsamiq.com/ Keynotopiahttp://keynotopia.com/ Graffletopia http://graffletopia.com/
- 106.
- 107. 960.gs http://960.gs/ Twitter Bootstrap http://twitter.github.com/ bootstrap ZurbFoundation http://foundation.zurb.com Napkee
- 108.
- 110.
- 111. Silverback http://silverbackapp.com/ Realizer http://www.realizerapp.com AirDisplayhttp://avatron.com/apps/ air-display User Testing http://
- 112.
- 113. Thanks! Rik Lomas Jessi Baker @riklomas @jessibaker rik@lomalogue.com jessi@cantab.net
Editor's Notes
- #2 hiya!\n
- #3 jessi\n
- #4 Products, spaces, phones, theme parks, coffee shops... today we are focusing on UX design for screens; web sites and applications, across multiple devices; mobile, tablet etc...\n
- #5 \n
- #6 \n
- #7 \n
- #8 \n
- #9 \n
- #10 \n
- #11 jessi\n
- #12 \n
- #13 \n
- #14 \n
- #15 \n
- #16 \n
- #17 \n
- #18 \n
- #19 \n
- #20 \n
- #21 \n
- #22 \n
- #23 \n
- #24 \n
- #25 \n
- #26 \n
- #27 \n
- #28 \n
- #29 \n
- #30 \n
- #31 \n
- #32 \n
- #33 \n
- #34 replace sketch images\n
- #35 \n
- #36 \n
- #37 \n
- #38 \n
- #39 \n
- #40 \n
- #41 \n
- #42 \n
- #43 \n
- #44 \n
- #45 \n
- #46 \n
- #47 \n
- #48 \n
- #49 \n
- #50 \n
- #51 \n
- #52 1 page, key page\n
- #53 \n
- #54 \n
- #55 \n
- #56 if finding the retweet button ment clicking 3 different buttons would you bother?\n
- #57 how do i buy something!!?\n
- #58 do you have a clear call to action on each page\nno more than 3 things that stand out above all other clickable locations?\n\n
- #59 \n
- #60 \n
- #61 \n
- #62 \n
- #63 \n
- #64 \n
- #65 Google maps demo\n
- #66 \n
- #67 \n
- #68 example responsive web design - mediaqueri.es\n
- #69 \n
- #70 example responsive web design - mediaqueri.es\n
- #71 \n
- #72 \n
- #73 \n
- #74 \n
- #75 \n
- #76 roleplay\n
- #77 \n
- #78 \n
- #79 \n
- #80 \n
- #81 \n
- #82 \n
- #83 \n
- #84 \n
- #85 \n
- #86 \n
- #87 \n
- #88 \n
- #89 \n
- #90 \n
- #91 \n
- #92 \n
- #93 \n
- #94 \n
- #95 \n
- #96 Scissors + blue tack!\n
- #97 \n
- #98 \n
- #99 \n
- #100 \n
- #101 \n
- #102 \n
- #103 \n
- #104 \n
- #105 \n
- #106 \n
- #107 \n
- #108 \n
- #109 \n
- #110 \n
- #111 \n
- #112 \n
- #113 \n
- #114 \n