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

EXERCICE

Vous devrez recomposer 3 pages issues d’un site contenant 7 erreurs qui rendent l’expérience utilisateur très fâcheuse. De plus, vous serez en charge de repenser l’arborescence du site afin de mieux réorganiser les pages et améliorer le guidage.

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

EXERCICE

Une page Web souffre d’une affordance et d’un mapping très maladroit. Vous devrez repenser l’interface de manière très intuitive et la conception de manière à poser aucune difficulté à l’utilisateur lors de son passage.

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

EXERCICE

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

AXURE

COMMENT PROTOTYPER AVEC AXURE

  • Breakpoint
  • Les grilles
  • Présentation général
  • Panneau : L’arborescence
  • Panneau : Panneau central
  • Panneau : Les widgets
  • Panneau : Les masters
  • Panneau : Propriété des widgets
  • Interaction : Quicklink
  • Interaction : OnClick
  • Interaction : Les Cas
  • Interaction : AnchorLink
  • Exporter son prototype
  • Rollover / Rollout
  • Panneau dynamique
  • Éléments collants

EXERCICE

CONCEPTION DE 2 PAGES WEB EN RESPONSIVE DESIGN

EXERCICE : RÉDACTION DU BRIEF UX

  •  Rédaction
  • Interrogations
  • Éléments à fournir

EXERCICE : METTRE EN PRATIQUE LES ÉTAPES CLÉS

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

EXERCICE : FAIRE UN PROTOTYPE SUR AXURE

CONCEPTION D’UNE PETITE APPLICATION MOBILE

EXERCICE : RÉDACTION DU BRIEF UX

  • Rédaction
  • Interrogations
  • Éléments à fournir

EXERCICE : METTRE EN PRATIQUE LES ÉTAPES CLÉS

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

EXERCICE : FAIRE UN PROTOTYPE SUR AXURE

UI DESIGN – PRESENTATION ET ARCHITECTURE

  • 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.

COLORIMETRIE 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.

ICONOGRAPHIE

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

REALISER 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.

REALISER DES BANNIERES EN GIF ANIME

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.

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.