Présentation
Le développement web est devenu, au fil des années, un environnement demandant une exigence certaine dans l’UI (Interface Utilisateur) et l’UX (eXpérience Utilisateur). De nombreux points graphiques sont à prendre en compte, comme la mise en page, les polices de caractères, les couleurs et contrastes. De nombreux éléments d’ergonomie doivent également être considérés, comme la navigation, la hiérarchisation de l’information ou encore l’entonnoir de conversion (funnel). Enfin, l’inclusivité du design facilitant l’accès aux personnes en situation de handicap est également une composante à ne pas négliger.
Tous ces éléments sont également mouvants : au fur et à mesure des évolutions ergonomiques, nous avons vu des composants devenir incontournables, comme le fameux menu « burger » (☰), pour dérouler une navigation. Pour ne pas perdre les utilisateurs, il convient de suivre les usages, mais pas tout à fait : il faut offrir une expérience à la fois rafraîchissante et consensuelle.
Au cours de cette formation, vous découvrirez les bases de l’UI et de l’UX pour réaliser des maquettes de sites internet agréables à utiliser et à regarder. Vous apprendrez à détecter les erreurs de design et à suivre les bonnes pratiques pour une expérience agréable et unifiée sur l’ensemble du site.
Objectifs de la formation
- Comprendre les enjeux de l’UI (User Interface)
- Comprendre les enjeux de l’UX (User eXperience)
- Savoir analyser les points forts et faibles d’une charte graphique
- Savoir créer une charte graphique respectueuse des bonnes pratiques
Public
- Toute personne travaillant ou souhaitant travailler dans le développement web
Prérequis
- Des connaissances en mise en page sont un plus
Programme
1- Comprendre la différence entre l'UI et l'UX
Qu’est ce que l’UI ?
Qu’est ce que l’UX ?
En quoi ces deux notions sont-elles complémentaires ?
2- Créer une page agréable à l'œil
Les couleurs
Les typographies
Les blocs
Les éléments spécifiques d’une page web (liens, tableaux, …)
Créer un « design system » cohérent
La logique « mobile-first »
3- Créer une page agréable au toucher
La navigation
La hiérarchisation de l’information
L’accompagnement de l’utilisateur
Le placement de l’information selon les équipements
La différence entre les terminaux (mobile, tablette, ordinateur…)
4- Les animations
UI ou UX ?
Imaginer les animations, les formules adaptées
Créer les animations
5- Conclusion
Faut-il une interface classique/sobre ou plus originale ?
« Learn the rules like a pro, so you break them like an artist »
Pour aller plus loin
Date de dernière modification : 16/08/2023
Organisation
Modalités d'évaluation :
Questionnaires à choix multiples (QCM) en fin de formation. L'intervenant formulera également une appréciation sur vos acquis pour l'entièreté de la formation.
Moyens pédagogiques :
Formation alternant la théorie et la pratique, avec un intervenant présentant la formation en direct. Possibilité de réaliser cette formation en face-à-face dans nos locaux, dans vos locaux d'entreprise ou à distance via visioconférence.
Une fois terminée, vous disposerez d'une attestation de suivi de la formation, ainsi que des contenus de cours relatifs au contenu présenté.
Informations pratiques :
En cas de dispense dans nos locaux, le matériel informatique est fourni et l'ensemble des commodités sont accessibles. Nos locaux sont également accessibles aux personnes à mobilité réduite : découvrir notre centre.
Retrouvez toutes les informations pratiques pour préparer votre formation sur notre page dédiée : informations pratiques.
Ces formations pourraient vous intéresser
- En savoir plus
Adobe Xd : découvrir les bases
Adobe Xd est un logiciel de conception et de modélisation d’interfaces de sites web et d’applications. Créé par la société Adobe et intégré à la Creative Suite, il permet de créer des maquettes pour mieux concevoir …
- En savoir plus
Conception digitale 360
La conception digitale 360 consiste à penser son projet graphique et de communication sur l’ensemble des médias à votre disposition. On peut citer le « print » (flyers, magazines, book…), le « web » (site web, blog, …