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

THINK × DESIGN × SHARE

!

TALK DRINK SHARE

presents

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

WELCOME TALK DRINK SHARE

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

SQLI AGENCY

"3


WHERE WE ARE

"4

LAUSANNE GENEVA


WHAT WE DO

"5


WHO WE ARE

"6

Mathieu Collet Agency Manager

Benoît Henry Strategist

Véronique Tillaud UX Designer

Fleur Ettwiller UX Designer

Jérémie Fontana Art Director

Chiara Valerio UX Designer

Andy McFee Front-End Developer

Aldo Ferrari Head of Development

Barbara Chabriw Interactive Designer

David Bernard Front-End Developer

Lidia Santos Rico Head of Marketing

Thomas Riotte UX Designer

Ludmilla El Khazen Communication Officer

Damien Gauthier UX Designer

YOU?


LET'S GET CONNECTED!

"7

#TxDxS

@sqliagency_ch @sqliagency_ch /sqliagencych

sqliagency.ch


LET'S GO!


JÉRÉMIE FONTANA Art Director

"9

@skynebula


WHO THE HECK AM I?

"10

?


WHO THE HECK AM I?

"11

JÉRÉMIE

YO


WHO THE HECK AM I?

"12

33 year old French dude living in Lausanne Studied electronics, photography & graphic design Designing for 11 years


FROM PENS TO PIXELS Wireframe sketching & user interface design

"13


FROM PENS TO PIXELS

"14

TITLE INSPIRED BY


FROM PENS TO PIXELS

"15

→


FROM PENS TO PIXELS

"16

→


DISCLAIMER

"17

DISCLAIMER This talk is not (only) for designers


DISCLAIMER 2

"18

DISCLAIMER I will not teach you how to use Photoshop

2


CONTEXT

"19


THIS IS YOUR BRAIN

"20


LEFT BRAIN VS RIGHT BRAIN

"21


LEFT BRAIN VS RIGHT BRAIN

"22

Functional Rational

Sequential Logical

Emotional Intuitive

Simultaneous Inspiration


SO…

"23Sources : Jérémie Fontana

FREE your

MIND


GO BACK TO CHILDHOOD

"24Sources : Jérémie Fontana

Aircraft design by me (cca mid 80s)


AND THE MAGIC HAPPENS

"25Sources : Sébastien Gerbier

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

WHAT IS A SKETCH?

"26


WHAT IS A SKETCH?

"27

is notSketching Drawing


WHAT IS A SKETCH?

"28

is notSketching DrawingSources : SQLI Agency & Sébastien Gerbier


WHAT IS A SKETCH?

"29

simpleisSketching


WHAT IS A SKETCH?

"30

fastisSketching


WHAT IS A SKETCH?

"31

roughisSketching


WHAT IS A SKETCH?

"32

cheapisSketching


WHAT IS A SKETCH?

"33

disposableisSketching


WHAT IS A SKETCH?

"34

> talkingisSketching


WHY WE SKETCH?

"35


WHY WE SKETCH?

"36

We sketch to think


WE SKETCH TO THINK

"37Sources : Frank Gehry


WE SKETCH TO THINK

"38Sources : Frank Gehry


WE SKETCH TO THINK

"39Sources : Jack Dorsey


WHY WE SKETCH?

"40

We sketch to record


WE SKETCH TO RECORD

"41Sources : AIGA


WE SKETCH TO RECORD

"42Sources : Sébastien Gerbier


WHY WE SKETCH?

"43

We sketch to communicate


WE SKETCH TO COMMUNICATE

"44Sources : Grottes de Lascaux


WE SKETCH TO COMMUNICATE

"45Sources : Microsoft


WHY WE SKETCH?

"46

We sketch to document


WE SKETCH TO DOCUMENT

"47Sources : Edward Tufte


WE SKETCH TO DOCUMENT

"48Sources : Dieter Rams


WHY WE SKETCH?

"49

We sketch to experiment


WE SKETCH TO EXPERIMENT

"50Sources : Peter Biľak


WE SKETCH TO EXPERIMENT

"51Sources : realbeautysketches.dove.com / FBI


WHY WE SKETCH?

"52

We sketch to fail


WE SKETCH TO FAIL

"53Sources : Everybody’s trash bin


HOW DO WE SKETCH?

"54


BASIC SHAPES

"55

Only 4 basic shapes


BASIC SHAPES

"56

Only


BASIC SHAPES

"57

Only


BASIC SHAPES

"58

Only


BASIC SHAPES

"59

Only


BASIC SHAPES

"60

It’s that


BASIC SHAPES

"61Sources : Ben Crothers Sketching in Service Design | Service Design Thinks & Drinks, April 2012


BASIC SHAPES



BASIC SHAPES



BEST PRACTICES

"64

Start simple


START SIMPLE

"65Sources : SQLI Agency

L E S Sis

MORELudwig Mies van der Rohe


START SIMPLE


is

MOREMilton Glaser

JUST ENOUGH


START SIMPLE



START SIMPLE



BEST PRACTICES

"69

