BES Webdeveloper

Approche UI/UX design

Présentation du cours
Approche UI - Design

1) Le concept UX / UI

2) UI - Les images

2023 / 2024 Approche UI / UX

Approche UI - Design

2) Les images

a) Les images matricielles Vs Les images vectorielles

- Le choix et la qualité des images en conception graphique et sur votre site

internet a un rôle primordial sur votre site

- C’est la première chose que l’oeil humain repère en arrivant sur une page
internet

- Il existe plusieurs formats destinés aux images mais tous ne conviennent pas
pour le web

·
Approche UI - Design

2) Les images

a) Les images matricielles Vs les images vectorielles

Les images matricielles sont composées de petits éléments appelés pixels. Chaque
pixel contient une couleur spécifique. Lorsqu’on étire une image matricielle, les pixels
s’agrandissent pour combler le nouvel espace qu’il leur est demandé. Forcément, la
qualité de l’image diminue

Les images vectorielles sont basées sur des formules mathématiques qui décrivent les
formes géométriques, comme les lignes, les courbes et les points. Elles peuvent être
redimensionnées à n'importe quelle taille sans perte de qualité, car les formules sont
simplement recalculées pour s'adapter à la nouvelle taille.

2023 / 2024 Approche UI / UX

Approche UI - Design

2) Les images Les images matricielles Les images vectorielles

Jpeg: Le SVG est le format “leader” et le
+ : lu par quasiment tout les plus répandu.
lecteurs images / très léger

- : compression avec perte à

chaque enregistrement

Png:
+ : o jusqu'à 16 millions pour le
png-24, par exemple. Il permet
également une gestion de la
transparence. Il est donc
généralement utilisé pour mettre
en valeur des logos ou des images

- : son poids, qui le rend long à

télécharger. Pour exemple, il est
parfois au moins 7 fois plus lourd
qu'un fichier .jpeg

gif, bmp, etc ai (adobe illustrator), eps, pdf, etc.

Approche UI - Design

2) Les images

b) Les images stock

Evitez SI possible les photos stock, celles qui semblent non naturelles, toutes droite
sortie d'un studio photo. Elles risquent de compromettre votre contenu car elles ne
reflètent pas la réalité. Le client ne peut s'identifier à elles. De plus elles sont
fréquemment utilisées par les designers dans leurs projets et apparaissent souvent sur le
web.

https://unsplash.com (plus réaliste que les autres et des thèmes sont proposés par des photographes indépendants)​

https://www.pexels.com/fr-fr (photos et vidéos de très hautes qualités mais peu naturelles)​

https://pixabay.com (photos gratuites et payantes plus réalistes et moins fréquentes sur le web)

·
Approche UI - Design

2) Les images

c) La technique de l'overlay

Il s’agit de superposer une image de type calque sur une image figurative pour en faire
ressortir un texte ou un effet de filtre.
Approche UI - Design

2) Les images

c) La technique de l'overlay

Tips:

Dans la majorité des cas, l’overlay aura un meilleur rendu avec une couleur de calque noire
ou blanche. N’essayez pas de faire un overlay avec la couleur principal de votre site internet
ou de votre image, sous peine d’avoir un effet “couleur délavée”
Approche UI - Design

2) Les images
Approche UI - Design

2) Les images
Approche UI - Design

2) Les images
Approche UI - Design

2) Les images

d) Le cropping

Le "cropping" est une technique consistante à adapter la taille et le sujet de la photo en

utilisant un recadrage. Inutile d'utiliser systématiquement une illustration dans son
format d'origine, vous devez choisir l'essentiel ou un détail pour qui attirera davantage
l'intérêt du visiteur.​

L'objectif est de créer une émotion, un intérêt avec la partie choisie de l'image.
Approche UI - Design

2) Les images

d) Le cropping
Approche UI - Design

2) Les images

d) Le cropping
Approche UI - Design

2) Les images

e) Le soft crop

Le soft crop est une technique de design qui utilise un bord flou pour transitionner de la
zone rognée à la zone environnante.

