maitriser les codes du web design

Maîtriser les codes du web designhttps://www.alterway.fr/design/

Christophe Sadowski Directeur artistiqueAlter Waychristophe.sadowski@alterway.fr

Frédéric VinzentConsultant web UXAlter Wayfrederic.vinzent@alterway.fr

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 christophe.sadowski@alterway.fr Frédéric Vinzent frederic.vinzent@alterway.fr

Merci de votre attentionRESTEZ CONNECTÉS ET RETROUVEZ LES ACTES SUR CAP-COM.ORG

#capcomnet