An event about wireframe sketching and user interface design

1. presents
!
TALK
DRINK
SHARE
THINK × DESIGN × SHARE

2. WELCOME
TALK
DRINK
SHARE
© SQLI AGENCY / 2014-01
2014-02
2

3. SQLI
AGENCY
© SQLI AGENCY / 2014-01
2014-02
3

4. WHERE WE ARE
LAUSANNE
© SQLI AGENCY / 2014-01
2014-02
GENEVA
4

5. WHAT WE DO
© SQLI AGENCY / 2014-01
2014-02
5

6. WHO WE ARE
Mathieu Collet
Benoît Henry
Jérémie Fontana
Lidia Santos Rico
Ludmilla El Khazen
Véronique Tillaud
Fleur Ettwiller
Chiara Valerio
Thomas Riotte
Damien Gauthier
Agency Manager
UX Designer
Strategist
UX Designer
Art Director
UX Designer
Head of Marketing
UX Designer
Communication Officer
UX Designer
YOU?
Barbara Chabriw
Interactive Designer
© SQLI AGENCY / 2014-01
2014-02
Aldo Ferrari
Head of Development
Andy McFee
Front-End Developer
David Bernard
Front-End Developer
6

7. LET'S GET CONNECTED!
sqliagency.ch
@sqliagency_ch
@sqliagency_ch
/sqliagencych
#TxDxS
© SQLI AGENCY / 2014-01
2014-02
7

8. LET'S GO!
© SQLI AGENCY / 2014-01
2014-02
8

9. JÉRÉMIE
FONTANA
Art Director
© SQLI AGENCY / 2014-01
2014-02
@skynebula
9

10. WHO THE HECK AM I?
?
© SQLI AGENCY / 2014-01
2014-02
10

11. WHO THE HECK AM I?
YO
JÉRÉMIE
© SQLI AGENCY / 2014-01
2014-02
11

12. WHO THE HECK AM I?
33 year old French dude living in Lausanne
Studied electronics, photography & graphic design
Designing for 11 years
© SQLI AGENCY / 2014-01
2014-02
12

13. FROM PENS
TO PIXELS interface design
Wireframe sketching & user
© SQLI AGENCY / 2014-01
2014-02
13

14. FROM PENS TO PIXELS
TITLE INSPIRED BY
© SQLI AGENCY / 2014-01
2014-02
14

15. FROM PENS TO PIXELS
→
© SQLI AGENCY / 2014-01
2014-02
15

16. FROM PENS TO PIXELS
→
© SQLI AGENCY / 2014-01
2014-02
16

17. DISCLAIMER
DISCLAIMER
This talk is not (only) for designers
© SQLI AGENCY / 2014-01
2014-02
17

18. DISCLAIMER 2
DISCLAIMER
2
I will not teach you how to use Photoshop
© SQLI AGENCY / 2014-01
2014-02
18

19. CONTEXT
© SQLI AGENCY / 2014-01
2014-02
19

20. THIS IS YOUR BRAIN
© SQLI AGENCY / 2014-01
2014-02
20

21. LEFT BRAIN VS RIGHT BRAIN
© SQLI AGENCY / 2014-01
2014-02
21

22. LEFT BRAIN VS RIGHT BRAIN
Functional
Rational
Sequential
Logical
© SQLI AGENCY / 2014-01
2014-02
Emotional
Intuitive
Simultaneous
Inspiration
22

23. SO…
FREE
your
MIND
© SQLI AGENCY / 2014-01
2014-02
Sources : Jérémie Fontana
23

24. GO BACK TO CHILDHOOD
Aircraft design by me (cca mid 80s)
© SQLI AGENCY / 2014-01
2014-02
Sources : Jérémie Fontana
24

25. AND THE MAGIC HAPPENS
© SQLI AGENCY / 2014-01
2014-02
Sources : Sébastien Gerbier
25

26. WHAT
IS A SKETCH?
© SQLI AGENCY / 2014-01
2014-02
26

27. WHAT IS A SKETCH?
Sketching
© SQLI AGENCY / 2014-01
2014-02
is not
Drawing
27