Cela crée un aspect plus doux et plus naturel qu'un rognage dur, qui utilise un bord net
Approche UI - Design

2) Les images

e) Le soft crop
Approche UI - Design

2) Les images

f) Unbox pictures

Action de retirer le sujet principal de son cadre afin de focaliser l’attention

Approche UI / UX
Approche UI - Design

2) Les images

Cropping, soft crop, unbox pictures, etc…

Grâce au programme que nous allons utiliser, la majorité des effets se fera très
simplement et directement dans le programme. Nous ne devons plus recourir à des
programmes de retouche d’images etc.
Approche UI - Design

2) Les images

g) Alternative intéressante - Les story set

· Remplace une image « impersonnelle »

Approche UI / UX
Approche UI - Design

2) Les images

g) Alternative intéressante - Les story set

· Remplace une image « impersonnelle »

· Totalement personnalisable dans les

couleurs

Approche UI / UX
Approche UI - Design

2) Les images

g) Alternative intéressante - Les story set

· Remplace une image « impersonnelle »

· Totalement personnalisable dans les

couleurs

· Personnalisable sur la composition

même de l’image
Approche UI - Design

2) Les images

g) Alternative intéressante - Les story set

· Remplace une image « impersonnelle »

· Totalement personnalisable dans les

couleurs

· Personnalisable sur la composition

même de l’image

· Très léger au chargement

· -> SVG taille personnalisable à souhait

Approche UI - Design

2) Les images

g) Alternative intéressante - Les storyset - https://storyset.com/

Approche UI / UX
Approche UI - Design

1) Le concept UX / UI

2) UI - Les images

3) UI - La Typographie

Aimeriez vous lire l'entièreté du cours de cette

manière ?
Approche UI - Design

3) la typographie

Tout comme le choix des images, la typographie est essentiel dans le

visuel d’un site internet. Si il est certain que ce n’est pas la typographie
qui donnera l’envie de rester sur le site au visiteur, il est également
certain qu’un mauvais choix de typographie, découragera un visiteur
de continuer la visite

Police, taille de celle-ci, interligne, “poids”. Tout cela déterminera le

confort visuel pour le visiteur

Tout comme le choix des images, la typographie est essentiel dans le visuel d’un site
internet. Si il est certain que ce n’est pas la typographie qui donnera l’envie de rester
sur le site au visiteur, il est également certain qu’un mauvais choix de typographie,
découragera un visiteur de continuer la visite

Police, taille de celle-ci, interligne, “poids”. Tout cela déterminera le confort visuel pour
le visiteur
Approche UI - Design

3) la typographie
voici 3 qualités essentielles d'un bon développeur web :
voici 3 qualités essentielles d'un bon développeur web :
1. Maîtrise des langages de programmation : Un bon
développeur web doit être compétent dans les langages 1. Maîtrise des langages de programmation : Un bon développeur web
de programmation clés tels que HTML, CSS et JavaScript, doit être compétent dans les langages de programmation clés tels
ainsi que dans d'autres langages backend comme PHP,
que HTML, CSS et JavaScript, ainsi que dans d'autres langages
Python, Ruby, Java, ou C#. Il doit également être capable
de travailler avec des frameworks et des bibliothèques backend comme PHP, Python, Ruby, Java, ou C#. Il doit également
populaires. être capable de travailler avec des frameworks et des bibliothèques
2. Résolution de problèmes : Un bon développeur web doit populaires.
être un résolveur de problèmes efficace. Il doit être capable
d'analyser les problèmes techniques, de les décomposer en 2. Résolution de problèmes : Un bon développeur web doit être un
éléments plus petits, et de trouver des solutions efficaces. résolveur de problèmes efficace. Il doit être capable d'analyser les
3. Compréhension de l'expérience utilisateur (UX) : Un bon problèmes techniques, de les décomposer en éléments plus petits, et
développeur web devrait avoir une bonne compréhension
de l'UX. Cela signifie qu'il devrait être capable de créer des
de trouver des solutions efficaces.
interfaces utilisateur conviviales, de concevoir des sites 3. Compréhension de l'expérience utilisateur (UX) : Un bon développeur
web réactifs et de garantir que les utilisateurs aient une web devrait avoir une bonne compréhension de l'UX. Cela signifie
expérience positive lorsqu'ils interagissent avec un site.
qu'il devrait être capable de créer des interfaces utilisateur
conviviales, de concevoir des sites web réactifs et de garantir que les
utilisateurs aient une expérience positive lorsqu'ils interagissent avec
un site.
Approche UI - Design

