UX & Web Design : les fondamentaux

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é !

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, ...)

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

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

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

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

Quizz récapitulatif de ce que vous avez appris

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)

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.

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

Récapitulatif de ce que vous avez appris

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

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

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

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.

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

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 !

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...

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.

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

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

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

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

Les 3 concepts pour avoir une navigation réussie

Un site est composé de 3 parties :

• Header

• Body (contenu)

• Footer

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

• Menu burger

• Tabbar

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

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

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).

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).

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)