Introduction toBuilding Wireframes  Rik Lomas, Lomalogue Ltd  @riklomas  rik@lomalogue.com
What we’ll cover•   What is a wireframe?     •   Software tools•   Why make wireframes?     •   Stencils libraries•   Sket...
Hands On
A website to save favourite   places in London.
What is a wireframe?
A visual guide for the purpose ofarranging elements to best accomplish aparticular purpose
No fontsNo colourNo graphics
Wireframe fidelityLow                                 HighSketching     Paper     Mock up      Code            Prototype  ...
Why make wireframes?
Concept Exploration
Concept ExplorationLayout Content on Pages
Concept ExplorationLayout Content on PagesBrainstorm Interactions
Concept ExplorationLayout Content on PagesBrainstorm InteractionsStorytelling
Concept ExplorationLayout Content on PagesBrainstorm InteractionsStorytellingBuild Consensus
Concept ExplorationLayout Content on PagesBrainstorm InteractionsStorytellingBuild ConsensusDocumentation
Concept ExplorationLayout Content on PagesBrainstorm InteractionsStorytellingBuild ConsensusDocumentationMinimize Risk
Why designs fail?
Why designs fail?Users aren’t motivated to achieve goals
Why designs fail?Users aren’t motivated to achieve goalsUsers don’t understand how it works
Why designs fail?Users aren’t motivated to achieve goalsUsers don’t understand how it worksUsers don’t see things
Sketching
8 tips for wireframing
Have clear objectives
Make it functional
Keep it clean
User Interface is not User Experience
Repetition. Repetition. Repetition.
Consider dependencies
Don’t be lazy
Know when to stop
Demo –Facebook Profile Page
Exercise –Draw a sketch of either:the Twitter profile page orthe Instagram taking a photo flow
Demo –Sketch of the favourite places site
Exercise –Draw a sketch for your app or site.
User Centred Design
Goals
What the user wants to do, not how the userachieves them.No assumptions about the system interface.Can be used to compare ...
Exercise –Write down 3 goals for your site/app
GoalsPersonas
Very specific, although not necessarily accurate.Based in large part on the goals.Puts an end to feature debates.User pers...
Exercise –Write down 3 personas for your site/app
GoalsPersonasTasks
Describe the steps necessary to achievethe goals.Can vary with the available technology.Broken down into steps for task an...
Exercise –Write down a task for one goal foryour site/app
Features & Scenarios
a.k.a “making designers anddevelopers love you”
Protect revenueIncrease revenueManage costIncrease brand valueMake the product remarkableProvide more value to your custom...
Feature:      In order      As      I want
Feature: Addition      In order      As      I want
Feature: Addition      In order to avoid silly mistakes      As      I want
Feature: Addition      In order to avoid silly mistakes      As a maths idiot      I want
Feature: Addition      In order to avoid silly mistakes      As a maths idiot      I want to be told the sum of two numbers
Feature:      In order      As      I want
Feature: Favourites      In order      As      I want
Feature: Favourites      In order to remember places      As      I want
Feature: Favourites      In order to remember places      As logged in user Dave      I want
Feature: Favourites      In order to remember places      As logged in user Dave      I want to save places to a list
Exercise: Write 3 features of your app/site –Feature:      In order      As      I want
Feature:      In order      As      I want      Scenario:            Given            When            Then
Feature:      In order      As      I want      Scenario:            Given            When            Then      Scenario: ...
Scenario:      Given      When      Then
Scenario:      Given I have entered 50 into the calculator      When      Then
Scenario:      Given I have entered 50 into the calculator      And      When      Then
Scenario:      Given I have entered 50 into the calculator      And I have entered 70 into the calculator      When      T...
Scenario:      Given I have entered 50 into the calculator      And I have entered 70 into the calculator      When I pres...
Scenario:      Given I have entered 50 into the calculator      And I have entered 70 into the calculator      When I pres...
Feature: Addition      In order to avoid silly mistakes      As a maths idiot      I want to be told the sum of two number...
Feature: Favourites      In order to remember places      As logged in user Dave      I want to save places to a list     ...
Feature: Favourites      In order to remember places      As logged in user Dave      I want to save places to a list     ...
Feature: Favourites      In order to remember places      As logged in user Dave      I want to save places to a list     ...
Feature: Favourites      In order to remember places      As logged in user Dave      I want to save places to a list     ...
Feature: Favourites      In order to remember places      As logged in user Dave      I want to save places to a list     ...
Feature: Favourites      In order to remember places      As logged in user Dave      I want to save places to a list     ...
Feature: Favourites      In order to remember places      As logged in user Dave      I want to save places to a list     ...
Feature: Favourites      In order to remember places      As logged in user Dave      I want to save places to a list     ...
Feature: Favourites      In order to remember places      As logged in user Dave      I want to save places to a list     ...
Feature: Favourites      In order to remember places      As logged in user Dave      I want to save places to a list     ...
Feature: Favourites      In order to remember places      As logged in user Dave      I want to save places to a list     ...
Feature: Favourites      In order to remember places      As logged in user Dave      I want to save places to a list     ...
Exercise: Write down 3 scenarios for a feature –Feature:      In order      As      I want      Scenario:            Given...
States
Errors, alerts & successes
No content
Events (e.g. click, hover, tap and swipe)
Responsive design
Exercise –Add an error state, a success state ora hover/tap state to your sketch.
Site maps
A site map is a visual overview of each section of a site/app
Demo –Site map for favourite places site
Exercise –Create a site map for your site/app
Paper prototyping
Demo –Favourite places site
Exercise –Paper prototype your site/app
Five booksworth reading
Thanks!  Rik Lomas, Lomalogue Ltd  @riklomas  rik@lomalogue.com
Introduction to Building Wireframes - Part 1
Introduction to Building Wireframes - Part 1
Introduction to Building Wireframes - Part 1
Introduction to Building Wireframes - Part 1
Introduction to Building Wireframes - Part 1
Introduction to Building Wireframes - Part 1
Introduction to Building Wireframes - Part 1
Introduction to Building Wireframes - Part 1
Introduction to Building Wireframes - Part 1
Introduction to Building Wireframes - Part 1
Introduction to Building Wireframes - Part 1
Introduction to Building Wireframes - Part 1
Introduction to Building Wireframes - Part 1
Introduction to Building Wireframes - Part 1
Introduction to Building Wireframes - Part 1
Introduction to Building Wireframes - Part 1
Upcoming SlideShare
Loading in …5
×

