Slide 1
Slide 1 text
La relation
intégrateur - designer,
pour un design pas terne.
01
53
Blend conférence 2013
Slide 2
Slide 2 text
Erick Gardin
Intégrateur
@newick
Aymeric Faivre
Designer
@miho_fr
02
53
Blend conférence 2013
Slide 3
Slide 3 text
Pourquoi ?
Tweetclash
Billets de blogs
‘‘On dit’’
Ateliers ?
03
53
Blend conférence 2013
Slide 4
Slide 4 text
Un plan sans accroc
01. Sondage
02. Nous
03. Brief & Conception
04. Style guide
05. Livrables
06. Pair integrating ?
Conclusion
04
53
Blend conférence 2013
Slide 5
Slide 5 text
01. Sondage
D’après un panel utilisateurs (très) varié
05
53
Blend conférence 2013
Slide 6
Slide 6 text
Round 01
Anti-intégrateurs.
aka Graphistes
06
53
Blend conférence 2013
Slide 7
Slide 7 text
Les intégrateurs :
‘‘ sont de faux développeurs ’’
07
53
Blend conférence 2013
Slide 8
Slide 8 text
Les intégrateurs n’ont :
‘‘ aucun sens de l’esthétisme ’’
08
53
Blend conférence 2013
Slide 9
Slide 9 text
Les intégrateurs sont :
‘‘ socialement inapte
à travailler en groupe ’’
09
53
Blend conférence 2013
Slide 10
Slide 10 text
Les intégrateurs sont :
‘‘ gros ’’
10
53
Blend conférence 2013
Slide 11
Slide 11 text
Round 02
Anti-graphistes.
aka Intégrateurs
11
53
Blend conférence 2013
Slide 12
Slide 12 text
Les graphistes sont :
‘‘ Toujours à l’arrache ’’
12
53
Blend conférence 2013
Slide 13
Slide 13 text
Les graphistes sont :
‘‘ voués à disparaître ’’
(car déjà y’a le flat design)
13
53
Blend conférence 2013
Slide 14
Slide 14 text
Les graphistes :
‘‘ ne connaissent pas le web ’’
14
53
Blend conférence 2013
Slide 15
Slide 15 text
Les graphistes sont :
‘‘ Incapables ’’
15
53
Blend conférence 2013
Slide 16
Slide 16 text
02. Pourtant nous...
Moment story telling
16
53
Blend conférence 2013
Slide 17
Slide 17 text
On s’aime
17
53
Blend conférence 2013
Slide 18
Slide 18 text
On se parle
18
53
Blend conférence 2013
Slide 19
Slide 19 text
On partage nos veilles
19
53
Blend conférence 2013
Slide 20
Slide 20 text
On se voit hors travail
20
53
Blend conférence 2013
Slide 21
Slide 21 text
On se voit au travail
21
53
Blend conférence 2013
Slide 22
Slide 22 text
On monte des ‘‘side projects’’
22
53
Blend conférence 2013
Slide 23
Slide 23 text
03. Du brief à la conception
Il était une fois...
23
53
Blend conférence 2013
Slide 24
Slide 24 text
Les graphistes :
‘‘ Font croire aux clients
qu’ils décident de tout ’’
24
53
Blend conférence 2013
Slide 25
Slide 25 text
Avantages
Implication
Informations communes
Faisabilité technique
25
53
Blend conférence 2013
Slide 26
Slide 26 text
04. LA Une de nos solutions : Un style guide
Style like an artist
26
53
Blend conférence 2013
Slide 27
Slide 27 text
Les graphistes font :
‘‘ des maquettes incohérentes ’’
27
53
Blend conférence 2013
Slide 28
Slide 28 text
Avantages
Constance
Organisation
Base de travail
Evolutif
28
53
Blend conférence 2013
Slide 29
Slide 29 text
Couleurs
Hexadecimal
rgba
hsl(a)
Valeurs des dégradés
29
53
Blend conférence 2013
Slide 30
Slide 30 text
Typographie
Types de textes (h1, h2, p...)
Taille
Interlignage
30
53
Blend conférence 2013
Slide 31
Slide 31 text
Interactions
Couleurs et états des liens Active, hover, ...
Etats des boutons
Transitions
31
53
Blend conférence 2013
Slide 32
Slide 32 text
Apparence générale
Formulaires
Listes
Pop-in
32
53
Blend conférence 2013
Slide 33
Slide 33 text
05. Les livrables
Express delivery
33
53
Blend conférence 2013
Slide 34
Slide 34 text
Les graphistes n’ont :
‘‘ Aucun sens de l’organisation ’’
34
53
Blend conférence 2013
Slide 35
Slide 35 text
Le styleguide
PDF / HTML
bjankord.github.io/Style-Guide-Boilerplate
35
53
Blend conférence 2013
Slide 36
Slide 36 text
PSD
Rangé, optimisé, clair
Grille intégrée
Calques non fusionnés
Nouveau_calque_42
photoshopetiquette.com
36
53
Blend conférence 2013
Slide 37
Slide 37 text
Images
Optimisées
De grande qualité (background)
SVG
Patterns de répétition
37
53
Blend conférence 2013
Slide 38
Slide 38 text
Responsive
Wireframe + annotations
38
53
Blend conférence 2013
Slide 39
Slide 39 text
06. Pair integrating ?
Je suis ton pair !
39
53
Blend conférence 2013
Slide 40
Slide 40 text
Les intégrateurs :
‘‘ Ne suivent pas les créas
au mm près ’’
(un graphiste print. Sûrement)
40
53
Blend conférence 2013
Slide 41
Slide 41 text
Pair integrating
Intégrateur + Designer
Quote à Quote
41
53
Blend conférence 2013
Slide 42
Slide 42 text
Avantages
Finalisation du projet
Convivial / Partage
Happy end
42
53
Blend conférence 2013
Slide 43
Slide 43 text
Conclusion
Le buffet n’attend pas
43
53
Blend conférence 2013
Slide 44
Slide 44 text
Dans un monde merveilleux
Ecoute
Entraide
Partage
Ouverture
Evolution
Test
Plaisir
Humilité
44
53
Blend conférence 2013
Slide 45
Slide 45 text
Han Solo + Chewbaca
45
53
Blend conférence 2013
Slide 46
Slide 46 text
Laurel + Hardy
46
53
Blend conférence 2013
Slide 47
Slide 47 text
Marty + Doc
47
53
Blend conférence 2013
Slide 48
Slide 48 text
Starsky + Hutch
48
53
Blend conférence 2013
Slide 49
Slide 49 text
Veronique + Davina
49
53
Blend conférence 2013
Slide 50
Slide 50 text
Arnold + Willy
50
53
Blend conférence 2013
Slide 51
Slide 51 text
Points communs
Ils se haissent,
s’aiment,
sont complémentaires,
ont des ennemis communs.
51
53
Blend conférence 2013
Slide 52
Slide 52 text
Mais doivent surtout
apprendre à communiquer.
52
53
Blend conférence 2013
Slide 53
Slide 53 text
Merci !
Bisous
layer-to-layout.com
53
53
Blend conférence 2013