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

50 %
50 %
Information about Sqli Agency Suisse - Talk x Design x Share - Episode 2 - From Pens to...
Technology

Published on February 28, 2014

Author: sqliagency

Source: slideshare.net

Description

An event about wireframe sketching and user interface design

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

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

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 for 11 years © SQLI AGENCY / 2014-01 2014-02 12

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 Simultaneous Inspiration 22

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 28

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 Sources : Ben Crothers 61

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

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 127

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 / 2014-01 2014-02 133

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 137

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 beta → © SQLI AGENCY / 2014-01 2014-02 144

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 / 2014-01 2014-02 147

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 uxlausanne.com © SQLI AGENCY / 2014-01 2014-02 159

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

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

© SQLI AGENCY SQLIAGENCY.CH

Add a comment

Related presentations

Related pages

Browse TED Talks | TED.com

100+ collections of TED Talks, ... Watch, share and create lessons with TED-Ed. TEDx Talks. Talks from independently ... Let's design social media that ...
Read more

Brent Ozar Unlimited - SQL Server Consulting and Training ...

Brent Ozar Unlimited's highly specialized experts ... Option 2. by Brent Ozar on January 13. How to Talk People Out of the ... Get SQL news before it ...
Read more

Twin Peaks (TV Series 1990–1991) - IMDb

An idiosyncratic FBI agent investigates the murder of a young woman in the even more idiosyncratic town of Twin Peaks. ... X Share. Facebook. ... Episode ...
Read more

YouTube Spotlight - YouTube

Welcome to YouTube's Spotlight channel, ... 2 minutes, 18 seconds. by Hallie ... here are some Star Wars fans’ takes on Episode VII.
Read more

Google

Advertising Programmes Business Solutions +Google About Google Google.com © 2016 - Privacy - Terms ...
Read more

Flare - Canada's Fashion Magazine

Canada's Fashion Magazine ... Entertainment 45 Best Red Carpet Looks From 2016 Oscar Nominees. Best dressed moments from 2016 Oscar nominees Alicia ...
Read more

Microsoft Azure: Cloud Computing Platform & Services

Microsoft Azure is an open, ... 24 x 7 for a month. And much more... ... 8 standard SQL Databases. Hadoop instance for a week.
Read more

Netvibes – Social Media Monitoring, Analytics and Alerts ...

... agencies and enterprises. Netvibes. Log in; Sign up; New Agency Wizardry ... Collaborate with your team and share insights ... Find Netvibes also on: ...
Read more