De l’Expérience utilisateur UX UI au Webdesign

Objectifs

• Identifier votre cible (persona)
• Concevoir votre palette de couleurs
• Construire une navigation adaptée
• Créer des wireframes (selon certaines règles)
• Créer des appels à l’action clairs et pertinents
• Rendre votre designs cohérents

Programme de la formation

Test de positionnement

INTRODUCTION

• Comment fonctionne ce cours
• Liste des étapes d’un projet complet
• Exercice : Votre projet

DEFINITIONS : LES FONDAMENTAUX

• UX : Expérience Utilisateur
• UI : Interface Utilisateur
• Le faux-ami, le mot « design »
• QUIZ : Les fondamentaux

ETUDE DES CLIENTS

• L’importance de connaitre ses clients
• Communiquer avec ses visiteurs / prospects
• Ressources : découvrez Five second test
• Concevoir un avatar client (persona)
• QUIZ : Etude des clients

CRÉATION DU CONTENU

• Créer du contenu avec la méthode du content-first
• Quel est votre objectif ?
• Appel à l’action (CTA)

WIREFRAME

• C’est quoi les Wireframes ?
• Règle 1 : Noir & blanc
• Règle 2 : Placeholders
• Règle 3 : Cohérence
• QUIZ : Wireframes

HIÉRARCHIE

• La taille des éléments
• Épaisseur du texte
• Les couleurs et les fonds
• Les Labels
• Sémantique des actions

NAVIGATION

• Construire une bonne navigation
• Ressources : Exemple de navigation avec FIVERR
• Structure globale du site
• UX : la navigation sur mobile

PRINCIPES DE CONCEPTION

• Les interactions
• Les interactions
• Principes de proximité
• L’iconographie

LES COULEURS

• Choisir ses couleurs

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 fichier zip : Projet+Kesako+(wireframe)

MISE EN PRATIQUE : UI (Interface utilisateur)

• Design de la landing page
• Design de la page de connexion
• Checklist : est-ce qu’il y a des erreurs ?
• Ajout de détails
• Ressources fichier zip : Source Projet Kesako (complet)

Evaluation Finale

Modalités d’évaluation des acquis

Evaluation Finale

Public concerné

Tout public

Prérequis

Aucune