SA

UI DESIGN
Janv. 2022

SONATEL ACADEMY
FORMATION EN USER
INTERFACE DESIGN
 SA

UI DESIGN
Janv. 2022

PLAN DE FORMATION
Présentation de l’UI Design

Définition

Son rôle

Comparaison avec l'UX Design

Contexte des approches user centric (UI, IxD, UX, CX,

BX et HX)

Quelques tendances Design

Le prototypage

Interfaces monochromes

Le skeuomorphisme

Le Flat Design

Le neumorphisme

1
 SA

UI DESIGN
Janv. 2022

PLAN DE FORMATION
Le prototypage

Les étapes de conception

Design d'interface

L'architecture de l'information

Les tendances du Design

FIGMA

Découverte de Figma

La philosophie de Figma

Les raccourcis utiles pour travailler plus efficacement

Les outils principaux

Comment collaborer

Exporter

Composants et KIT UI

2
 SA

UI DESIGN
Janv. 2022

Présentation de l’UI Design

L’UI Design s’est récemment imposé au coeur des tendances
webmarketing. Discipline, méthode : quel que soit son nom, il est
impossible de passer à côté. L’UI Design, ou User Interface Design, est
une des raisons du succès de nombreux services et produits en ligne :
des sites ou applications mobiles.

3
 SA

UI DESIGN
Janv. 2022

Définition
UI dans UI Design veut dire User interface, ou Interface Utilisateur en
français. L’interface est le point de contact entre un utilisateur et un
produit ou service, sur navigateur ou mobile.
L’UI Design englobe donc tout ce qui s’apparente au graphisme, à
l’aspect et à l’agencement. On y trouve :

Logo

Grille de mise en page

Typographie

Polices de caractères

Icônes

Couleurs

Disposition des boutons de

navigation

Charte graphique…

4
 SA

UI DESIGN

Janv. 2022

Rôle

L’UI Designer est chargé de l’amélioration de l’interface utilisateur.

- Rendre la navigation en ligne plus facile et intuitive

- Répondre à des codes de design tout en respectant l’identité de la

marque

- Mettre en valeur les éléments graphiques et textuels pour équilibrer

les éléments visuels en fonction des objectifs du site web travailler la

fluidité des animations, la visibilité d’éléments déterminants et la

justesse du design

UI & UX

5
 SA

UI DESIGN
Janv. 2022

Contexte des approches user centric

Contexte des approches user centric : connaitre ses utilsateurs
C’est une méthode qui consiste à faire l’analyse des ressentis des
internautes concernant un site web. Pour cela, il faut analyser leurs
différents comportements comme la méthode de navigation, les
téléchargements effectués… Comme il est impossible d’étudier
l’ensemble des utilisateurs, on prend un échantillon représentatif et on
effectue l’analyse sur celle-ci en vue de tirer des conclusions générales.

UI
Contexte des approches user centric : connaitre ses utilsateurs

Le terme UI fait référence à

l’interface par le biais de
laquelle l’utilisateur interagit :
être un site web, une
application mobile ou un
logiciel.

La mission de l’UI designer

consiste à créer une interface
agréable et pratique, facile à
prendre en main.

6
 SA

UI DESIGN
Janv. 2022

Contexte des approches user centric

IxD
Le design d’interaction est une discipline axée sur le dialogue
entre les utilisateurs et tout dispositif interactif : systèmes,
produits ou services. Le designer d’interaction travaille sur les
comportements des objets numériques pendant l’échange avec
l’utilisateur et l’environnement. L’objectif est d’optimiser
l’interaction pour améliorer l’esthétique, l’attrait et l’utilisabilité de
l’interface ou du produit.

Dans ses applications et sa définition, le design d’interaction (IxD)

s’ancre dans la multidisciplinarité.

7
 SA

UI DESIGN
Janv. 2022

Contexte des approches user centric

