Formation pro des équipes maquettistes 3 Suisses : libérons notre créativité pour développer de nouveaux univers sur le web !

1. David
Desrousseaux
david.desrousseaux@gmail.com
@desrousseaux
«
Webdesign
/
Concept
»
Mai
–
Juin
2014
Forma1on
pro
/
2014

2. David
Desrousseaux
david.desrousseaux@gmail.com
@desrousseaux
1
/
Objec5f
pédagogique
:
Face
à
un
projet
client,
proposer
un
concept
et
un
environnement
graphique
adapté
au
web.
2
/
Compétences
à
acquérir
:
Analyse
ar1s1que
de
l’univers,
des
couleurs
et
mise
en
place
d’un
mood-­‐board.
Mai
–
Juin
2014
Forma1on
pro
/
2014
Rappel
des
objec5fs

3. David
Desrousseaux
david.desrousseaux@gmail.com
@desrousseaux
Mai
–
Juin
2014
Forma1on
pro
/
2014
Pour
commencer…
Ø Quand
/
Dans
quel
cadre
?
Ø De
quoi
s’agissait-­‐il
?
Ø Sur
quel
site
?
Ø Pourquoi
avez-­‐vous
trouvé
cela
créa1f
?
Avez-­‐vous
vu
quelque
chose
de
créa5f
sur
le
web
récemment
?

4. David
Desrousseaux
david.desrousseaux@gmail.com
@desrousseaux
C’est
quoi
un
concept
?
La
créa1on
d’une
concep1on
graphique
vs.
d’une
charte
graphique,
c’est
créer
l’univers,
définir
le
design
visuel
que
l’on
donne
à
un
support,
à
une
communica1on.
Charte
graphique
=
déclinaison
pra1que
de
la
concep1on
graphique.
Mai
–
Juin
2014
Forma1on
pro
/
2014
Défini5ons
1/2

5. David
Desrousseaux
david.desrousseaux@gmail.com
@desrousseaux
Mai
–
Juin
2014
Forma1on
pro
/
2014
Exemple
print

6. David
Desrousseaux
david.desrousseaux@gmail.com
@desrousseaux
Forma1on
pro
/
2014
Exemple
web

7. David
Desrousseaux
david.desrousseaux@gmail.com
@desrousseaux
Mai
–
Juin
2014
Forma1on
pro
/
2014
Différences
print
/
web
1. Tout
est
mesurable
=>
Choix
graphiques
objec1fs
vs.
Subjec1fs
2. Beaucoup
d’anglicismes
3. (…)
4. Et
surtout…
il
existe
pleins
de
manières
de
consulter
le
web
!
1. Support
différents
:
desktop
/
phablet
/
mobile…
2. Configura1ons
différentes
:
Windows,
Android,
iOS…
3. Vitesses
de
chargement
différentes
:
ADSL
/
4G…
4. Pleins
de
«
browsers
»
(=navigateur
web)
:
Firefox,
IE,
Chrome,
Opera…
cf.
IE6
countdown

8. David
Desrousseaux
david.desrousseaux@gmail.com
@desrousseaux
C’est
quoi
le
marke5ng
?
Wikipedia
«
L'ensemble
des
ac1ons
ayant
pour
objec1f
de
prévoir
ou
de
constater,
et
le
cas
échéant,
de
s1muler,
susciter
ou
renouveler
les
besoins
du
consommateur,
en
telle
catégorie
de
produits
et
de
services,
et
de
réaliser
l'adapta1on
con1nue
de
l'appareil
produc1f
et
de
l'appareil
commercial
d'une
entreprise
aux
besoins
ainsi
déterminés.
»
Mai
–
Juin
2014
Forma1on
pro
/
2014
Défini5ons
2/2

