Comment réussir son web design ? Au-delà de la ligne graphique et de l'esthétique, quels sont les points d'attention ? Quelles sont les grandes tendances du graphisme numérique et interactif ? Quelles sont les erreurs à éviter ? Un atelier pour savoir penser ses interfaces digitales entre identité et usages. Christophe Sadowski, directeur artistique chez alter way Frédéric Vinzent, consultant en conception UX chez alter way

1. Maîtriser les codes
du web design
https://www.alterway.fr/design/
Christophe Sadowski
Directeur artistique
Alter Way
christophe.sadowski@alterway.fr
Frédéric Vinzent
Consultant web UX
Alter Way
frederic.vinzent@alterway.fr

2. 8e Rencontres nationales de la communication numérique • 27 et 28 septembre • Issy-les-Moulineaux
Décodage du web design : définition
• Différentes dimensions du web design
• Chaîne de valeurs et de création du web design
Décodage des tendances
• Simplicité
• Convergence mobile Desktop
• Animation
• Image
• Formulaires
Questions, remarques, échanges

3. 8e Rencontres nationales de la communication numérique • 27 et 28 septembre • Issy-les-Moulineaux
Décodage du web design
Définition

4. 8e Rencontres nationales de la communication numérique • 27 et 28 septembre • Issy-les-Moulineaux
Les différentes dimensions du web design
Esthétique
Identité
Web design,
seulement une question d’image ?
Lisibilité
Graphisme
print
Technique

5. 8e Rencontres nationales de la communication numérique • 27 et 28 septembre • Issy-les-Moulineaux
Les différentes dimensions du web design
Esthétique
Identité Ergonomie
Accessibilité
Mobilité
Technique
• Cible
+ Utilisateur
+ Utilisateur avec difficulté de lecture
+ Utilisateur en situation de mobilité
+ Persona
+ Utilisateur au centre de la conception
Public du web design =
Webdesign =
• Image
+ Expérience utilisateur
+ Simplicité d’utilisation
+ Accessible à tous
+ Adaptable : smartphone, tablette
+ Faisabilité technique : expertise, coût…

6. 8e Rencontres nationales de la communication numérique • 27 et 28 septembre • Issy-les-Moulineaux
Chaîne de valeurs et de création du web design
ERGONOMIE
IHM
CRÉATION
GRAPHIQUE
HTML5/
CSS3/JS
LIGNE
GRAPHIQUE
CONCEPTION
EDITORIALE
DÉCLINAISON
GRAPHIQUE
ÉCRANS
DÉCLINÉS
V V
SPEC.
FONCTION.
&
TECHNIQUE
ARBORESCENCE
V
PROTOTYPE
HTML
V V
WIREFRAME
A A AR
S
A R R R
TYPES CONTENUS
CHARTE
GRAPHIQUE
A V
S
Validation ClientVL LivrableE Etape IHM ACCESSIBILITÉ SEOA SRESPONSIVER
S

7. 8e Rencontres nationales de la communication numérique • 27 et 28 septembre • Issy-les-Moulineaux
Décodage
des tendances

8. 8e Rencontres nationales de la communication numérique • 27 et 28 septembre • Issy-les-Moulineaux
Simplicité visuelle
• Minimalisme (tout ou partie du site)
• Abandon du skeuomorphisme
• Flat design/Material design
• Polices à bâton, Google font…
• Transparence, bouton « fantôme »…
+ Lisibilité
+ Prise en main simple et rapide
+ Chargement rapide
- Attention au manque de personnalité
- Compenser par d’autres effets : animations,
images spécifiques, vidéos…
https://www.service-public.fr/
https://www.gov.uk/
https://www.android.com/intl/fr_fr/
http://material.cmiscm.com/

9. 8e Rencontres nationales de la communication numérique • 27 et 28 septembre • Issy-les-Moulineaux
Convergence mobile, desktop
• Toutes les fonctionnalités sur mobile !
• Menu contextuels au clic
• Objets d’interfaces mobiles utilisés sur
desktop : burger menu, slide out
• Fin des sliders (1% d’interactions !)
• Long scroll (défilement long) hérité de
l’usage mobile
• Fin des mega-footers
+ Pas de clic inutile
+ Progression d’une « histoire »/contenus
+ Abandon de la « ligne de flottaison
- Attention aux utilisateurs
http://www.dossierfamilial.com/
http://www.lequipe.fr/
http://www.liberation.fr/
http://www.nationalgeographic.com/
https://www.burgerking.fr/
http://www.lemonde.fr/
http://www.lefigaro.fr/
http://www.society-magazine.fr/

10. 8e Rencontres nationales de la communication numérique • 27 et 28 septembre • Issy-les-Moulineaux
Animations
• Animations riches, grand format
• Micro interactions, survol
• Animation de chargement
• Gif animé
+ Suggère rapidement une fonctionnalité
(affordance) ou qui la démontre rapidement
+ Rassure l’utilisateur en acquittant
visuellement une interaction
+ Marque les esprits et donne du caractère à
des interfaces minimalistes qui pourraient en
manquer
+ Image de dynamisme
http://tympanus.net/Development/DistortedButtonEffects/
http://waaark.com/fr/
http://www8.hp.com/fr/fr/home.html
http://lookbook.quechua.com/spring-summer-2016/fr
http://tympanus.net/Development/Animocons/
https://www.burgerking.fr/
http://www.bypeople.com/devices-svg-animation/

11. 8e Rencontres nationales de la communication numérique • 27 et 28 septembre • Issy-les-Moulineaux
Animations

12. 8e Rencontres nationales de la communication numérique • 27 et 28 septembre • Issy-les-Moulineaux
Images
• Produire des images spécifiques
• Pas de banque d’images
• Images haute définition
• Résolution d’image (fichier) spécifique de
chaque terminal
http://www.apple.com/
Formulaires
• Segmenter
• Formulaires plein écran
+ Rassurant
+ Concentre l’attention
+ Améliore les transformations
http://www.vogue.fr/#

13. 8e Rencontres nationales de la communication numérique • 27 et 28 septembre • Issy-les-Moulineaux
Questions, remarques,
échanges

14. En partenariat avec
Christophe Sadowski christophe.sadowski@alterway.fr Frédéric Vinzent frederic.vinzent@alterway.fr
Merci de votre attention
RESTEZ CONNECTÉS ET RETROUVEZ LES ACTES
SUR CAP-COM.ORG
#capcomnet