Dans la fenêtre d’impression, choisissez « Enregistrer en PDF » comme destination.

Réf. UID-IHM

UI Design - Concevoir des interfaces ergonomiques

UX / UI Design

Durée

14 à 21 heures (2 à 3 jours) selon le format

Modalités

Présentiel, Classe à distance

Reconnaissance

Formation non certifiante (attestation de fin de formation)

Format de vente

Inter-entreprise ou Intra-entreprise

Délai d’accès

Inter : jusqu’à 5 jours ouvrés avant la session ; intra : en moyenne 15 jours ouvrés après l’acceptation du devis

Tarif intra

Sur devis

Pourquoi suivre cette formation

Transformez des maquettes fonctionnelles en interfaces attractives et faciles à utiliser grâce aux règles du design d'interface : hiérarchie visuelle, typographie, couleurs, grilles et accessibilité.

À l’issue de cette formation, les participants seront capables de

Appliquer les règles de la hiérarchie visuelle et de la perception des formes (Gestalt)
Choisir et appliquer des chartes graphiques numériques harmonieuses (couleurs, typographies)
Concevoir des grilles de mise en page et des interfaces adaptées à tous les écrans (responsive)
Concevoir des composants d'interface homogènes et intuitifs (boutons, formulaires, cartes)
Intégrer les règles d'accessibilité numérique (WCAG, RGAA) dès la conception
Préparer la transmission des éléments graphiques aux développeurs (hand-off)

Formats proposés

ACTIONImmersion14 heures (2 jours)1 360 € HTpar participant (inter-entreprises)

IMPACTTerrain21 heures (3 jours) · dont une journée en décalé2 175 € HTpar participant (inter-entreprises)

Chaque format reprend le précédent et y ajoute des journées.

Public visé

UI/UX Designers juniors, Webdesigners, Graphistes traditionnels en reconversion numérique, Directeurs artistiques, Concepteurs d'interfaces, Développeurs front-end ou Chefs de projet web souhaitant acquérir une rigueur de conception visuelle.

Prérequis

Maîtriser l'utilisation de base d'un outil de conception graphique (Figma ou un outil équivalent) et posséder les notions fondamentales de la gestion de projet web (ou avoir suivi le module UXD-FND).

Prérequis techniques à distance

La classe virtuelle se tient sur Microsoft Teams : AMBIA fournit à chaque participant un compte pour la durée de la formation. En intra-entreprise, elle peut aussi se tenir sur l’outil que l’entreprise utilise déjà, par exemple Zoom ou Google Meet.

Le participant se connecte depuis un ordinateur équipé d’une caméra, d’un micro, d’un accès à internet et d’un navigateur à jour, dans un lieu calme. Si la formation le demande, le formateur donne accès à un poste de travail à distance, depuis le navigateur.

Pendant la formation, l’assistance technique répond à support@ambia-skills.fr.

Objectifs pédagogiques

Citer les ratios de contrastes requis par les normes d'accessibilité numérique WCAG (niveaux AA et AAA). Expliquer l'impact de l'alignement, du vide (White space) et de la typographie sur la charge cognitive de l'utilisateur. Composer une palette de couleurs sémantiques et un système typographique hiérarchisé (Type Scale) pour le web. Diagnostiquer les failles visuelles et ergonomiques d'un écran applicatif à partir des critères heuristiques majeurs. Tester la conformité de l'accessibilité d'une interface (lisibilité, contrastes, repères visuels). Concevoir une interface graphique haute fidélité responsive, structurée et documentée pour le transfert technique.

Programme détaillé

Jour 1ACTION

Matin

Fondations visuelles, perception des formes et hiérarchie

Structurer l'information visuelle en exploitant les lois de la Gestalt. Maîtriser la gestion des espaces blancs pour guider l'œil de l'utilisateur.

