Sensibilisation à l’UI Design

Comprendre les enjeux du design UI

• Web 2.0 : 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) ?
• La différence entre UX et UI
• Interfaces : la différenciation par le graphisme
• Interfaces : les aspects fonctionnels (ergonomie)

Atelier

• Lancement du sujet : repenser l’identité graphique d’un site e-commerce
• Prendre en compte les objectifs de business
• Identifier les utilisateurs principaux (cible)
• Définir le modèle mental des utilisateurs finaux

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
• Créer le design de son site avec Sketch, Adobe Xd ou Figma
• Travailler avec Figma, créer des composants
• 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é

Atelier (suite)

• Travailler à partir d’un scénario d’utilisation
• 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 photos sous licence CC ( Creative Commons)
• Créer un système de design avec Figma

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 donner son avis sur celle des autres
• Prendre en compte les aspects fonctionnels (ergonomiques)
• Améliorer l’interface suite à l’évaluation faite en cours