Programme

UX DESIGN (USER EXPERIENCE)

QU’EST CE QUE L’UX DESIGN?

Présentation de l’expérience utilisateur (UX)

  • Définition
  • Rôle
  • Petit historique

Comprendre le facteur humain

  • Le processeur
  • Extraire un schéma
  • Composition avec et sans proximité
  • La densité informelle
  • Hiérarchie des composants visuels dans une image
  • Les neurones miroirs
  • Les interférences
  • Les limitations cognitives
  • Capter l’attention du cerveau

COMPRENDRE l’UX DESIGN

Les principes de  conception

  • Feedback
  • Affordance et mapping
  • Guidage
  • Découverte progressive
  • Homogénéité et anticipation de l’erreur
  • La narration

Le design thinking

  • Définition
  • Les méthodes d’idéation

Exercice

Atelier d’idéation basé sur la refonte d’un site

ARCHITECTURER L ‘INFORMATION

  • L’arborescence
  • Croquis
  • Zoning
  • Wireframe
  • Storyboard
  • Les grilles
  • Les types d’interface
  • Sens de lecture
  • Zone de flottaison
  • Fil d’Ariane
  • Zoning de bloc
  • L’usage des textes et pictogrammes
  • Hiérarchie textuelle et SEO
  • Les formulaires

REALISER UN PROTOTYPE

Le prototype

  • Définition
  • Les 4 étapes
  • L’anticipation

Les bases du projet

  • La stratégie
  • Devices et checkpoints
  • Veille fonctionnelle
  • L’innovation
  • Les personas
  • La taxonomie
  • L’user flow
  • Le mockup
  • Le prototypage
  • Le design
  • Le maquettage / Test utilisateur

Exercice

Appliquer la méthodologie vue précédemment pour la homepage d’un site ecommerce. De la stratégie jusqu’au croquis.

REALISER UN PROTOTYPE AVEC ADOBE XD

Comment prototyper avec Adobe XD

  • Découverte de l’interface
  • Utiliser les plans de travail
  • Dessiner des formes
  • Plan de travail responsif
  • Comprendre les actifs
  • Comprendre les composants
  • Créer un prototype ou un wireframe
  • Animer son prototype

Exercice

Réaliser un prototype à partir du croquis ébauché

CONCEVOIR UNE APPLICATION

Exercice 1: Stratégie et définition des objectifs

  • Stratégie
  • Devices
  • Veilles fonctionnelles
  • Personas
  • Taxonomie
  • User flow

Exercice 2: Ebauche graphique de 3 pages (croquis)

Exercice 3: Prototypage sur Adobe XD au format mobile

UI DESIGN (USER INTERFACE)

STRUCTURE DE LA MAQUETTE

  • Qu’est-ce que le Design d’interface
  • Quel est le rôle du Designer d’interface
  • Pourquoi la qualité graphique doit être au rendez-vous
  • Les grandes tendances
  • Le Skeuomorphisme
  • Le Flat Design
  • Les devices et les checkpoints
  • Le responsive

TYPOGRAPHIE

  • Définition
  • Les différents formats
  • Différence entre la police et la fonte
  • Les 5 familles typographiques
  • Les polices à éviter
  • Les balises H
  • Jouer avec les formes et les familles
  • L’usage des textes
  • Les sites indispensables

COLORIMÉTRIE

  • Définition
  • Le bon choix de couleurs
  • Le bon vocabulaire
  • La règle des 60-30-10
  • Adobe Color
  • Les différentes combinaisons
  • L’importance du contraste
  • L’exploitation des couleurs
  • Définition de toutes les couleurs

COMMENT CRÉER UN LOGO

  • Connaître sa cible
  • Veille graphique
  • Soyez unique, intemporel et équilibré
  • Comment tirer profit de la psychologie des formes
  • Utiliser les bonnes polices
  • La polysémie d’un logo
  • Savoir adapter son logo
  • Rédaction d’un brief
  • La planche tendance

ICONOGRAPHIE

  • Définition
  • Dénotation & connotation
  • Le réalisme
  • La géométrie
  • Les signes
  • Toucher au plus juste
  • Hiérarchie des composants visuels
  • Comment choisir la bonne image : Le visage
  • Comment choisir la bonne image : la qualité visuelle
  • Comment choisir la bonne image : Pixelisation
  • Comment choisir la bonne image : L’espace autour du sujet
  • Comment choisir la bonne image : La tendance
  • La règle de tiers
  • Le nombre d’or
  • Les bons outils
  • Où faire sa veille graphique

NEWSLETTER

  • Définition
  • Disparité d’interprétation
  • Anatomie d’une newsletter réussie
  • Les contraintes techniques
  • Comment concevoir des E-mailings avec Mailchimp

LES BANNIÈRES

  • Définition
  • Anatomie d’une bannière réussie
  • Les principaux formats
  • Les bannières animées
  • Comment concevoir des bannières animées avec Google Webdesigner

TRAVAUX PRATIQUES

  • Adaptation d’une landing page pour différents écrans
  • Création d’un logo et d’une charte graphique Web
  • Réalisation d’un E-mailing sur Mailchimp
  • Conception de bannières animées sur Google Webdesigner
  • Maquettage d’une application mobile et de sa campagne (bannière + newsletter)

Mis à jour le 1 décembre 2020