Embed Size (px)
Citation preview
Maîtriser les codes du web designhttps://www.alterway.fr/design/
Christophe Sadowski Directeur artistiqueAlter [email protected]
Frédéric VinzentConsultant web UXAlter [email protected]
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
8e Rencontres nationales de la communication numérique • 27 et 28 septembre • Issy-les-Moulineaux
Décodage du web designDéfinition
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é
Graphismeprint
Technique
8e Rencontres nationales de la communication numérique • 27 et 28 septembre • Issy-les-Moulineaux
Les différentes dimensions du web designEsthé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…
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
PROTOTYPEHTML
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
8e Rencontres nationales de la communication numérique • 27 et 28 septembre • Issy-les-Moulineaux
Décodage des tendances
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/
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/
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/
8e Rencontres nationales de la communication numérique • 27 et 28 septembre • Issy-les-Moulineaux
Animations
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/#
8e Rencontres nationales de la communication numérique • 27 et 28 septembre • Issy-les-Moulineaux
Questions, remarques, échanges
En partenariat avec
Christophe Sadowski [email protected] Frédéric Vinzent [email protected]
Merci de votre attentionRESTEZ CONNECTÉS ET RETROUVEZ LES ACTES SUR CAP-COM.ORG
#capcomnet
