Introduction au

design UI/UX

Par Hidekela
 Introduction
« Bienvenue dans le monde captivant du design UI/UX, où la créativité rencontre la
technologie pour façonner des expériences numériques incroyables. Ce petit livre est
là pour te guider à travers les bases passionnantes de la conception d'interfaces et
d'expériences utilisateur. » - chatGPT

Ecrit par Hidekela, sous licence CC-BY-NC-SA 3.0, destiné au groupe gagnant sur le
jeu User Inyerface en tant que récompense pendant l’atelier de formation en
développement Web chez Neurone Kids (04/08/23). Le groupe est constitué de
Sarobidy, Nicka et Larissa.

Le contenu de ce livre est une version rédigée et plus détaillée des notes prises
pendant l’atelier de partage sur l’UI/UX design. Ce n’est pas un tutoriel complet mais
une ressource intéressante pour débuter dans l’UI/UX.

L’atelier a été présenté par Sarobidy Ramiandrisoa Ratsivalaka et s’est déroulé le

mois de Juillet 2023 chez Ibonia.

« PS : J’ai fait appelle à chatGPT pour rédiger l’introduction et la conclusion xD.

Bonne lecture ! ;) » - Hidekela

« Le design UI/UX, c'est comme créer une chorégraphie entre les êtres humains et
les technologies. Comment les utilisateurs interagissent-ils avec les produits
numériques ? Comment pouvons-nous les aider à accomplir leurs tâches avec
facilité et plaisir ? Comment pouvons-nous rendre ces produits visuellement
attrayants et esthétiquement plaisants ? Ces questions seront au cœur de notre
voyage.

