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

logo Formation Ux Ui Design

Objectifs :

  • Tester, partager et faire mûrir vos idées avant de passer au design final.
  • Faciliter la réflexion et la communication lors du processus de création.
  • Utilisation d'Adobe Xd.
  • 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..).

PLAN DE FORMATION : 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

Horaires :

De 9h30 à 17h30 avec une pause déjeuner de 12h30 à 13h30
soit 7 heures de formation par jour.

Lieu de formation :

Nos formations se déroulent en plein centre historique de la belle ville de Nantes à La Rosière.
la Rosière d'Artois - 35 Rue de la Rosière d'Artois - 44100 Nantes.

Petit déjeuner & Repas gourmand du midi inclus.
6 Stagiaires maximum par session

DATES ET TARIF

Les prochaines dates de formation :

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

  • 18, 19 et 20 décembre 2018

Le tarif de la formation :

  • 1425€ HT pour 3 jours de formation.

Petit déjeuner & Repas gourmand de midi inclus.
6 Stagiaires maximum par session

Contacter Marine pour toute demande d'inscription ou d'informations complémentaires.

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

Vous souhaitez connaitre les possibilités de financement de votre formation ?

Financement Formation Professionelle
Manuel Pinard - Bar à Formations

"Entrepreneur passionné par le monde des startups et de l’innovation, je suis spécialisé en design UI UX. J’accompagne les porteurs de projets dans la conception et la création d’interfaces web ou mobile."

Tristan Fraud, formateur