UX
L'UX est un ensemble de normes et de bonnes pratiques dont
l'objectif est double : concevoir un produit, mais aussi l'expérience
de son utilisation.

Objectifs: Rendre heureux l’utilisateu

travailler sur l'ergonomie du produit et de son usage : pratique,
accessible, utile, facile à utiliser et à comprendre, etc.
anticiper l'usage : chercher ce dont l'utilisateur a besoin, ce
qu'il attend, ce qu'il ne veut pas.

8
 SA

UI DESIGN
Janv. 2022

Contexte des approches user centric

UX : Lié à l’émotion
La dimension psychologique
est très importante car pour
que votre produit plaise, il
devra toucher au coeur du
besoin de l'utilisateur.

Les premiers professionnels

de l'expérience utilisateur qui
ont travaillé aux côtés des
designer
des psychologue
des ethnologue
des statisticien
des analystes

9
 SA

UI DESIGN
Janv. 2022

Contexte des approches user centric

CX
La conception de l'expérience client (CX) est le processus suivi par les
équipes de conception pour optimiser l'expérience client à tous les
points de contact avant, pendant et après la conversion. Ils s'appuient
sur des stratégies centrées sur le client pour ravir les clients à chaque
étape du parcours de conversion et entretenir de solides relations client-
marque.

10
 SA

UI DESIGN
Janv. 2022

Contexte des approches user centric

CX vs UX
L’expérience client et l’expérience utilisateur diffèrent dans leur définition
puisque l’une dépend de l’usage (UX) et l’autre du relationnel (CX). La
façon dont un vendeur accueille un client dans une boutique relève ainsi
de l’expérience client. Dans le digital, l’UX est plus fréquente et plus
importante avec l’augmentation des points de contact.

11
 SA

UI DESIGN
Janv. 2022

Contexte des approches user centric

CX vs UX
Une bonne expérience utilsateur (UX) peut être
La capacité à trouver rapidement des informations sur un site ou e-
commerce ;
La facilité à utiliser le service digital conçu par la marque ;
Les émotions positives ressenties en manipulant le produit proposé
par l’entreprise…

Une bonne expérience client (CX) peut être

L’interaction agréable avec la personne qui représente l’entreprise ;
La réaction adaptée du service client de la marque ;
Une satisfaction face aux prestations proposées par la marque…

12
 SA

UI DESIGN
Janv. 2022

Contexte des approches user centric

BX
L’expérience de marque (ou Brand Experience en anglais) désigne
l’ensemble des émotions et perceptions ressenties par les
consommateurs envers une marque définie. Elle regroupe tous les
contacts (publicité, service client, achat, etc.) entre l’enseigne et un
individu et toutes les perceptions (bouche à oreille, image, réputation)
qu’il peut avoir vis-à-vis de cette marque.

13
 SA

UI DESIGN
Janv. 2022

Contexte des approches user centric

UX - CX - BX

L’expérience utilisateur (UX) correspond le plus souvent à une étape

du parcours client, car le design UX s’est normalisé et est souvent
assimilé à la création d’interfaces numériques ou de produits du web.
Il est important de rappeler que l’UX, initialement, concerne votre
expérience et cela peut être extérieur au produit lui-même.

L’expérience client (CX) a une plus grande portée en intervenant sur

l’ensemble du parcours client et va se différencier en prenant en
compte le comportement humain qui, face à une machine n’est pas le
même que face à un autre humain. Le CX va donc créer un lien entre
l’expérience en magasin et celle numérisée afin d’homogénéiser au
mieux le parcours du client.

L’expérience de marque (BX), quant à elle, englobe l’ensemble et va

intervenir avant et après l’engagement d’un client. Sans la marque, il
n’y a pas d’engagement potentiel. Aussi, il est important de notifier
que le succès de l’un, ne garantit pas le succès de l’autre.

14
 SA

UI DESIGN
Janv. 2022

Contexte des approches user centric

UI - UX - CX - BX

15
 SA

