De l'expérience utilisateur UX UI au Webdesign

Objectifs

• Identifier et comprendre votre cible client (persona).


• Concevoir une palette de couleurs efficace et harmonieuse.


• Créer des wireframes fonctionnels et intuitifs.


• Mettre en place une navigation web adaptée et user-friendly.


• Élaborer des appels à l'action clairs et attractifs.


• Produire des designs cohérents et professionnels.

Programme de la formation

Introduction

• Test de positionnement


• Présentation du cours et fonctionnement.


• Liste des étapes d'un projet complet.


• Exercice : Votre projet.


• Définitions : Les fondamentaux du Web Design et UX/UI


• UX : Expérience Utilisateur.


• UI : Interface Utilisateur.


• Les termes clés (ex. le mot "design").


• Quiz : Les fondamentaux.

Étude des clients

• L'importance de connaître ses clients.


• Communiquer efficacement avec visiteurs et prospects.


• Ressource : Introduction au Five Second Test.


• Concevoir un avatar client (persona).


• Quiz : Étude des clients.

Création de contenu

• La méthode content-first.


• Définir vos objectifs.


• Concevoir des appels à l'action (CTA).

Wireframes

• Définition : Qu'est-ce qu'un wireframe ?


• Les règles à respecter


• Règle 1 : Noir et blanc.


• Règle 2 : Placeholders.


• Règle 3 : Cohérence.


• Quiz : Wireframes.

Hiérarchie

• Taille et importance des éléments.


• Épaisseur et lisibilité du texte.


• Utilisation des couleurs et des fonds.


• Labels et sémantique des actions.

Navigation

• Construire une navigation efficace.


• Ressources : Exemple de navigation avec Fiverr.


• Organisation de la structure globale.


• UX pour la navigation mobile.

Principes de conception

• Les interactions utilisateur.


• Principes de proximité.


• Gestion de l'iconographie.

Les couleurs

• Choisir une palette de couleurs cohérente.


• Mise en pratique : Wireframe


• Présentation du projet.


• Création du wireframe de la landing page.


• Création du wireframe de la page de connexion.


• Ressources : Fichiers zip (wireframe Kesako).


• Mise en pratique : UI (Interface Utilisateur)


• Design de la landing page.


• Design de la page de connexion.


• Checklist : Vérification des erreurs.


• Ajout des détails.


• Ressources : Source Projet Kesako (complet).


• Finalisation


• Évaluation finale : Quiz global.

Validation et sanction

Attestation de formation

Type de formation

Non certifiante

Sortie

Sans niveau spécifique