9. David
Desrousseaux
david.desrousseaux@gmail.com
@desrousseaux
Mai
–
Juin
2014
Forma1on
pro
/
2014
La
réflexion
marke5ng
/
1
Cas
:
le
site
«
corporate
»
Objec5f
n°1
développer
la
visibilité
de
l'offre
et
de
la
marque
Sous-­‐objec5fs
:
valida1on
de
la
lisibilité
de
l'iden1té
de
la
société,
améliora1on
de
la
qualité
du
trafic…

10. David
Desrousseaux
david.desrousseaux@gmail.com
@desrousseaux
Mai
–
Juin
2014
Forma1on
pro
/
2014
La
réflexion
marke5ng
/
2
Cas
:
le
site
«
ecommerce
/
marketplace
»
Objec5f
n°1
transformer
les
visites
en
ventes
KPI
Taux
de
refus,
Taux
d’abandon
du
panier,
Taux
de
conversion,
Taux
de
rebond,
VU
/
mois
…

11. David
Desrousseaux
david.desrousseaux@gmail.com
@desrousseaux
Mai
–
Juin
2014
Forma1on
pro
/
2014
La
réflexion
marke5ng
/
3
Cas
:
le
site
«
Landing
page
/
Advergame
»
Objec5f
n°1
alimenter
une
BDD
de
prospects
pré-­‐
qualifiés
KPI
/
ss-­‐Objec5fs
A
votre
avis
?

12. David
Desrousseaux
david.desrousseaux@gmail.com
@desrousseaux
Mai
–
Juin
2014
Forma1on
pro
/
2014
La
réflexion
marke5ng
/
4
Cas
:
le
site
«
Media
»
Objec5f
n°1
Selon
vous
?
KPI
/
ss-­‐Objec5fs
A
votre
avis
?

13. David
Desrousseaux
david.desrousseaux@gmail.com
@desrousseaux
Mai
–
Juin
2014
Forma1on
pro
/
2014
La
réflexion
marke5ng
/
5
Cas
:
le
site
«
Réseau
social
»
Objec5f
n°1
Selon
vous
?
KPI
/
ss-­‐Objec5fs
A
votre
avis
?

14. David
Desrousseaux
david.desrousseaux@gmail.com
@desrousseaux
Mai
–
Juin
2014
Forma1on
pro
/
2014
Les
3
méthodes
de
créa5vité
Êtes-­‐vous
cerveau
droit
/
cerveau
gauche
?
Youtube
:
«
hbdi
+
danseuse
»
youtube.com/watch?v=BZevSglezAE
«
Êtes-­‐vous
cerveau
gauche
ou
cerveau
droit
?
»

15. David
Desrousseaux
david.desrousseaux@gmail.com
@desrousseaux
Mai
–
Juin
2014
Forma1on
pro
/
2014
1ère
méthode
de
créa5vité
«
Méthode
HDBI
ou
Herrmann
»
Cerveau
droit
/
Cerveau
gauche
Objec5f
:
permeore
de
sor1r
des
jugements
de
valeurs
sur
le
"bon"
ou
le
"mauvais"
fonc1onnement
d'une
personne
dans
un
groupe.
«
Mieux
se
connaître
»
«
Mieux
communiquer
avec
mon
équipe
»
«
Développer
votre
créa1vité
»
«
Mieux
coacher
»
«
Savoir
comment
les
autres
pensent
»
«
S1muler
le
travail
en
équipe
»
…

16. David
Desrousseaux
david.desrousseaux@gmail.com
@desrousseaux
Mai
–
Juin
2014
Forma1on
pro
/
2014
Exercice
individuel
«
L’acte
créa5f
»
«
Puiser
quelques
informa1ons
provenant
de
la
mémoire
(logique
ou
irra1onnelle)
et
de
les
réorganiser
d'une
manière
nouvelle,
poussée
par
l'imagina5on,
la
sensibilité,
l'ins5nct,
la
spontanéité,
l'inspira5on,
les
émo5ons
fortes.
»
Ex
:
voiture
=>
vitesse,
sécurité,
transport,
route,
passager,
co-­‐voiturage…
=>
Brainstorming
sur
le
terme
«
site
web
»