UI DESIGN
Janv. 2022

Contexte des approches user centric

HX: l’Avenir
Il devient de moins en moins acceptable pour les marques de considérer
les gens comme des « clients » (des personnes qui n'existent que
lorsqu'ils sont clients), des « spectateurs » (des personnes qui n'existent
que lorsqu'ils regardent) et des « utilisateurs » (des personnes qui ne
existent quand ils utilisent quelque chose). Customer centricity, CX et UX
regardent les gens du point de vue de la marque. C'est comme si les
gens apparaissaient spontanément au fur et à mesure qu'ils
interagissaient avec la marque, puis disparaissaient par la suite.
HX centré sur les personne
comprendre les gen
de comprendre leur vi
déterminer où votre marque peut ajouter quelque chose pour
améliorer la vie des gens

16
 SA

UI DESIGN
Janv. 2022

Contexte des approches user centric

HX:

17
 SA

UI DESIGN
Janv. 2022

Tendance Design
Interface monochromes
Vous n'avez besoin que d'une seule teinte pour créer une superbe
conception d'interface utilisateur tant que vous gardez ces quelques
conseils à l'esprit.

vous aveez une palette facile à utiliser qui se compose de :

Couleur de base
Variante de base plus légère
Variation de base plus foncée
Faible contraste neutre
"Noir" (neutre à contraste élevé pour le mode clair)
"Blanc" (neutre à contraste élevé pour le mode sombre)

18
 SA

UI DESIGN
Janv. 2022

Tendance Design
Skeuomorphisme
Skeumorphisme: skeuo (signifiant, entre autres, ornement, décoration) et
morphé (forme)

C’est une technique de design visant à imiter l’apparence d’un objet réel
lors de la conception d’un objet virtuel.

Effet tructuré

19
 SA

UI DESIGN
Janv. 2022

Tendance Design
Flat Design
Le Flat Design ou « design plat » comme son nom l’indique repose sur un
style de forme bidimensionnel typiquement plat. Aucun effet n’est donc
ajouté.

20
 SA

UI DESIGN
Janv. 2022

Tendance Design
Neumorphisme

Une des pistes d’évolution suivie par certains serait donc le

Neumorphism, qui fait la part belle à cette fausse 3D.

C’est un technique design de conception d'interface utilisateur de

skeuomorphisme (technique visant à imiter l’apparence d’un objet réel
lors de la conception d’un objet virtuel).

21
 Maquette & prototypage
Maquette
Son but est de permettre de se projeter et de tester aussi bien le fond (le
contenu) que la forme (le design). En ajoutant les bonnes couleurs et
les bonnes images, vous pourrez avoir un aperçu plus réaliste de votre
futur site ou application.

Prototypage
Un prototype d’une interface est une représentation et un modèle de
conception basse ou haute fidélité concernant un site web ou une
application. L'objectif d’un prototype est de représenter l’interface avec
son aspect graphique, son design, sa mise en page précise, ses
interactions principales, etc.

Avantage du prototype
- Il favorise la définition du périmètre fonctionnel de votre projet

- Il permet de présenter aux utilisateurs une vrai interface sur laquelle ils vont pouvoir
réagir

- Il permet de se concentrer sur le fond (contenu, fonctionnalités…) sans être distrait

par la forme (couleur, image…)

- Il facilite l’évolution de l’interface proposée au départ, afin qu’elle corresponde le

mieux possible aux attentes et besoins des futurs utilisateurs

- Il permet de corriger ou valider des choix (techniques, fonctionnels) avant de

commencer le développement technique.

22
Comparaison de quelques outils de prototypage
Adoxe XD
Points forts

- Disponible pour macOS et Windows

- Tout ce dont vous avez besoin dans une seule application

Points faibles