Introduction to Building Wireframes - Part 1

1,328
-1

Published on

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,328
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
85
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Introduction to Building Wireframes - Part 1

  1. 1. Introduction toBuilding Wireframes Rik Lomas, Lomalogue Ltd @riklomas rik@lomalogue.com
  2. 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. 3. Hands On
  4. 4. A website to save favourite places in London.
  5. 5. What is a wireframe?
  6. 6. A visual guide for the purpose ofarranging elements to best accomplish aparticular purpose
  7. 7. No fontsNo colourNo graphics
  8. 8. Wireframe fidelityLow HighSketching Paper Mock up Code Prototype Software Prototype
  9. 9. Why make wireframes?
  10. 10. Concept Exploration
  11. 11. Concept ExplorationLayout Content on Pages
  12. 12. Concept ExplorationLayout Content on PagesBrainstorm Interactions
  13. 13. Concept ExplorationLayout Content on PagesBrainstorm InteractionsStorytelling
  14. 14. Concept ExplorationLayout Content on PagesBrainstorm InteractionsStorytellingBuild Consensus
  15. 15. Concept ExplorationLayout Content on PagesBrainstorm InteractionsStorytellingBuild ConsensusDocumentation
  16. 16. Concept ExplorationLayout Content on PagesBrainstorm InteractionsStorytellingBuild ConsensusDocumentationMinimize Risk
  17. 17. Why designs fail?
  18. 18. Why designs fail?Users aren’t motivated to achieve goals
  19. 19. Why designs fail?Users aren’t motivated to achieve goalsUsers don’t understand how it works
  20. 20. Why designs fail?Users aren’t motivated to achieve goalsUsers don’t understand how it worksUsers don’t see things
  21. 21. Sketching
  22. 22. 8 tips for wireframing
  23. 23. Have clear objectives
  24. 24. Make it functional
  25. 25. Keep it clean
  26. 26. User Interface is not User Experience
  27. 27. Repetition. Repetition. Repetition.
  28. 28. Consider dependencies
  29. 29. Don’t be lazy
  30. 30. Know when to stop
  31. 31. Demo –Facebook Profile Page
  32. 32. Exercise –Draw a sketch of either:the Twitter profile page orthe Instagram taking a photo flow
  33. 33. Demo –Sketch of the favourite places site
  34. 34. Exercise –Draw a sketch for your app or site.
  35. 35. User Centred Design
  36. 36. Goals
  37. 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. 38. Exercise –Write down 3 goals for your site/app
  39. 39. GoalsPersonas
  40. 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. 41. Exercise –Write down 3 personas for your site/app
  42. 42. GoalsPersonasTasks
  43. 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. 44. Exercise –Write down a task for one goal foryour site/app
  45. 45. Features & Scenarios
  46. 46. a.k.a “making designers anddevelopers love you”
  47. 47. Protect revenueIncrease revenueManage costIncrease brand valueMake the product remarkableProvide more value to your customers
  48. 48. Feature: In order As I want
  49. 49. Feature: Addition In order As I want
  50. 50. Feature: Addition In order to avoid silly mistakes As I want
  51. 51. Feature: Addition In order to avoid silly mistakes As a maths idiot I want
  52. 52. Feature: Addition In order to avoid silly mistakes As a maths idiot I want to be told the sum of two numbers
  53. 53. Feature: In order As I want
  54. 54. Feature: Favourites In order As I want
  55. 55. Feature: Favourites In order to remember places As I want
  56. 56. Feature: Favourites In order to remember places As logged in user Dave I want
  57. 57. Feature: Favourites In order to remember places As logged in user Dave I want to save places to a list
  58. 58. Exercise: Write 3 features of your app/site –Feature: In order As I want
  59. 59. Feature: In order As I want Scenario: Given When Then
  60. 60. Feature: In order As I want Scenario: Given When Then Scenario: Given When Then
  61. 61. Scenario: Given When Then
  62. 62. Scenario: Given I have entered 50 into the calculator When Then
  63. 63. Scenario: Given I have entered 50 into the calculator And When Then
  64. 64. Scenario: Given I have entered 50 into the calculator And I have entered 70 into the calculator When Then
  65. 65. Scenario: Given I have entered 50 into the calculator And I have entered 70 into the calculator When I press add Then
  66. 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. 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. 68. Feature: Favourites In order to remember places As logged in user Dave I want to save places to a list Scenario:
  69. 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. 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. 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. 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. 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. 74. Feature: Favourites In order to remember places As logged in user Dave I want to save places to a list Scenario:
  75. 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. 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. 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. 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. 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. 80. Exercise: Write down 3 scenarios for a feature –Feature: In order As I want Scenario: Given When Then
  81. 81. States
  82. 82. Errors, alerts & successes
  83. 83. No content
  84. 84. Events (e.g. click, hover, tap and swipe)
  85. 85. Responsive design
  86. 86. Exercise –Add an error state, a success state ora hover/tap state to your sketch.
  87. 87. Site maps
  88. 88. A site map is a visual overview of each section of a site/app
  89. 89. Demo –Site map for favourite places site
  90. 90. Exercise –Create a site map for your site/app
  91. 91. Paper prototyping
  92. 92. Demo –Favourite places site
  93. 93. Exercise –Paper prototype your site/app
  94. 94. Five booksworth reading
  95. 95. Thanks! Rik Lomas, Lomalogue Ltd @riklomas rik@lomalogue.com

×