Programme

QU’EST CE QUE L’UX DESIGN?

PRÉSENTATION DE L’EXPÉRIENCE UTILISATEUR (UX)

  • Définition
  • Son 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

  • Le feedback
  • Affordance et mapping
  • Le guidage
  • La 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

ARCHITECTURE DE 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

DECOUVRIR 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: STRATEGIE ET DEFINITION 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 – PRESENTATION ET ARCHITECTURE

PRESENTATION

  • Définition
  • Son rôle
  • Les enjeux
  • Les grandes tendances du Web
  • L’expérience utilisateur

ARCHITECTURE

  • Comprendre les devices et les checkpoints
  • Composer à partir d’un wireframe
  • Utiliser des grilles
  • Penser en Responsive Design
  • Organiser son PSD

CONSTRUIRE UN SITE ONE PAGE

  • Header, navigation, contenu et footer

EXERCICE

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

COLORIMETRIE 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

EXERCICES

  • Analyse d’images (connotations et dénotations)
  • Trouver le bon visuel pour le bon environnement

REALISER UN E-MAILING

ANATOMIE D’UN E-MAILING

  • Définition
  • Contraintes techniques
  • Architecturer efficacement son E-mailing
  • Découverte de Mailchimp

EXERCICE

  • Réaliser la maquette d’un mailing sur Adobe Photoshop et Mailchimp.

REALISER DES BANNIERES EN GIF ANIME

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

MAQUETTER UNE APPLICATION

EXERCICE

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

Mis à jour le 7 avril 2020