UX UI Design - Cours complet

Vous souhaitez vous former sur le logiciel Figma, 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 Figma afin de gérer le processus de conception globale d’UX-UI.

Présentiel / Distanciel
10 jours - 70 heures
Max. 8 pers
Session à Paris
Prochaines sessions
Du 22/07/2024 au 02/08/2024
Du 16/09/2024 au 27/09/2024
Du 11/11/2024 au 22/11/2024
Tarif : 3 550 € HT

Objectifs

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

Coup d'œil sur la formation

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 Figma 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.

Programme

UX Design (user experience) (5j – 35h)

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 Figma

Découvrir Figma

  • 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 Figma au format mobile

UI Design (5j – 35h)

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

Pré-requis

Il est nécessaire pour suivre cette formation d’avoir une culture Web. Des bases en graphisme sont conseillées.

Modalités d'inscription

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

Méthode pédagogique

Formation présentielle et/ou distancielle durant laquelle seront alternés explications théoriques et exercices pratiques.

Matériel pédagogique

Un ordinateur par personne équipé de la dernière version des logiciels Photoshop et Figma. Supports de cours fournis.

Modalités d'évaluation

Cette formation est diplômante et conduit à l’obtention d’un diplôme Crea IMAGE.

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.

Public

Graphiste. Infographiste. Webmaster. Concepteur ou développeur de sites ou d’applications mobiles. Chef de projet web et digital.

Accessibilité

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.

Certificat

Certification Professionnelle reconnue par les Acteurs de la Compétence (Fédération de la Formation Professionnelle) – CP FFP

Taux d’obtention 2023 : 100%

Mise à jour le 20 juin 2024

Formation
en intra et sur-mesure

EN SAVOIR PLUS

Financement

Les nombreux dispositifs de financement existant peuvent financer votre formation. Nous vous accompagnons pour monter votre dossier auprès des financeurs.

Découvrez les financements
Présentiel / Distanciel
10 jours - 70 heures
Max. 8 pers
Session à Paris
Prochaines sessions
Du 22/07/2024 au 02/08/2024
Du 16/09/2024 au 27/09/2024
Du 11/11/2024 au 22/11/2024
Tarif : 3 550 € HT
Aller au contenu principal