28. WHAT IS A SKETCH?
Sketching
© SQLI AGENCY / 2014-01
2014-02
is not
Drawing
Sources : SQLI Agency & Sébastien Gerbier
28

29. WHAT IS A SKETCH?
Sketching simple
is
© SQLI AGENCY / 2014-01
2014-02
29

30. WHAT IS A SKETCH?
Sketching fast
is
© SQLI AGENCY / 2014-01
2014-02
30

31. WHAT IS A SKETCH?
Sketching rough
is
© SQLI AGENCY / 2014-01
2014-02
31

32. WHAT IS A SKETCH?
Sketching cheap
is
© SQLI AGENCY / 2014-01
2014-02
32

33. WHAT IS A SKETCH?
Sketching disposable
is
© SQLI AGENCY / 2014-01
2014-02
33

34. WHAT IS A SKETCH?
Sketching > talking
is
© SQLI AGENCY / 2014-01
2014-02
34

35. WHY
WE SKETCH?
© SQLI AGENCY / 2014-01
2014-02
35

36. WHY WE SKETCH?
We sketch
to think
© SQLI AGENCY / 2014-01
2014-02
36

37. WE SKETCH TO THINK
© SQLI AGENCY / 2014-01
2014-02
Sources : Frank Gehry
37

38. WE SKETCH TO THINK
© SQLI AGENCY / 2014-01
2014-02
Sources : Frank Gehry
38

39. WE SKETCH TO THINK
© SQLI AGENCY / 2014-01
2014-02
Sources : Jack Dorsey
39

40. WHY WE SKETCH?
We sketch
to record
© SQLI AGENCY / 2014-01
2014-02
40

41. WE SKETCH TO RECORD
© SQLI AGENCY / 2014-01
2014-02
Sources : AIGA
41

42. WE SKETCH TO RECORD
© SQLI AGENCY / 2014-01
2014-02
Sources : Sébastien Gerbier
42

43. WHY WE SKETCH?
We sketch
to communicate
© SQLI AGENCY / 2014-01
2014-02
43

44. WE SKETCH TO COMMUNICATE
© SQLI AGENCY / 2014-01
2014-02
Sources : Grottes de Lascaux
44

45. WE SKETCH TO COMMUNICATE
© SQLI AGENCY / 2014-01
2014-02
Sources : Microsoft
45

46. WHY WE SKETCH?
We sketch
to document
© SQLI AGENCY / 2014-01
2014-02
46

47. WE SKETCH TO DOCUMENT
© SQLI AGENCY / 2014-01
2014-02
Sources : Edward Tufte
47

48. WE SKETCH TO DOCUMENT
© SQLI AGENCY / 2014-01
2014-02
Sources : Dieter Rams
48

49. WHY WE SKETCH?
We sketch
to experiment
© SQLI AGENCY / 2014-01
2014-02
49

50. WE SKETCH TO EXPERIMENT
© SQLI AGENCY / 2014-01
2014-02
Sources : Peter Biľak
50

51. WE SKETCH TO EXPERIMENT
© SQLI AGENCY / 2014-01
2014-02
Sources : realbeautysketches.dove.com / FBI
51

52. WHY WE SKETCH?
We sketch
to fail
© SQLI AGENCY / 2014-01
2014-02
52

53. WE SKETCH TO FAIL
© SQLI AGENCY / 2014-01
2014-02
Sources : Everybody’s trash bin
53

54. HOW
DO WE SKETCH?
© SQLI AGENCY / 2014-01
2014-02
54

55. BASIC SHAPES
Only 4 basic shapes
© SQLI AGENCY / 2014-01
2014-02
55

56. BASIC SHAPES
Only
© SQLI AGENCY / 2014-01
2014-02
56

57. BASIC SHAPES
Only
© SQLI AGENCY / 2014-01
2014-02
57

58. BASIC SHAPES
Only
© SQLI AGENCY / 2014-01
2014-02
58

59. BASIC SHAPES
Only
© SQLI AGENCY / 2014-01
2014-02
59

60. BASIC SHAPES
It’s that
© SQLI AGENCY / 2014-01
2014-02
60