17. David
Desrousseaux
david.desrousseaux@gmail.com
@desrousseaux
Mai
–
Juin
2014
Forma1on
pro
/
2014
«
brainstorming
:
site
web
»
Etape
1
:
Phase
d’échauffement
«
Produc5on
individuelle
d’un
mood
board
/
100%
destructuré
»

18. David
Desrousseaux
david.desrousseaux@gmail.com
@desrousseaux
Mai
–
Juin
2014
Forma1on
pro
/
2014
2e
méthode
de
créa5vité
«
Méthode
des
6
chapeaux
»

19. David
Desrousseaux
david.desrousseaux@gmail.com
@desrousseaux
Mai
–
Juin
2014
Forma1on
pro
/
2014
Exercice
collec5f
Etape
2
«
Produc5on
collec5ve
d’une
carte
mentale
/
mindmap
sur
le
mood
board.
»

20. David
Desrousseaux
david.desrousseaux@gmail.com
@desrousseaux
Mai
–
Juin
2014
Forma1on
pro
/
2014
3e
méthode
de
créa5vité
«
CPS
:
Crea5ve
Problem
Solving
»
Une
checklist
en
8
étapes
:
1. Iden1fier
les
besoins
2. Les
problèmes
3. Les
objec1fs
principaux
4. Les
idées
depuis
ces
obj.
5. Faire
une
sélec1on
6. Budget
/
Planning
7. Adhésion
8. Plan
d’ac1on
Idéal
pour
la
ges1on
de
projet
!

21. David
Desrousseaux
david.desrousseaux@gmail.com
@desrousseaux
Mai
–
Juin
2014
Forma1on
pro
/
2014
Les
techniques
de
créa5vité
hop://fr.pinterest.com/pin/170362798378683040/
Toutes
les
expériences
sont
sources
d’idées
Ø Faire
appel
à
ses
5
sens
Notre
subconscient
trie
les
idées
et
les
stocke
Ø Les
expériences
sont
interconnectées
Ø …
Ø Puis,
on
imagine
de
nouvelles
connexions
Ø Ça
y’est,
une
nouvelle
idée
est
née
!

22. David
Desrousseaux
david.desrousseaux@gmail.com
@desrousseaux
Mai
–
Juin
2014
Forma1on
pro
/
2014
Les
bases
de
l’ergonomie
«
2
univers,
pour
un
contenu
adapté
au
web
»
User
Interface
User
eXperience
UX
UI

23. David
Desrousseaux
david.desrousseaux@gmail.com
@desrousseaux
Mai
–
Juin
2014
Forma1on
pro
/
2014
Ergonomie
:
UI
/
GUI
«
Graphical
»
User
interface
1. Lisibilité
2. Sobriété

24. David
Desrousseaux
david.desrousseaux@gmail.com
@desrousseaux
Mai
–
Juin
2014
Forma1on
pro
/
2014
Ergonomie
:
Lisibilité
[UI]
• Choix
de
la
Fonte
=
fin
de
la
limite
Arial
/
Verdana
|
Times
|
Comic
cf.
Google
Fonts
• Taille
des
textes
• Couleur
• Alignement
• Interlignage
• Interleqrage
• …
• Et
un
contenu
simple
à
lire
et
sans
jargon
;)
cf.
score
de
lisibilité
Flesch

25. David
Desrousseaux
david.desrousseaux@gmail.com
@desrousseaux
Mai
–
Juin
2014
Forma1on
pro
/
2014
Ergonomie
:
Sobriété
[UI]
• Flat
design
vs.
3D/Skeuomorphisme
cf.
style
Metro
/
Windows
• Logos
over-­‐flat
vs.
Logos
+
sophis1qués
=>
«
manque
de
souveraineté
»
cf.
CubaCouncil
• Tendance
au
«
long
shadow
»
• U1lisa1on
du
blanc
cf.
IFTTT