- Toujours en version bêta (bien qu'agréablement développé en tant

qu'application de conception)

- Flux de travail du plug-in inexistant, vous êtes enfermé dans

l'écosystème Adobe
Sketch
Points forts

- Gestion des symboles et des librairies dynamiques

- Communauté de développement de plugin

- Riche en fonctionnalités

Points faibles

- Sketch est sur Mac OS uniquement

- Performances médiocres sur autre chose que sur les ordinateurs Mac
les plus performants

23
Comparaison de quelques outils de prototypage
Marvel App
Points forts

- Soutien important aux transitions pour un réalisme supplémentaire

- Intégre POP ​qui permet aux concepteurs de transformer leurs idées

stylo / papier en applications pour iPhone et Android.

Points faibles

- Web uniquement

- Pas de conception hors ligne

Figma
Points forts

- Les fonctionnalités de conception collaborative en temps réel sont

sans égal

- Complet, idéal pour les concepteurs du début à la fin

Points faibles

- Figma peut être lent avec une collaboration en temps réel

24
 Les étapes de conception

Zoning

C’est une méthode permettant de définir des grands blocs “bruts” de

contenu pour la structure de votre page. Les UX et UI designers font ce

schéma pour indiquer les éléments clés de chaque page, leur taille et

positionnement.

25
 Les étapes de conception

Wireframe ou maquette filaire

Il complète le zoning en entrant dans le détail de chaque bloc.

Ces pages ne sont pas fonctionnelles, elles ne nécessitent pas de ligne

de code, mais peuvent déjà être testées auprès d’une cible

d’utilisateurs. Cette méthode permet de produire des retours très riches

en apprentissages, avant même que votre site ou application soit en

ligne.

26
 Les étapes de conception

Maquette graphique ou Mockup

Une fois la structure validée, vous ajoutez animations, couleurs et

transitions pour faire de l’utilisation une véritable expérience.

27
 Les étapes de conception

Prototypage des interfaces

Pages fonctionnelles, cliquables et interactives qui peuvent servir à des

tests d’utilisabilité

28
Ateliers

29
 Sources
https://www.usabilis.com/ui-design/

https://www.creads.fr/blog/tendance-design-graphique/ui-design-quels-sont-
les-fondamentaux

https://www.figmafreebies.com/

https://openclassrooms.com/fr/courses/3013856-ux-design-decouvrez-les-f
ondamentaux/4088746-faites-la-difference-entre-ux-et-ui

https://www.jellyfish.com/fr-fr/news-insights/les-differences-entre-ux-et-ui-d
esign

https://www.uistore.design/types/figma/

https://www.clementine.jobs/fiches-metiers/metiers-marketing-publicite-digi
tale/metier-ux-designer-ui-designer/

https://www.oklic.fr/enjeux-du-uxui/

https://www.codeur.com/blog/tendances-web-design/

http://www.protostyle.com/protostyle/actualites/92-maquette-et-prototype-q
uelle-difference

https://www.sdlv.fr/blog/ui-design/wireframe-prototype-maquette-site

https://newflux.fr/2016/12/16/comparer-les-differents-outils-de-prototypage-
avec-prototypr/

https://www.ux-republic.com/comparatif-4-outils-prototypage-interactifs/

https://fr.slideshare.net/giannipolito/comparatif-des-outils-de-prototypage

https://blog.arcoptimizer.com/15-principaux-outils-de-prototypage-en-tete-a-t
ete

https://sabineduquesne.design/sketch-ou-adobe-xd/

https://www.mgmobile.fr/nos-actualites-meilleures-pratiques-1-1/pourquoi-f
aire-un-prototype-avant-de-developper-un-site-web-ou-une-application-mobile
-77
 Ressources

Pour avoir de l’inspiration

behance.net

dribbble.com

uplabs.com

awwwards.com

Pour avoir des images gratuites

pixabay.com

pexels.com

unsplash.com

stocksnap.io

reshot.com

Trouver les combinaisons de couleurs idéales

color.adobe.com

paletton.com

webdesignrankings.com

flatuicolors.com

coolors.co