Ux & Ui :
L'Art du Prototype

Connaître le workflow, les outils, Adobe Xd et la méthode pour bien préparer une interface.

Limité à 6 stagiaires - 3 Jours

Mise à jour : juin 2022

logo Formation Ux Ui Design

Objectifs :

  • Maîtriser les principales fonctionnalités du logiciel Adobe Xd.
  • Faciliter la réflexion et la communication lors du processus de création.
  • Connaître les outils et le workflow pour créer des interfaces.
  • Créer des prototypes pour le web et les applications mobiles.

Pré requis :

Des connaissances en design et outils graphiques tels que Photoshop / Illustrator sont un plus.
Comprendre (sans forcément coder) les langages Web (HTML-CSS-JS) est un plus.

Public :

Personne souhaitant préparer / encadrer / créer des designs ergonomiques et réfléchis en se confrontant à plusieurs supports (desktop, tablette, mobile..) et problématiques.

Exemple : Vous souhaitez acquérir une méthode de travail et les règles élémentaires pour optimiser la préparation d’un projet responsive et faciliter les échanges avec votre client (ou votre équipe) avant le design final (Photoshop, Sketch, etc..).

PROGRAMME : 3 JOURS

Journée 1

1. Méthodes UX : analyse

  • Proposition de valeur design (value proposition design)
  • Les personas
  • Storyboard
  • Feuille de route (features roadmap)
  • Flux utilisateur (user flow)
  • Cas d'utilisation et scénarios d’usages
  • Interview utilisateur

2. Méthodes UX : conception

  • Tri des cartes
  • Le wireframe
  • Charte graphique
  • Le prototype fonctionnel

3. Méthodes UX : test

  • Les test utilisateurs (user test)
  • Le six to one
  • A/B testing

4. Responsive Design : grille de mise en page

  • Grid : ou, quand, comment ?
  • Grille : points positifs / Négatifs
  • Grilles de mise en page

