UI Design

Maîtriser la méthodologie du design d’interface Web à travers ses différents aspects (Web, mobile, E-mailing et bannières) en vue de répondre à des problématiques clients réelles et courantes. Cette formation est complémentaire de la formation UX Figma.

Taux de satisfaction pour l'année 2024 : 4,45/5 ⭐

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