Programme
QU’EST CE QUE L’UX DESIGN?
PRÉSENTATION DE L’EXPÉRIENCE UTILISATEUR (UX)
- Définition
- Son 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
- Le feedback
- Affordance et mapping
- Le guidage
- La 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
ARCHITECTURE DE 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
DECOUVRIR 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: STRATEGIE ET DEFINITION 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 – PRESENTATION ET ARCHITECTURE
PRESENTATION
- Définition
- Son rôle
- Les enjeux
- Les grandes tendances du Web
- L’expérience utilisateur
ARCHITECTURE
- Comprendre les devices et les checkpoints
- Composer à partir d’un wireframe
- Utiliser des grilles
- Penser en Responsive Design
- Organiser son PSD
CONSTRUIRE UN SITE ONE PAGE
- Header, navigation, contenu et footer
EXERCICE
- Recomposition et adaptation d’un site en One page initialement conçu pour les desktops pour une déclinaison en application mobile.
COLORIMETRIE ET POLICES
COLORIMÉTRIE
- Définition
- L’usage des couleurs
- Le cercle chromatique
- Les types de combinaisons
- Les contrastes
- Le langage des couleurs
- Adobe Color CC et autres outils indispensables
POLICES
- Définition
- Différence entre Police, Font et Typographie
- Les grandes familles typographiques
- Bien choisir ses polices
- Règles typographiques
- Google fonts et autres outils indispensables
LOGOTYPE
- Comment créer un logo
EXERCICE
- Création d’un logo à l’aide des Google fonts et d’Adobe Color CC
ICONOGRAPHIE
- Définition
- Hiérarchie des composants visuels
- Les neurones miroirs
- Jouer avec les connotations
EXERCICES
- Analyse d’images (connotations et dénotations)
- Trouver le bon visuel pour le bon environnement
REALISER UN E-MAILING
ANATOMIE D’UN E-MAILING
- Définition
- Contraintes techniques
- Architecturer efficacement son E-mailing
- Découverte de Mailchimp
EXERCICE
- Réaliser la maquette d’un mailing sur Adobe Photoshop et Mailchimp.
REALISER DES BANNIERES EN GIF ANIME
- Définition d’une bannière
- Les formats standards
- Optimiser votre déclinaison
- Animer votre bannière sur Adobe Photoshop
- Bien exporter vos bannières
- Découverte de Google Webdesigner
MAQUETTER UNE APPLICATION
EXERCICE
- Réaliser une maquette d’application mobile de 3 pages à partir d’un prototype ou de wireframes.
Mis à jour le 7 avril 2020
