Ziggourat

InVision App, Studio et DSM

Par Ziggourat

Objectifs

Cette formation permet de maîtriser les nouveaux outils du design d’interfaces (UX/UI), d'optimiser votre workflow de la conception aux échanges avec les développeurs et de travailler de manière collaborative et de partager votre projet.

Programme

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

Pédagogie

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.

Formations de la même catégories (5)

IB Formation
Ergonomie et UX design d'interfaces graphiques pour appareils tactilesPar IB Formation

Si le marché des ventes de PC s’essouffle, celui des tablettes et smartphones continue d’afficher de bonnes performances. C’est dire l’engouement du grand public pour ces appareils. Face à ce phénomène, les entreprises "commerciales" se doivent de réagir et de proposer, comme il y a quelques années sur Internet, des applications (Apps) ou des sites web adaptés à ces appareils. Mais la diversité des tailles d’écrans comme la nécessité de proposer une navigation "tactile" très intuitive impose une sérieuse réflexion quant au design et à l’ergonomie de ce type d’interfaces. A l’issue de cette formation, les participants disposeront des connaissances et compétences qui leur permettront de réaliser des applications web ou des sites web conviviaux pour tous les utilisateurs (web et mobiles).

Orsys
Analyse et ergonomie des IHM logiciellesPar Orsys

Cette formation vous présentera les principes de l'ergonomie des IHM et vous fera découvrir les bonnes pratiques pour concevoir et améliorer leur design.

Global Knowledge
Hyperledger : développer sur Hyperledger Fabric v1.1Par Global Knowledge

Découvrez les besoins en applications Blockchain, ainsi que Hyperledger Fabric, le framework open source pour le développement d'applications et de solutions Blockchain à architecture modulaire. Ce cours vous présentera l'outil Hyperledger Composer, qui vous aide à créer des applications Hyperledger Fabric grâce à des travaux pratiques complets.

Ce cours est enseigné par des experts de premier plan, qui vous guideront à travers les sujets de présentation et ceux plus approfondis, tels que les étapes pour intégrer / développer une application avec Hyperledger Fabric v1.1.