Start small


START SMALL



BEST PRACTICES

"71

Get dirty


START DIRTY



BEST PRACTICES

"73

Go fast


GO FAST

"74

Use the

DESIGN STUDIO methodology


GO FAST

"75Sources : UXRomandie

6 — 8 — 5


GO FAST

"76

6 to 8 sketches in 5 minutes


GO FAST



GO FAST



GO FAST

"79

Then

PITCH to your team


GO FAST



GO FAST

"81

And

ITERATE with your team


GO FAST



BEST PRACTICES

"83

Explore


EXPLORE



EXPLORE



EXPLORE

"86Sources : JF


BEST PRACTICES

"87

Comment


COMMENT



COMMENT



BEST PRACTICES

"90

Add shades


ADD SHADES



ADD SHADES



BEST PRACTICES

"93

Illustrate


ILLUSTRATE



BEST PRACTICES

"95

Tell a story


TELL A STORY



TELL A STORY



TELL A STORY

"98Sources : SQLI Agency© SQLI AGENCY / 2013-11

VALUE & BENEFITS (S3)

!18← BACK


TELL A STORY

"99Sources : SQLI Agency© SQLI AGENCY / 2013-11

REVEAL OF TOOL (S4)

!19← BACK


TELL A STORY


© SQLI AGENCY / 2013-11

USERS (S5)

!20← BACK


BEST PRACTICES

"101

Add some color


ADD SOME COLOR



ADD SOME COLOR



ADD SOME COLOR



ADD SOME COLOR



ADD SOME COLOR



TOOLS WE CAN USE

"107


WHITEBOARD

"108


MARKER

"109

→


BALLPOINT PEN

"110

→


FINELINER PEN

"111

→


GRAY MARKERS

"112

→


COLOR MARKERS

"113

→


DOT GRID NOTEBOOK

"114

→


POST-IT NOTES

"115

→


PAPER IPAD APP

"116

→


TOUCH STYLUS

"117

→


BOOKS

"118

→


JUMP ON THE

SCREEN

"119


WARNING

"120

→

WARNING This is not an exhaustive overview


INTERACTION DESIGN

"121


BALSAMIQ

"122

→


BALSAMIQ

"123

→Sources : Our boss’ son


BALSAMIQ

"124

→

+ Very simple

+ Available on Mac & PC

-

- Miss some advanced features


OMNIGRAFFLE

"125

→


OMNIGRAFFLE

"126

→Sources : Omnigraffle


OMNIGRAFFLE

"127

→

+ Powerful

+ Versatile

-

- Messy interface/shortcuts - Available only on Mac


AXURE

"128

→


AXURE

"129

→Sources : Axure


AXURE

"130

→

+ Powerful

+ Complete


-

- Complicated - Expensive


VISUAL DESIGN

"131


ADOBE PHOTOSHOP

"132

→


ADOBE PHOTOSHOP

"133

→

+ Leader app

+ Cool new features


-

- Too heavy - Not responsive


ADOBE ILLUSTRATOR

"134

→


ADOBE ILLUSTRATOR

"135

→

+ Vector powered


-

- Not responsive


ADOBE INDESIGN

"136

→


ADOBE INDESIGN

"137

→

+ Interactive


-

- Still too much print oriented


SKETCH

"138

→


SKETCH

"139

→Sources : Bohemian Coding


SKETCH

"140

→

+ Vector powered

+ Simple

+ Cheap

-

- Very buggy - Available only on Mac


WEB DESIGN

"141


ADOBE EDGE REFLOW

"142

→


ADOBE EDGE REFLOW

"143

→Sources : Adobe


ADOBE EDGE REFLOW

"144

→

+ Responsive

+ Connected to Photoshop


-

- Dirty code - Not interactive - Still in beta


MACAW

"145

→


MACAW

"146

→Sources : Macaw


MACAW

"147

→

+ Responsive

+ Clean code

+ Simple

-

- Available only on Mac - Not interactive - Not available yet


MOBILE PROTOTYPING

"148


POP

"149

→


POP

"150

→Sources : POP


POP

"151

→

+ Simple

+ Free

+ Available on iOS & Android

-

- Still in beta


PROTOSKETCH

"152

→


PROTOSKETCH

"153

→Sources : UI Stencils


PROTOSKETCH

"154

→

+ Simple

+ Sharing feature

+ Free

-

- Available only on iOS


MERCI

"155

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

http://jfontana.fr

http://twitter.com/skynebula


QUESTION? ANSWERS!

"156


NEXT EVENTS


NEXT EVENTS

"158


NEXT EVENTS

"159

Creating Delightful User Experiences

2 days - 8 talks - 8 workshops Thursday 22nd & Friday 23rd May 2014

uxlausanne.com


LET'S GET CONNECTED!

"160

#TxDxS

@sqliagency_ch @sqliagency_ch /sqliagencych

sqliagency.ch


THANK YOU!

"161THANK YOU!

Now, let's drink & share!

© SQLI AGENCY SQLIAGENCY.CH

http://sqliagency.ch

Technology

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