26. David
Desrousseaux
david.desrousseaux@gmail.com
@desrousseaux
Mai
–
Juin
2014
Forma1on
pro
/
2014
Ergonomie
:
UX
User
eXperience
1. Accessibilité
2. Disponibilité
3. Rapidité
4. Interac5vité
5. U5lisabilité

27. David
Desrousseaux
david.desrousseaux@gmail.com
@desrousseaux
Mai
–
Juin
2014
Forma1on
pro
/
2014
Ergonomie
:
Accessibilité
[UX]
• «
Interopérabilité
»
Non
limité
à
une
res1tu1on
spécifique
/
Responsive
ex
:
Fonc1on
«
Lecture
»
sous
Safari
presse-­‐citron.com
ex
:
Flash
• Normes
WAI
RGAA
+
WCAG
• Choix
des
couleurs
Colour
Contrast
Analyzer
CCA2
• Légendes
Légendes
visibles
/
alterna1ves
• Zoom
«
Ctrl
+
moleoe
»
Autre
cas
:
«
Zoom
XXL
»
Darty
cf.
richcommerce.fr

28. David
Desrousseaux
david.desrousseaux@gmail.com
@desrousseaux
Mai
–
Juin
2014
Forma1on
pro
/
2014
Ergonomie
:
Disponibilité
[UX]
• Site
disponible
=
«
site
qui
ne
plante
pas
»
=>
sen1ment
désagréable
/
néga1f
=>
abandon
du
client
et
de
l’acte
d’achat
• 3
à
5
jours
de
non
disponibilité
=>
déréférencement
chez
Google
• Best
prac5ce
des
pages
404
• Fun
/
ton
décalé
• Moteur
de
recherche
intégré
+
«
suggest
»

29. David
Desrousseaux
david.desrousseaux@gmail.com
@desrousseaux
Mai
–
Juin
2014
Forma1on
pro
/
2014
Ergonomie
:
Rapidité
[UX]
• En
termes
techniques
• Temps
de
chargement
/
temps
d'accès
Cf.
Compteur
Google
Web
Fontes
GTMetrix
/
Pingdom
Ø Cas
des
Sprites
• Cas
des
Widgets
• En
termes
de
contenus
• chargement
asynchrone
:
• 5-­‐7
secondes
storytelling
vs.
Longues
videos
Vine
vs
Youtube
• Ar1cles
de
brève
vs.
Ar1cles
de
fond
cf.
Melty,
Locita…

30. David
Desrousseaux
david.desrousseaux@gmail.com
@desrousseaux
Mai
–
Juin
2014
Forma1on
pro
/
2014
Ergonomie
:
Interac5vité
[UX]
• Formulaires
• Champs
de
saisie
:
contact,
commentaire…
• Boutons
d'ac1on
• Eye-­‐catcher
cas
:
Fiche
produit
Webdistrib
• Menus
/
Liens
• URL
internes
vs
URL
sortantes
• Clic
vs.
Survol
cf.
«
menu
3Suisses
»
• Ges5on
d’événement
• Scroll
=>
Scroll
parallax
• Focus
=>
Placeholder
• «
Flash
in
flash
»
• Zones
fixes
cf.
Fiche
produit
Decathlon

31. David
Desrousseaux
david.desrousseaux@gmail.com
@desrousseaux
Mai
–
Juin
2014
Forma1on
pro
/
2014
Ergonomie
:
U5lisabilité
[UX]
• «
Règle
des
3
clics
»
• Sens
de
lecture
«
F-­‐paoern
»
• La
zone
de
flooaison
/
zone
«
above
the
fold
»
cf.
Google
Browser
Size
• Elements
de
ré-­‐assurance
/
Tiers
de
confiance
Badge
Google,
FIA-­‐NET,
eKomi…
• Fil
d’ariane
/
Breadcrumb
• Iconisa1on
graphique,
pour
donner
du
sens
!
Cf.
Font
awesome
:
bouton
d’ac1on,
URL
sortante
Menu
ex
:
Magento

