UI Design

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 langage 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