Cette formation complète prépare à la conception d’interfaces web et mobiles : culture du design, ergonomie et UX, charte graphique web, puis maquettage et prototypage avec Figma, l’outil de référence du secteur (qui remplace Adobe XD, dont le développement est arrêté). Prérequis : pratique courante de Windows ou macOS.
Objectifs :
• Acquérir la culture du design web et les principes de l’ergonomie.
• Prendre en compte l’expérience utilisateur, l’accessibilité et le facteur humain.
• Créer ou adapter une charte graphique web et un design system.
• Concevoir des wireframes et des maquettes pour ordinateur, tablette et mobile.
• Réaliser des prototypes interactifs et les tester.
• Partager et transmettre ses maquettes aux développeurs.
Formation disponible
présentiel, classe à distance, individuel
Formation disponible présentiel, classe à distance, individuel.
Comment souhaitez vous suivre cette formation ?
Cette formation est disponible en présentiel, à distance ou en cours individuels. Suite aux changements récents du fonctionnement des comptes CPF, si nos liens CPF renvoient sur une erreur temporaire, merci de nous contacter au 04 42 31 43 55
Comment souhaitez vous suivre cette formation ?
Cette formation est disponible en présentiel, à distance ou en cours individuels. Suite aux changements récents du fonctionnement des comptes CPF, si nos liens CPF renvoient sur une erreur temporaire, merci de nous contacter au 04 42 31 43 55
Culture du design web
• Histoire du webdesign, évolution des outils et des langages
• Tendances actuelles et processus de conception
Ergonomie et UX
• Vocabulaire UX / UI ; lois de l’ergonomie
• Personas et parcours utilisateurs
• Démarche itérative : comprendre, explorer, concrétiser, tester
• Accessibilité numérique (RGAA, WCAG)
Charte graphique web
• Contenu d’une charte ; identité graphique et contraintes d’usage
• Inventaire des contenus, style d’images, iconographie, moodboard
• Grilles, zoning, marges et adaptation aux écrans
• Éléments interactifs : navigation, boutons, appels à l’action, formulaires
• Typographie : classifications, hiérarchie, licences, accessibilité
• Couleurs et contrastes conformes
Figma — Prise en main
• Interface, fichiers, pages et frames
• Formes, outil Plume, icônes ; textes et styles
• Images et masques ; couleurs, dégradés, palettes
Figma — Construire une interface
• Grilles, contraintes et auto layout
• Composants, variantes, variables et bibliothèques
• Kits d’interface et design system
• Écran d’accueil d’une application mobile ; écrans de connexion et d’inscription
Prototypage interactif
• Liens d’interaction, superpositions, animations intelligentes, gestes tactiles
• Interfaces responsives et parcours utilisateur
Partager et tester
• Partage, commentaires et présentation au client
• Tests utilisateurs et aperçu sur smartphone et tablette
• Transmission aux développeurs avec le mode Dev
• Plug-ins utiles
Ouverture aux outils d’IA
• Fonctions d’IA de Figma et outils de génération d’interfaces : intérêt et limites
• Garder la maîtrise des choix de conception