3) la typographie

a) Les familles

Il existe en fait 5 types de polices qu’on appelle « famille ».

1. Serif (Lora, Rokkit, Noto Serif, Crimson Text, Roboto Slab…)​

2. Sans-serif (Open Sans, Roboto, Lato, Montserrat, Raleway, Nunito, Noto Sans,
Barlow…)​
3. Cursive (Dancing Script, Montez, Rouge Script, Architects Daughter…)​
4. Monospace (Roboto Mono, Inconsolata, Space Mono, Courier Prim,…)​
5. Fantasy ou Display (Sniglet, Pompiere, Finger Paint, Balsamic Sans, Righteous…
Approche UI - Design

3) la typographie

a) Les familles

Retenez juste l’idée de celle ci

2023 / 2024
Approche UI - Design

3) la typographie

a) Les familles
Serif Sans serif
Approche UI - Design

3) la typographie

a) Les familles
Cursive Monotype
Approche UI - Design

3) la typographie

a) Les familles
Fantasy

Approche UI / UX
Approche UI - Design

3) la typographie

Tips:

● Adaptez votre type suivant le contexte du projet et le message à faire passer

Approche UI / UX
Approche UI - Design

3) la typographie

Tips:

● Adaptez votre type suivant le contexte du projet et le message à faire passer

● Deux types Faces (typo) par projet et non similaires. Prenez une typo pour les
grands titres, headlines, logo et une autre non ressemblante pour les longs textes
ou paragraphes.​

Approche UI / UX
Approche UI - Design

3) la typographie

Tips:

● Adaptez votre type suivant le contexte du projet et le message à faire passer

● Deux types Faces (typo) par projet et non similaires. Prenez une typo pour les
grands titres, headlines, logo et une autre non ressemblante pour les longs textes
ou paragraphes.​
● Privilégié du Sans serif pour les textes voir !! tout le site (éviter les autres familles
trop travaillées sauf projet particulier)

Approche UI / UX
Approche UI - Design

3) la typographie

Tips:

● Privilégiez une typo disposant de

nombreux styles (Light, Regular,
Black,…). Contenu de la présence de
nombreux textes avec des destinations
différentes (navbar, links, brand, menu,
button, footer…) plus vous aurez de
styles plus vous pourrez jouer avec la
hiérarchie visuelle et les effets avec une
seule typo.​ (roboto, etc donner des ex)

Approche UI / UX
Approche UI - Design

3) la typographie

Tips:

● Adaptez votre type suivant le contexte du projet et le message à faire passer

● Deux types Faces (typo) par projet et non similaires. Prenez une typo pour les
grands titres, headlines, logo et une autre non ressemblante pour les longs textes
ou paragraphes.​
● Privilégié du Sans serif pour les textes voir !! tout le site (éviter les autres familles
trop travaillées sauf projet particulier)
● Privilégiez une typo disposant de nombreux styles (Light, Regular, Black,…).
Contenu de la présence de nombreux textes avec des destinations différentes
(navbar, links, brand, menu, button, footer…) plus vous aurez de styles plus vous
pourrez jouer avec la hiérarchie visuelle et les effets avec une seule typo.​ (roboto, etc
donner des ex)
● Le rapport de contraste. Ce dernier se doit d’être d’au minimum de 4, 5: 1 entre l’en-
semble du texte et l’arrière-plan. Le plug-in Stark vous permettra de vérifier facile-
ment cette norme​
Approche UI / UX
Approche UI - Design

3) la typographie

Tips:

● N’ayez pas “peur” d’utiliser ce qui fonctionne…

Approche UI / UX
Approche UI - Design

3) la typographie

b) Les tailles des polices

