This document provides an introduction to building wireframes. It covers what wireframes are, why they are made, common tools and techniques used, and best practices. Key points include: - Wireframes are visual guides that arrange elements without fonts, colors or graphics to accomplish a purpose - They are made for concept exploration, layout, interactions, consensus building and risk minimization - Common techniques involve sketching, paper prototyping, software tools and coding prototypes - Features and scenarios help communicate ideas to designers and developers - User centered design principles like goals, personas and tasks inform effective wireframe design

1. Introduction to
Building 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 of
arranging elements to best accomplish a
particular purpose

7. No fonts
No colour
No graphics

8. Wireframe fidelity
Low High
Sketching Paper Mock up Code
Prototype Software Prototype

9. Why make wireframes?

10. Concept Exploration

11. Concept Exploration
Layout Content on Pages

12. Concept Exploration
Layout Content on Pages
Brainstorm Interactions

13. Concept Exploration
Layout Content on Pages
Brainstorm Interactions
Storytelling

14. Concept Exploration
Layout Content on Pages
Brainstorm Interactions
Storytelling
Build Consensus

15. Concept Exploration
Layout Content on Pages
Brainstorm Interactions
Storytelling
Build Consensus
Documentation

16. Concept Exploration
Layout Content on Pages
Brainstorm Interactions
Storytelling
Build Consensus
Documentation
Minimize 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 goals
Users don’t understand how it works

20. Why designs fail?
Users aren’t motivated to achieve goals
Users don’t understand how it works
Users don’t see things

21. Sketching

29. 8 tips for wireframing

30. Have clear objectives

31. Make it functional

32. Keep it clean

33. User Interface is not User Experience

34. Repetition. Repetition. Repetition.

35. Consider dependencies

36. Don’t be lazy

37. Know when to stop

38. Demo –
Facebook Profile Page

39. Exercise –
Draw a sketch of either:
the Twitter profile page or
the Instagram taking a photo flow

40. Demo –
Sketch of the favourite places site

41. Exercise –
Draw a sketch for your app or site.

42. User Centred Design

43. Goals

44. What the user wants to do, not how the user
achieves them.
No assumptions about the system interface.
Can be used to compare different interface
design alternatives in a fair way.
Can be personal, practical or false goals.

45. Exercise –
Write down 3 goals for your site/app

46. Goals
Personas

47. Very specific, although not necessarily accurate.
Based in large part on the goals.
Puts an end to feature debates.
User persona, not buyer persona.

48. Exercise –
Write down 3 personas for your site/app

49. Goals
Personas
Tasks

50. Describe the steps necessary to achieve
the goals.
Can vary with the available technology.
Broken down into steps for task analysis, and are
recombined into sequence of steps for scenario
development.

51. Exercise –
Write down a task for one goal for
your site/app

52. Features & Scenarios

53. a.k.a “making designers and
developers love you”

54. Protect revenue
Increase revenue
Manage cost
Increase brand value
Make the product remarkable
Provide more value to your customers

55. Feature:
In order
As
I want

56. Feature: Addition
In order
As
I want

57. Feature: Addition
In order to avoid silly mistakes
As
I want

58. Feature: Addition
In order to avoid silly mistakes
As a maths idiot
I want

59. Feature: Addition
In order to avoid silly mistakes
As a maths idiot
I want to be told the sum of two numbers

60. Feature:
In order
As
I want

61. Feature: Favourites
In order
As
I want

62. Feature: Favourites
In order to remember places
As
I want

63. Feature: Favourites
In order to remember places
As logged in user Dave
I want

64. Feature: Favourites
In order to remember places
As logged in user Dave
I want to save places to a list

65. Exercise: Write 3 features of your app/site –
Feature:
In order
As
I want

66. Feature:
In order
As
I want
Scenario:
Given
When
Then

67. Feature:
In order
As
I want
Scenario:
Given
When
Then
Scenario:
Given
When
Then

68. Scenario:
Given
When
Then

69. Scenario:
Given I have entered 50 into the calculator
When
Then

70. Scenario:
Given I have entered 50 into the calculator
And
When
Then

71. Scenario:
Given I have entered 50 into the calculator
And I have entered 70 into the calculator
When
Then

72. Scenario:
Given I have entered 50 into the calculator
And I have entered 70 into the calculator
When I press add
Then

73. 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

74. 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

75. Feature: Favourites
In order to remember places
As logged in user Dave
I want to save places to a list
Scenario:

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 no favourite places

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 no favourite places
And I hover over a listing

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 no favourite places
And I hover over a listing
When I click the star icon

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 no favourite places
And I hover over a listing
When I click the star icon
Then I will have 1 favourite place

80. 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

81. Feature: Favourites
In order to remember places
As logged in user Dave
I want to save places to a list
Scenario:

82. 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

83. 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

84. 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

85. 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

86. 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

87. Exercise: Write down 3 scenarios for a feature –
Feature:
In order
As
I want
Scenario:
Given
When
Then

88. States

89. Errors, alerts & successes

90. No content

91. Events (e.g. click, hover, tap and swipe)

92. Responsive design

93. Exercise –
Add an error state, a success state or
a hover/tap state to your sketch.

94. Site maps

95. A site map is a visual overview
of each section of a site/app

99. Demo –
Site map for favourite places site

100. Exercise –
Create a site map for your site/app

101. Paper prototyping

103. Demo –
Favourite places site

104. Exercise –
Paper prototype your site/app

105. Five books
worth reading

111. Thanks!
Rik Lomas, Lomalogue Ltd
@riklomas
rik@lomalogue.com