Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Sqli Agency Suisse - Talk x Design x Share - Episode 2 - From Pens to Pixels

2,379 views

Published on

An event about wireframe sketching and user interface design

Published in: Technology
  • Be the first to comment

Sqli Agency Suisse - Talk x Design x Share - Episode 2 - From Pens to Pixels

  1. 1. presents ! TALK DRINK SHARE THINK × DESIGN × SHARE
  2. 2. WELCOME TALK DRINK SHARE © SQLI AGENCY / 2014-01 2014-02 2
  3. 3. SQLI AGENCY © SQLI AGENCY / 2014-01 2014-02 3
  4. 4. WHERE WE ARE LAUSANNE © SQLI AGENCY / 2014-01 2014-02 GENEVA 4
  5. 5. WHAT WE DO © SQLI AGENCY / 2014-01 2014-02 5
  6. 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. 7. LET'S GET CONNECTED! sqliagency.ch @sqliagency_ch @sqliagency_ch /sqliagencych #TxDxS © SQLI AGENCY / 2014-01 2014-02 7
  8. 8. LET'S GO! © SQLI AGENCY / 2014-01 2014-02 8
  9. 9. JÉRÉMIE FONTANA Art Director © SQLI AGENCY / 2014-01 2014-02 @skynebula 9
  10. 10. WHO THE HECK AM I? ? © SQLI AGENCY / 2014-01 2014-02 10
  11. 11. WHO THE HECK AM I? YO JÉRÉMIE © SQLI AGENCY / 2014-01 2014-02 11
  12. 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. 13. FROM PENS TO PIXELS interface design Wireframe sketching & user © SQLI AGENCY / 2014-01 2014-02 13
  14. 14. FROM PENS TO PIXELS TITLE INSPIRED BY © SQLI AGENCY / 2014-01 2014-02 14
  15. 15. FROM PENS TO PIXELS → © SQLI AGENCY / 2014-01 2014-02 15
  16. 16. FROM PENS TO PIXELS → © SQLI AGENCY / 2014-01 2014-02 16
  17. 17. DISCLAIMER DISCLAIMER This talk is not (only) for designers © SQLI AGENCY / 2014-01 2014-02 17
  18. 18. DISCLAIMER 2 DISCLAIMER 2 I will not teach you how to use Photoshop © SQLI AGENCY / 2014-01 2014-02 18
  19. 19. CONTEXT © SQLI AGENCY / 2014-01 2014-02 19
  20. 20. THIS IS YOUR BRAIN © SQLI AGENCY / 2014-01 2014-02 20
  21. 21. LEFT BRAIN VS RIGHT BRAIN © SQLI AGENCY / 2014-01 2014-02 21
  22. 22. LEFT BRAIN VS RIGHT BRAIN Functional Rational Sequential Logical © SQLI AGENCY / 2014-01 2014-02 Emotional Intuitive Simultaneous Inspiration 22
  23. 23. SO… FREE your MIND © SQLI AGENCY / 2014-01 2014-02 Sources : Jérémie Fontana 23
  24. 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. 25. AND THE MAGIC HAPPENS © SQLI AGENCY / 2014-01 2014-02 Sources : Sébastien Gerbier 25
  26. 26. WHAT IS A SKETCH? © SQLI AGENCY / 2014-01 2014-02 26
  27. 27. WHAT IS A SKETCH? Sketching © SQLI AGENCY / 2014-01 2014-02 is not Drawing 27
  28. 28. WHAT IS A SKETCH? Sketching © SQLI AGENCY / 2014-01 2014-02 is not Drawing Sources : SQLI Agency & Sébastien Gerbier 28
  29. 29. WHAT IS A SKETCH? Sketching simple is © SQLI AGENCY / 2014-01 2014-02 29
  30. 30. WHAT IS A SKETCH? Sketching fast is © SQLI AGENCY / 2014-01 2014-02 30
  31. 31. WHAT IS A SKETCH? Sketching rough is © SQLI AGENCY / 2014-01 2014-02 31
  32. 32. WHAT IS A SKETCH? Sketching cheap is © SQLI AGENCY / 2014-01 2014-02 32
  33. 33. WHAT IS A SKETCH? Sketching disposable is © SQLI AGENCY / 2014-01 2014-02 33
  34. 34. WHAT IS A SKETCH? Sketching > talking is © SQLI AGENCY / 2014-01 2014-02 34
  35. 35. WHY WE SKETCH? © SQLI AGENCY / 2014-01 2014-02 35
  36. 36. WHY WE SKETCH? We sketch to think © SQLI AGENCY / 2014-01 2014-02 36
  37. 37. WE SKETCH TO THINK © SQLI AGENCY / 2014-01 2014-02 Sources : Frank Gehry 37
  38. 38. WE SKETCH TO THINK © SQLI AGENCY / 2014-01 2014-02 Sources : Frank Gehry 38
  39. 39. WE SKETCH TO THINK © SQLI AGENCY / 2014-01 2014-02 Sources : Jack Dorsey 39
  40. 40. WHY WE SKETCH? We sketch to record © SQLI AGENCY / 2014-01 2014-02 40
  41. 41. WE SKETCH TO RECORD © SQLI AGENCY / 2014-01 2014-02 Sources : AIGA 41
  42. 42. WE SKETCH TO RECORD © SQLI AGENCY / 2014-01 2014-02 Sources : Sébastien Gerbier 42
  43. 43. WHY WE SKETCH? We sketch to communicate © SQLI AGENCY / 2014-01 2014-02 43
  44. 44. WE SKETCH TO COMMUNICATE © SQLI AGENCY / 2014-01 2014-02 Sources : Grottes de Lascaux 44
  45. 45. WE SKETCH TO COMMUNICATE © SQLI AGENCY / 2014-01 2014-02 Sources : Microsoft 45
  46. 46. WHY WE SKETCH? We sketch to document © SQLI AGENCY / 2014-01 2014-02 46
  47. 47. WE SKETCH TO DOCUMENT © SQLI AGENCY / 2014-01 2014-02 Sources : Edward Tufte 47
  48. 48. WE SKETCH TO DOCUMENT © SQLI AGENCY / 2014-01 2014-02 Sources : Dieter Rams 48
  49. 49. WHY WE SKETCH? We sketch to experiment © SQLI AGENCY / 2014-01 2014-02 49
  50. 50. WE SKETCH TO EXPERIMENT © SQLI AGENCY / 2014-01 2014-02 Sources : Peter Biľak 50
  51. 51. WE SKETCH TO EXPERIMENT © SQLI AGENCY / 2014-01 2014-02 Sources : realbeautysketches.dove.com / FBI 51
  52. 52. WHY WE SKETCH? We sketch to fail © SQLI AGENCY / 2014-01 2014-02 52
  53. 53. WE SKETCH TO FAIL © SQLI AGENCY / 2014-01 2014-02 Sources : Everybody’s trash bin 53
  54. 54. HOW DO WE SKETCH? © SQLI AGENCY / 2014-01 2014-02 54
  55. 55. BASIC SHAPES Only 4 basic shapes © SQLI AGENCY / 2014-01 2014-02 55
  56. 56. BASIC SHAPES Only © SQLI AGENCY / 2014-01 2014-02 56
  57. 57. BASIC SHAPES Only © SQLI AGENCY / 2014-01 2014-02 57
  58. 58. BASIC SHAPES Only © SQLI AGENCY / 2014-01 2014-02 58
  59. 59. BASIC SHAPES Only © SQLI AGENCY / 2014-01 2014-02 59
  60. 60. BASIC SHAPES It’s that © SQLI AGENCY / 2014-01 2014-02 60
  61. 61. BASIC SHAPES Sketching in Service Design | Service Design Thinks & Drinks, April 2012 © SQLI AGENCY / 2014-01 2014-02 Sources : Ben Crothers 61
  62. 62. BASIC SHAPES Sketching in Service Design | Service Design Thinks & Drinks, April 2012 © SQLI AGENCY / 2014-01 2014-02 Sources : Ben Crothers 62
  63. 63. BASIC SHAPES © SQLI AGENCY / 2014-01 2014-02 Sources : Ben Crothers 63
  64. 64. BEST PRACTICES Start simple © SQLI AGENCY / 2014-01 2014-02 64
  65. 65. START SIMPLE LESS MORE is Ludwig Mies van der Rohe © SQLI AGENCY / 2014-01 2014-02 Sources : SQLI Agency 65
  66. 66. START SIMPLE JUST ENOUGH is MORE Milton Glaser © SQLI AGENCY / 2014-01 2014-02 Sources : SQLI Agency 66
  67. 67. START SIMPLE © SQLI AGENCY / 2014-01 2014-02 Sources : SQLI Agency 67
  68. 68. START SIMPLE © SQLI AGENCY / 2014-01 2014-02 Sources : SQLI Agency 68
  69. 69. BEST PRACTICES Start small © SQLI AGENCY / 2014-01 2014-02 69
  70. 70. START SMALL © SQLI AGENCY / 2014-01 2014-02 Sources : SQLI Agency 70
  71. 71. BEST PRACTICES Get dirty © SQLI AGENCY / 2014-01 2014-02 71
  72. 72. START DIRTY © SQLI AGENCY / 2014-01 2014-02 Sources : SQLI Agency 72
  73. 73. BEST PRACTICES Go fast © SQLI AGENCY / 2014-01 2014-02 73
  74. 74. GO FAST Use the DESIGN STUDIO methodology © SQLI AGENCY / 2014-01 2014-02 74
  75. 75. GO FAST 6—8—5 © SQLI AGENCY / 2014-01 2014-02 Sources : UXRomandie 75
  76. 76. GO FAST 6 to 8 sketches in 5 minutes © SQLI AGENCY / 2014-01 2014-02 76
  77. 77. GO FAST © SQLI AGENCY / 2014-01 2014-02 Sources : UXRomandie 77
  78. 78. GO FAST © SQLI AGENCY / 2014-01 2014-02 Sources : UXRomandie 78
  79. 79. GO FAST Then PITCH to your team © SQLI AGENCY / 2014-01 2014-02 79
  80. 80. GO FAST © SQLI AGENCY / 2014-01 2014-02 Sources : UXRomandie 80
  81. 81. GO FAST And ITERATE with your team © SQLI AGENCY / 2014-01 2014-02 81
  82. 82. GO FAST © SQLI AGENCY / 2014-01 2014-02 Sources : UXRomandie 82
  83. 83. BEST PRACTICES Explore © SQLI AGENCY / 2014-01 2014-02 83
  84. 84. EXPLORE © SQLI AGENCY / 2014-01 2014-02 Sources : SQLI Agency 84
  85. 85. EXPLORE © SQLI AGENCY / 2014-01 2014-02 Sources : SQLI Agency 85
  86. 86. EXPLORE © SQLI AGENCY / 2014-01 2014-02 Sources : JF 86
  87. 87. BEST PRACTICES Comment © SQLI AGENCY / 2014-01 2014-02 87
  88. 88. COMMENT © SQLI AGENCY / 2014-01 2014-02 Sources : SQLI Agency 88
  89. 89. COMMENT © SQLI AGENCY / 2014-01 2014-02 Sources : SQLI Agency 89
  90. 90. BEST PRACTICES Add shades © SQLI AGENCY / 2014-01 2014-02 90
  91. 91. ADD SHADES © SQLI AGENCY / 2014-01 2014-02 Sources : SQLI Agency 91
  92. 92. ADD SHADES © SQLI AGENCY / 2014-01 2014-02 Sources : SQLI Agency 92
  93. 93. BEST PRACTICES Illustrate © SQLI AGENCY / 2014-01 2014-02 93
  94. 94. ILLUSTRATE © SQLI AGENCY / 2014-01 2014-02 Sources : SQLI Agency 94
  95. 95. BEST PRACTICES Tell a story © SQLI AGENCY / 2014-01 2014-02 95
  96. 96. TELL A STORY © SQLI AGENCY / 2014-01 2014-02 Sources : SQLI Agency 96
  97. 97. TELL A STORY © SQLI AGENCY / 2014-01 2014-02 Sources : SQLI Agency 97
  98. 98. VALUE STORY TELL A& BENEFITS (S3) © SQLI AGENCY / 2014-01 2013-11 2014-02 ← BACK Sources : SQLI Agency 18 98
  99. 99. REVEAL OF TOOL TELL A STORY (S4) © SQLI AGENCY / 2014-01 2013-11 2014-02 ← BACK Sources : SQLI Agency 19 99
  100. 100. TELL A STORY USERS (S5) © SQLI AGENCY / 2014-01 2014-02 Sources : SQLI Agency 100
  101. 101. BEST PRACTICES Add some color © SQLI AGENCY / 2014-01 2014-02 101
  102. 102. ADD SOME COLOR © SQLI AGENCY / 2014-01 2014-02 Sources : SQLI Agency 102
  103. 103. ADD SOME COLOR © SQLI AGENCY / 2014-01 2014-02 Sources : SQLI Agency 103
  104. 104. ADD SOME COLOR © SQLI AGENCY / 2014-01 2014-02 Sources : SQLI Agency 104
  105. 105. ADD SOME COLOR © SQLI AGENCY / 2014-01 2014-02 Sources : SQLI Agency 105
  106. 106. ADD SOME COLOR © SQLI AGENCY / 2014-01 2014-02 Sources : SQLI Agency 106
  107. 107. TOOLS WE CAN USE © SQLI AGENCY / 2014-01 2014-02 107
  108. 108. WHITEBOARD © SQLI AGENCY / 2014-01 2014-02 108
  109. 109. MARKER → © SQLI AGENCY / 2014-01 2014-02 109
  110. 110. BALLPOINT PEN → © SQLI AGENCY / 2014-01 2014-02 110
  111. 111. FINELINER PEN → © SQLI AGENCY / 2014-01 2014-02 111
  112. 112. GRAY MARKERS → © SQLI AGENCY / 2014-01 2014-02 112
  113. 113. COLOR MARKERS → © SQLI AGENCY / 2014-01 2014-02 113
  114. 114. DOT GRID NOTEBOOK → © SQLI AGENCY / 2014-01 2014-02 114
  115. 115. POST-IT NOTES → © SQLI AGENCY / 2014-01 2014-02 115
  116. 116. PAPER IPAD APP → © SQLI AGENCY / 2014-01 2014-02 116
  117. 117. TOUCH STYLUS → © SQLI AGENCY / 2014-01 2014-02 117
  118. 118. BOOKS → © SQLI AGENCY / 2014-01 2014-02 118
  119. 119. JUMP ON THE SCREEN © SQLI AGENCY / 2014-01 2014-02 119
  120. 120. WARNING WARNING This is not an exhaustive overview → © SQLI AGENCY / 2014-01 2014-02 120
  121. 121. INTERACTION DESIGN © SQLI AGENCY / 2014-01 2014-02 121
  122. 122. BALSAMIQ → © SQLI AGENCY / 2014-01 2014-02 122
  123. 123. BALSAMIQ → © SQLI AGENCY / 2014-01 2014-02 Sources : Our boss’ son 123
  124. 124. BALSAMIQ + Very simple + Available on Mac & PC - Miss some advanced features → © SQLI AGENCY / 2014-01 2014-02 124
  125. 125. OMNIGRAFFLE → © SQLI AGENCY / 2014-01 2014-02 125
  126. 126. OMNIGRAFFLE → © SQLI AGENCY / 2014-01 2014-02 Sources : Omnigraffle 126
  127. 127. OMNIGRAFFLE + Powerful + Versatile - Messy interface/shortcuts - Available only on Mac → © SQLI AGENCY / 2014-01 2014-02 127
  128. 128. AXURE → © SQLI AGENCY / 2014-01 2014-02 128
  129. 129. AXURE → © SQLI AGENCY / 2014-01 2014-02 Sources : Axure 129
  130. 130. AXURE + Powerful + Complete + Available on Mac & PC - Complicated - Expensive → © SQLI AGENCY / 2014-01 2014-02 130
  131. 131. VISUAL DESIGN © SQLI AGENCY / 2014-01 2014-02 131
  132. 132. ADOBE PHOTOSHOP → © SQLI AGENCY / 2014-01 2014-02 132
  133. 133. ADOBE PHOTOSHOP + Leader app + Cool new features + Available on Mac & PC - Too heavy - Not responsive → © SQLI AGENCY / 2014-01 2014-02 133
  134. 134. ADOBE ILLUSTRATOR → © SQLI AGENCY / 2014-01 2014-02 134
  135. 135. ADOBE ILLUSTRATOR + Vector powered + Available on Mac & PC - Not responsive → © SQLI AGENCY / 2014-01 2014-02 135
  136. 136. ADOBE INDESIGN → © SQLI AGENCY / 2014-01 2014-02 136
  137. 137. ADOBE INDESIGN + Interactive + Available on Mac & PC - Still too much print oriented → © SQLI AGENCY / 2014-01 2014-02 137
  138. 138. SKETCH → © SQLI AGENCY / 2014-01 2014-02 138
  139. 139. SKETCH → © SQLI AGENCY / 2014-01 2014-02 Sources : Bohemian Coding 139
  140. 140. SKETCH + Vector powered + Simple + Cheap - Very buggy - Available only on Mac → © SQLI AGENCY / 2014-01 2014-02 140
  141. 141. WEB DESIGN © SQLI AGENCY / 2014-01 2014-02 141
  142. 142. ADOBE EDGE REFLOW → © SQLI AGENCY / 2014-01 2014-02 142
  143. 143. ADOBE EDGE REFLOW → © SQLI AGENCY / 2014-01 2014-02 Sources : Adobe 143
  144. 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. 145. MACAW → © SQLI AGENCY / 2014-01 2014-02 145
  146. 146. MACAW → © SQLI AGENCY / 2014-01 2014-02 Sources : Macaw 146
  147. 147. MACAW + Responsive + Clean code + Simple - Available only on Mac - Not interactive - Not available yet → © SQLI AGENCY / 2014-01 2014-02 147
  148. 148. MOBILE PROTOTYPING © SQLI AGENCY / 2014-01 2014-02 148
  149. 149. POP → © SQLI AGENCY / 2014-01 2014-02 149
  150. 150. POP → © SQLI AGENCY / 2014-01 2014-02 Sources : POP 150
  151. 151. POP + Simple + Free + Available on iOS & Android - Still in beta → © SQLI AGENCY / 2014-01 2014-02 151
  152. 152. PROTOSKETCH → © SQLI AGENCY / 2014-01 2014-02 152
  153. 153. PROTOSKETCH → © SQLI AGENCY / 2014-01 2014-02 Sources : UI Stencils 153
  154. 154. PROTOSKETCH + Simple + Sharing feature + Free - Available only on iOS → © SQLI AGENCY / 2014-01 2014-02 154
  155. 155. MERCI jfontana.fr @skynebula → Twitter → Behance → Dribbble → Pinterest … © SQLI AGENCY / 2014-01 2014-02 155
  156. 156. QUESTION? ANSWERS! © SQLI AGENCY / 2014-01 2014-02 156
  157. 157. NEXT EVENTS © SQLI AGENCY / 2014-01 2014-02 157
  158. 158. NEXT EVENTS © SQLI AGENCY / 2014-01 2014-02 158
  159. 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. 160. LET'S GET CONNECTED! sqliagency.ch @sqliagency_ch @sqliagency_ch /sqliagencych #TxDxS © SQLI AGENCY / 2014-01 2014-02 160
  161. 161. THANK YOU! Now, let's drink & share! THANK YOU! © SQLI AGENCY / 2014-01 2014-02 161
  162. 162. © SQLI AGENCY SQLIAGENCY.CH

×