Introduction to Building Wireframes - Part 1

  • Published on
    15-May-2015

  • View
    1.083

  • Download
    3

Transcript

1. Introduction toBuilding WireframesRik Lomas, Lomalogue Ltd@riklomasrik@lomalogue.com 2. What well cover What is a wireframe? Software tools Why make wireframes? Stencils libraries Sketching Code wireframes User centered design How to test wireframes and gathering feedback Features and scenarios Iterative design Site maps Paper prototyping 3. Hands On 4. A website to save favourite places in London. 5. What is a wireframe? 6. A visual guide for the purpose ofarranging elements to best accomplish aparticular purpose 7. No fontsNo colourNo graphics 8. Wireframe fidelityLow HighSketching Paper Mock upCodePrototype Software Prototype 9. Why make wireframes? 10. Concept Exploration 11. Concept ExplorationLayout Content on Pages 12. Concept ExplorationLayout Content on PagesBrainstorm Interactions 13. Concept ExplorationLayout Content on PagesBrainstorm InteractionsStorytelling 14. Concept ExplorationLayout Content on PagesBrainstorm InteractionsStorytellingBuild Consensus 15. Concept ExplorationLayout Content on PagesBrainstorm InteractionsStorytellingBuild ConsensusDocumentation 16. Concept ExplorationLayout Content on PagesBrainstorm InteractionsStorytellingBuild ConsensusDocumentationMinimize Risk 17. Why designs fail? 18. Why designs fail?Users arent motivated to achieve goals 19. Why designs fail?Users arent motivated to achieve goalsUsers dont understand how it works 20. Why designs fail?Users arent motivated to achieve goalsUsers dont understand how it worksUsers dont see things 21. Sketching 22. 8 tips for wireframing 23. Have clear objectives 24. Make it functional 25. Keep it clean 26. User Interface is not User Experience 27. Repetition. Repetition. Repetition. 28. Consider dependencies 29. Dont be lazy 30. Know when to stop 31. Demo Facebook Profile Page 32. Exercise Draw a sketch of either:the Twitter profile page orthe Instagram taking a photo flow 33. Demo Sketch of the favourite places site 34. Exercise Draw a sketch for your app or site. 35. User Centred Design 36. Goals 37. What the user wants to do, not how the userachieves them.No assumptions about the system interface.Can be used to compare dierent interfacedesign alternatives in a fair way.Can be personal, practical or false goals. 38. Exercise Write down 3 goals for your site/app 39. GoalsPersonas 40. Very specific, although not necessarily accurate.Based in large part on the goals.Puts an end to feature debates.User persona, not buyer persona. 41. Exercise Write down 3 personas for your site/app 42. GoalsPersonasTasks 43. Describe the steps necessary to achievethe goals.Can vary with the available technology.Broken down into steps for task analysis, and arerecombined into sequence of steps for scenariodevelopment. 44. Exercise Write down a task for one goal foryour site/app 45. Features & Scenarios 46. a.k.a making designers anddevelopers love you 47. Protect revenueIncrease revenueManage costIncrease brand valueMake the product remarkableProvide more value to your customers 48. Feature:In orderAsI want 49. Feature: AdditionIn orderAsI want 50. Feature: AdditionIn order to avoid silly mistakesAsI want 51. Feature: AdditionIn order to avoid silly mistakesAs a maths idiotI want 52. Feature: AdditionIn order to avoid silly mistakesAs a maths idiotI want to be told the sum of two numbers 53. Feature:In orderAsI want 54. Feature: FavouritesIn orderAsI want 55. Feature: FavouritesIn order to remember placesAsI want 56. Feature: FavouritesIn order to remember placesAs logged in user DaveI want 57. Feature: FavouritesIn order to remember placesAs logged in user DaveI want to save places to a list 58. Exercise: Write 3 features of your app/site Feature:In orderAsI want 59. Feature:In orderAsI wantScenario:GivenWhenThen 60. Feature:In orderAsI wantScenario:GivenWhenThenScenario:GivenWhenThen 61. Scenario:GivenWhenThen 62. Scenario:Given I have entered 50 into the calculatorWhenThen 63. Scenario:Given I have entered 50 into the calculatorAndWhenThen 64. Scenario:Given I have entered 50 into the calculatorAnd I have entered 70 into the calculatorWhenThen 65. Scenario:Given I have entered 50 into the calculatorAnd I have entered 70 into the calculatorWhen I press addThen 66. Scenario:Given I have entered 50 into the calculatorAnd I have entered 70 into the calculatorWhen I press addThen the result should be 120 on the screen 67. Feature: AdditionIn order to avoid silly mistakesAs a maths idiotI want to be told the sum of two numbersScenario: Given I have entered 50 into the calculator And I have entered 70 into the calculator When I press add Then the result should be 120 on the screen 68. Feature: FavouritesIn order to remember placesAs logged in user DaveI want to save places to a listScenario: 69. Feature: FavouritesIn order to remember placesAs logged in user DaveI want to save places to a listScenario:Given I have no favourite places 70. Feature: FavouritesIn order to remember placesAs logged in user DaveI want to save places to a listScenario:Given I have no favourite placesAnd I hover over a listing 71. Feature: FavouritesIn order to remember placesAs logged in user DaveI want to save places to a listScenario:Given I have no favourite placesAnd I hover over a listingWhen I click the star icon 72. Feature: FavouritesIn order to remember placesAs logged in user DaveI want to save places to a listScenario:Given I have no favourite placesAnd I hover over a listingWhen I click the star iconThen I will have 1 favourite place 73. Feature: FavouritesIn order to remember placesAs logged in user DaveI want to save places to a listScenario:Given I have no favourite placesAnd I hover over a listingWhen I click the star iconThen I will have 1 favourite placeAnd the star icon will be selected 74. Feature: FavouritesIn order to remember placesAs logged in user DaveI want to save places to a listScenario: 75. Feature: FavouritesIn order to remember placesAs logged in user DaveI want to save places to a listScenario:Given I have a favourite place 76. Feature: FavouritesIn order to remember placesAs logged in user DaveI want to save places to a listScenario:Given I have a favourite placeAnd I hover over that favourite 77. Feature: FavouritesIn order to remember placesAs logged in user DaveI want to save places to a listScenario:Given I have a favourite placeAnd I hover over that favouriteWhen I click the star icon 78. Feature: FavouritesIn order to remember placesAs logged in user DaveI want to save places to a listScenario:Given I have a favourite placeAnd I hover over that favouriteWhen I click the star iconThen I will have no favourite places 79. Feature: FavouritesIn order to remember placesAs logged in user DaveI want to save places to a listScenario:Given I have a favourite placeAnd I hover over that favouriteWhen I click the star iconThen I will have no favourite placesAnd the star icon will be deselected 80. Exercise: Write down 3 scenarios for a feature Feature:In orderAsI wantScenario:GivenWhenThen 81. States 82. Errors, alerts & successes 83. No content 84. Events (e.g. click, hover, tap and swipe) 85. Responsive design 86. Exercise Add an error state, a success state ora hover/tap state to your sketch. 87. Site maps 88. A site map is a visual overview of each section of a site/app 89. Demo Site map for favourite places site 90. Exercise Create a site map for your site/app 91. Paper prototyping 92. Demo Favourite places site 93. Exercise Paper prototype your site/app 94. Five booksworth reading 95. Thanks!Rik Lomas, Lomalogue Ltd@riklomasrik@lomalogue.com

Recommended

View more >