Les rôles et responsabilités de l'UI Designer au sein de l'équipe produit.
La psychologie de la forme (Gestalt) appliquée aux écrans : lois de proximité, de similitude, de continuité et de clôture.
Les piliers de la hiérarchie visuelle : taille, poids, contraste, positionnement et isolation.
L'importance stratégique du « White Space » (espace négatif) pour aérer l'interface et réduire la fatigue cognitive.

Atelier pratique

Restructuration complète d'une page de tableau de bord encombrée (Dashboard) uniquement en jouant sur les tailles de caractères et les marges, sans ajout d'éléments graphiques.

Cas métier

Redonner de la lisibilité à une interface applicative dense de gestion financière soumise à des impératifs d'efficacité métier élevés.

Compétence acquise

Savoir ordonner visuellement les éléments d'une interface pour en rendre la lecture immédiate et intuitive.

Livrable

Un gabarit structurel d'écran (Wireframe haut niveau) optimisé en hiérarchie visuelle.

Après-midi

Couleur, typographie et iconographie

Composer une palette chromatique équilibrée et accessible pour le web et le mobile. Structurer une échelle typographique cohérente et choisir l'iconographie adaptée.

Théorie des couleurs numériques : les harmonies, la règle des 60-30-10 et la sémantique (succès, erreur, alerte, info).
Anatomie typographique : choix des polices, lisibilité sur écran (Legibility), hauteurs de ligne (Line-height) et appairage typographique.
Création d'une « Type Scale » (échelle de tailles de texte) proportionnelle et modulable.
Rôle de l'iconographie : universalité, cohérence de style (Outline vs Filled) et contraintes de boîtes de collision (Bounding boxes).

Atelier pratique

Création de la charte graphique visuelle (Style Guide) d'une application mobile, comprenant le nuancier de couleurs et l'échelle typographique complète.

Cas métier

Déclinaison graphique d'une identité visuelle papier stricte pour son déploiement sur une interface applicative grand public.

Compétence acquise

Être capable de bâtir les fondations esthétiques et sémantiques cohérentes d'une interface logicielle numérique.

Livrable

Un guide de styles graphiques (UI Style Guide) documenté.

Jour 2ACTION

Matin

Grilles, mises en page et adaptation à tous les écrans

Configurer et utiliser des systèmes de grilles pour aligner les éléments. Adapter une interface aux différents formats d'écrans (Desktop, Tablette, Mobile).

Les types de grilles : grilles de colonnes (Column Grids), grilles modulaires et grilles de lignes de base (Baseline Grids).
Principes du Responsive Design et du Mobile First : points de rupture (Breakpoints) et adaptation des contenus (Fluid layouts).
Anatomie des zones d'écran : barres de navigation, panneaux latéraux coulissants et zones de contenu principales.
Gestion des contraintes tactiles (Tapis de clic de minimum 44x44px ou 48x48px).

Atelier pratique

Déclinaison d'une page d'accueil de site d'actualités complexe du format ordinateur de bureau vers le format smartphone.

Cas métier

Adaptation responsive d'une plateforme de réservation en ligne pour garantir l'efficacité des conversions sur mobile.

Compétence acquise

Savoir concevoir des interfaces ordonnées et parfaitement adaptables à n'importe quelle résolution d'écran.

Livrable

Un ensemble d'écrans (Desktop & Mobile) structuré sur grilles responsive.

Après-midi

Composants d'interface, accessibilité et transmission aux développeurs

Modéliser des éléments d'interface interactifs conformes aux standards ergonomiques. Structurer et annoter ses maquettes pour assurer une intégration fidèle par les développeurs.

Conception fine des composants fondamentaux : boutons (Primary, Secondary, Ghost), champs de saisie (Inputs), listes déroulantes, cartes (Cards).
Les états des composants d'interface : Default, Hover, Focus, Active, Disabled, Loading.
Introduction aux normes d'accessibilité (WCAG / RGAA) : navigation au clavier, indices visuels doubles pour l'erreur (pas uniquement la couleur).
Méthodologie du Hand-off technique : documentation des comportements dynamiques, nommage des calques et exportation des ressources (SVG, PNG).

