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

Il est nécessaire pour suivre cette formation d’avoir une culture Web. Une connaissance en UX Design n’est pas obligatoire mais peut cependant demeurer très utile.

L’admission du candidat se fait sur la base :

• D’un questionnaire préalable dans lequel le candidat détaille ses compétences, ses acquis, ses formations et études et son objectif professionnel 
• D’un entretien (téléphonique ou face à face, selon les cas) avec le responsable des formations, de la pédagogie et de la coordination des programmes afin de valider l’admission et répondre aux questions du candidat

Formation présentielle et/ou distancielle durant laquelle seront alternés explications théoriques et exercices pratiques.

Un ordinateur Mac ou PC par personne équipé de la dernière version du logiciel. Support de cours fourni.

Evaluation en fin de parcours type QCM ou questions ouvertes. Exercices pratiques.

Graphiste ou toute personne souhaitant réaliser des maquettes pour le web et les mobiles. Webdesigner et intégrateur souhaitant maîtriser les étapes créatives de la conception graphique.

Nos formations sont accessibles aux personnes en situation de handicap. Les aspects, l’accessibilité et le type de handicap au regard des modalités d’accompagnement pédagogiques sont à évoquer impérativement au cours de l’entretien préalable à toute contractualisation afin de pouvoir orienter ou accompagner au mieux les personnes en situation de handicap.