Sensibilisation à l’UI Design

• Bonne pratique de la navigation sur supports mobiles
• Maîtrise de l´outil informatique et de la navigation sur le Web

Acquérir les compétences pour concevoir graphiquement une interface.
Maîtriser les bases du design graphique pour s’en servir au quotidien.

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

Une attestation de participation sera transmise aux participants