Les fondamentaux UX et UI design

 Problématique
 Les site web dont vous vous occupez est compliqué à utiliser
 L’interface n’est pas attrayante , parfois même confuse
 Que vous passez trop de temps sur la partie interface
UX design

 UX design se réfère à l’étude des attentes et besoins de l’utilisateur pour la

création d’un site web et/ou d’une application mobile. Il s’agit donc de prendre en
compte le ressenti d’un utilisateur quand il navigue sur votre support digital.
L’objectif de l’UX design est d’améliorer le parcours de l’internaute pour le
rendre plus agréable et instinctif.
 Grâce à l’UX design, la navigation se veut plus fluide et optimale
UX design

 On peut résumer l’expérience utilisateur en 6 étapes :

 Un site facile à trouver : d’où l’importance d’un bon référencement (SEO)
 Un site accessible sur tous supports
 Un design attrayant : pensez au charte graphique !
 Une facilité d’utilisation
 Un site crédible : les utilisateurs doivent avant tout être rassurés
 Un site efficace et propre
UI Design

 UI design signifie User Interface, et en français interface utilisateur. L'UI design

est tout le travail réalisé sur les interfaces que l'utilisateur va parcourir. Cela
concerne tout l'aspect graphique et visuel d'une application ou d'un site internet.
 En UI design, on s'intéresse tout particulièrement aux :
 Logo
 Boutons
 Mise en forme des textes
 Choix des typographies
 Choix des couleurs
 Mises en forme des blocs
 Emplacements des images
UX et UI Design

 L'UX et l'UI design sont deux axes très différents mais extrêmement
complémentaires. Tandis que l'UX design va être axé sur toute la réflexion d'une
interface, l'UI va s'approprier la charte graphique et les recherche UX pour créer
l'apparence d'une interface.
 L’UX intervient en amont de l’UI et du développement même de l’application
UX et UI Design
 Dans le processus de création d’un projet Web, L’UX designer commence à travailler bien
avant le reste de l’équipe. 5 étapes doivent être respectées :
 Définition d’une stratégie : c’est là que débute la réflexion sur les utilisateurs, ce qu’ils
recherchent, pourquoi ils se rendent sur votre site ou votre application.
 Liste des besoins : et surtout définition de ce qu’il est possible de faire ou non.
 Définition de la structure : on prépare les plans et on essaie de se mettre à la place de
l’utilisateur.
 Création des premiers schémas : c’est ici que le dessin des wireframes intervient en esquisse.
 Création du visuel : c’est à ce moment-là que l’UI designer commence son travail pour
harmoniser les décisions prises par l’UX designer avec un côté plus technologique que son
partenaire.
 Bien que parfois confondus, la répartition des tâches entre UX designer et UI designer est
relativement nette. L’UI doit toutefois tenir compte de certains aspects de l’UX dans son travail
L’interface web avec UI Design

 L'interface doit être simple, claire et sans superflus

 Le design doit être cohérent sur tous les écrans et cohérent avec la marque pour
que l'utilisateur ne soit pas perdu en passant d'une page à une autre
 L'interface doit être responsive. Cela signifie qu'elle doit s'adapter correctement à
tous les écrans. Certains UI designer travaillent même le mobile avant de
travailler l'ordinateur, on appelle ça le "Mobile First".
 L'interface doit tenir compte des habitudes de l'utilisateur.
Pourquoi l’UX/UI sont-ils des éléments
essentiels pour votre site web ?
 Avec une expérience utilisateur optimale, vous aurez la meilleure interaction entre
votre site web et ses utilisateurs. En plus de cela, vous gagnerez leur confiance
ainsi que celles des clients potentiels.
 68% des utilisateurs quittent un site en raison d’une mauvaise expérience
utilisateur
 44% d’entre eux partageront avec des amis leur mauvaise expérience.
Charte graphique

 À la création d’une entreprise, il faut établir l’univers graphique de sa marque.

Cet univers sera ensuite repris dans la communication et tous les outils qu’ils
soient papier (cartes de visite, flyer), physique (vitrine, stands) ou encore virtuel
(site internet, réseaux sociaux).
 La charte graphique est un des documents fondateurs de la communication
d’une entreprise.
 La charte graphique est réalisée soit par :
 un(e) graphiste
 un(e) directeur.ice artistique
 un(e) webdesigner
Charte graphique

 On peut définit la charte graphique comme un document (souvent sous la forme

d’un document .pdf) qui regroupe les éléments de votre identité visuelle :
 logo et ses déclinaisons
 couleurs de l’entreprise
 typographies
 optionnel : d’autres informations sur votre marque et vos valeurs
 À partir de ce document, votre identité visuelle pourra alors être adaptée et utilisée
sur vos prochains éléments de communication (site internet, publicité, catalogue,
carte de visite).
Styles graphiques

 Un style graphique c'est la direction artistique que va prendre l'UI designer pour
réaliser ses interfaces. Ce style va définir l'apparence des traits, des boutons, des
ombres, des arrondis et bien d'autres choses !
 Pour choisir le style graphique, il faut, en amont étudier la charte graphique du
client pour reprendre le style déjà instauré. Et, s'il n'en a pas, il faut en trouver un !
Exemple de style graphique

 FLAT DESIGN
 Pour créer des formes simples, épurées, sans ombres. Le flat design va à l'essentiel
Exemple de style graphique

 NEOMORPHISME
 Permet un jeu d'ombre sur les
éléments. La couleur de l'élément et du
fond sont souvent les mêmes.
Exemple de style graphique

 LINE DESIGN
 Tout faire avec une seule ligne. C'est à
la fois simple et minimaliste et permet
de ne pas surcharger l'écran
Exemple de style graphique

 ISOMETRE
 Technique qui mélange la simplicité
du flat design et la profondeur de la 3D
selon une grille dépourvue de lignes de
convergences.
Exemple de style graphique

 SKEUOMORHISME
 Le skeuomorphisme, en design
digital, consiste à imiter l'apparence
d'un objet réel lors de la conception
d'un objet virtuel. Cette technique
permet à l'utilisateur de comprendre
l'action à effectuer face à l'UI