Programme

Jour 1: Présentation et architecture

PRÉSENTATION 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’une page
  • Les outils indispensables

EXERCICE

  • Recomposition et adaptation de la homepage d’un site initialement conçu pour les desktops pour une déclinaison en application mobile.

Jour 2: 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

EXERCICE

  • Création d’un logo à l’aide des Google fonts et d’Adobe color CC.

Jour 3 : Iconographie

  • Définition
  • Hiérarchie des composants visuels
  • Les neurones miroirs – Jouer avec les connotations

Jour 3: 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 mailing en Responsive Design.

Jour 4: Réaliser des bannières en GIF animés

BANNIÈRES

  • Définition d’une bannière
  • Les formats standards
  • Optimiser votre déclinaison
  • Animer votre bannière sur Photoshop
  • Bien exporter vos bannières

EXERCICE

  • Réalisation d’un jeu de 3 bannières.

Jour 4/5 : Maquetter un site one page

PRÉPARATIFS

  • Rédaction du brief
  • Comment concevoir l’interface d’un site
  • Veille graphique
  • Utilisation des outils

EXERCICE

  • Réalisation de la maquette d’un site « One page » en parallax et en Responsive Design.