5. Responsive Design : Intégration Front - End

  • Comprendre le code en tant que Designer
  • HTML/CSS/JS : les grands principes
  • Comment inspecter / déconstruire un site en ligne
  • Le code aide un Designer (genre, s'amuser avec du parallaxe ou des animations...)
  • Le Mobile First ?

6. Responsive Design : Déclinaison

  • Déclinaison de design responsive
  • Les résolutions majeures
  • Causes et conséquences d'un site Responsive
  • Site dédié vs Site responsive

7. L'expérience utilisateur UX

  • Le wireframe
  • L’ergonomie d’une interface
  • Le prototype fonctionnel
  • Les outils(invision, adobe XD…)
  • Les tests utilisateurs

8. Les livrables en UI & UX

  • Site map
  • Use case
  • Webdesign
  • Prototype

9. Bases conception prototype UX

  • Prévisualiser le prototype
  • Travailler avec les plans de travail
  • Utiliser des outils de dessin et de texte
  • Utilisez l'outil Plume
  • Masque et importation d'images
  • Grille de répétition
  • Activer le défilement
  • Grille de mise en page
  • Importer SVG
  • Utilisation des symboles, style de caractères, nuanciers de couleurs
  • Paramétrer des effets d'interactions (hover, focus…)
  • Partager un prototypes
  • Exportation
  • Prototypes vidéos
  • Création de commentaires sur un prototype
  • Les ressources graphiques

10. Premier Webdesign avec Adobe Xd

  • Apprenez à connaître l'interface XD
  • Les ressources graphiques
  • Découverte des outils de design du logiciel
  • Prototype (partage & commentaires)
  • Livrables (Exportation, fichier, vidéo)

Journée 2

11. Mise en place d'une démarche UX

  • Cahier des charges UX
  • Benchmark, veille concurrentielle sur le web
  • Brainstorming avec votre équipe projet
  • Création des personas (utilisateurs cibles de l'outil digital)
  • Cheminement utilisateur et scénario (user flow)
  • Les outils de conception aujourd’hui
  • Le front-end (coding et design ?)

12. Conception d’une application mobile / plateforme web

  • Rédaction d’un cahier des charges
  • Conception de l’UX et de l'arborescence
  • Création du zoning, wireframe
  • Conception du design de l’application (webdesign & UI design)
  • Le prototype sur InVision
  • Atelier “User test”
  • Problématique UX
  • Brainstorming
  • Benchmark et inspiration (interfaces, IHM)
  • Persona

13. L’ergonomie des interfaces

  • Bonne pratique UI-UX
  • Mauvaise pratique UI-UX
  • Exemple des typologies de pages
  • Exemple de typologies de dashboard

14. Suite Conception Webdesign UX

  • Cheminement utilisateur
  • Désirs vs. besoins
  • Six to one
  • Générer, développer, affiner et choisir des idées
  • Mise en pratique : zoning, wireframe
  • Faciliter les échanges
  • Impliquer le client
  • MoodBoard ?

Journée 3

15. Perfectionnement Ui,Ux :
Direction artistique web

  • Création du Moodboard
  • L’identité visuelle, la charte graphique web (exemples)
  • Où trouver des éléments graphiques (illustrations, photographies, ui, sitemap etc…)

16. Perfectionnement Ui,Ux : Adobe Xd

  • UI design sur Adobe XD
  • Conception d’une charte graphique web
  • Ajustant facilement les couleurs et les styles de police
  • Adobe XD avec Photoshop & Illustrator
  • Communication entre designers et développeurs

17. Perfectionnement Ui,Ux
: Les notions clés de l’UI design

  • Les différents types d’UI web
  • Element
  • Bootstrap
  • Foundation
  • material design
  • Ionic
  • Les composants des interfaces web / mobile

18. Adobe Xd : test d’ergonomie, Utilisabilité

  • Mise en place de la démarche UX feedback
  • Évaluation de votre prototype
  • Atelier guerrilla testing
  • Questionnaire SUS
  • Entretien utilisateur
  • Itération du design sur votre prototype

19. Synthèse

  • Test des compétences avec un cas pratique
  • Quizz UX
CE QUE VOUS ALLEZ FAIRE / NE PAS FAIRE

Ce que vous ferez :

  • Acquérir une méthode saine et efficace pour la préparation et la réflexion de maquettes graphiques.
  • Solutionner les problématiques majeures liées à une interface responsive.
  • Améliorer les retours et les échanges avec les clients grâce aux Storyboard/WireFrame/Prototype.
  • Tester une interface.

Ce que vous ne ferez pas :

  • Designer une maquette complète tel un graphiste. L’accent est mis sur la préparation et les outils de création de prototypes.
  • Pas de création de maquette sous Photoshop, Sktech ou autres. Seules les parties en amont (wireframe, storyboard, prototype...) sont abordées ou certains éléments précis de design.
  • Pas de code ou d'intégration web.
DURÉE ET LIEU

Durée et Horaires :

Durée : 3 jours, soit 21 heures de formations.

Horaires : 09h30 - 12h30 /13h30 - 17h30 (soit 7 heures de formation par jour)

Lieu de formation :

Cette formation est dispensée en présentiel.

Nos formations se déroulent en plein centre de la belle ville de Nantes sur l'île de Versailles.
Le Bar à Formations - Capitainerie île de Versailles - 44000 Nantes.

DATES & TARIF

Les prochaines dates de formation :

Sur demande : n'hésitez pas à contacter Marine !

  • 21, 22 et 23 juin 2022
  • 23, 24 et 25 novembre 2022

Le tarif de la formation :

  • 1440€ HT pour les 3 jours de formations.
INDICATEURS DE RESULTATS

Note de satisfaction des participants : 4.3/5

MODALITÉ D’INSCRIPTION ET DÉLAIS D’ACCÈS

L'inscription est validée lorsque :

  • le questionnaire "Analyse du besoin et validation des pré-requis" nous est retourné complété.
  • la convention nous est retournée complétée et signée.

Les demandes d’inscription peuvent être envoyées jusqu’à 2 jours ouvrés avant le début de la formation, en fonction des places disponibles.

MÉTHODES ET MOYENS PÉDAGOGIQUES MOBILISÉS

6 Stagiaires maximum par session

  • Accueil des stagiaires dans une salle dédiée à la formation.
  • Un ordinateur par stagiaire, muni d’un accès internet et des logiciels nécessaires.
  • Documents supports de formation projetés.
  • Exposés théoriques.
  • Etude de cas concrets.
  • Quiz en salle (QCM).
  • Invitation sur notre forum de discussion (Slack) à la suite de la formation.
  • Documents supports de formation remis en fin de formation.
MODALITÉS DE SUIVI ET D’ÉVALUATION
  • Feuilles d'émargement.
  • Etudes de cas, et exercices pratiques.
  • Grilles d'évaluation de la formation.
  • Certificat de réalisation de l’action de formation mentionnant les résultats de l’évaluation des acquis de la formation.
  • Questions écrites (QCM).
PERSONNES EN SITUATION DE HANDICAP

Merci de nous consulter pour nous permettre d’évaluer avec vous la possibilité d’adaptation de notre formation à vos besoins.

FORMATION INTRA-ENTREPRISE

Nos formateurs peuvent également se déplacer dans vos locaux. En fonction de vos besoins, nous vous accompagnons dans votre démarche.

Consultez Marine pour plus d’informations !

FINANCEMENTS
Certification Qualiopi - Bar à Formations

Notre organisme est certifié Qualiopi pour ses actions de formations, et à ce titre vous pouvez solliciter une prise en charge de cette formation auprès des OPCO et autres fonds publics ou mutualisés.

// Compte Personnel Formation (CPF)

Tout au long de votre vie active jusqu’à votre départ à la retraite vous cumulez des droits à formation au titre de vos activités professionnelles mobilisables tout au long de votre vie professionnelle. Vous pouvez donc mobiliser votre CPF pour financer cette formation, via ce lien.

Remarque : Si vos droits sont insuffisants pour payer votre formation, vous pouvez demander un co-financement à votre employeur ou à Pôle emploi (si vous êtes demandeur d’emploi).

// Demandeurs d’emploi

Vous pouvez demander un financement à condition que la formation vous aide dans votre projet de retour à l’emploi ou création d’entreprise définit avec votre conseiller.ère Pôle emploi. Il s’agit du dispositif d’Aide Individuelle à la Formation (AIF). Les démarches sont dématérialisées : afin de recevoir un devis sur votre Espace personnel Pôle emploi, n’oubliez pas de nous communiquer votre n° d’identifiant Pôle emploi.

Qui contacter ?

  • Votre conseiller Pôle Emploi ou CSP.

// Micro-entrepreneurs et Indépendants

Il existe des fonds de formation pour vous aussi ! Tout ou une partie de la formation peut-être prise en charge (frais pédagogiques), mais aussi parfois les frais de restauration, de déplacement...

Qui contacter ?

  • Votre OPCO (Opérateurs de Compétence) ou Fonds d’Assurance Formation(FAF)
  • Selon votre activité et votre caisse de cotisation (CMA, URSSAF ou CIPAV), l’organisme auquel vous vous adresserez est le FAFCEA, l’AGEFICE ou le FIF-PL.

// Dirigeants

Chaque année, vous avez droit à un budget Formation (car vous cotisez à la formation continue). Attention, ce budget n’est valable que pour une année calendaire (non cumulable), donc si vous ne l’utilisez pas dans l’année il sera perdu.

Qui contacter ?

  • Votre OPCO (Opérateurs de Compétence).
  • Pour savoir qui est votre OPCO: il est indiqué sur vos attestations URSSAF, ou bien avec le code NAF de votre entreprise. C’est à lui que vous versez la CUFPA (Contribution Unique à la Formation Professionnelle et à l’Alternance).

// TPE et PME de moins de 50 salariés

Vous pouvez faire prendre en charge tout ou partie de vos formations par votre OPCO, dont la mission est d’accompagner les entreprises de moins de 50 salariés dans la formation de leurs salariés.

Qui contacter ?

  • Votre employeur ou responsable RH.

// Entreprises de plus de 50 salariés.

La formation d’un collaborateur peut être prise en charge dans le Plan de développement des Compétences (anciennement Plan de formation).

Qui contacter ?

  • Votre employeur ou responsable RH.
CONTACT

Contactez Marine pour toutes demandes d'informations, de devis ou d'inscription.

Loïc Vanderschooten - Bar à Formations

"Passionné de design d’interfaces et d’innovation, je suis entrepreneur, développeur et designer. J’accompagne les entreprises dans leurs démarches d’innovation en concevant leurs produits ou leurs services avec eux et leur collaborateurs."

Loïc Vanderschooten, formateur