À travers les différentes sections de ce livre, nous allons explorer les concepts de
l'UX design (conception de l'expérience utilisateur) et de l’UI design (conception
d'interface utilisateur). Nous plongerons dans les objectifs de chaque domaine, les
processus de création, les principes de design essentiels, les outils utilisés par les
professionnels, et bien plus encore.

Si tu es curieux, créatif et prêt à plonger dans l'apprentissage du design UI/UX, alors

tourne la page et commençons cette aventure passionnante ensemble. Que ce livre
soit ton guide pour explorer les merveilles du design numérique et pour développer
des compétences qui te serviront dans le monde en constante évolution de la
technologie et de la créativité. » - chatGPT
I - Définitions

Le design, c'est la manière dont nous concevons et façonnons les produits, qu'ils
soient tangibles ou numériques. Dans le contexte du numérique, le design englobe
deux domaines importants : l'UX design et l'UI design.

UX design (User eXperience ou Expérience Utilisateur)

« C’est la conception de la relation entre l'utilisateur et le produit digital »

L'UX design se concentre sur la création d'expériences positives et efficaces pour les
utilisateurs lorsqu'ils interagissent avec un produit numérique. Cela implique de
comprendre les besoins, les attentes et les comportements des utilisateurs afin de
créer des solutions qui répondent à leurs besoins de manière fluide et agréable.

UI design (User Interface ou Interface Utilisateur)

« C’est la conception de l'interface entre l'utilisateur et le produit digital »

Le design d'interface utilisateur (UI) concerne la conception visuelle et interactive des

éléments avec lesquels les utilisateurs interagissent directement dans un produit
numérique. Cela englobe la disposition visuelle, les boutons, les icônes, les couleurs
et tout ce qui contribue à l'apparence esthétique du produit.
II - Objectifs de l’UI/UX design
C’est toujours mieux d’avoir du beau design pour gagner l’attention de vos cibles

Objectifs de l’UX design

Imaginez deux télécommandes. L'une possède une centaine de boutons, tous
différents et complexes à comprendre. L'autre a seulement quelques boutons
essentiels, comme le bouton d'allumage, de volume et de changement de chaîne.

Avec la première, c’est comme si vous vous retrouvez dans le cockpit d’un avion

Mais pour la seconde…

Les buts de l’UX design sont

 La simplicité d'utilisation : L'objectif principal de l'UX design est de rendre le

produit intuitif et facile à utiliser, minimisant ainsi les frictions et les difficultés
pour les utilisateurs.
 A résoudre un problème précis : L'UX design vise à résoudre des
problèmes spécifiques que les utilisateurs peuvent rencontrer lors de
l'utilisation d'un produit.
 Le centrage sur l'utilisateur : L'utilisateur est au cœur du processus de
conception. Les concepteurs UX se mettent à la place des utilisateurs pour
créer des expériences qui leur sont adaptées.
 L’organisation : L'organisation et la planification méthodique sont
essentielles pour créer une expérience utilisateur cohérente et fluide.

En gros c’est de mettre à l’aise l’utilisateur

Objectifs de l’UI design

Ici il n’y a pas à dire…

On peut déduire l’

 Apparence et esthétique : L'UI design se concentre sur l'apparence visuelle

du produit, en utilisant des éléments tels que les couleurs, les images et la
typographie pour créer un design visuellement attrayant.
 Esthétique et émotion : L'esthétique de l'interface peut avoir un impact sur
les émotions et les sentiments des utilisateurs, ce qui peut influencer leur
perception du produit.

Bref… c’est de rendre le truc joli et beau à voir

III - Réalisation de projet
Lors de la réalisation d'un projet numérique (comme un site web, un logiciel, …),
plusieurs rôles interviennent au sein d'une équipe Scrum :

 Designer UI : Responsable de la conception visuelle des éléments avec

lesquels les utilisateurs interagissent.
 Designer UX : Chargé de concevoir l'expérience utilisateur globale en
considérant les besoins, les motivations et les comportements des utilisateurs.
 Scrum master : Facilite le processus Scrum, garantissant que l'équipe suit
les bonnes pratiques et atteint ses objectifs.
 Développeur Front-end : Développe l'interface utilisateur (la partie visible de
l'application) en utilisant des langages de programmation web.
 Développeur Back-end : Développe la logique et les fonctionnalités côté
serveur (la partie technique et fonctionnelle).
 Tester : Effectue des tests pour s'assurer que le produit fonctionne
correctement et répond aux attentes.
 Product Owner : Représente les besoins des parties prenantes et priorise les
fonctionnalités à développer.

Un projet est découpé en périodes appelées "sprints", d'une durée typique de 1 à 2

semaines. Pendant chaque sprint, l'équipe travaille sur un ensemble de tâches
définies et planifiées au préalable.

IV - Différence entre UI et UX
L'UX design et le UI design sont deux domaines étroitement liés mais distincts.

L'UX design se concentre sur la manière dont les utilisateurs interagissent avec le
produit et comment leur expérience peut être améliorée. Il s'agit de créer une
expérience fluide, efficace et agréable pour l'utilisateur, en répondant à ses besoins
et à ses attentes.

L’UI design, quant à lui, est axé sur l'apparence visuelle de l'interface utilisateur. Il
vise à rendre l'interface esthétiquement plaisante en utilisant des éléments tels que
les couleurs, les formes et les typographies. L’UI design contribue à la première
impression que les utilisateurs ont du produit.
V - Psychologie des couleurs
Les couleurs jouent un rôle crucial dans la conception de produits numériques, car
elles peuvent influencer les émotions et les réactions des utilisateurs.

Par exemple, les couleurs comme le bleu peuvent évoquer la confiance et la

sérénité, tandis que le rouge peut susciter l'attention et l'excitation.

Choix de couleurs : règle des 60 - 30 - 10

La règle des 60-30-10 est une méthode couramment utilisée pour choisir et appliquer
les couleurs dans le design

 Couleur dominante (60%) : C'est la couleur prédominante dans le design,

souvent utilisée pour les arrière-plans.
 Couleur principale (30%) : Utilisée pour les éléments importants comme les
titres et les boutons.
 Accent (10%) : Couleur vive utilisée pour attirer l'attention sur des éléments
spécifiques et guider l'utilisateur.

Ces proportions aident à maintenir une harmonie visuelle dans le design.

Un des petits secrets de Facebook est révélé : pourquoi les gens restent sur
Facebook pendant des heures ? (à part ses contenus bien évidemment, voici les
explications du coté design)

D’abord, la couleur dominante est le noir (ou blanc en mode clair). Ensuite le bleu,
qui est aussi la couleur du logo, et généralement celle des boutons. Enfin, un peu de
rouge pour vous avertir qu’il y a un message par exemple.

VI - Principes du design (principe CRAP)

CRAP est un acronyme qui représente les principes fondamentaux du design
minimaliste :

 Contraste : Utilisé pour mettre en évidence des éléments importants en les

distinguant du reste. Par exemple, utiliser une couleur vive pour un bouton
d'appel à l'action.
 Répétition : Utilisation cohérente d'éléments de design similaires à travers
l'interface pour créer une expérience visuelle cohérente.
 Alignement : Veiller à ce que les éléments soient correctement alignés pour
une présentation nette et professionnelle.
 Proximité : Regrouper des éléments liés pour améliorer la compréhension et
la lisibilité de l'interface.

Ces principes contribuent à créer une interface équilibrée, lisible et agréable pour les
utilisateurs
VII - Étapes de conception
L’ensemble des étapes du design définit un sprint dans la méthodologie Scrum

UX design
Un sprint pour l’UX design est composé de

 Recherches : Comprendre les besoins des utilisateurs et les objectifs du

projet, souvent par le biais d'entretiens et d'analyses.
 Design : Créer des schémas d'interaction et des wireframes pour planifier
l'agencement et la fonctionnalité du produit.
 Développement : Transformation des concepts UX en prototypes
fonctionnels.
 Test : Évaluer le produit avec les utilisateurs, collecter des retours et apporter
des améliorations.

Après les tests, on revient aux recherches

Recherches Design

Test Développement

Une boucle correspond à un sprint

 UI design
Les étapes de l’UI design sont un peu similaires à celle de l’UX design

 Analyse : Examiner les éléments visuels existants tels que le logo et les
couleurs pour assurer la cohérence.
 Design System : Étendre et améliorer les éléments de design existants
fournis par l'UX designer, comme la typographie et les règles de couleur.
 Design : Créer l'apparence visuelle du produit en utilisant des images, des
couleurs et des éléments graphiques.
 Review : Passer en revue le design final pour s'assurer qu'il correspond aux
objectifs et aux besoins.

Analyse Design System

Review Design

VIII - Outils UI/UX

 Adobe Illustrator (Ai) : Utilisé pour créer des images vectorielles (non
pixélisées), idéal pour les logos et les illustrations.
 Adobe Photoshop (Ps) : Éditeur d'images puissant pour manipuler et créer
des graphiques.
 Adobe XD (Xd) : Plateforme pour créer des maquettes et des prototypes
interactifs.
 Figma : Outil de conception collaborative pour créer des maquettes et
travailler en équipe.
 Sketch : Application de conception exclusive aux utilisateurs Mac pour créer
des maquettes.
 Axure : Outil pour créer des prototypes interactifs et des maquettes
fonctionnelles.
IX - Sources d'inspiration
Les sources d'inspiration pour le design incluent :

 Behance : Plateforme pour découvrir les créations de designers du monde

entier.
 Pinterest : Plateforme pour découvrir et épingler des idées visuelles et des
concepts de design.
 Dribbble : Communauté de designers partageant leurs travaux et idées.
 ThemeForest : Marketplace pour acheter des thèmes et des modèles de
conception.

Utilisez également des mots-clés spécifiques dans Google pour trouver des
exemples de design qui vous intéressent.

Par exemple : UI design bouton, UI design bannière, …

X - Livres conseillés
 "Le design pour les non-designers" : Un excellent point de départ pour
ceux qui n'ont pas d'expérience en design.
 "Laws of UX" : Explore les principes fondamentaux de l'UX design.

Conclusion
« En conclusion, l'UX et l’UI design sont des domaines essentiels pour créer des
produits numériques performants et esthétiquement plaisants. L'UX design se
concentre sur l'expérience utilisateur et la résolution de problèmes, tandis que l’UI
design vise à créer une interface visuellement attrayante. En utilisant des outils, des
principes de design et en s'inspirant de sources variées, vous pouvez développer vos
compétences en tant que designer UI/UX et créer des produits qui répondent aux
besoins et aux préférences des utilisateurs. » - chatGPT