61. BASIC SHAPES
Sketching in Service Design | Service Design Thinks & Drinks, April 2012
© SQLI AGENCY / 2014-01
2014-02
Sources : Ben Crothers
61

62. BASIC SHAPES
Sketching in Service Design | Service Design Thinks & Drinks, April 2012
© SQLI AGENCY / 2014-01
2014-02
Sources : Ben Crothers
62

63. BASIC SHAPES
© SQLI AGENCY / 2014-01
2014-02
Sources : Ben Crothers
63

64. BEST PRACTICES
Start simple
© SQLI AGENCY / 2014-01
2014-02
64

65. START SIMPLE
LESS
MORE
is
Ludwig Mies van der Rohe
© SQLI AGENCY / 2014-01
2014-02
Sources : SQLI Agency
65

66. START SIMPLE
JUST ENOUGH
is
MORE
Milton Glaser
© SQLI AGENCY / 2014-01
2014-02
Sources : SQLI Agency
66

67. START SIMPLE
© SQLI AGENCY / 2014-01
2014-02
Sources : SQLI Agency
67

68. START SIMPLE
© SQLI AGENCY / 2014-01
2014-02
Sources : SQLI Agency
68

69. BEST PRACTICES
Start small
© SQLI AGENCY / 2014-01
2014-02
69

70. START SMALL
© SQLI AGENCY / 2014-01
2014-02
Sources : SQLI Agency
70

71. BEST PRACTICES
Get dirty
© SQLI AGENCY / 2014-01
2014-02
71

72. START DIRTY
© SQLI AGENCY / 2014-01
2014-02
Sources : SQLI Agency
72

73. BEST PRACTICES
Go fast
© SQLI AGENCY / 2014-01
2014-02
73

74. GO FAST
Use the
DESIGN STUDIO
methodology
© SQLI AGENCY / 2014-01
2014-02
74

75. GO FAST
6—8—5
© SQLI AGENCY / 2014-01
2014-02
Sources : UXRomandie
75

76. GO FAST
6 to 8 sketches in 5 minutes
© SQLI AGENCY / 2014-01
2014-02
76

77. GO FAST
© SQLI AGENCY / 2014-01
2014-02
Sources : UXRomandie
77

78. GO FAST
© SQLI AGENCY / 2014-01
2014-02
Sources : UXRomandie
78

79. GO FAST
Then
PITCH
to your team
© SQLI AGENCY / 2014-01
2014-02
79

80. GO FAST
© SQLI AGENCY / 2014-01
2014-02
Sources : UXRomandie
80

81. GO FAST
And
ITERATE
with your team
© SQLI AGENCY / 2014-01
2014-02
81

82. GO FAST
© SQLI AGENCY / 2014-01
2014-02
Sources : UXRomandie
82

83. BEST PRACTICES
Explore
© SQLI AGENCY / 2014-01
2014-02
83

84. EXPLORE
© SQLI AGENCY / 2014-01
2014-02
Sources : SQLI Agency
84

85. EXPLORE
© SQLI AGENCY / 2014-01
2014-02
Sources : SQLI Agency
85

86. EXPLORE
© SQLI AGENCY / 2014-01
2014-02
Sources : JF
86

87. BEST PRACTICES
Comment
© SQLI AGENCY / 2014-01
2014-02
87

88. COMMENT
© SQLI AGENCY / 2014-01
2014-02
Sources : SQLI Agency
88

89. COMMENT
© SQLI AGENCY / 2014-01
2014-02
Sources : SQLI Agency
89

90. BEST PRACTICES
Add shades
© SQLI AGENCY / 2014-01
2014-02
90

91. ADD SHADES
© SQLI AGENCY / 2014-01
2014-02
Sources : SQLI Agency
91

92. ADD SHADES
© SQLI AGENCY / 2014-01
2014-02
Sources : SQLI Agency
92

93. BEST PRACTICES
Illustrate
© SQLI AGENCY / 2014-01
2014-02
93

94. ILLUSTRATE
© SQLI AGENCY / 2014-01
2014-02
Sources : SQLI Agency
94

95. BEST PRACTICES
Tell a story
© SQLI AGENCY / 2014-01
2014-02
95

96. TELL A STORY
© SQLI AGENCY / 2014-01
2014-02
Sources : SQLI Agency
96