● Il est important de garder une logique dans les tailles des polices

Approche UI / UX
Approche UI - Design

3) la typographie

b) Les tailles des polices

● Il est important de garder une logique dans les tailles des polices
● Partez d’une taille de paragraphe entre 16 et 24 px. Et montez de manière logique
par rapport à vos titres

Ceci est mon titre principal de mon site

Ceci est un premier sous-titre
Ceci est un second niveau de sous-titre
?
ceci est un paragraphe

Approche UI / UX
Approche UI - Design

3) la typographie

b) Les tailles des polices

● Il est important de garder une logique dans les tailles des polices
● Partez d’une taille de paragraphe entre 16 et 18 px. Et montez de manière logique
par rapport à vos titres

LES OUTILS DE CALCUL : https://typescale.com/

Approche UI / UX
Approche UI - Design

3) la typographie

b) Les tailles des polices

Approche UI / UX
Approche UI - Design

3) la typographie

c) Line height / letter spacing

Si vous gardez une logique dans la progression des tailles des polices, il est aussi
important de garder une logique dans l’entreligne. Ce réglage changera totalement la
perception de votre texte et son confort de lecture

La bonne pratique = taille de la police X 1.5

Il est plus difficile de délimiter une “règle” fixe pour le letter spacing (espace entre les
lettres). Cela dépendra de la taille du texte mais également de son “poids”, des
contrastes de couleurs, etc.

!!! A la différence de visu entre le Mobile et le Desktop

Approche UI / UX
Approche UI - Design

3) la typographie

c) Line height / letter spacing

Line height

Approche UI / UX
Approche UI - Design

3) la typographie

c) Line height / letter spacing

letter spacing

Approche UI / UX
Approche UI - Design

3) la typographie

d) Tips… Le nombre d’or

1.61803398875

Le nombre d'or est considéré

comme une formule universelle
de la beauté, il est censé
représenter une harmonie
divine

Approche UI / UX
Approche UI - Design

3) la typographie

d) Tips… Le nombre d’or

1.61803398875
paragraphe: 16px (line height 16 * 1.618)

H2 : 16px * 1.618 = 25.89px (line height 25.89*1.618)

H1 : 25.89px * 1.618 = 41.89px

(line height 41.89*1.618)
Approche UI / UX
Approche UI - Design

3) la typographie

d) Tips… Le nombre d’or

1.61803398875

Approche UI / UX
Approche UI - Design

3) la typographie

e) Les typo - Liens utiles

fonts.google.com: explorer les différentes fonctionnalités (pairing, vos propres exemple, destination, tris…)​

Fonts Ninja: extension Chrome proposant différentes informations sur les typo d'un website.​

WhatFont: similaire mais avec moins d'options

https://typescale.com/

Approche UI / UX
Approche UI - Design

3) les couleurs

Choisir les bonnes couleurs pour votre site web n’est pas toujours chose facile. Si les
textes, les témoignages et même les images véhiculent des idées, les couleurs
communiquent des émotions. Elles peuvent influencer la manière dont les utilisateurs
interprètent ce qu’ils voient et dont ils perçoivent telle ou telle marque, en général.
Choisir des couleurs inappropriées pour votre site aura pour conséquence de pousser
les internautes à aller sur une autre plateforme…​

En d’autres termes, la couleur de votre site web est le moyen le plus rapide et le plus
direct de faire bonne impression. Et il suffit de s’y connaître un peu en théorie des
couleurs pour faire les bons choix.​

Approche UI / UX
Approche UI - Design

4) les couleurs

Approche UI / UX
Approche UI - Design

4) les couleurs

Approche UI / UX
Approche UI - Design

4) les couleurs

a) Les éléments à prendre en compte

● Le secteur d’activité
● Le public cible
● les concurrents
● …

Approche UI / UX
Approche UI - Design

4) les couleurs

b) Symbolisme des couleurs

2023 / 2024 Approche UI / UX

Approche UI - Design

4) les couleurs

c) La palette de couleurs

● 2 à 4 couleurs (TRES grand max, avec un idéal de 2)

