UI Design - Conception d'Interface Utilisateur
- Référence
- DW51
La diversification des canaux de communication oblige aujourd'hui les graphistes traditionnels à devenir polyvalents. Ils doivent ainsi pouvoir proposer à leurs clients la réalisation de projets Print, mais également à minima la conception de projets Web. À ce titre, le designer d'interface utilisateur sera en capacité de concevoir des contenus digitaux, mais également des interfaces de sites web ou d'Applications mobiles.
La formation UI Design - Conception d'Interface Utilisateur vous permettra de concevoir l'interface d'un site web ou d'une application mobile, en partant du cahier des charges et du brief créatif dans l'objectif de concevoir un prototype fonctionnel et interactif.
Graphiste, UX Designer, Chef de projet.
Maîtrise de l'outil informatique et bonne connaissance de la navigation Web.
- Identifier les principes de navigation Web et Desktop / supports mobiles tactiles et les contraintes d’interactions.
- Réaliser un zoning, wireframes, maquettes et des prototypes interactifs.
Programme et modules
- 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
(Module disponible séparément) Voir le module HTML et CSS - Bien démarrerIntroduction
- 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 Frames
- Les outils d’alignement et de redimensionnement
- Les calques, le rangement, le nommage des éléments
- Les grilles et les repères
- Les contraintes
- introduction aux plugins
Raccourcis clavier
- Utiliser et appliquer les raccourcis indispensables
- Optimisation des raccourcis pour clavier AZERTY
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
- Les composants avec variants
- Les composants emboîtés
- Les modes indispensables de L’auto-layout
Les bases du prototypage
- Gestion du scroll
- Introduction au prototypage
- Visionner le prototype sur un mobile
- Partager un prototype
Collaboration et Exportation
- Optimisation et exportation des visuels pour le web
- Projets collaboratif au sein d’une Team
- Introduction aux Design Systems
- Insérer des commentaires
- Introduction au panneau Developer Mode
- Exporter et importer un fichier .fig
Conception
- Les fonctionnalités avancés et responsive de l’auto-layout
- Les propriétés de composants, les composants interactifs
- Les librairies de styles et composants partagés
- Les ressources de Figma Community
- Les sections
- La grille fluide et ses contraintes
- Les variables (Color, String, Number et Boolean)
- Les Modes de variables
Plug-ins
- Passage en revue des plugins essentiels
- Animations avec Motion
Prototype avancé
- Prototypage animé avec Smart Animate
- Prototypage dynamique et conditionnel avec les variables
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
La sélection des candidats pourra être effectuée lors d'un entretien préalable.
Évaluation par l'intervenant des travaux ou exercices effectués tout au long de la formation.
- 1 poste Mac par participant.
- Adobe CC & Figma
- Vidéoprojecteur
10 stagiaires maximum
9h/16h.
Cette action de formation est adaptable aux personnes en situation de handicap, sur simple demande lors d'un échange confidentiel avec le/la chargé(e) de clientèle afin d'évaluer vos besoins.
Prochaines sessions
Durée
Tarif
Lieu
Modalités
Prochaines sessions
Durée
Tarif
Lieu
Modalités
Votre contact
Liste des sessions
Du 3 au 27 juin 2024
Durée
Tarif
Lieu
Modalités
Du 7 au 31 octobre 2024
Durée
Tarif
Lieu
Modalités
Contactez nous
Pour suivre cette formation, échanger autour de votre projet, obtenir des conseils…
Toutes nos formations sont également adaptables en intra / sur mesure.