UI Design - Conception d'Interface Utilisateur

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

• 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

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

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

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

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