presents

!

TALK
DRINK
SHARE
THINK × DESIGN × SHARE
WELCOME
TALK
DRINK
SHARE
© SQLI AGENCY / 2014-01
2014-02

2
SQLI
AGENCY
© SQLI AGENCY / 2014-01
2014-02

3
WHERE WE ARE

LAUSANNE
© SQLI AGENCY / 2014-01
2014-02

GENEVA
4
WHAT WE DO

© SQLI AGENCY / 2014-01
2014-02

5
WHO WE ARE

Mathieu Collet

Benoît Henry

Jérémie Fontana

Lidia Santos Rico

Ludmilla El Khazen

Véronique Tillaud

Fleur...
LET'S GET CONNECTED!

sqliagency.ch

@sqliagency_ch

@sqliagency_ch

/sqliagencych

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

8
JÉRÉMIE
FONTANA
Art Director
© SQLI AGENCY / 2014-01
2014-02

@skynebula

9
WHO THE HECK AM I?

?

© SQLI AGENCY / 2014-01
2014-02

10
WHO THE HECK AM I?

YO

JÉRÉMIE
© SQLI AGENCY / 2014-01
2014-02

11
WHO THE HECK AM I?

33 year old French dude living in Lausanne
Studied electronics, photography & graphic design
Designing...
FROM PENS
TO PIXELS interface design
Wireframe sketching & user
© SQLI AGENCY / 2014-01
2014-02

13
FROM PENS TO PIXELS
TITLE INSPIRED BY

© SQLI AGENCY / 2014-01
2014-02

14
FROM PENS TO PIXELS

→

© SQLI AGENCY / 2014-01
2014-02

15
FROM PENS TO PIXELS

→

© SQLI AGENCY / 2014-01
2014-02

16
DISCLAIMER

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

17
DISCLAIMER 2

DISCLAIMER

2

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

18
CONTEXT
© SQLI AGENCY / 2014-01
2014-02

19
THIS IS YOUR BRAIN

© SQLI AGENCY / 2014-01
2014-02

20
LEFT BRAIN VS RIGHT BRAIN

© SQLI AGENCY / 2014-01
2014-02

21
LEFT BRAIN VS RIGHT BRAIN

Functional
Rational
Sequential
Logical

© SQLI AGENCY / 2014-01
2014-02

Emotional
Intuitive
Si...
SO…

FREE
your
MIND
© SQLI AGENCY / 2014-01
2014-02

Sources : Jérémie Fontana

23
GO BACK TO CHILDHOOD

Aircraft design by me (cca mid 80s)
© SQLI AGENCY / 2014-01
2014-02

Sources : Jérémie Fontana

24
AND THE MAGIC HAPPENS

© SQLI AGENCY / 2014-01
2014-02

Sources : Sébastien Gerbier

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

26
WHAT IS A SKETCH?

Sketching
© SQLI AGENCY / 2014-01
2014-02

is not

Drawing
27
WHAT IS A SKETCH?

Sketching
© SQLI AGENCY / 2014-01
2014-02

is not

Drawing
Sources : SQLI Agency & Sébastien Gerbier

2...
WHAT IS A SKETCH?

Sketching simple
is

© SQLI AGENCY / 2014-01
2014-02

29
WHAT IS A SKETCH?

Sketching fast
is

© SQLI AGENCY / 2014-01
2014-02

30
WHAT IS A SKETCH?

Sketching rough
is

© SQLI AGENCY / 2014-01
2014-02

31
WHAT IS A SKETCH?

Sketching cheap
is

© SQLI AGENCY / 2014-01
2014-02

32
WHAT IS A SKETCH?

Sketching disposable
is

© SQLI AGENCY / 2014-01
2014-02

33
WHAT IS A SKETCH?

Sketching > talking
is

© SQLI AGENCY / 2014-01
2014-02

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

35
WHY WE SKETCH?

We sketch
to think
© SQLI AGENCY / 2014-01
2014-02

36
WE SKETCH TO THINK

© SQLI AGENCY / 2014-01
2014-02

Sources : Frank Gehry

37
WE SKETCH TO THINK

© SQLI AGENCY / 2014-01
2014-02

Sources : Frank Gehry

38
WE SKETCH TO THINK

© SQLI AGENCY / 2014-01
2014-02

Sources : Jack Dorsey

39
WHY WE SKETCH?

We sketch
to record
© SQLI AGENCY / 2014-01
2014-02

40
WE SKETCH TO RECORD

© SQLI AGENCY / 2014-01
2014-02

Sources : AIGA

41
WE SKETCH TO RECORD