97. TELL A STORY
© SQLI AGENCY / 2014-01
2014-02
Sources : SQLI Agency
97

98. VALUE STORY
TELL A& BENEFITS (S3)
© SQLI AGENCY / 2014-01
2013-11
2014-02
← BACK
Sources : SQLI Agency
18
98

99. REVEAL OF TOOL
TELL A STORY (S4)
© SQLI AGENCY / 2014-01
2013-11
2014-02
← BACK
Sources : SQLI Agency
19
99

100. TELL A STORY
USERS (S5)
© SQLI AGENCY / 2014-01
2014-02
Sources : SQLI Agency
100

101. BEST PRACTICES
Add some color
© SQLI AGENCY / 2014-01
2014-02
101

102. ADD SOME COLOR
© SQLI AGENCY / 2014-01
2014-02
Sources : SQLI Agency
102

103. ADD SOME COLOR
© SQLI AGENCY / 2014-01
2014-02
Sources : SQLI Agency
103

104. ADD SOME COLOR
© SQLI AGENCY / 2014-01
2014-02
Sources : SQLI Agency
104

105. ADD SOME COLOR
© SQLI AGENCY / 2014-01
2014-02
Sources : SQLI Agency
105

106. ADD SOME COLOR
© SQLI AGENCY / 2014-01
2014-02
Sources : SQLI Agency
106

107. TOOLS
WE CAN USE
© SQLI AGENCY / 2014-01
2014-02
107

108. WHITEBOARD
© SQLI AGENCY / 2014-01
2014-02
108

109. MARKER
→
© SQLI AGENCY / 2014-01
2014-02
109

110. BALLPOINT PEN
→
© SQLI AGENCY / 2014-01
2014-02
110

111. FINELINER PEN
→
© SQLI AGENCY / 2014-01
2014-02
111

112. GRAY MARKERS
→
© SQLI AGENCY / 2014-01
2014-02
112

113. COLOR MARKERS
→
© SQLI AGENCY / 2014-01
2014-02
113

114. DOT GRID NOTEBOOK
→
© SQLI AGENCY / 2014-01
2014-02
114

115. POST-IT NOTES
→
© SQLI AGENCY / 2014-01
2014-02
115

116. PAPER IPAD APP
→
© SQLI AGENCY / 2014-01
2014-02
116

117. TOUCH STYLUS
→
© SQLI AGENCY / 2014-01
2014-02
117

118. BOOKS
→
© SQLI AGENCY / 2014-01
2014-02
118

119. JUMP ON THE
SCREEN
© SQLI AGENCY / 2014-01
2014-02
119

120. WARNING
WARNING
This is not an exhaustive overview
→
© SQLI AGENCY / 2014-01
2014-02
120

121. INTERACTION
DESIGN
© SQLI AGENCY / 2014-01
2014-02
121

122. BALSAMIQ
→
© SQLI AGENCY / 2014-01
2014-02
122

123. BALSAMIQ
→
© SQLI AGENCY / 2014-01
2014-02
Sources : Our boss’ son
123

124. BALSAMIQ
+ Very simple
+ Available on Mac & PC
- Miss some advanced features
→
© SQLI AGENCY / 2014-01
2014-02
124

125. OMNIGRAFFLE
→
© SQLI AGENCY / 2014-01
2014-02
125

126. OMNIGRAFFLE
→
© SQLI AGENCY / 2014-01
2014-02
Sources : Omnigraffle
126

127. OMNIGRAFFLE
+ Powerful
+ Versatile
- Messy interface/shortcuts
- Available only on Mac
→
© SQLI AGENCY / 2014-01
2014-02
127

128. AXURE
→
© SQLI AGENCY / 2014-01
2014-02
128

129. AXURE
→
© SQLI AGENCY / 2014-01
2014-02
Sources : Axure
129

130. AXURE
+ Powerful
+ Complete
+ Available on Mac & PC
- Complicated
- Expensive
→
© SQLI AGENCY / 2014-01
2014-02
130

131. VISUAL
DESIGN
© SQLI AGENCY / 2014-01
2014-02
131