● Figma nous apportera un outil pratique pour extraire la palette de couleurs
Approche UI - Design

4) les couleurs

c) La palette de couleurs

● 2 à 4 couleurs (TRES grand max, avec un idéal de 2)

● Figma nous apportera un outil pratique pour extraire la palette de couleurs

Remarques:

● la couleur secondaire d’un site est de plus en plus

souvent utilisée pour les liens cliquables
Approche UI - Design

4) les couleurs

c) La palette de couleurs

● 2 à 4 couleurs (TRES grand max, avec un idéal de 2)

● Figma nous apportera un outil pratique pour extraire la palette de couleurs

Remarques:

● la couleur secondaire d’un site est de plus en plus

souvent utilisée pour les liens cliquables
● Les conventions

Approche UI / UX
Approche UI - Design

4) les couleurs

c) La palette de couleurs

● 2 à 4 couleurs (TRES grand max, avec un idéal de 2)

● Figma nous apportera un outil pratique pour extraire la palette de couleurs

Utilisation du noir en
background
Remarques:

● la couleur secondaire d’un site est de plus en plus

souvent utilisée pour les liens cliquables
● Les conventions Utilisation du noir en
● LE NOIR !!! background

Approche UI / UX
Approche UI - Design

4) les couleurs
Remarques: LE NOIR !!!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse dapibus fringilla pellentesque. Sed nec eros Suspendisse dapibus fringilla pellentesque. Sed nec eros
ante. Nam viverra metus quis scelerisque efficitur. Fusce ante. Nam viverra metus quis scelerisque efficitur. Fusce
sit amet elit at dui iaculis varius. Nullam accumsan ac sit amet elit at dui iaculis varius. Nullam accumsan ac
purus nec convallis. Sed quis malesuada nisl. Nunc purus nec convallis. Sed quis malesuada nisl. Nunc
dapibus, velit ut lobortis ullamcorper, nisi arcu dapibus, velit ut lobortis ullamcorper, nisi arcu
scelerisque magna, vel laoreet justo nulla sit amet nulla. scelerisque magna, vel laoreet justo nulla sit amet nulla.
Mauris imperdiet nunc ac enim dictum, ac fermentum Mauris imperdiet nunc ac enim dictum, ac fermentum
purus imperdiet. Mauris feugiat in metus vel iaculis. purus imperdiet. Mauris feugiat in metus vel iaculis.
Morbi pharetra risus in leo pretium, sit amet placerat nisl Morbi pharetra risus in leo pretium, sit amet placerat nisl
hendrerit. Pellentesque eu urna a odio tempor posuere hendrerit. Pellentesque eu urna a odio tempor posuere
eget ac ligula. Etiam venenatis leo et tellus mattis eget ac ligula. Etiam venenatis leo et tellus mattis
placerat. Phasellus lobortis tincidunt egestas. placerat. Phasellus lobortis tincidunt egestas.
Suspendisse eu magna iaculis, porta felis at, ornare Suspendisse eu magna iaculis, porta felis at, ornare
mauris. Aenean sem nulla, interdum vitae suscipit eu, mauris. Aenean sem nulla, interdum vitae suscipit eu,
aliquet in nisl. In tristique massa vel rutrum tristique. aliquet in nisl. In tristique massa vel rutrum tristique.
Approche UI - Design

4) les couleurs

d) Les couleurs - Liens utiles

Paletton.com: site permettant de créer sa propre palette de couleur avec associations, exemples et des "previews".​

Color Hunter: génère une palette de couleurs à partir d'une image de votre choix.​

Toolki.com: similaire au précédent.​

Coolors.co: Génère des palettes assorties avec la barre d'espace​

Colourco.de: Création de palettes monochromes​

Canva.com/colors: Outil complet valable aussi pour le templating

Approche UI / UX
Approche UI - Design

5) La hiérarchie visuelle

La hiérarchie visuelle ordonne l’information d’une page ou d’une application

dans l'ordre de leur importance.

Le principe fondamental est de jouer sur la taille des éléments

Approche UI / UX
Approche UI - Design

