UX UI Design - Cours complet
Vous souhaitez vous former sur le logiciel Adobe XD, apprendre à gérer l’expérience client et optimiser un site web ? Ce cours complet de 10 jours vous permettra de maitriser l’UX et l’UI design. Vous apprendrez à travailler sur le logiciel Adobe XD afin de gérer le processus de conception globale d’UX-UI.
Présentiel / Distanciel
10 jours – 70 h
Max. 8 pers
Sessions à Paris
Prochaines sessions
Prix : 3 550 € HT (+20 % TVA)
Maîtriser dans sa globalité le processus de conception UX et UI design d’un site web à destination de tous les supports.
Cette formation se décompose en deux modules.
Tout d’abord l’UX Design : l’expérience utilisateur et la compréhension du facteur humain sur les sites internet. Ce module vous apprendra à concevoir l’architecture d’un site internet en fonction des feedbacks d’utilisateurs. Vous découvrirez le logiciel Adobe XD et réaliserez un prototype à l’issue de votre première semaine de formation.
Puis viendra l’UI Design : le design à proprement parler de votre application, de la structure de la maquette au choix du contenu (Typographie, colorimétrie, etc.). A l’issue de ce module vous aurez créé un logo et une newsletter.
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
- 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
Réaliser 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.
Prototyper avec Adobe XD
Découvrir 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
- La stratégie
- Les devices
- Les veilles fonctionnelles
- Les personas
- La taxonomie
- L’user flow
Exercice 2 : Ébauche graphique de 3 pages (croquis)
Exercice 3 : prototypage sur Adobe XD au format mobile
Présentation et architecture
Présentation de l’UI Design
- Définition
- Son rôle
- Les enjeux
- Les grandes tendances du Web
- L’expérience utilisateur
L’architecture
- Comprendre les devices et les checkpoints
- Composer à partir d’un wireframe
- Utiliser des grilles
- Penser en Responsive design
- Organiser son PSD
Construction d’un site one page
- Header, navigation, contenu et footer
Exercice
- Recomposer et adapter un site en One page initialement conçu pour les desktops pour une déclinaison en application mobile.
Colorimétrie 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
- Jouer avec les connotations
Exercices
- Analyses d’images (connotations et dénotations)
- Trouvez le bon visuel pour le bon environnement
Réaliser un e-mailing
Anatomie d’un e-mailing
- Définition
- Contraintes techniques
- Architecturer efficacement son E-mailing
- Découverte de Mailchimp
Exercice
- Vous serez en charge de réaliser la maquette d’un emailing avec Adobe Photoshop et Mailchimp
Réaliser des bannières en GIF animés
- Définition d’une bannière
- Les formats standards
- Optimiser votre déclinaison
- Animer votre bannière sur Photoshop
- Bien exporter vos bannières
- Découverte de Google Webdesigner
Exercice
- Réalisation d’un jeu de 3 bannières
Maquetter une application
Exercice
- Réalisation d’une maquette d’application mobile de 3 pages à partir d’un prototype ou de wireframes
Formation présentielle et/ou distancielle durant laquelle seront alternés explications théoriques et exercices pratiques.
Graphiste. Infographiste. Webmaster. Concepteur ou développeur de sites ou d’applications mobiles. Chef de projet web et digital.
Nos formations sont accessibles aux personnes en situation de handicap. Les aspects, l’accessibilité et le type de handicap au regard des modalités d’accompagnement pédagogiques sont à évoquer impérativement au cours de l’entretien préalable à toute contractualisation afin de pouvoir orienter ou accompagner au mieux les personnes en situation de handicap.
Cette formation est diplômante et conduit à l’obtention d’un CP FFP (Certificat Professionnel de la Fédération de la Formation Professionnelle).
L’évaluation se décompose : d’une évaluation en contrôle continu au moyen d’exercices pratiques et de questionnaires techniques notés par les formateurs ; et d’une évaluation du travail final par un jury externe. Le candidat remet à l’issue de son parcours de formation un dossier numérique comprenant :
- La réalisation du prototype d’une application Web sur un logiciel de prototypage
- La réalisation d’une maquette à partir du prototype déjà réalisé sur Photoshop
- Une note de présentation d’une page explicitant les orientations et les moyens mis en œuvre
Il n’y a pas de soutenance. Ces évaluations sont étudiées au regard d’une grille de notation/décision prédéfinie.
Le Certificat Professionnel est obtenu après obtention d’un score minimum.
Le jury est composé de 3 personnes : deux professionnels dans les matières enseignées et le responsable des formations, de la pédagogie et de la coordination des programmes.
Le processus de certification est communiqué au candidat lors de son inscription.
Il est nécessaire pour suivre cette formation d’avoir une culture Web. Des bases en graphisme sont conseillées.
L’admission du candidat se fait sur la base :
- D’un questionnaire préalable dans lequel le candidat détaille ses compétences, ses acquis, ses formations et études et son objectif professionnel
- D’un entretien (téléphonique ou face à face, selon les cas) avec le responsable des formations, de la pédagogie et de la coordination des programmes afin de valider l’admission et répondre aux questions du candidat
Un ordinateur par personne équipé de la dernière version des logiciels Photoshop et Adobe XD. Supports de cours fournis.
Certification Professionnelle reconnue par les Acteurs de la Compétence (Fédération de la Formation Professionnelle) – CP FFP
Taux d’obtention 2021 : 100%
Modèle de sous-menu (nested accordeon) à modifier. Utilisation : 1-activer la visibilité de ce modèle dans : section > avancé > responsive ; 2-personnaliser ce modèle ; 3-enregistrer comme modèle (ex de nom : sous-accordeon-gris-1); 4-désactiver la visibilité de ce modèle ; 5-copier-coller le shortcode généré (voir dans backoffice WordPress) dans une sous famille ci-dessous. Attention : un modèle unique par sous-menu !
Financement
À chaque situation, un ou plusieurs dispositifs peuvent financer votre formation
Pour aller plus loin
Présentiel / Distanciel
10 jours – 70 h
Max. 8 pers
Sessions à Paris
Prix : 3 550 € HT (+20 % TVA)