Atelier pratique

Spécification et préparation d'un écran de paiement complexe avant sa livraison aux équipes de développement front-end.

Cas métier

Standardisation des interfaces d'un tunnel de commande pour réduire le décalage visuel (design debt) entre la maquette et le produit en production.

Compétence acquise

Être capable de livrer un projet d'interface graphique irréprochable techniquement, documenté et prêt pour l'intégration.

Livrable

Une bibliothèque de composants UI documentée et des écrans préparés pour le Hand-off.

Jour 3 · en décaléIMPACT

Matin

Diagnostic de l'accessibilité et de la cohérence de vos écrans

Corriger les défauts d'harmonie visuelle et éliminer les non-conformités d'accessibilité sur les livrables en production.

Analyse des écrans récemment conçus ou développés : contrôle des contrastes, alignement sur une grille de 8 px et harmonisation des ombres et des élévations.

Après-midi

Construire le guide de style de l'entreprise

Créer le document de référence des règles d'interface partagé entre designers et développeurs.

Rédaction du guide de style de l'entreprise (typographie, messages d'erreur, iconographie) et harmonisation des pratiques entre designers et développeurs.

Les ateliers et cas métier de ce programme pourront être adaptés par le consultant-formateur selon les besoins, le niveau et les prérequis des participants, pour favoriser l’atteinte des objectifs pédagogiques.

Méthodes et moyens pédagogiques

Méthodes mobilisées

Pédagogie active et immersive basée sur des simulations métiers. Alternance de partages de cadres de référence visuels, d'ateliers de création graphique guidés, d'exercices d'application de grilles et de revues critiques collectives (UI Reviews).

Moyens techniques

Ordinateur individuel par apprenant disposant d'une connexion internet et d'un logiciel de conception installé (Figma privilégié) ; supports de cours numériques AMBIA ; kits de ressources UI et banques d'assets de référence.

Moyens humains

Formation animée par un consultant-formateur expert senior, UI Designer Senior ou Lead Art Director Digital, disposant d'une solide expérience terrain en agence ou en direction de produit numérique.

Modalités d’évaluation

Évaluation diagnostique

Questionnaire d'auto-évaluation des compétences graphiques et recueil des attentes envoyé 15 jours en amont.

Évaluation formative

Évaluation continue via des exercices de mise en page sur grilles, des ateliers de composition de chartes chromatiques et des revues de calques collectives.

Évaluation sommative

Questionnaire de validation des acquis sous forme de QCM en fin de formation (règles typographiques, contrastes, adaptation aux écrans) et évaluation des interfaces produites lors des ateliers.

Suivi

Feuilles de présence signées par demi-journée, en présentiel comme à distance.
Attestation de fin de formation remise à chaque stagiaire, mentionnant les objectifs, la nature, la durée et les résultats de l’évaluation.
Certificat de réalisation adressé au client ou au financeur.
Questionnaire de satisfaction remis à l’issue de la formation.

Délai d’accès

Inter-entreprises : L’inscription est possible jusqu’à 5 jours ouvrés avant le début de la session, sous réserve des places disponibles.

Intra-entreprise : La formation débute en moyenne 15 jours ouvrés après l’acceptation du devis.

Ce délai peut être adapté selon la disponibilité des sessions, le positionnement du stagiaire et, le cas échéant, l’instruction du dossier de prise en charge par le financeur.

Accessibilité handicap

Nos parcours sont adaptables aux personnes en situation de handicap. Contactez notre référent pour l'étude des aménagements.

Référent handicap : accessibilite@ambia-skills.fr. Aucune reconnaissance de la qualité de travailleur handicapé ni aucun justificatif médical n’est exigé.

Indicateurs de résultats

Indicateurs publiés à partir de 3 avis.

Mode de calcul : www.ambia-skills.fr/notre-approche#notes