© SQLI AGENCY / 2014-01
2014-02

Sources : Sébastien Gerbier

42
WHY WE SKETCH?

We sketch
to communicate
© SQLI AGENCY / 2014-01
2014-02

43
WE SKETCH TO COMMUNICATE

© SQLI AGENCY / 2014-01
2014-02

Sources : Grottes de Lascaux

44
WE SKETCH TO COMMUNICATE

© SQLI AGENCY / 2014-01
2014-02

Sources : Microsoft

45
WHY WE SKETCH?

We sketch
to document
© SQLI AGENCY / 2014-01
2014-02

46
WE SKETCH TO DOCUMENT

© SQLI AGENCY / 2014-01
2014-02

Sources : Edward Tufte

47
WE SKETCH TO DOCUMENT

© SQLI AGENCY / 2014-01
2014-02

Sources : Dieter Rams

48
WHY WE SKETCH?

We sketch
to experiment
© SQLI AGENCY / 2014-01
2014-02

49
WE SKETCH TO EXPERIMENT

© SQLI AGENCY / 2014-01
2014-02

Sources : Peter Biľak

50
WE SKETCH TO EXPERIMENT

© SQLI AGENCY / 2014-01
2014-02

Sources : realbeautysketches.dove.com / FBI

51
WHY WE SKETCH?

We sketch
to fail
© SQLI AGENCY / 2014-01
2014-02

52
WE SKETCH TO FAIL

© SQLI AGENCY / 2014-01
2014-02

Sources : Everybody’s trash bin

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

54
BASIC SHAPES

Only 4 basic shapes
© SQLI AGENCY / 2014-01
2014-02

55
BASIC SHAPES

Only
© SQLI AGENCY / 2014-01
2014-02

56
BASIC SHAPES

Only
© SQLI AGENCY / 2014-01
2014-02

57
BASIC SHAPES

Only
© SQLI AGENCY / 2014-01
2014-02

58
BASIC SHAPES

Only
© SQLI AGENCY / 2014-01
2014-02

59
BASIC SHAPES

It’s that
© SQLI AGENCY / 2014-01
2014-02

60
BASIC SHAPES

Sketching in Service Design | Service Design Thinks & Drinks, April 2012
© SQLI AGENCY / 2014-01
2014-02

So...
BASIC SHAPES

Sketching in Service Design | Service Design Thinks & Drinks, April 2012
© SQLI AGENCY / 2014-01
2014-02

So...
BASIC SHAPES

© SQLI AGENCY / 2014-01
2014-02

Sources : Ben Crothers

63
BEST PRACTICES

Start simple
© SQLI AGENCY / 2014-01
2014-02

64
START SIMPLE

LESS
MORE
is

Ludwig Mies van der Rohe

© SQLI AGENCY / 2014-01
2014-02

Sources : SQLI Agency

65
START SIMPLE

JUST ENOUGH
is

MORE
Milton Glaser

© SQLI AGENCY / 2014-01
2014-02

Sources : SQLI Agency

66
START SIMPLE

© SQLI AGENCY / 2014-01
2014-02

Sources : SQLI Agency

67
START SIMPLE

© SQLI AGENCY / 2014-01
2014-02

Sources : SQLI Agency

68
BEST PRACTICES

Start small
© SQLI AGENCY / 2014-01
2014-02

69
START SMALL

© SQLI AGENCY / 2014-01
2014-02

Sources : SQLI Agency

70
BEST PRACTICES

Get dirty
© SQLI AGENCY / 2014-01
2014-02

71
START DIRTY

© SQLI AGENCY / 2014-01
2014-02

Sources : SQLI Agency

72
BEST PRACTICES

Go fast
© SQLI AGENCY / 2014-01
2014-02

73
GO FAST

Use the

DESIGN STUDIO
methodology
© SQLI AGENCY / 2014-01
2014-02

74
GO FAST

6—8—5
© SQLI AGENCY / 2014-01
2014-02

Sources : UXRomandie

75
GO FAST

6 to 8 sketches in 5 minutes
© SQLI AGENCY / 2014-01
2014-02

76
GO FAST

© SQLI AGENCY / 2014-01
2014-02

Sources : UXRomandie

77
GO FAST

© SQLI AGENCY / 2014-01
2014-02

Sources : UXRomandie

78
GO FAST

Then

PITCH
to your team
© SQLI AGENCY / 2014-01
2014-02

79
GO FAST

© SQLI AGENCY / 2014-01
2014-02

Sources : UXRomandie

80
GO FAST

And

ITERATE
with your team
© SQLI AGENCY / 2014-01
2014-02

