Design UI : créer des interfaces ergonomiques avec un Design System Présentiel

• Identifier les enjeux du design d'interface utilisateur et appliquer les principes du Design System.
• Créer des interfaces de sites Web, d'applications et de logiciels tout en maintenant une cohérence graphique.
• Appliquer les règles d'ergonomie des interfaces et concevoir des prototypes fonctionnels.
• Intégrer les principes de l'UX Design dans la conception d'interfaces et appliquer des démarches de conception itératives.
• Concevoir des interfaces responsives adaptées aux différentes tailles d'écrans.

Jour 1

Matin : Introduction au UI Design et Design System

Définition et rôle du UI Design (User Interface Design).

Comparaison entre UI Design et UX Design.

Historique des interfaces homme-machine : skeuomorphisme, flat design, neumorphisme.

Introduction aux Design Systems et rôles dans la création d'interfaces cohérentes.

Principes de base pour la création d'une interface : palette de couleurs, typographie, mise en page, hiérarchisation des contenus.

Création de prototypes avec des outils comme Figma, Sketch, InVision.

Exemple de travaux pratiques : Création d'un moodboard, palette de couleurs, et guide UI.

Après-midi : Règles d'ergonomie et analyse des interfaces

Introduction aux principes de l'ergonomie des interfaces : normes ISO 9241-210, principes d'utilisabilité.

Les lois de la Gestalt, les heuristiques de Jakob Nielsen et les critères de Bastien et Scapin.

Évaluation de l'ergonomie d'une interface.

Exemple de travaux pratiques : Évaluation de l'ergonomie d'une interface existante avec une grille d'analyse et recommandations pour améliorer l'ergonomie.

Jour 2

Matin : Concevoir pour le Responsive Design

Qu'est-ce que le Responsive Design et pourquoi est-il crucial pour les interfaces modernes ?

Création de grilles fluides et adaptatives avec CSS 3.

Anticipation des contraintes du développeur lors de la création d'interfaces responsives.

Développement de User Flow pour interpréter le parcours utilisateur et ajuster les interfaces.

Exemple de travaux pratiques : Création d'une interface responsive pour mobile, tablette et bureau.

Après-midi : Intégration des concepts d'UX et prototypage

Intégration de l'UX Design dans la conception d'interfaces : comprendre les besoins utilisateurs et les traduire en design.

Application d'une approche itérative avec Test and Learn pour améliorer l'interface en continu.

Création de prototypes d'interface avec des outils modernes.

Exemple de travaux pratiques : Création d'un prototype d'interface utilisateur à partir du guide UI et du moodboard créé le Jour 1.

• Notre approche pédagogique repose sur une alternance entre apports théoriques opérationnels et mises en pratique directement issues du contexte professionnel des participants.
• Chaque thème traité s'appuie sur des études de cas concrets et des exercices pratiques, conçus spécifiquement à partir des situations réelles rencontrées dans l'environnement professionnel des stagiaires.
• Nos méthodes favorisent l'adaptation aux besoins de chaque participant afin d'optimiser leur engagement et leur apprentissage.
• L'animation privilégie une pédagogie active, favorisant les échanges, l'analyse réflexive des pratiques et une adaptation continue aux réalités professionnelles des participants.

• Des supports pédagogiques numériques adaptés au contexte professionnel sont remis aux participants.
• Dispositifs pédagogiques variés sont mobilisés tout au long de la formation (études de cas, exercices pratiques, travaux en sous-groupes, mises en situation, jeux pédagogiques) favorisant l'apprentissage actif, collaboratif et l'appropriation des contenus.

• Un QCM est réalisé en début et en fin de formation afin d'évaluer l'évolution des connaissances.
• Le suivi des stagiaires est assuré tout au long de la formation à travers des ateliers pratiques, des mises en situation et des échanges permettant d'évaluer leur participation et leur progression.

Une attestation individuelle de formation sera remise à chaque participant à l'issue de la formation.