Download as PDF, PPTX
Uploaded byPaul Crimi
HTML5 Meetup | Back to Basics: Wireframing & Planning
The document discusses the importance of information architecture (IA) in digital product planning and design, emphasizing logical content grouping, clear navigation, and visible content hierarchy. It outlines a structured approach to planning a product, including steps like defining key features, researching competitors, creating app maps, and wireframing. Various tools and resources for wireframing, prototyping, and further reading on UX design are also provided.
More Related Content
Similar to HTML5 Meetup | Back to Basics: Wireframing & Planning
HTML5 Meetup | Back to Basics: Wireframing & Planning
- 1. Back to Basics: Wireframing& Planning Michael McArthur @gorfed Paul Crimi @paulohnine
- 2. planning So, you wantto create your own digital product…
- 3. planning Here are afew things you should know:
- 4.
- 5. what is IA? Groupingof content so that it can be presented in a logical order.
- 6. what is IA? Creationof clear and consistent navigation that allows the user to easily find the content they are looking for.
- 7. what is IA? Clearand visible content hierarchy on each page or screen.
- 8. why is contenthierarchy important? #1 UX rule: ! Don’t make me think
- 9. when approaching IA: Alwaysask yourself: ! · What must users know first? · Which actions do I want them to take? · How can I persuade them to take those actions? · How can I make the user feel good about the action they just took?
- 10. action funnel welcome supporting info usertakes action what am I looking at? what do you want me to do & how do I do it? what happened?
- 11. IA design Define theend-game for your site/app. ! Define the end-game for each screen.
- 12. remember: The best interfacesare invisible. They get out of the way so that the user feels like they achieve their goals without interruption.
- 13.
- 14. what is anapp map? A high-level (bird’s eye) overview of all the screens or pages that exist within an application.
- 15. what is anapp map? 0.2 0.0 0.1 Register Entry Login Forgot Password 1.0 5.0 Stream Legend: 0.1.1 Other User Profile X.X Page 2.0 3.0 4.0 5.0 Explore Take Photo / Video News My Profile 2.1 3.1 5.0 5.1 Explore Results Filter Selection Other User Profile Profile Options 5.0 3.1.1 Other User Profile Confirmation X.X Duplicated Page X.X Conditional Page X.X Not A Physical Page
- 16. planning Well then, howdo we go about planning a product?
- 17. planning UX Methodologies ! · Deepdives · User empathy · Creating the appropriate hooks · Iteration
- 18. Nir Eyal’s hookmodel H K
- 19. planning: iterative approach fig3. the ux design cycle idea learn build data product measure
- 20. planning Step 1: ! Outline thekey features and/or requirements
- 21. planning Step 2: ! Research thecompetitive landscape ! · Outline key features/requirements · Define differences in feature sets · Establish each product’s brand essence
- 22. planning Step 3: ! Create afeature set comparison ! · Identify common and rare features · Outline what works and what doesn’t · Highlight the good, bad & ugly.
- 23. planning Step 4: ! Perform aheuristics on any competitor products in market ! · Outline assumption, observations, implications and recommendations · Be harsh :)
- 24. planning Step 5: ! Draw ahigh-level (rudimentary) Application Map ! · Boxes & arrows are your new best friends
- 25. planning Step 6: ! Map featuresto the pages you outlined in the Application Map. ! · Put functionality in the boxes (figure out what goes where).
- 26. planning Step 7: ! Make sketchylove to your whiteboard ! · Once satisfied that all requirements and functions have been accounted for, take those words in your boxes and start iterating on your interface. !
- 27. planning Step 8: ! Capture yourwork ! · Take pictures before you erase anything from the whiteboard · Erase everything · Make improvements · Repeat until satisfied
- 28. planning Step 9: ! Massage yourwires ! · Open your wireframing app of choice and vectorize your whiteboards
- 29.
- 30. what is awireframe? A visual representation of an interface that excludes visual design.
- 31. what is awireframe? instagram username location lorem ipsum 13 m username comment lorem ipsum dolor sit amet consectetur. userTwo reply lorem ipsum. Like Comment
- 32. why do weneed wireframes? To express how our website or app will function.
- 33. who is itfor? The client. ! To show them what we’re building
- 34. who is itfor? The dev team. ! To define scope & begin development
- 35. who is itfor? Our users. ! For user testing
- 36. who is itfor? Yourself. ! To test and iterate from
- 37.
- 38. tools: Kick it oldskool. Good ol’ paper and pencil
- 39.
- 40. tools: Step it upa notch Balsamiq Omnigraffle ! (…and many more)
- 41.
- 42. ok, let’s solveyour problems* (workshop.) *all problems not guaranteed solved.
- 43. resources Wireframes, App Maps,Flow Charts & Prototype Resources: App Maps, Flow Charts & Wireframes: ! Prototypes: ! ! ! Omnigraffle http://www.omnigroup.com/omnigraffle/ Omnigraffle Stencils https://www.graffletopia.com/ ! Sketch http://www.bohemiancoding.com/sketch/ ! Adobe Illustrator http://www.adobe.com/ca/products/illustrator.html ! Adobe Fireworks http://www.adobe.com/ca/products/fireworks.html ! Balsamiq http://balsamiq.com/ ! InVision http://www.invisionapp.com/ Axure http://www.axure.com/ ! Origami http://facebook.github.io/origami/ ! UXPin http://uxpin.com/ ! Keynote http://www.apple.com/ca/mac/keynote/ ! Using Keynote To Prototype http://www.lukew.com/ff/entry.asp?1155
- 44. resources Recommended Books Don’t MakeMe Think Steve Krug Lean UX Jeff Gothelf Envisioning Information Edward R Tufte The Essentials of Interaction Design Alan Cooper The Laws of Simplicity John Maeda Sketching User Experiences Bill Buxton Head First Design Patterns Eric Freeman Mobile First Luke Wroblewski
- 45. resources Recommended Links Luke Wroblewski http://www.lukew.com Capptivate http://capptivate.co/ InteractionDesign Association http://ixda.org/ The Hipper Element http://thehipperelement.com/ Boxes and Arrows http://boxesandarrows.com/ UX Archive http://uxarchive.com/ UI Patterns http://ui-patterns.com/ UX Porn http://uxporn.uxpin.com/ Pttrns http://pttrns.com/ UX Magazine http://uxmag.com/ UI Parade http://www.uiparade.com/ Mobile Patterns http://www.mobile-patterns.com/ ! ! ! ! ! ! ! ! ! ! !
- 46. Thank You. Michael McArthur @gorfed PaulCrimi @paulohnine