Programme
Présentation et architecture
PRÉSENTATION DE L’UI DESIGN
- Définition
- Son rôle
- Les enjeux
- Les grandes tendances du Web
- L’expérience utilisateur
L’ARCHITECTURE
- Comprendre les devices et les checkpoints
- Composer à partir d’un wireframe
- Utiliser des grilles
- Penser en Responsive Design
- Organiser son PSD
CONSTRUCTION D’UN SITE ONE PAGE
- Header, navigation, contenu et footer
EXERCICE
- Recomposer et adapter un site en One page initialement conçu pour les desktops pour une déclinaison en application mobile.
Colorimétrie et polices
COLORIMÉTRIE
- Définition
- L’usage des couleurs
- Le cercle chromatique
- Les types de combinaisons
- Les contrastes
- Le langages des couleurs
- Adobe color CC et autres outils indispensables
POLICES
- Définition
- Différence entre Police, Font et Typographie
- Les grandes familles typographiques
- Bien choisir ses polices
- Règles typographiques
- Google fonts et autres outils indispensables
LOGOTYPE
- Comment créer un logo
EXERCICE
Création d’un logo à l’aide des Google fonts et d’Adobe Color CC.
Iconographie
- Définition
- Hiérarchie des composants visuels
- Les neurones miroirs – Jouer avec les connotations
- Jouer avec les connotations
EXERCICES
- Analyses d’images (connotations et dénotations)
- Trouvez le bon visuel pour le bon environnement
Réaliser un e-mailing
ANATOMIE D’UN E-MAILING
- Définition
- Contraintes techniques
- Architecturer efficacement son E-mailing
- Découverte de Mailchimp
EXERCICE
- Vous serez en charge de réaliser la maquette d’un emailing avec Adobe Photoshop et Mailchimp
Réaliser des bannières en GIF animés
- Définition d’une bannière
- Les formats standards
- Optimiser votre déclinaison
- Animer votre bannière sur Photoshop
- Bien exporter vos bannières
- Découverte de Google Webdesigner
EXERCICE
- Réalisation d’un jeu de 3 bannières
Maquetter une application
EXERCICE
- Réalisation d’une maquette d’application mobile de 3 pages à partir d’un prototype ou de wireframes
Mis à jour le 25 mars 2022