132. ADOBE PHOTOSHOP
→
© SQLI AGENCY / 2014-01
2014-02
132

133. ADOBE PHOTOSHOP
+ Leader app
+ Cool new features
+ Available on Mac & PC
- Too heavy
- Not responsive
→
© SQLI AGENCY / 2014-01
2014-02
133

134. ADOBE ILLUSTRATOR
→
© SQLI AGENCY / 2014-01
2014-02
134

135. ADOBE ILLUSTRATOR
+ Vector powered
+ Available on Mac & PC
- Not responsive
→
© SQLI AGENCY / 2014-01
2014-02
135

136. ADOBE INDESIGN
→
© SQLI AGENCY / 2014-01
2014-02
136

137. ADOBE INDESIGN
+ Interactive
+ Available on Mac & PC
- Still too much print oriented
→
© SQLI AGENCY / 2014-01
2014-02
137

138. SKETCH
→
© SQLI AGENCY / 2014-01
2014-02
138

139. SKETCH
→
© SQLI AGENCY / 2014-01
2014-02
Sources : Bohemian Coding
139

140. SKETCH
+ Vector powered
+ Simple
+ Cheap
- Very buggy
- Available only on Mac
→
© SQLI AGENCY / 2014-01
2014-02
140

141. WEB
DESIGN
© SQLI AGENCY / 2014-01
2014-02
141

142. ADOBE EDGE REFLOW
→
© SQLI AGENCY / 2014-01
2014-02
142

143. ADOBE EDGE REFLOW
→
© SQLI AGENCY / 2014-01
2014-02
Sources : Adobe
143

144. ADOBE EDGE REFLOW
+ Responsive
+ Connected to Photoshop
+ Available on Mac & PC
- Dirty code
- Not interactive
- Still in beta
→
© SQLI AGENCY / 2014-01
2014-02
144

145. MACAW
→
© SQLI AGENCY / 2014-01
2014-02
145

146. MACAW
→
© SQLI AGENCY / 2014-01
2014-02
Sources : Macaw
146

147. MACAW
+ Responsive
+ Clean code
+ Simple
- Available only on Mac
- Not interactive
- Not available yet
→
© SQLI AGENCY / 2014-01
2014-02
147

148. MOBILE
PROTOTYPING
© SQLI AGENCY / 2014-01
2014-02
148

149. POP
→
© SQLI AGENCY / 2014-01
2014-02
149

150. POP
→
© SQLI AGENCY / 2014-01
2014-02
Sources : POP
150

151. POP
+ Simple
+ Free
+ Available on iOS & Android
- Still in beta
→
© SQLI AGENCY / 2014-01
2014-02
151

152. PROTOSKETCH
→
© SQLI AGENCY / 2014-01
2014-02
152

153. PROTOSKETCH
→
© SQLI AGENCY / 2014-01
2014-02
Sources : UI Stencils
153

154. PROTOSKETCH
+ Simple
+ Sharing feature
+ Free
- Available only on iOS
→
© SQLI AGENCY / 2014-01
2014-02
154

155. MERCI
jfontana.fr
@skynebula
→ Twitter
→ Behance
→ Dribbble
→ Pinterest
…
© SQLI AGENCY / 2014-01
2014-02
155

156. QUESTION?
ANSWERS!
© SQLI AGENCY / 2014-01
2014-02
156

157. NEXT
EVENTS
© SQLI AGENCY / 2014-01
2014-02
157

158. NEXT EVENTS
© SQLI AGENCY / 2014-01
2014-02
158

159. NEXT EVENTS
Creating Delightful User Experiences
2 days - 8 talks - 8 workshops
Thursday 22nd & Friday 23rd May 2014
uxlausanne.com
© SQLI AGENCY / 2014-01
2014-02
159

160. LET'S GET CONNECTED!
sqliagency.ch
@sqliagency_ch
@sqliagency_ch
/sqliagencych
#TxDxS
© SQLI AGENCY / 2014-01
2014-02
160

161. THANK YOU!
Now,
let's drink
& share!
THANK YOU!
© SQLI AGENCY / 2014-01
2014-02
161

162. © SQLI AGENCY
SQLIAGENCY.CH