Design Web : UX - UI

Objectifs

> Identifier les particularités de l'UX design et de l'UI design

> Acquérir les notions essentielles d'ergonomie et de prototypage

Programme de la formation

Introduction

• Définition : site Internet, Ergonomie, Navigation


• Présentation des standards et contraintes : HTML/CSS


• Contraintes, formats, couleurs et logiciels


• Périphériques de capture et d'affichage : modes colorimétrique / résolutions et exceptions


• Le cercle chromatique et les différentes représentations de la couleur.


• Les types d'images : Bitmap et Vectoriel


• Photoshop, Illustrator, Bridge et les objets dynamiques


• Présentation des principaux formats graphiques : PSD, EPS, PDF, JPEG, PNG et GIF.


• Compression et optimisation.


• Tendance du web actuel

L'UX design

• Qu'est-ce que l'UX Design ?


• Qu'est-ce qu'une expérience ?


• Fondements de l'UX Design


• Enjeux et valeur ajoutée de l'UX Design dans le monde digital


• La gestion de projet intégrant de l'UX Design (vs gestion de projet classique) : acteurs, plannings, budgets, livrables

Paramétrage et création du document de base

• Définition de la grille


• Mise en place d'un fond


• Création de la colonne de contenu


• Création de l'entête


• Création de la barre de menu


• Création du pied de page


• Mise en place du contenu & partenaires


• Choix des couleurs de la charte graphique en fonction d'éléments existants

Ergonomie – Les fondamentaux

• Fondements de l'ergonomie


• Définitions : utilité, utilisabilité, affordance, efficacité, efficience, etc.


• Bases du fonctionnement cognitif de l'être humain (vision, mémoire, cognition)


• Conception centrée utilisateur : bonnes pratiques et recommandations ergonomiques


• Critères ergonomiques pour la conception et l'évaluation de la qualité ergonomique

Création de design d'applications (wireframes) et prototypage avec Figma

• Comprendre l'interface du logiciel


• Comprendre la notion de calques


• Créer des formes (rectangles, ellipses, …)


• Utiliser l'outil Texte


• Exporter vos designs


• Utiliser la grille de répétition et le Pathfinder


• Rendre vos design Dynamiques

Validation et sanction

Attestation de formation

Type de formation

Non certifiante

Sortie

Sans niveau spécifique