5) La hiérarchie visuelle

Approche UI / UX
Approche UI - Design

5) La hiérarchie visuelle

Approche UI / UX
Approche UI - Design

6) Proximity rule

Ce principe est basé sur le regroupement des contenus qui ont une relation entre eux.
La loi de proximité s’appuie sur la capacité de l’œil humain à regrouper
automatiquement les éléments qui sont physiquement proches les uns des autres.​

Vous vous en doutez, cette particularité est exploitable en graphisme comme en

webdesign pour mieux hiérarchiser et structurer l’information.​

Approche UI / UX
Approche UI - Design

6) Proximity rule

Approche UI / UX
Approche UI - Design

6) Proximity rule

Approche UI / UX
Approche UI - Design

7) Le Wireframe

Un wireframe est une représentation

visuelle SIMPLIFIÉE de l'interface utilisateur
(UI) d'une application, d'un site web ou d'un
produit numérique.

objectif définir l’organisation des

éléments et des formes sans
travailler l’aspect visuel

Approche UI / UX
Approche UI - Design

7) Le Wireframe

Un wireframe est une représentation

visuelle SIMPLIFIÉE de l'interface utilisateur
(UI) d'une application, d'un site web ou d'un
produit numérique.

objectif définir l’organisation des

éléments et des formes sans
travailler l’aspect visuel

Étape importante à la création d’un site ou

d’une application.

LE + Facilitera le travail dans Figma

Approche UI / UX
Approche UI - Design

7) Le Wireframe

Approche UI / UX
Approche UI - Design

7) Le Wireframe

Approche UI / UX
Approche UI - Design

7) Le Wireframe
Le zoning (difficultés d’inspiration, difficultés avec le client, etc.

Approche UI / UX
Approche UI - Design

8) Le Mood board
Un mood board (ou tableau d’inspiration) est un tableau d’inspiration visuel

Il regroupe des images, des couleurs, des polices de caractères et d'autres

éléments visuels pour donner une idée de l'apparence et de l'ambiance d'un
projet

Approche UI / UX
Approche UI - Design

8) Le Mood board
Selon votre projet, vos couleurs, les demandes du client, etc, vous allez vous
inspirer de ce qui est fait dans le domaine: tendances, concurrents, etc.

Ensuite, vous triez pour ne garder que les parties ou section qui pourraient
vous intéresser

Approche UI / UX
Approche UI - Design

8) Le Mood board
Selon votre projet, vos couleurs, les demandes du client, etc, vous allez vous
inspirer de ce qui est fait dans le domaine: tendances, concurrents, etc.

Ensuite, vous triez pour ne garder que les parties ou section qui pourraient
vous intéresser

Approche UI / UX
Approche UI - Design

8) Le Mood board
Selon votre projet, vos couleurs, les demandes du client, etc, vous allez vous
inspirer de ce qui est fait dans le domaine: tendances, concurrents, etc.

Ensuite, vous triez pour ne garder que les parties ou section qui pourraient
vous intéresser

Approche UI / UX
Approche UI - Design

9) La maquette
va plus loin que le wireframe

● intégration du design
● de couleurs
● d’illustrations provisoires
● Boutons, etc.

Approche UI / UX
Approche UI - Design

9) La maquette
va plus loin que le wireframe

● intégration du design
● de couleurs
● d’illustrations provisoires
● Boutons, etc.

Wireframe La maquette Site

Mood board

Approche UI / UX
Approche UI - Design

9) La maquette wireframe Maquette

Zoning

Approche UI / UX
Approche UI / UX - Design

Figma est un programme de conception graphique et de prototypage qui fonctionne en ligne

Approche UI / UX
Approche UI / UX - Design

Pourquoi ?
● Application gratuite (trois types de plans)​
● Rendu visuel pour le client
● Facilité pour présenter son projet
● Tout en un (wireframe, maquette et
prototypage)​
● Courbe d'apprentissage rapide​
● Grande communauté​
● Collaboratif​
● Plugins
● …

Va totalement simuler la visualisation ET l’utilisation d’un site ou d’une appli

Approche UI / UX