Programme
UX DESIGN (USER EXPERIENCE)
QU’EST CE QUE L’UX DESIGN?
Présentation de l’expérience utilisateur (UX)
- Définition
- Rôle
- Petit historique
Comprendre le facteur humain
- Le processeur
- Extraire un schéma
- Composition avec et sans proximité
- La densité informelle
- Hiérarchie des composants visuels dans une image
- Les neurones miroirs
- Les interférences
- Les limitations cognitives
- Capter l’attention du cerveau
COMPRENDRE l’UX DESIGN
Les principes de conception
- Feedback
- Affordance et mapping
- Guidage
- Découverte progressive
- Homogénéité et anticipation de l’erreur
- La narration
Le design thinking
- Définition
- Les méthodes d’idéation
Exercice
Atelier d’idéation basé sur la refonte d’un site
ARCHITECTURER L ‘INFORMATION
- L’arborescence
- Croquis
- Zoning
- Wireframe
- Storyboard
- Les grilles
- Les types d’interface
- Sens de lecture
- Zone de flottaison
- Fil d’Ariane
- Zoning de bloc
- L’usage des textes et pictogrammes
- Hiérarchie textuelle et SEO
- Les formulaires
REALISER UN PROTOTYPE
Le prototype
- Définition
- Les 4 étapes
- L’anticipation
Les bases du projet
- La stratégie
- Devices et checkpoints
- Veille fonctionnelle
- L’innovation
- Les personas
- La taxonomie
- L’user flow
- Le mockup
- Le prototypage
- Le design
- Le maquettage / Test utilisateur
Exercice
Appliquer la méthodologie vue précédemment pour la homepage d’un site ecommerce. De la stratégie jusqu’au croquis
REALISER UN PROTOTYPE AVEC ADOBE XD
Comment prototyper avec Adobe XD
- Découverte de l’interface
- Utiliser les plans de travail
- Dessiner des formes
- Plan de travail responsif
- Comprendre les actifs
- Comprendre les composants
- Créer un prototype ou un wireframe
- Animer son prototype
Exercice
Réaliser un prototype à partir du croquis ébauché
CONCEVOIR UNE APPLICATION
Exercice 1: Stratégie et définition des objectifs
- Stratégie
- Devices
- Veilles fonctionnelles
- Personas
- Taxonomie
- User flow
Exercice 2 : Ebauche graphique de 3 pages (croquis)
Exercice 3 : Prototypage sur Adobe XD au format mobile
UI DESIGN (USER INTERFACE)
STRUCTURE DE LA MAQUETTE
- Qu’est-ce que le Design d’interface
- Quel est le rôle du Designer d’interface
- Pourquoi la qualité graphique doit être au rendez-vous
- Les grandes tendances
- Le Skeuomorphisme
- Le Flat Design
- Les devices et les checkpoints
- Le responsive
TYPOGRAPHIE
- Définition
- Les différents formats
- Différence entre la police et la fonte
- Les 5 familles typographiques
- Les polices à éviter
- Les balises H
- Jouer avec les formes et les familles
- L’usage des textes
- Les sites indispensables
COLORIMÉTRIE
- Définition
- Le bon choix de couleurs
- Le bon vocabulaire
- La règle des 60-30-10
- Adobe Color
- Les différentes combinaisons
- L’importance du contraste
- L’exploitation des couleurs
- Définition de toutes les couleurs
COMMENT CRÉER UN LOGO
- Connaître sa cible
- Veille graphique
- Soyez unique, intemporel et équilibré
- Comment tirer profit de la psychologie des formes
- Utiliser les bonnes polices
- La polysémie d’un logo
- Savoir adapter son logo
- Rédaction d’un brief
- La planche tendance
ICONOGRAPHIE
- Définition
- Dénotation & connotation
- Le réalisme
- La géométrie
- Les signes
- Toucher au plus juste
- Hiérarchie des composants visuels
- Comment choisir la bonne image : Le visage
- Comment choisir la bonne image : la qualité visuelle
- Comment choisir la bonne image : Pixelisation
- Comment choisir la bonne image : L’espace autour du sujet
- Comment choisir la bonne image : La tendance
- La règle de tiers
- Le nombre d’or
- Les bons outils
- Où faire sa veille graphique
NEWSLETTER
- Définition
- Disparité d’interprétation
- Anatomie d’une newsletter réussie
- Les contraintes techniques
- Comment concevoir des E-mailings avec Mailchimp
LES BANNIÈRES
- Définition
- Anatomie d’une bannière réussie
- Les principaux formats
- Les bannières animées
- Comment concevoir des bannières animées avec Google Webdesigner
TRAVAUX PRATIQUES
- Adaptation d’une landing page pour différents écrans
- Création d’un logo et d’une charte graphique Web
- Réalisation d’un E-mailing sur Mailchimp
- Conception de bannières animées sur Google Webdesigner
- Maquettage d’une application mobile et de sa campagne (bannière + newsletter)
Mis à jour le 8 avril 2022