UX/UI Design 1
UX-UI Design
© MOUHAMADOU DER - 2025
WWW.DERDESIGNSTUDIO.COM
UX/UI Design 2
UX De s ig n
USER EXPERIENCE DESIGN
© MOUHAMADOU DER - 2025
WWW.DERDESIGNSTUDIO.COM
UX/UI Design 3
CÕest une mŽthode de
conception centrŽe
sur lÕutilisateur et sur
le business
© OU
MO U HHAAM
MAADDOOUU DDE E
RR - 2 0 2 5
WWW.DERDESIGNSTUDIO.COM
UX/UI Design 4
DŽfinition
ÒLe UX dŽsigne la
qualitŽ de lÕexpŽrience
vŽcue par lÕutilisateur
dans toute situation
dÕinteractionÓ
Source: Isabilis
Donald Norman
© MOUHAMADOU DER - 2025
WWW.DERDESIGNSTUDIO.COM
UX/UI Design 5
USER
EXPERIENCE
DESIGN
© MOUHAMADOU DER - 2025
WWW.DERDESIGNSTUDIO.COM
UX/UI Design 6
USER
EXPERIENCE
DESIGN
© MOUHAMADOU DER - 2025
WWW.DERDESIGNSTUDIO.COM
UX/UI Design 7
© MOUHAMADOU DER - 2025
WWW.DERDESIGNSTUDIO.COM
UX/UI Design 8
UX
Le UX Design ne sÕapplique pas
uniquement sur les Žcrans !
© MOUHAMADOU DER - 2025
WWW.DERDESIGNSTUDIO.COM
UX/UI Design 9
© MOUHAMADOU DER - 2025
WWW.DERDESIGNSTUDIO.COM
UX/UI Design 10
Les bases du UX
Ø LÕempathie,
Ø LÕarchitecture des informations,
Ø La clartŽ,
Ø La constance
Ø LÕaffordance,
Ø LÕaccessibilitŽ,
© MOUHAMADOU DER - 2025
WWW.DERDESIGNSTUDIO.COM
UX/UI Design 11
Mouhamadou DER
o UX/UI Designer depuis 2015
o Intégrateur Web (HTML/CSS)
o Drupal Website builder
o Formateur
© MOUHAMADOU DER - 2025
WWW.DERDESIGNSTUDIO.COM
UX/UI Design 12
Comment
appliquer le ÒUXÓ
sur un projet ?
© MOUHAMADOU DER - 2025
WWW.DERDESIGNSTUDIO.COM
UX/UI Design 13
THE PROCESS
User research
Recherche utilisateur
© MOUHAMADOU DER - 2025
WWW.DERDESIGNSTUDIO.COM
UX/UI Design 14
THE PROCESS
Persona
Recherche utilisateur
© MOUHAMADOU DER - 2025
WWW.DERDESIGNSTUDIO.COM
UX/UI Design 15
THE PROCESS
User flow
Parcours utilisateur
© MOUHAMADOU DER - 2025
WWW.DERDESIGNSTUDIO.COM
UX/UI Design 16
THE PROCESS
Wireframes
Low fidelity
© MOUHAMADOU DER - 2025
WWW.DERDESIGNSTUDIO.COM
UX/UI Design 17
THE PROCESS
Wireframes
Hight fidelity
© MOUHAMADOU DER - 2025
WWW.DERDESIGNSTUDIO.COM
UX/UI Design 18
THE PROCESS
Maquette / Prototye
© MOUHAMADOU DER - 2025
WWW.DERDESIGNSTUDIO.COM
UX/UI Design 19
THE PROCESS
Tests utilisateurs
© MOUHAMADOU DER - 2025
WWW.DERDESIGNSTUDIO.COM
UX/UI Design 20
UI
USER
INTERFACE
DESIGN ?
© MOUHAMADOU DER - 2025
WWW.DERDESIGNSTUDIO.COM
U X / U I D e d'Interface
Conception sign Utilisateur | ESMT 2025 21
DŽfinition
LÕUI Design dŽsigne la conception de
lÕinterface utilisateur pour une
application, un logiciel ou tout
dispositif digital.
Source: Isabilis
Source: orientsoftware
© MOUHAMADOU DER - 2025
WWW.DERDESIGNSTUDIO.COM
UX/UI Design 22
Les bases du UI
Ø Couleurs
Ø Typographie
Ø Contrastes
Ø LisibilitŽ
Ø LÕergonomie
Ø Constance & CohŽrence
Ø EtcÉ
© MOUHAMADOU DER - 2025
WWW.DERDESIGNSTUDIO.COM
UX/UI Design 23
© MOUHAMADOU DER - 2025
WWW.DERDESIGNSTUDIO.COM
UX/UI Design 24
© MOUHAMADOU DER - 2025
WWW.DERDESIGNSTUDIO.COM
UX/UI Design 25
© MOUHAMADOU DER - 2025
WWW.DERDESIGNSTUDIO.COM
UX/UI Design 26
© MOUHAMADOU DER - 2025
WWW.DERDESIGNSTUDIO.COM
UX/UI Design 27
© MOUHAMADOU DER - 2025
WWW.DERDESIGNSTUDIO.COM
UX/UI Design 28
Design System ?
Un design system est un ensemble de composants et de
normes qui aident ˆ prŽserver la cohŽrence visuelle des
produits et des expŽriences
Figma Blog
Material Design | Android Apple | iOS Orange Microsoft
Site web Site web Site web Site web
© MOUHAMADOU DER - 2025
WWW.DERDESIGNSTUDIO.COM
UX/UI Design 29
Design Thinking ?
C9est une méthode ou un process de conception globale,
centré sur l9utilisateur (ou l9humain), en vue de réaliser des
services ou produits innovants
© MOUHAMADOU DER - 2025
WWW.DERDESIGNSTUDIO.COM
UX/UI Design 30
© MOUHAMADOU DER - 2025
WWW.DERDESIGNSTUDIO.COM
UX/UI Design 31
Question ?
© MOUHAMADOU DER - 2025
WWW.DERDESIGNSTUDIO.COM
UX/UI Design 32
Are you
ready ?
© MOUHAMADOU DER - 2025
WWW.DERDESIGNSTUDIO.COM
UX/UI Design 33
QuÕest que Figma ?
Ø Historique (Sketch, Adobe XD, Figma)
Ø Exporter,
Ø Partage,
https://www.figma.com/login
Ø Figma CommunautŽ
Ø Plugins
© MOUHAMADOU DER - 2025
WWW.DERDESIGNSTUDIO.COM
UX/UI Design 34
Travaux pratiques
Ø Frame, Ø Typographie, Ø Fold ?
Ø Auto layout, Ø Gestion des couleurs, Ø Header,
Ø Grille, Ø Boutons, Ø Jumbo / Hero,
Ø TP: Page de connexion Ø Champs de saisie, Ø TP
Ø Cartes,
Ø Menu de navigation,
Ø InsŽrer des images.
© MOUHAMADOU DER - 2025
WWW.DERDESIGNSTUDIO.COM
UX/UI Design 35
21 Laws of UX
CÕest une collection de bonnes pratiques qui
peuvent servir de rep•re aux designers dans la
conception dÕinterface utilisateurs.
https://lawsofux.com
© MOUHAMADOU DER - 2025
WWW.DERDESIGNSTUDIO.COM
UX/UI Design 36
Loi de ProximitŽ
Les objets qui sont proches les uns des autres ont
tendance ˆ •tre percus comme des groupes.
https://lawsofux.com
© MOUHAMADOU DER - 2025
WWW.DERDESIGNSTUDIO.COM
UX/UI Design 37
Effet d'utilisabilitŽ
esthŽtique
Les utilisateurs per•oivent un design plaisant et
esthŽtique comme un design plus pratique et utilisable.
https://lawsofux.com
© MOUHAMADOU DER - 2025
WWW.DERDESIGNSTUDIO.COM
UX/UI Design 38
Effet de position
Les utilisateurs ont tendance ˆ mieux se souvenir
du premier et du dernier ŽlŽment dÕune sŽrie.
https://lawsofux.com
© MOUHAMADOU DER - 2025
WWW.DERDESIGNSTUDIO.COM
UX/UI Design 39
Effet Von
Restorff
LÕeffet Von Restorff, Žgalement connu sous le nom
dÕeffet dÕisolement, prŽdit que lorsque plusieurs
objets similaires sont prŽsents, celui qui diff•re des
autres est le plus susceptible dÕ•tre mŽmorisŽ.
https://lawsofux.com
© MOUHAMADOU DER - 2025
WWW.DERDESIGNSTUDIO.COM
UX/UI Design 40
Loi de Fitts
Le temps nŽcessaire pour atteindre une cible est
dŽpendant de la distance et de la taille de cette cible.
https://lawsofux.com
© MOUHAMADOU DER - 2025
WWW.DERDESIGNSTUDIO.COM
UX/UI Design 41
Loi de Jakob
Les utilisateurs passent la plupart de leur temps
sur dÕautres sites. Cela signifie quÕils prŽf•rent que
votre site fonctionne de la m•me mani•re que tous
les autres sites quÕils connaissent dŽjˆ.
https://lawsofux.com
© MOUHAMADOU DER - 2025
WWW.DERDESIGNSTUDIO.COM
UX/UI Design 42
Loi de Miller
Une personne moyenne ne peut conserver que 7 (plus
ou moins 2) ŽlŽments dans sa mŽmoire de travail.
https://lawsofux.com
© MOUHAMADOU DER - 2025
WWW.DERDESIGNSTUDIO.COM
UX/UI Design 43
Seuil de Doherty
La productivitŽ explose lorsque lÕutilisateur et la
machine interagissent ˆ une vitesse suffisante (<
400 ms) pour quÕaucun nÕattende lÕautre.
https://lawsofux.com
© MOUHAMADOU DER - 2025
WWW.DERDESIGNSTUDIO.COM
UX/UI Design 44
ƒtude de cas
© MOUHAMADOU DER - 2025
WWW.DERDESIGNSTUDIO.COM
UX/UI Design 45
Ressources
1. Chaines Youtube et Formations
1. Photos HD Libre
1. https://www.youtube.com/watch?v=u3LsYgi_ORc&list=PL_jeJmB
1. https://www.pexels.com
CVJMvyTKoLOURP3rA4O-7zh2-E
2. https://unsplash.com
2. JessUI Design https://www.youtube.com/@JessUIdesign
3. https://www.shopify.com/stock-photos
3. BastiUI https://www.youtube.com/@BastiUi
2. Ic™nes
2. Site d9inspiration
1. https://hugeicons.com/
1. https://dribbble.com/
2. https://icones.js.org/
2. https://mobbin.design
3. Colors
3. https://www.behance.net/
1. https://colorhunt.co
4. Figma Community https://www.figma.com/community
4. https://tinypng.com/
3. https://www.figcomponents.com/
4. GŽnŽrer faux text: https://hipsum.co/
5. Design System https://www.youtube.com/watch?v=-
5h05poX9CA&list=PLg3PPWk_HxdYoSs-vGEyNyVWwYv0rg-zm
© MOUHAMADOU DER - 2025
WWW.DERDESIGNSTUDIO.COM
UX/UI Design 46
Contacts
+221 76 933 22 48
[email protected]
@derkhadim
© MOUHAMADOU DER - 2025
WWW.DERDESIGNSTUDIO.COM
