UI Design - Conception d'Interface Utilisateur

Cette formation comprend 5 modules

• Conception et création graphique pour le web

  5 jours

  • Processus de conception digital/web
  • Rôle du designer graphique
  • Cadrage de la demande
  • Cahier des charges et brief créatif
  • Outils de hiérarchisation de contenu
  • Arborescence d'un site web
  • Environnement multi-écrans (desktop, tablette, mobile)
  • Zoning et wireframes
  • Création d'un univers graphique sur mesure
  • Maquette ou Style Guide
  • Mini-atelier (analyse de l'existant, optimisation de l'arborescence, création de wireframes)

  Voir le module

• UI - Conception d'interface interactive

  2 jours

  • Structuration et architecture de l'information simplifiée
  • Techniques de production pour desktop et supports mobiles
  • Critères ergonomiques relatifs au web et aux supports mobiles
  • Chartes d'interface (guidelines vs design graphique libre)
  • Principes de navigation et d'interaction sur tablette et mobile
  • Principes de navigation sur desktop

  Voir le module

• Maquette et prototypage avec FIGMA - Bien démarrer

  3 jours

  Introduction

  • Historique du logiciel et présentation des concurrents (Sketch, Adobe XD)
  • Comparer Figma en version Desktop et en version Web

  Découverte de l'interface

  • Analyser les panneaux principaux (Calques, Pages et Design)
  • Utiliser l’espace de travail : pages, frames, calques et groupes
  • Utiliser les panneaux : Calques, Assets, Design et Prototype

  Utiliser les outils de création

  • Formes géométriques simples, l’outil texte et l'importation d’images
  • Les masques
  • Les outils d’alignement et de redimensionnement
  • Les calques, les groupes, le rangement, le nommage des éléments
  • Les grilles et les repères

  Raccourcis clavier

  • Utiliser et appliquer les raccourcis indispensables

  Utiliser les outils de création avancés

  • Les Formes complexes (Pathfinder, Boolean, Plume)
  • Les Styles, les Couleurs (RGBA, CSS, HSB), le Texte et les Effets
  • Les modes de fusion
  • Les composants et les instances

  Interaction, optimisation, collaboration et Exportation

  • Gestion du scroll
  • Optimisation et exportation des visuels pour le web
  • Introduction au prototypage et partage du projet avec une équipe
  • Visionner le prototype sur un mobile
  • Insérer des commentaires
  • Introduction au panneau d’inspection
  • Exporter et importer un fichier .fig

  Voir le module

• Maquette et prototypage avec FIGMA - Perfectionnement

  2 jours

  Conception

  • Les contraintes
  • L'auto-layout
  • Les composants emboités, les variants, les composants interactifs
  • Les librairies de styles et composants partagés
  • La grille fluide
  • Les image flexibles

  Plug-ins

  • Installer un plug-in
  • Passage en revue des plugins essentiels

  Prototype avec des animations

  • Figmotion
  • Prototypage avancé avec smart animate

  Voir le module

• Atelier - Conception d'interface utilisateur

  3 jours

  Le stage se déroule sous forme d'un atelier dans lequel les cas de figure usuels du logiciel sont abordés.

  Le stagiaire réalise individuellement à partir d'éléments grapqhiques fournis, un projet fictif proposé par le formateur.

  Thèmes mis en pratique

  • Prototype de l'interface d'un site Web ou d'une App