Sensibilisation à l’UI Design

Comprendre les enjeux du design UI

• Mobile + Web : de nouvelles possibilités offertes aux utilisateurs
• La stratégie de communication et la construction d’un brief graphique
• Qu’est-ce-que l’expérience utilisateur (UX design) ? es différences entre UX et UI
• Interfaces : la différenciation par le graphisme et l’esthétique de l’usage
• Interfaces : les aspects fonctionnels (ergonomie)

Atelier UI/UX

• Lancement du sujet : repenser l’identité graphique d’un site e-commerce, inventé pour l’occasion
• Prendre en compte les objectifs de business
• Identifier les utilisateurs principaux (cibles)
• Définir l’utilisateur par l’observation du contexte et l’analyse des tâches
• Construire un parcours utilisateur allant de la sélection de produit au paiement

Construire sa piste graphique

• Elaborer une grille de mise en page et définir les résolutions cibles
• L’importance de l’ergonomie (contraste, CTA, hyperliens, notion d’affordance)
• La différence entre zoning, wireframe et prototype
• Travailler avec Figma
• Travailler avec les composants d’interface (bibliothèques de composants)
• Prendre en compte les usages mobiles et tactiles
• Conseils typographiques pour la création graphique
• Utilisation des polices sur le web
• Choisir ses polices à partir de critères sémantiques et en fonction de la lisibilité
• Utilisation des outils de mesure (contraste / accessibilité)

Atelier (suite)

• Travailler à partir du parcours utilisateur pour schématiser les écrans
• A partir du zoning détaillé faire le wireframe
• Réaliser un Moodboard et faire un Benchmark
• Créer sa grille de mise en page et choisir ses polices

Appliquer le design graphique à sa solution

• Gérer les couleurs (choix des nuanciers, accessibilité des couleurs)
• Concevoir des icônes ou un Logo
• Choisir le bon format pour ses images
• Travailler avec des bibliothèques de photos sous licence CC (Creative Commons)
• Elaborer un guide de style pour les intégrateurs / développeurs

Finaliser l’interface

• Gérer le comportement responsive de sa solution
• Mettre en œuvre sa créativité pour finaliser l’interface
• Réaliser le prototype
• Présenter sa solution et évaluer avec le groupe les améliorations fonctionnelles et graphiques possibles
• Améliorer l’interface suite à l’évaluation collective faite en cours