Introduction to Building Wireframes - Part 1

  • 726 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
726
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
42
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Introduction toBuilding Wireframes Rik Lomas, Lomalogue Ltd @riklomas rik@lomalogue.com
  • 2. What we’ll 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 up Code Prototype 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 aren’t motivated to achieve goals
  • 19. Why designs fail?Users aren’t motivated to achieve goalsUsers don’t understand how it works
  • 20. Why designs fail?Users aren’t motivated to achieve goalsUsers don’t understand how it worksUsers don’t 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. Don’t 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 different 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 order As I want
  • 49. Feature: Addition In order As I want
  • 50. Feature: Addition In order to avoid silly mistakes As I want
  • 51. Feature: Addition In order to avoid silly mistakes As a maths idiot I want
  • 52. Feature: Addition In order to avoid silly mistakes As a maths idiot I want to be told the sum of two numbers
  • 53. Feature: In order As I want
  • 54. Feature: Favourites In order As I want
  • 55. Feature: Favourites In order to remember places As I want
  • 56. Feature: Favourites In order to remember places As logged in user Dave I want
  • 57. Feature: Favourites In order to remember places As logged in user Dave I want to save places to a list
  • 58. Exercise: Write 3 features of your app/site –Feature: In order As I want
  • 59. Feature: In order As I want Scenario: Given When Then
  • 60. Feature: In order As I want Scenario: Given When Then Scenario: Given When Then
  • 61. Scenario: Given When Then
  • 62. Scenario: Given I have entered 50 into the calculator When Then
  • 63. Scenario: Given I have entered 50 into the calculator And When Then
  • 64. Scenario: Given I have entered 50 into the calculator And I have entered 70 into the calculator When Then
  • 65. Scenario: Given I have entered 50 into the calculator And I have entered 70 into the calculator When I press add Then
  • 66. Scenario: 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
  • 67. Feature: Addition In order to avoid silly mistakes As a maths idiot I want to be told the sum of two numbers Scenario: 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: Favourites In order to remember places As logged in user Dave I want to save places to a list Scenario:
  • 69. Feature: Favourites In order to remember places As logged in user Dave I want to save places to a list Scenario: Given I have no favourite places
  • 70. Feature: Favourites In order to remember places As logged in user Dave I want to save places to a list Scenario: Given I have no favourite places And I hover over a listing
  • 71. Feature: Favourites In order to remember places As logged in user Dave I want to save places to a list Scenario: Given I have no favourite places And I hover over a listing When I click the star icon
  • 72. Feature: Favourites In order to remember places As logged in user Dave I want to save places to a list Scenario: Given I have no favourite places And I hover over a listing When I click the star icon Then I will have 1 favourite place
  • 73. Feature: Favourites In order to remember places As logged in user Dave I want to save places to a list Scenario: Given I have no favourite places And I hover over a listing When I click the star icon Then I will have 1 favourite place And the star icon will be selected
  • 74. Feature: Favourites In order to remember places As logged in user Dave I want to save places to a list Scenario:
  • 75. Feature: Favourites In order to remember places As logged in user Dave I want to save places to a list Scenario: Given I have a favourite place
  • 76. Feature: Favourites In order to remember places As logged in user Dave I want to save places to a list Scenario: Given I have a favourite place And I hover over that favourite
  • 77. Feature: Favourites In order to remember places As logged in user Dave I want to save places to a list Scenario: Given I have a favourite place And I hover over that favourite When I click the star icon
  • 78. Feature: Favourites In order to remember places As logged in user Dave I want to save places to a list Scenario: Given I have a favourite place And I hover over that favourite When I click the star icon Then I will have no favourite places
  • 79. Feature: Favourites In order to remember places As logged in user Dave I want to save places to a list Scenario: Given I have a favourite place And I hover over that favourite When I click the star icon Then I will have no favourite places And the star icon will be deselected
  • 80. Exercise: Write down 3 scenarios for a feature –Feature: In order As I want Scenario: Given When Then
  • 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 @riklomas rik@lomalogue.com