UI Design
UI DESIGN
Cette formation UI Design vous permet d’acquérir une excellente méthodologie sur la conception d’interface de site Web, tant dans la clarté de la navigation, l’optimisation des parcours que dans la qualité des contenus. Avec cette formation vous apprendrez à composer des mises en page efficaces et solides à travers l’application d’une excellente colorimétrie, d’un choix judicieux de polices et de l’attribution d’une iconographie parfaitement appropriée.
Présentiel / Distanciel
5 jours – 35 h
Max. 8 pers
Sessions à Paris
Prochaines sessionsPrix : 1 900 € HT (+20 % TVA)
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 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
Formation présentielle et/ou distancielle durant laquelle seront alternés explications théoriques et 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.
Test et/ou exercices pratiques.
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
Un ordinateur Mac ou PC par personne équipé de la dernière version du logiciel. Support de cours fourni.
Modèle de sous-menu (nested accordeon) à modifier. Utilisation : 1-activer la visibilité de ce modèle dans : section > avancé > responsive ; 2-personnaliser ce modèle ; 3-enregistrer comme modèle (ex de nom : sous-accordeon-gris-1); 4-désactiver la visibilité de ce modèle ; 5-copier-coller le shortcode généré (voir dans backoffice WordPress) dans une sous famille ci-dessous. Attention : un modèle unique par sous-menu !
Financement
À chaque situation, un ou plusieurs dispositifs peuvent financer votre formation
Pour aller plus loin
Présentiel / Distanciel
5 jours – 35 h
Max. 8 pers
Sessions à Paris
Prix : 1 900€ HT (+20 % TVA)