81
GO FAST

© SQLI AGENCY / 2014-01
2014-02

Sources : UXRomandie

82
BEST PRACTICES

Explore
© SQLI AGENCY / 2014-01
2014-02

83
EXPLORE

© SQLI AGENCY / 2014-01
2014-02

Sources : SQLI Agency

84
EXPLORE

© SQLI AGENCY / 2014-01
2014-02

Sources : SQLI Agency

85
EXPLORE

© SQLI AGENCY / 2014-01
2014-02

Sources : JF

86
BEST PRACTICES

Comment
© SQLI AGENCY / 2014-01
2014-02

87
COMMENT

© SQLI AGENCY / 2014-01
2014-02

Sources : SQLI Agency

88
COMMENT

© SQLI AGENCY / 2014-01
2014-02

Sources : SQLI Agency

89
BEST PRACTICES

Add shades
© SQLI AGENCY / 2014-01
2014-02

90
ADD SHADES

© SQLI AGENCY / 2014-01
2014-02

Sources : SQLI Agency

91
ADD SHADES

© SQLI AGENCY / 2014-01
2014-02

Sources : SQLI Agency

92
BEST PRACTICES

Illustrate
© SQLI AGENCY / 2014-01
2014-02

93
ILLUSTRATE

© SQLI AGENCY / 2014-01
2014-02

Sources : SQLI Agency

94
BEST PRACTICES

Tell a story
© SQLI AGENCY / 2014-01
2014-02

95
TELL A STORY

© SQLI AGENCY / 2014-01
2014-02

Sources : SQLI Agency

96
TELL A STORY

© SQLI AGENCY / 2014-01
2014-02

Sources : SQLI Agency

97
VALUE STORY
TELL A& BENEFITS (S3)

© SQLI AGENCY / 2014-01
2013-11
2014-02

← BACK

Sources : SQLI Agency

18
98
REVEAL OF TOOL
TELL A STORY (S4)

© SQLI AGENCY / 2014-01
2013-11
2014-02

← BACK

Sources : SQLI Agency

19
99
TELL A STORY
USERS (S5)

© SQLI AGENCY / 2014-01
2014-02

Sources : SQLI Agency

100
BEST PRACTICES

Add some color
© SQLI AGENCY / 2014-01
2014-02

101
ADD SOME COLOR

© SQLI AGENCY / 2014-01
2014-02

Sources : SQLI Agency

102
ADD SOME COLOR

© SQLI AGENCY / 2014-01
2014-02

Sources : SQLI Agency

103
ADD SOME COLOR

© SQLI AGENCY / 2014-01
2014-02

Sources : SQLI Agency

104
ADD SOME COLOR

© SQLI AGENCY / 2014-01
2014-02

Sources : SQLI Agency

105
ADD SOME COLOR

© SQLI AGENCY / 2014-01
2014-02

Sources : SQLI Agency

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

107
WHITEBOARD

© SQLI AGENCY / 2014-01
2014-02

108
MARKER

→
© SQLI AGENCY / 2014-01
2014-02

109
BALLPOINT PEN

→
© SQLI AGENCY / 2014-01
2014-02

110
FINELINER PEN

→
© SQLI AGENCY / 2014-01
2014-02

111
GRAY MARKERS

→
© SQLI AGENCY / 2014-01
2014-02

112
COLOR MARKERS

→
© SQLI AGENCY / 2014-01
2014-02

113
DOT GRID NOTEBOOK

→
© SQLI AGENCY / 2014-01
2014-02

114
POST-IT NOTES

→
© SQLI AGENCY / 2014-01
2014-02

115
PAPER IPAD APP

→
© SQLI AGENCY / 2014-01
2014-02

116
TOUCH STYLUS

→
© SQLI AGENCY / 2014-01
2014-02

117
BOOKS

→
© SQLI AGENCY / 2014-01
2014-02

118
JUMP ON THE

SCREEN
© SQLI AGENCY / 2014-01
2014-02

119
WARNING

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

120
INTERACTION
DESIGN
© SQLI AGENCY / 2014-01
2014-02

121
BALSAMIQ

→
© SQLI AGENCY / 2014-01
2014-02

122
BALSAMIQ

→
© SQLI AGENCY / 2014-01
2014-02

Sources : Our boss’ son

123
BALSAMIQ

+ Very simple
+ Available on Mac & PC
- Miss some advanced features

→
© SQLI AGENCY / 2014-01
2014-02

124
OMNIGRAFFLE

→
© SQLI AGENCY / 2014-01
2014-02

125
OMNIGRAFFLE

