Programme

J1: 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.

J2: colorimétrie et polices

COLORIMÉTRIE

  • Définition
  • L’usage des couleurs
  • Le cercle chromatique
  • Les types de combinaisons
  • Les contrastes
  • Le langages 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.

J3 : 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

J3: 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.

J4: 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.

J4/5 : Maquetter une application

EXERCICE

  • Réalisation d’une maquette d’application mobile de 3 pages à partir d’un prototype ou de wireframes.

 

Mis à jour le 7 avril 2020