4.37 sur 5
4.37
210 Commentaires sur Udemy

UX & Web Design : les fondamentaux

Initiez-vous à l'expérience utilisateur (UX) et au Web Design pour créer des sites web mémorables !
Créer un web design (Avec un header, une page d'accueil et un footer)
Identifier votre cible client (persona)
Créer des appels à l'action (CTA)
Créer des Wireframes réussis
Hiérarchiser votre contenu
Construire une bonne navigation
Créer des designs cohérents
Créer une palette de couleurs

Bonjour,

Si vous souhaitez vous initier au Web Design et à l’UX Design et que vous ne savez jamais pas de quelle manière commencer votre projet, que vous voulez arrêter de perdre du temps sur des détails mais qu’il est important d’avoir un rendu de qualité, alors ce cours est fait pour vous !

Dans cette formation, nous allons aborder les bases de l’Expérience Utilisateur ainsi que des règles fondamentales du Web Design. Vous connaîtrez toutes les étapes à réaliser et vous saurez comment les franchir en un minimum de temps. Tout ceci, grâce à une mise en application concrète que nous réaliserons tout au long de ce cours.

 

À la fin de cette formation, vous serez capable de :

  • 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
  • et plus encore…

 

Ce cours a été spécialement conçu pour les professionnels avec 2 parties distinctes :

  • Partie théorique
  • Partie pratique

Il est recommandé de suivre la partie théorique puis la partie pratique. Vous pouvez sauter certains concepts (même si je conseille de tout voir).

 

Précisions :

La partie pratique n’utilise pas tous les concepts vus dans la théorie, mais ils sont cependant fortement recommandés !

Introduction

1
Comment suivre ce cours ?

Le cours a été créé avec 2 parties distinctes :

  • Partie théorique

  • Partie pratique

Je recommande de suivre la partie théorique puis la partie pratique. Vous pouvez sauter certains concepts (même si je conseille de tout voir).


Précisions :

La partie pratique n'utilise pas tous les concepts vus dans la théorie, mais c'est cependant fortement recommandé !

2
Liste des étapes d'un projet complet

Liste des étapes dans la réalisation d'un projet :

  1. Étude des clients (visiteurs/prospects)

  2. Wireframe : version "light"

  3. Wireframe : version "complète"

  4. Identité graphique

  5. Interface Utilisateur (UI)

  6. Présentation du projet (portfolio, Behance, ...)

3
Exercice : Votre projet

A vous de choisir le projet que vous décidez de réaliser !

Définitions : Les fondamentaux

1
UX : Expérience Utilisateur

"L'UX définit la facilité d'utilisation et de compréhension d'une interface"

2
UI : Interface Utilisateur

"L'UI définit l'apparence et l'esthétisme d'une interface"

3
Le faux-ami, le mot “design”

Attention à ne pas confondre design avec joli (esthétique) ! Design signifie "conception"

4
Quiz

Quizz récapitulatif de ce que vous avez appris

Étude des clients

1
Pourquoi est-ce que connaitre ses clients est-ce important ?

En connaissant votre cible, vous pourrez adapter votre contenu mais aussi l'UI (ex: une interface colorée et enfantine pour des jeunes enfants VS une interface plus "sérieuse" pour des professionnels)

2
Communiquer avec ses visiteurs/prospects

Communiquer directement avec vos clients/prospects permet de mieux et connaitre pour adapter votre discours.

Si vous créez un projet personnel, c'est une étape optionnelle.

3
Concevoir un avatar client (persona)

Le persona permet de représenter votre visiteur/prospect "idéal".

4
Quiz

Récapitulatif de ce que vous avez appris

Création du contenu

1
Créer du contenu avec la méthode du content-first

Cette méthodologie consiste à créer le contenu avant de faire le moindre design. On construit plus facilement des interfaces centrées sur un but précis

2
Quel est votre objectif ?

Pensez à définir un objectif dans vos interfaces. Il doit pouvoir être clairement identifiable.

3
Appel à l'action (CTA)

L'appel à l'action représente ce qui va inciter l'utilisateur à réaliser une tâche/action

Wireframe

1
C'est quoi les Wireframes ?

Les wireframes sont des maquettes fonctionnelles avec les aspects visuels principaux de votre design. Attention à ne pas les confondre avec les prototypes ou encore les mockups.

2
Règle 1 : Noir & blanc

La règle de base dans la création d'un wireframe : utiliser le noir et le blanc (ainsi que des nuances de gris)

3
Règle 2 : Placeholders

Les placeholders permettent de "simuler" une image ou une illustration que vous pourrez ajouter dans la création de votre UI (design de l'interface utilisateur)

Cette règle ne s'applique pas pour les icônes !

4
Règle 3 : Cohérence

La règle la plus importante pour les wireframes : rester cohérent ! Rester cohérent dans l'alignement, le positionnement, les couleurs utilisées, les polices d'écritures, etc...

5
Quiz

Hiérarchie

1
La taille des éléments

Créer de la hiérarchie dans son design permet d'identifier les éléments important ou non. C'est essentiel de savoir créer plusieurs "niveaux" de contenu.

2
Épaisseur du texte

Vous pouvez jouer sur l'épaisseur du texte pour créer de la hiérarchie SANS avoir à augmenter la taille de la police d'écriture

3
Les couleurs & fonds

Utilisez les bonnes nuances de couleurs pour mettre en avant votre contenu et optimiser la lisibilité des textes

4
Les labels

Attention à ne pas sur-utiliser les labels. Évitez-les au maximum si votre design le rend optionnel

5
Sémantique des actions

Les actions doivent avoir une importance différente chacune les unes des autres. C'est pourquoi on doit créer des niveaux hiérarchiques.

Navigation

1
Construire une bonne navigation

Les 3 concepts pour avoir une navigation réussie

2
Structure globale du site

Un site est composé de 3 parties :

  • Header

  • Body (contenu)

  • Footer

3
UX : la navigation sur mobile

Une navigation adaptée à chaque résolution est primordiale. On va retrouver les 2 moyens principaux pour rendre cela possible :

  • Menu burger

  • Tabbar

Principes de conception

1
Les interactions

Les interactions c'est ce qui permet d'avoir un retour pour l'utilisateur sur une action précise. Elles vont être principalement visuelles (avec les événements du type "hover", "clique", "swipe", ...).

N-B. : Il se peut que cette interaction soit une vibration sur téléphone par exemple

2
L'alignement

L'alignement est essentiel ! Il faut absolument rester cohérent en totalité dans son design

3
Principe de proximité

Le principe de proximité décrit le fait que des éléments qui sont visuellement proches, sont "groupées" (autrement dit, qu'elles sont ensemble).

Ce concept nous permet d'éviter de créer des containers inutiles (et qui alourdiraient nos interfaces).

4
L’iconographie

L'iconographie nous permet d'ajouter des icônes pour compléter et conceptualiser certains boutons, liens ou autres. Cela peut même constituer de vrais bouton à part entière sans texte (cf. Les tabbars sur applications mobiles).

Les couleurs

1
Choisir ses couleurs

Nous allons voir comment composer notre palette de couleurs en évitant les générateurs de couleurs en ligne !

Notre palette sera constituée de :

- gris (nuances)

- couleurs primaires

- couleurs secondaires (nuancées)

Mise en pratique : Wireframe

1
Présentation du projet
2
Création du wireframe de la landing page
3
Création du wireframe de la page de connexion
4
Envoyez votre wireframe

Mise en pratique : UI (Interface utilisateur)

1
Design de la landing page
2
Design de la page de connexion
3
Checklist : est-ce qu'il y a des erreurs ?
4
Ajout de détails
5
Envoyez votre design

Bonus

1
Mes autres formations
2
Le mot de la fin...

Le mot de la fin...

4.4
4.4 sur 5
Notes210

Détails des Notes

Étoiles 5
109
Étoiles 4
67
Étoiles 3
29
Étoiles 2
4
Étoiles 1
1
dc27c156cc85cc11450ed4b48241ed99
Garantie de remboursement de 30 jours

Inclut

3 heures de vidéo à la demande
Durée totale du cours 
Accès sur le mobile et la télévision
Certificat d'achèvement
Je déclare avoir pris connaissance des conditions générales d'utilisation de la plateforme Academia Raqmya (CGU) notamment en ce qui concerne la protection des données à caractère personnelles et la transférabilité des licences.