→
© SQLI AGENCY / 2014-01
2014-02

Sources : Omnigraffle

126
OMNIGRAFFLE

+ Powerful
+ Versatile
- Messy interface/shortcuts
- Available only on Mac

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

→
© SQLI AGENCY / 2014-01
2014-02

128
AXURE

→
© SQLI AGENCY / 2014-01
2014-02

Sources : Axure

129
AXURE

+ Powerful
+ Complete
+ Available on Mac & PC
- Complicated
- Expensive

→
© SQLI AGENCY / 2014-01
2014-02

130
VISUAL
DESIGN
© SQLI AGENCY / 2014-01
2014-02

131
ADOBE PHOTOSHOP

→
© SQLI AGENCY / 2014-01
2014-02

132
ADOBE PHOTOSHOP

+ Leader app
+ Cool new features
+ Available on Mac & PC
- Too heavy
- Not responsive

→
© SQLI AGENCY / ...
ADOBE ILLUSTRATOR

→
© SQLI AGENCY / 2014-01
2014-02

134
ADOBE ILLUSTRATOR

+ Vector powered
+ Available on Mac & PC
- Not responsive

→
© SQLI AGENCY / 2014-01
2014-02

135
ADOBE INDESIGN

→
© SQLI AGENCY / 2014-01
2014-02

136
ADOBE INDESIGN

+ Interactive
+ Available on Mac & PC
- Still too much print oriented

→
© SQLI AGENCY / 2014-01
2014-02

...
SKETCH

→
© SQLI AGENCY / 2014-01
2014-02

138
SKETCH

→
© SQLI AGENCY / 2014-01
2014-02

Sources : Bohemian Coding

139
SKETCH

+ Vector powered
+ Simple
+ Cheap
- Very buggy
- Available only on Mac

→
© SQLI AGENCY / 2014-01
2014-02

140
WEB
DESIGN
© SQLI AGENCY / 2014-01
2014-02

141
ADOBE EDGE REFLOW

→
© SQLI AGENCY / 2014-01
2014-02

142
ADOBE EDGE REFLOW

→
© SQLI AGENCY / 2014-01
2014-02

Sources : Adobe

143
ADOBE EDGE REFLOW

+ Responsive
+ Connected to Photoshop
+ Available on Mac & PC
- Dirty code
- Not interactive
- Still in...
MACAW

→
© SQLI AGENCY / 2014-01
2014-02

145
MACAW

→
© SQLI AGENCY / 2014-01
2014-02

Sources : Macaw

146
MACAW

+ Responsive
+ Clean code
+ Simple
- Available only on Mac
- Not interactive
- Not available yet

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

148
POP

→
© SQLI AGENCY / 2014-01
2014-02

149
POP

→
© SQLI AGENCY / 2014-01
2014-02

Sources : POP

150
POP

+ Simple
+ Free
+ Available on iOS & Android
- Still in beta

→
© SQLI AGENCY / 2014-01
2014-02

151
PROTOSKETCH

→
© SQLI AGENCY / 2014-01
2014-02

152
PROTOSKETCH

→
© SQLI AGENCY / 2014-01
2014-02

Sources : UI Stencils

153
PROTOSKETCH

+ Simple
+ Sharing feature
+ Free
- Available only on iOS

→
© SQLI AGENCY / 2014-01
2014-02

154
MERCI

jfontana.fr
@skynebula
→ Twitter
→ Behance
→ Dribbble
→ Pinterest
…

© SQLI AGENCY / 2014-01
2014-02

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

156
NEXT
EVENTS
© SQLI AGENCY / 2014-01
2014-02

157
NEXT EVENTS

© SQLI AGENCY / 2014-01
2014-02

158
NEXT EVENTS

Creating Delightful User Experiences
2 days - 8 talks - 8 workshops
Thursday 22nd & Friday 23rd May 2014

uxl...
LET'S GET CONNECTED!

sqliagency.ch

@sqliagency_ch

@sqliagency_ch

/sqliagencych

#TxDxS
© SQLI AGENCY / 2014-01
2014-02...
THANK YOU!

Now,
let's drink
& share!

THANK YOU!
© SQLI AGENCY / 2014-01
2014-02

161
© SQLI AGENCY

SQLIAGENCY.CH
Prochain SlideShare
Chargement dans…5
×

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

1 754 vues

Publié le

An event about wireframe sketching and user interface design

Publié dans : Technologie
0 commentaire
3 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 754
Sur SlideShare
0
Issues des intégrations
0
Intégrations
22
Actions
Partages
0
Téléchargements
22
Commentaires
0
J’aime
3
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

×