UI Design - Designer d'Interface Utilisateur

Cette formation comprend 6 modules

• Fondamentaux du Web

  1 jour

  • Historique d'Internet et du Web
  • Notions fondamentales : définition Internet et Web, relation client/serveur
  • Socles techniques d'Internet et du Web (protocoles, langages, CMS, BDD, etc.)
  • Tendances majeures (web 2.0/3.0, responsive, interactivité/animation, onepage/flat design, images/vidéos/sons, webdoc/transmédia, datavisualisation, UX Design, motion design, etc)
  • Différents métiers de l'Internet

  Voir le module

• 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
  • Prototypage

  Voir le module

• Maquette et prototypage avec Sketch

  2 jours

  • Présentation de l'interface (menus, outils, artboards, …)
  • Réalisation de la maquette graphique avec Sketch (modèles de pages, formats desktop/tablettes/smartphone, repères/grilles, images, styles guide : fond, couleur, typo, éléments récurrents du design, …)
  • Utilisation des calques, symboles, comportements responsives des symboles, styles, masques, tranches, grilles, repères
  • Préparation du découpage de la maquette (header, footer, corps, menu, zones d'interaction, icones)
  • Préparation et optimisation des images et symboles (résolution, taille, formats de fichier : png, svg, jpg, couleurs, cadrage, sprite, etc.)
  • Rangement, gestion des symboles, classement, dénomination et exportation de ses éléments

  Voir le module

• HTML et CSS - Initiation

  3 jours

  Fonctionnement d'un site web et rendu navigateur

  Création d'une page web en HTML

  • Bases du langage et syntaxe HTML
  • Structure d'une page
  • Insertion d'images, utilisation des listes ordonnées ou à puces
  • Liaison des pages entre elles
  • Insertion du son et de la vidéo en HTML

  Mise en forme du site web en CSS

  • Création et liaison d'un fichier CSS à une page web
  • Architecture d'un fichier CSS
  • Sélecteurs de base
  • Modification des styles de texte, d'arrière-plan, mise en forme des blocs, etc.

  Utilisation de l'inspecteur web

  Voir le module

• Animate CC

  3 jours

  Introduction

  • Présentation des différents types d’usages
  • Présentation de la méthode de production avec Animate CC
  • Prise en main de l’interface
  • Création et configuration de sa première animation
  • Réglage des paramètres de publication

  Gestion des assets d’une animation

  • Notions élémentaires relatives à une forme
  • Création des formes à l’aide des outils de dessin
  • Compréhension et manipulation de l’outil Épaisseur
  • Compréhension et manipulation de l’outil Transformation et de ses options
  • Compréhension et manipulation de l’outil Segment
  • Importation et gestion d'une image sur la scène
  • Placement et gestion d'un texte sur la scène

  Notions fondamentales

  • Créer un symbole
  • Comprendre les différents types de symboles
  • Personnaliser un symbole de type bouton
  • Imbriquer des symboles
  • Réaliser une interpolation de mouvement
  • Réaliser une interpolation de forme
  • Ajouter une présélection de mouvement
  • Ajouter un masque à une animation
  • Associer un guide de mouvement à une animation
  • Exporter une animation

  Interactivité dans une animation

  • Naviguer dans une animation
  • Contrôler le scénario d’un clip
  • Contrôler les propriétés d’une occurrence

  Voir le module