webleads-tracker

Formation Ux-Ui design - Medialibs

Stratégie d'Ux-Ui design

Du design d'interface (UI design) aux méthodes de conception centrées utilisateur (User-centered design), vous apprenez les bonnes pratiques à appliquer pour vos sites et vos applications pour une meilleure ergonomie et une expérience de marque optimisée.

Détail de la formation

Niveau : Débutant à intermédiaire

Durée : 14 heures (2 jours)

Type : Formation collective
Formation exclusive

Profil : Webdesigners, chefs de projets, intégrateurs

Tarifs : Formation collective 998€ HT
Formation exclusive 1400€ HT


Demander des informations

 

 

target-icon Objectifs

 

  • Comprendre le design d'expérience utilisateur
  • Cerner les contraintes ergonomiques du web
  • Appréhender le processus UX, les méthodes et outils disponibles : agilité, wireframe, photoshop
  • Mettre en place les équipes et les workflows adaptés aux contraintes quotidiennes et structurelles
  • Apprivoiser les nouvelles tendances : design thinking, mobile first, responsive...
 
 

check-iconPré-requis

  • Avoir une expérience de gestion de projet digital
  • La connaissance des fondamentaux de Photoshop (principes de création graphique) est un plus

list icon blueProgramme

Partie 1: Le design d'expérience utilisateur

Le processus de l'UX (design d'expérience)

  • Le design, un concept mal compris
  • L'expérience, un processus psychologique
  • Les valeurs clés d'une expérience 
  • Faisabilité, esthétique et éthique
  • Les lois de l'ergonomie web : gestalt, fitts, 

Atelier : Retenir les clés du design d'expérience

La stratégie de l'expérience

  • Les différents acteurs d'un projet web
  • Les différentes typologies de projets web
  • La stratégie de plan de site : mindmeister, writeMaps
  • Les règles d'or d'un cahier des charges fonctionnel et technique
  • L'apport de valeur : MOSCOW
  • La phase de test, de recettage et de mise en production
  • Valorisation interne et externe du projet web

Atelier n°1 : Réaliser un mini cahier des charges

Atelier n°2 : Réaliser une arborescence de site

Les tendances en webdesign

  • Skeuomorphisme
  • Métro style
  • Flat Design
  • Material Design
  • Outils : UI kits, design pattern, dark pattern
  • Places de marché

Atelier : Choisir un design graphique

A la découverte de l'utilisateur

  • Les recherches primaires : interviews, check-list
  • Les journaux de bord : tri de cartes, observations
  • Les personas et parcours utilisateurs
  • Cartographie de l'expérience
  • La mémoire de l'expérience

Atelier n°1 : Réaliser des fiches personas

Atelier n°2 : Réaliser une cartographie d'expérience

La phase d'idéation

  • Apprendre à faire des croquis
  • Les techniques d'idéation
  • Formaliser les idées obtenues
  • Les livrables
  • Co-création et Lean UX

Atelier : Réaliser un croquis d'interface

La phase d'itération

  • Zonings et scénarios
  • Le prototypage papier
  • Schémas filaires des écrans
  • Les maquettes interactives
  • Les maquettes graphiques

Atelier : Apprendre à scénariser et dessiner

Partie 2 : Conception d'expérience utilisateur

La conception UI (design d'interface)

  • Les contraintes techniques liées au web
  • Les gestuelles pour le tactile
  • Optimisation de la lisibilité : typographie, caractères
  • Optimisation de la taille des éléments
  • L'approche "Mobile First"
  • Panorama des outils (sketchApp, UXPin, Adobe Muse)

Atelier : Réaliser un wireframe "Mobile"

Scénariser vos conversions

  • Ecrire sur le web dans les règles de l'art
  • Définir et scénariser vos conversions
  • Les bonnes pratiques du Call To Action (CTA)
  • Les bonnes pratiques des landing pages
  • Outils : scénario, landing pages

Atelier n°1 : Définir des actions de conversions

Atelier n°2 : Réaliser un wireframe de landing Page "Desktop"

Images & typographie pour le web

  • Les couleurs : RGB
  • Les formats d'images : gif, jpg, png, svg, webp
  • Notion de résolution d'image (écrans Rétina ou HD)
  • Optimisation et enregistrement pour le web
  • Les différents types de polices : web fonts
  • Les unités de mesures (px, em, rem et %)
  • Spécificités de la composition des textes sur le Web

Atelier n°1 : Optimiser les images pour le web

Atelier n°2 : Identifier les typographies d'un site

Webdesign dans Photoshop

  • Organisation de sa zone de travail
  • Création de multiples plans de travail (artboards)
  • Les règles et le système de grille
  • Utilisation de grilles prédéfinies
  • Objets dynamiques
  • Composition des calques
  • Outils : plugins photoshop

Atelier n°1 : Créer un artboard "desktop"

Atelier n°2 : Décliner un artboard de conception mobile

Tester l'interface

  • Connaitre les différents scénarios et méthodes
  • Eye-tracking
  • Gerilla testing
  • Remote testing
  • Lab testing
 
 

Information et inscription à la formation :
UI & UX Design