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

22/05/2023 au 26/05/2023
26/06/2023 au 30/06/2023
24/07/2023 au 28/07/2023
09/10/2023 au 13/10/2023
20/11/2023 au 24/11/2023

Prix : 1 900 € HT (+20 % TVA)

Mise à jour le 6 janvier 2023 Télécharger

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 !

Cette formation
vous intéresse ?

Formation
en intra
et sur-mesure

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

22/05/2023 au 26/05/2023
26/06/2023 au 30/06/2023
24/07/2023 au 28/07/2023
09/10/2023 au 13/10/2023
20/11/2023 au 24/11/2023

Prix : 1 900€ HT (+20 % TVA)

Mise à jour le 6 janvier 2023 Télécharger