Télécharger le programme  au format PDF

Formation InVision App, Studio et DSM NEW

Les nouveaux outils pour l'UX/UI Design

Objectifs

Public

Graphiste, webdesigner, UI Designer, UX Designer, chef de projet ou toute personne devant utiliser Sketch dans le cadre de la conception et création d'interface.

Durée

14 heures en présentiel sur 2 jours

Pré-requis

Une bonne connaissance du Web est conseillée. Avoir une bonne maîtrise de son environnement informatique.

Formateur

Formateur Expert en design d'interface, UX/UI Design

Méthode pédagogique

8 participants maximum, un poste MAC par stagiaire et un support de cours est remis à la fin du stage. La formation est constituée d'explications théoriques, de démonstrations suivies d'exercices de mise en pratique.

Modalité de validation des acquis

Évaluation des acquis via un questionnaire. Attestation de fin de stage.

Déroulé

DÉCOUVRIR INVISION CLOUD, INVISION STUDIO et INVISION DSM

  • Décrire l’App Invision et ses principaux usages :
    UX/UI Design, Prototypage basse et haute définition, Cloud, Collaboration, …
  • Découvrir Invision Studio et Invision DSM (Design System Manager)
  • Identifier ses fonctionnalités phares
  • Découvrir les dernières actualités Invision
  • Profiter des ressources et modèles externes

CONCEVOIR EN MODE COLLABORATIF AVEC INVISION FREEHAND

  • Dessiner des formes prédéfinies ou personnalisées
  • Ajouter du texte, Importer des images
  • Synchroniser ses fichiers Photoshop ou Sketch
  • Partager son projet, passer en mode « Présentation » et collaborer
  • Se synchroniser avec un autre utilisateur
  • Enregistrer un draft

RACONTER SON PROJET AVEC INVISION MOODBOARD

  • Raconter son idée, présenter une planche de tendance, une charte graphique, …
  • Ajouter des images, des couleurs, des typographies, des notes
  • Choisir différents types de grille (Masonry, Meticulous, Grid)
  • Éditer le header, documenter et commenter les éléments du moodboard
  • Gérer les options et partager le moodboard

DESIGNER (UX/UI) AVEC INVISION STUDIO

  • Prendre en main l’interface et mémoriser les raccourcis principaux
  • Exploiter le lanceur et importer des fichiers Sketch
  • Créer des espaces de travail (artboards) et des calques
  • Insérer des formes prédéfinies, créer des formes personnalisées
  • Sélectionner, positionner, transformer, supprimer des éléments :
    taille, couleurs fond et contour, dégradés, motifs, transformation, rotation…
  • Ajouter des effets : ombre interne ou externe, flou
  • Maîtriser et modifier les courbes de Bézier
  • Utiliser les opérations booléennes
  • Utiliser les masques
  • Ajouter et agencer des titres, des paragraphes
  • Importer et éditer des éléments vectoriels ou bitmap
  • Mettre en place des grilles (layout) et des repères
  • Créer des composants et exploiter les fonctionnalités de l’override
  • Exploiter les contraintes de redimensionnement
  • Organiser son projet de l’UX à l’UI : web design vs app mobile
  • Acquérir une bonne convention de nommage (fichiers, pages, composants…)

PROTOTYPER DANS INVISION

  • Se servir de Craft pour synchroniser ses écrans Photoshop ou Sketch avec Invision
  • Profiter de l’outil Duplicate de Cfraft pour déployer les pages de listes ou galeries
  • Ajouter des interactions, des évènements souris ou tactiles, des transitions
  • Mettre en place des modèles d’interactions dans Invision
  • Mettre en place des transitions avancées dans Invision Studio

EXPORTER ET PARTAGER SON PROJET

  • Exporter ses écrans en fichiers pdf, jpg, …
  • Visualiser ses écrans sur un mobile avec l’App mobile Invision
  • Partager ses écrans le Cloud
  • Exporter les éléments pour la production (code et assets)
  • Commenter et échanger sur les pages et les éléments
  • Exploiter l’outil d’Inspecteur pour les développeurs
  • Récolter des retours utilisateurs

OPTIMISER son WORKFLOW AVEC INVISION DSM

  • Gérer depuis un seul endroit tous les éléments graphiques d’une marque
  • Documenter les couleurs, styles de texte, styles de calques, icônes et composants
  • Gérer les accès et les droits au Design System Manager
  • Partager ses ressources avec les développeurs