-
Filière :
UX, UI, Web design
-
Sous-filière :
UI et production graphique
-
Référence
MM-UID
-
Durée
2 jours (14h)
-
Prix unitaire HT
1490 €
Objectifs pédagogiques
- Acquérir les compétences pour concevoir graphiquement une interface
- Maîtriser les bases du design graphique pour s’en servir au quotidien
Public cible
- Chefs de produits
- Développeurs
- Ergonomes
- Graphistes
Pré-requis
Maîtrise de loutil informatique et de la navigation sur le Web
Programme de la formation
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