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

30/01/2023 au 10/02/2023
06/03/2023 au 17/03/2023
10/04/2023 au 21/04/2023
15/05/2023 au 26/05/2023
19/06/2023 au 30/06/2023
17/07/2023 au 28/07/2023

 

Prix : 3 550 € HT (+20 % TVA)

Mise à jour le 6 janvier 2023 Télécharger

Maîtriser dans sa globalité le processus de conception UX et UI design d’un site web à destination de tous les supports.

En savoir plus sur les compétences acquises

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 !

Cette formation
vous intéresse ?

Formation
en intra
et sur-mesure

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

30/01/2023 au 10/02/2023
06/03/2023 au 17/03/2023
10/04/2023 au 21/04/2023
15/05/2023 au 26/05/2023
19/06/2023 au 30/06/2023
17/07/2023 au 28/07/2023

 

Prix : 3 550 € HT (+20 % TVA)

Mise à jour le 6 janvier 2023 Télécharger