32. David
Desrousseaux
david.desrousseaux@gmail.com
@desrousseaux
Mai
–
Juin
2014
Forma1on
pro
/
2014
• Lisibilité
• Sobriété
• Accessibilité
• Disponibilité
• Rapidité
• Interac1vité
• U1lisabilité
Evalua5on
de
fiches
produit
«
Matrice
d’évalua5on
/
Graphique
radar
»
vs.
.fr
.no
vs.

33. David
Desrousseaux
david.desrousseaux@gmail.com
@desrousseaux
Mai
–
Juin
2014
Forma1on
pro
/
2014
Développons
notre
culture
web
Lister
des
«
best-­‐prac1ces
»
Trouver
de
l’inspira1on
Connaître
les
tendances

34. David
Desrousseaux
david.desrousseaux@gmail.com
@desrousseaux
Mai
–
Juin
2014
Forma1on
pro
/
2014
Le
webdesign
en
2014
«
Les
10
tendances,
par
Vanksen
»
hop://fr.slideshare.net/Vanksen/les-­‐10-­‐tendances-­‐webdesign-­‐de-­‐2014-­‐by-­‐vanksen

35. David
Desrousseaux
david.desrousseaux@gmail.com
@desrousseaux
Mai
–
Juin
2014
Forma1on
pro
/
2014
Réaliser
un
Mockup
Mockup
/
Wireframe
/
Zoning
Réalisons
un
squeleoe
de
fiche
produit
sur
moqups.com
Cas
:
Ø Paire
de
chaussures
Ø Avec
un
prix
en
promo1on
Ø Et
une
zone
de
croisement
de
produits
Ø …le
reste
:
laissons
place
à
votre
créa1vité
!!

36. David
Desrousseaux
david.desrousseaux@gmail.com
@desrousseaux
Mai
–
Juin
2014
Forma1on
pro
/
2014
Phase
2
:
Habillage
Créons
une
maqueoe
sous
Photoshop
en
binôme,
avec
des
ou1ls
d’aide
à
la
créa1vité,
en
sélec5onnant
1
mockup.
Adobe
Kuler
/
Color
Hunter
+
Color
Thief
Stripe
Generator
Quick
Ribbon
Jquery
UI
…
«
Le
designer
répondra
aux
demandes
du
chef
de
projet
du
binôme,
mais
s’autorise
à
être
force
de
proposi5on.
»

37. David
Desrousseaux
david.desrousseaux@gmail.com
@desrousseaux
Mai
–
Juin
2014
Forma1on
pro
/
2014
…
Alors
?
Les
leçons
à
5rer
sur
le
travail
de
groupe
??

38. David
Desrousseaux
david.desrousseaux@gmail.com
@desrousseaux
Mai
–
Juin
2014
Forma1on
pro
/
2014
1. Créer
un
climat
d’ouverture
2. Être
curieux
=>
Avoir
une
bonne
culture
générale
3. Être
rigoureux
=>
Déterminer
1
objec5f
précis
4. S’arrêter
et
prendre
le
temps
d’observer
5. Eviter
la
censure
6. Être
à
l’écoute
des
retours
externes
:
accepter
les
remarques
et
construire
sur
ses
idées
et
celles
des
autres.
7. Ne
pas
se
décourager,
pour
mo1ver
sa
créa1vité
8. Adopter
une
a•tude
ludique
9. Et
…
Changer
la
musique
dans
son
casque
!
Les
8
condi5ons
pour
concevoir
«
il
faut
contribuer
à
développer
un
sen1ment
de
sécurité
psychologique.
»

39. David
Desrousseaux
david.desrousseaux@gmail.com
@desrousseaux
Mai
–
Juin
2014
Forma1on
pro
/
2014
The
END
Merci
!
david.desrousseaux@gmail.com
@desrousseaux