Formation Initiation UX/UI Design

Contenu de la formation Initiation UX/UI Design *

* Programme de formation à titre indicatif et adapté sur-mesure selon vos besoins.

Jour 1 : Bases et exploration UX/UI

Matinée : Fondamentaux UX/UI

Introduction à l’UX et l’UI (1h30)

1. Différences entre UX et UI :
   • Définition et champs d’application :
     • UX : expérience utilisateur, satisfaction, fluidité.
     • UI : interface, esthétique, et interaction visuelle.
   • Rôles et compétences des UX/UI designers.
   • Étude d’un exemple concret (comparaison d’un site bien conçu et d’un site avec des problèmes UX/UI).
2. Les étapes du design centré utilisateur :
   • Design Thinking : empathie, définition, idéation, prototypage, et test.
   • Introduction aux personas et user stories.
   • Importance de la recherche utilisateur (questionnaires, entretiens).

Bonnes pratiques d’ergonomie (1h30)

1. Principes psychologiques et ergonomiques fondamentaux :
   • Loi de Fitts : explication et exemples d’application (tailles des boutons, distances interactives).
   • Hiérarchie visuelle : taille, couleur, position pour guider l’attention.
   • Perception utilisateur : notion de « charge cognitive ».
2. Introduction à l’accessibilité web :
   • Pourquoi l’accessibilité est cruciale (enjeux légaux et éthiques).
   • Concepts clés : contrastes, navigation au clavier, alternative texte.
   • Présentation d’outils comme Axe ou Lighthouse pour analyser l’accessibilité.

Après-midi : Pratique avec un atelier

Atelier de wireframing (2h)

1. Découverte de Figma ou outil équivalent :
   • Installation et prise en main rapide.
   • Exploration de l’interface : calques, grilles, et composants.
   • Exemple guidé : création d’un wireframe pour une page d’accueil (site ou app mobile).
2. Création d’un wireframe :
   • Travail individuel ou en binôme pour concevoir un wireframe simple.
   • Brief clair (exemple : « Créer une page de contact intuitive pour un site de e-commerce »).

Exercices pratiques (1h)

1. Simulations d’amélioration d’interfaces existantes :
   • Étude de cas : analyse d’un site mal conçu et propositions d’amélioration.
   • Défi : réorganiser une interface existante en 15 minutes.
2. Feedback sur les travaux réalisés :
   • Présentation des wireframes créés.
   • Feedback constructif en groupe avec focus sur :
     • Cohérence visuelle.
     • Simplicité et clarté de la navigation.

Jour 2 : Application et approfondissement

Matinée : UI Design et esthétique

Principes de UI Design (2h)

1. Design visuel :
   • Couleurs : principes de contraste et harmonies de couleurs.
   • Typographie : choix des polices et hiérarchisation textuelle.
   • Grilles et mise en page : utilisation des grilles pour structurer les interfaces.
2. Systèmes de design :
   • Pourquoi créer des design systems ?
   • Exemples d’éléments : boutons, icônes, menus.
   • Exploration d’un design system existant (Material Design, par exemple).

Accessibilité et micro-interactions (1h)

1. Accessibilité approfondie :
   • Règles WCAG essentielles.
   • Test d’accessibilité rapide avec un prototype (simulation d’un utilisateur non voyant).
2. Introduction aux micro-interactions :
   • Pourquoi elles améliorent l’expérience utilisateur.
   • Exemples : animation de boutons, transitions douces.

Après-midi : Atelier projet final

Réalisation d’un prototype interactif (3h)

1. Création d’un prototype interactif :
   • Brief : réaliser un prototype fonctionnel pour un scénario donné (exemple : une application mobile de réservation).
   • Utilisation de Figma pour les interactions simples (navigation entre écrans).
2. Intégration des retours utilisateurs :
   • Simulation d’un test utilisateur en binômes.
   • Ajustements rapides en fonction des retours.

Présentation des projets (1h)

1. Présentation finale :
   • Chaque participant présente son prototype au groupe.
   • Focus sur les choix UX/UI et l’accessibilité.
2. Feedback collectif :
   • Retour du formateur et des pairs.
   • Identification des points forts et des axes d’amélioration.