Stratégie d'Ux / Ui design web

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