Listes, liens, arrière-plan CSS et

bordures : revue
Listes de style
 line-height Propriété : Cette propriété permet de créer un espacement
entre les lignes de texte. Les line-height valeurs acceptées incluent le
mot-clé normal , les nombres, les pourcentages et les unités de
longueur em .
 list-style-type Propriété : Cette propriété permet de spécifier le
marqueur d’un élément de liste. Les valeurs acceptables peuvent être un
cercle, un disque ou un chiffre décimal.
 list-style-position Propriété : Cette propriété permet de définir la
position du marqueur de liste. Seules deux valeurs sont acceptables :
« inside » et « outside ».
 list-style-image Propriété : Cette propriété permet d’utiliser une image
comme marqueur d’élément de liste. Un cas d’utilisation courant consiste à
utiliser la url fonction avec une valeur définie sur l’emplacement d’une
image valide.

Espacer les éléments de la liste à l'aide de margin

 En outre line-height , les marges peuvent également être utilisées en
CSS pour améliorer l'espacement et la lisibilité des éléments de liste.
 Les marges créent un espace autour de chaque li élément, permettant de
contrôler l'écart entre les éléments de la liste.
 margin-bottom Cette fonction permet de créer un espace sous chaque
élément de la liste. Par exemple, margin-bottom: 10px; elle créera un
espace de 10 pixels sous chaque élément.

Liens de style
 pseudo-class Il s'agit d'un mot-clé ajouté à un sélecteur qui permet de
sélectionner des éléments en fonction d'un état particulier. Les états
courants incluent les états « actif » :hover ,
« passif » :visited et :focus « actif ».
 :link pseudo-class Cette pseudo-classe est utilisée pour styliser les liens
qui n'ont pas été visités par l'utilisateur.
 :visited pseudo-class Cette pseudo-classe est utilisée pour styliser les
liens vers des sites déjà visités par l'utilisateur.
 :hover pseudo-class Cette pseudo-classe est utilisée pour styliser les
éléments sur lesquels l'utilisateur survole activement la surface.
 :focus pseudo-class Cette pseudo-classe permet de styliser un élément
lorsqu'il reçoit le focus. Par exemple, input les select éléments sur
lesquels on clique ou on touche la touche pour obtenir le focus.
 :active pseudo-class Cette pseudo-classe sert à styliser un élément
activé par l'utilisateur, par exemple lorsqu'il clique sur un bouton.

Travailler avec les arrière-plans et les bordures

 background-size Propriété : Cette propriété permet de définir la taille de
l’arrière-plan d’un élément. Parmi les valeurs courantes, on
trouve : cover l’image d’arrière-plan recouvre tout l’élément
ou contain s’adapte à l’intérieur de celui-ci.
 background-repeat Propriété : Cette propriété détermine la répétition des
images d’arrière-plan sur les axes horizontal et vertical. Par
défaut, background-repeat l’ repeat image se répète horizontalement et
verticalement. Vous pouvez également désactiver la répétition à l’aide de
cette no-repeat propriété.
 background-position Propriété : Cette propriété permet de spécifier la
position de l'image d'arrière-plan. Elle peut être définie sur une longueur, un
pourcentage ou des valeurs de mots clés
comme top , bottom , left , right , et center .
 background-attachment Propriété : Cette propriété permet de spécifier si
l’image d’arrière-plan doit défiler avec le contenu ou rester fixe. Les valeurs
principales sont : scroll `true` (par défaut), où l’image d’arrière-plan défile
avec le contenu, et ` fixed false`, où l’image d’arrière-plan reste à la même
position à l’écran.
 background-image Propriété : Cette propriété permet de définir l’image
d’arrière-plan d’un élément. Vous pouvez définir plusieurs images d’arrière-
plan simultanément et utiliser les fonctions `background-image`,
`background-image` url ou radial-gradient ` background linear-
gradient -image` comme valeurs.
 background Propriété : Il s’agit de la propriété abrégée permettant de
définir toutes les propriétés d’arrière-plan en une seule déclaration. Voici un
exemple de définition de l’image d’arrière-plan et de configuration pour
qu’elle ne se répète pas : background: no-repeat url("example-url-
goes-here");
 Un bon contraste entre les couleurs d'arrière-plan et de premier plan
est essentiel pour une bonne lisibilité du texte. Les Règles pour
l'accessibilité des contenus Web (WCAG) recommandent un rapport de
 contraste minimal de 4,5:1 pour un texte normal et de 3:1 pour un texte de
grande taille.

Frontières
 border-top Propriété : Cette propriété permet de définir le style de la
bordure supérieure d’un élément. border-top: 3px solid blue; Elle
définit une bordure bleue unie de 3 pixels de large sur le côté supérieur de
l’élément.
 border-right Propriété : Cette propriété permet de définir le style de la
bordure droite d’un élément. border-right: 2px solid red; Elle définit
une bordure rouge unie de 2 pixels de large sur le côté droit de l’élément.
 border-bottom Propriété : Cette propriété permet de définir le style de la
bordure inférieure d’un élément. border-bottom: 1px dashed green; Elle
définit une bordure verte pointillée d’un pixel de large sur le côté inférieur
de l’élément.
 border-left Propriété : Cette propriété permet de définir le style de la
bordure gauche d’un élément. border-left: 4px dotted orange; Elle
définit une bordure orange pointillée de 4 pixels de large sur le côté gauche
de l’élément.
 border Propriété : Il s’agit de la propriété abrégée permettant de définir la
largeur, le style et la couleur de la bordure d’un élément. border: 1px
solid black; Définit une bordure noire unie d’un pixel de large.
 border-radius Propriété : Cette propriété permet de créer des coins
arrondis pour la bordure d'un élément.
 border-style Propriété : Cette propriété permet de définir le style de la
bordure d’un élément. Les valeurs acceptées
incluent solid : , dashed , dotted , et double .

Dégradés
 linear-gradient() Fonction : Cette fonction CSS est utilisée pour créer
une transition entre plusieurs couleurs le long d'une ligne droite.
 radial-gradient() Fonction : Cette fonction CSS crée une image qui
rayonne à partir d'un point particulier, comme un cercle ou une ellipse, et
effectue une transition progressive entre plusieurs couleurs.

Que sont les cahiers des charges de

conception et comment les
développeurs les utilisent-ils ?
Lorsqu'il s'agit de concevoir de nouvelles fonctionnalités ou applications,
une première étape judicieuse consiste à élaborer un cahier des charges
de conception.

Un cahier des charges de conception est un document qui définit les

objectifs, les buts et les exigences d'un projet. Il sert de feuille de route au
processus de conception et garantit que le produit final réponde aux
besoins du client.

En général, le client rédige le cahier des charges, qui sert alors de

document de travail. Parfois, le designer peut en rédiger un et le consulter
ensuite avec le client pour s'assurer qu'il répond à ses besoins.

Quelques éléments clés doivent figurer dans un cahier des charges de

conception.

Le premier élément est la présentation générale du projet et de l'entreprise.

Cette présentation doit inclure les informations relatives à l'entreprise, sa
mission, ses valeurs, ses arguments de vente uniques et ses produits ou
services.

L'étape suivante consiste à documenter les buts et objectifs du projet. Cela

doit inclure sa finalité et les résultats escomptés.

Exemples d'objectifs : augmenter le trafic vers un site ou accroître le

nombre de visites mensuelles de pages de X %.

Un autre élément clé est le public cible. Le cahier des charges doit inclure
des informations sur les caractéristiques démographiques, les intérêts et
les besoins de ce public.

Vous devez également inclure des informations sur la concurrence et sur la

manière dont le projet se différenciera de celle-ci.

Un autre élément clé est le périmètre du projet. Celui-ci doit inclure les
livrables, le calendrier et le budget. Les livrables doivent comprendre la liste
de tous les éléments qui seront produits dans le cadre du projet, tels que
les maquettes et les conceptions finales.

Sans une définition claire du périmètre du projet, les choses peuvent vite
dégénérer et le budget peut être dépassé. Il est donc préférable de préciser
au maximum les livrables attendus et les délais.

L'un des aspects les plus complexes de la conception d'un projet réside
dans le respect des délais et du budget. Il est essentiel d'être réaliste quant
 aux résultats possibles compte tenu du budget et des délais impartis. Par
conséquent, un cahier des charges précisant ces contraintes est
indispensable.

Une fois tous ces détails discutés et consignés, le cahier des charges doit
être examiné et approuvé par toutes les parties prenantes avant le début
du projet. C’est alors seulement que les concepteurs peuvent commencer
leur travail.

Alors, quel est le rôle du développeur dans tout cela ? Le rôle du

développeur est de prendre les maquettes, de comprendre les exigences
du projet et de les transformer en un produit fonctionnel.

Cela implique d'écrire du code, de tester et de déboguer l'application afin

de s'assurer qu'elle répond aux exigences décrites dans le cahier des
charges.

Bien souvent, les développeurs travaillent en équipes où le travail est

réparti entre plusieurs développeurs.

Il y aura généralement aussi un chef de projet chargé de coordonner le

travail et de veiller à ce que le projet reste sur la bonne voie.

Ainsi, même si vous n'êtes pas impliqué dans la conception et le processus

de décision initial en tant que développeur, il reste important de
comprendre le cahier des charges et son impact sur votre travail.
Révision des principes fondamentaux
de la conception
Terminologie du design
 Mise en page : Il s’agit de la manière dont les éléments visuels sont
agencés sur une page ou un écran pour communiquer un message. Ces
éléments peuvent inclure du texte, des images et des espaces blancs.
 Alignement : Il s’agit de la manière dont les éléments sont positionnés les
uns par rapport aux autres. Un alignement correct contribue à un design
clair et organisé.
 Composition : Il s’agit de l’agencement des éléments pour créer un design
harmonieux. Elle détermine la manière dont les éléments tels que les
images, le texte et les formes interagissent et contribuent artistiquement au
design.
 Équilibre : Il s’agit de la répartition du poids visuel au sein d’une
composition. Les designers cherchent à créer un équilibre par des
agencements symétriques ou asymétriques.
 Échelle : Cela fait référence à la comparaison des dimensions ou de la
taille d'un élément à celles d'un autre.
 Hiérarchie : Elle établit l’ordre d’importance des éléments d’une
conception. Il s’agit de s’assurer que les informations les plus importantes
soient remarquées en premier.
 Contraste : Il s’agit du procédé qui consiste à créer des distinctions claires
entre les éléments. On peut y parvenir grâce à des variations de couleur,
de taille, de forme, de texture ou de toute autre caractéristique visuelle. Un
contraste marqué contribue également à améliorer la lisibilité.
 Espace blanc (espace négatif) : Il s’agit de l’espace vide dans un design.
C’est la zone qui entoure les éléments.
 Interface utilisateur (UI) : L'interface utilisateur comprend les éléments
visuels et interactifs que les utilisateurs peuvent voir sur leurs écrans, tels
que les icônes, les images, le texte, les menus, les liens et les boutons.
 UX (Expérience utilisateur) : L’UX concerne les sensations des
utilisateurs lorsqu’ils utilisent un produit ou un service. Une application
dotée d’une expérience utilisateur bien conçue est intuitive, facile à utiliser,
efficace, accessible et agréable.
 Cahier des charges : Ce document définit les objectifs, les buts et les
exigences d’un projet. Il sert de feuille de route au processus de conception
et garantit que le produit final réponde aux besoins du client.
 Conception vectorielle : Il s’agit de créer de l’art numérique en utilisant
des formules mathématiques pour définir les lignes, les formes et les
couleurs.
 Prototypage : Il s'agit du processus de création d'un modèle interactif d'un
produit ou d'une interface utilisateur.

Principes fondamentaux de la conception

d'interfaces utilisateur
 Un bon contraste entre les couleurs d'arrière-plan et de premier plan
est essentiel pour une bonne lisibilité du texte. Les Règles pour
l'accessibilité des contenus Web (WCAG) recommandent un rapport de
contraste minimal de 4,5:1 pour un texte normal et de 3:1 pour un texte de
grande taille.
 Une bonne hiérarchie visuelle en design : Une hiérarchie visuelle forte
peut fournir un chemin clair à suivre pour le regard, garantissant que les
informations que vous transmettez sont assimilées dans l'ordre que vous
souhaitez.
 Images adaptatives : Les images adaptatives s’ajustent à la taille de
l’écran sur lequel elles sont affichées. C’est important car cela garantit un
rendu optimal de vos images sur tous les appareils, des ordinateurs de
bureau aux téléphones mobiles.
 Amélioration progressive : Il s’agit d’une approche de conception qui
garantit que tous les utilisateurs, quel que soit leur navigateur ou leur
appareil, peuvent accéder au contenu et aux fonctionnalités essentiels
d’une application.
 Conception centrée sur l'utilisateur : Cette approche privilégie
l'utilisateur final, en tenant compte de ses besoins, de ses préférences et
de ses contraintes. L'objectif est de créer une page web intuitive, efficace et
agréable à utiliser.
 Recherche utilisateur : Il s’agit d’une étude systématique des personnes
qui utilisent votre produit. L’objectif est de mesurer leurs besoins, leurs
comportements et leurs difficultés.
 Entretiens de sortie : Il s’agit d’un questionnaire que vous pouvez
soumettre aux utilisateurs lorsqu’ils résilient leur compte. Il vous permet de
comprendre les raisons de ces départs et d’identifier les mesures à prendre
pour réduire le taux de désabonnement.
 Tests utilisateurs : Il s’agit de la pratique consistant à recueillir des
données auprès des utilisateurs lorsqu’ils interagissent avec votre
application.
 Tests A/B : Il s’agit de déployer une nouvelle fonctionnalité auprès d’un
sous-ensemble aléatoire de vos utilisateurs. Vous pouvez ensuite exploiter
les données analytiques pour déterminer si la fonctionnalité est bénéfique.
 Exigences utilisateur : Il s’agit des scénarios ou du cadre que votre
application doit respecter. Ces exigences peuvent être définies par des
études utilisateurs ou des normes sectorielles, voire par les contributions
des parties prenantes.
 Divulgation progressive : Ce modèle de conception consiste à n’afficher
aux utilisateurs que le contenu pertinent en fonction de leur activité actuelle
et à masquer le reste. L’objectif est de réduire la charge cognitive et de
rendre l’expérience utilisateur plus intuitive.
 Inscription différée/paresseuse : Il s’agit d’un modèle de conception
d’interface utilisateur qui permet aux utilisateurs de naviguer et d’interagir
avec votre application sans avoir à s’inscrire.

Meilleures pratiques de conception

 Mode sombre : Cette fonctionnalité des applications web permet de
remplacer le thème clair par défaut par un thème sombre. Il est
recommandé d’utiliser des couleurs désaturées, c’est-à-dire des couleurs
moins intenses et moins saturées.
 Fil d'Ariane : Cet outil de navigation indique à l'utilisateur sa position dans
l'arborescence du site. Il est préférable de placer le fil d'Ariane en haut de
la page pour qu'il soit facilement repérable. Veillez également à ce que sa
taille soit suffisamment grande pour une lecture aisée, sans pour autant
encombrer la page.
 Composant de carte : Votre composant de carte doit être simple, sans
surcharge visuelle ni information excessive. Pour les médias, privilégiez
des images et des vidéos de haute qualité afin d’optimiser l’expérience
utilisateur.
 Défilement infini : Ce modèle de conception charge du contenu
supplémentaire au fur et à mesure que l’utilisateur fait défiler la page vers
le bas. Il est conseillé d’utiliser un bouton « Charger plus » afin de
permettre à l’utilisateur de contrôler le moment où il souhaite afficher
davantage de contenu. Vous pouvez également ajouter un bouton
« Retour » pour permettre aux utilisateurs de revenir à la page précédente
sans avoir à remonter complètement la page.
 Boîte de dialogue modale : Il s’agit d’une fenêtre contextuelle qui s’affiche
par-dessus le contenu existant de la page. Généralement, un fond
légèrement grisé est utilisé pour faciliter la concentration de l’utilisateur sur
le contenu de la boîte de dialogue. Il est également recommandé de
permettre à l’utilisateur de fermer la boîte de dialogue en cliquant en dehors
de celle-ci. L’utilisation de l’ dialog élément HTML `<modal>` offre de
nombreuses fonctionnalités et une meilleure accessibilité.
 Indication de progression pour l'inscription via un formulaire : Ce
système permet d'indiquer aux utilisateurs leur avancement dans un
processus. Il peut être utilisé dans les formulaires, l'inscription et les
processus de configuration. Votre interface doit être simple, facile à trouver
et permettre de revenir aux étapes précédentes.
 Panier d'achat : Le panier permet à l'utilisateur de visualiser les articles
qu'il a sélectionnés sur une plateforme e-commerce. Il doit toujours être
visible, utiliser une icône courante (panier, sac, etc.) et comporter un
bouton d'appel à l'action clair invitant l'utilisateur à finaliser sa commande.

Outils de conception communs

 Figma : Cet outil en ligne est spécialisé dans la conception d’interfaces et
d’expériences utilisateur (UI/UX). Il permet aux équipes de conception et de
développement de collaborer à distance grâce à des fonctionnalités
intégrées telles que la conception vectorielle, la mise en page automatique,
un système de commentaires et de retours, et bien plus encore.
 Sketch : Cet outil de conception populaire est apprécié pour son interface
intuitive et sa simplicité, ce qui le rend idéal pour les développeurs
souhaitant créer rapidement des prototypes. Il est également largement
 utilisé par les designers pour des tâches telles que la création d'interfaces
utilisateur, d'icônes et de mises en page web.
 Adobe XD : Il s'agit d'un outil de conception et de prototypage vectoriel
pour la conception d'interfaces utilisateur (UI/UX), reconnu pour son
intégration transparente avec d'autres applications Adobe telles que
Photoshop, Illustrator et After Effects.
 Canva : Cet outil vous permet de créer une grande variété de contenus
visuels, tels que des affiches, des photos de couverture, des présentations,
de courtes vidéos, etc. Son interface intuitive et simple le rend idéal pour
les début

Unités absolues
 px (Pixels) : Cette unité absolue est une unité de mesure de taille fixe en CSS. C’est l’unité absolue
la plus courante et elle permet un contrôle précis des dimensions. 1px Elle est toujours égale à
1/96e de pouce.
 in (Pouce) : Cette unité absolue est égale à 96px.
 cm (Centimètres) : Cette unité absolue est égale à 25,2/64 de pouce.
 mm (Millimètres) : Cette unité absolue est égale à 1/10e de centimètre.
 q (Quarter-Millimètre) : Cette unité absolue est égale à 1/40e de centimètre.
 pc (Picas) : Cette unité absolue est égale à 1/6 de pouce.
 pt (Points) : Cette unité absolue est égale à 1/72e de pouce.

Unités relatives
 Pourcentages : Ces unités relatives permettent de définir les tailles, les dimensions et autres
propriétés en proportion de leur élément parent. Par exemple, si vous définissez width: 50%; un
élément en pourcentage, il occupera la moitié de la largeur de son conteneur parent.
 em Unité : Ces unités sont relatives à la taille de police de l’élément. Si vous utilisez ems cette font-
size propriété, la taille du texte sera relative à la taille de police de l’élément parent.
 rem Unité : Ces unités sont relatives à la taille de police de l'élément racine, qui est l' html élément.
 vh Unité : vh représente "viewport height" et 1vh est égale à 1 % de la hauteur de la fenêtre
d'affichage.
 vw Unité : vw représente "viewport width" et 1vw est égale à 1 % de la largeur de la fenêtre
d'affichage.

calc Fonction
 calc() Fonctionnalité : Cette calc() fonction permet d’effectuer des calculs directement dans vos
feuilles de style afin de déterminer dynamiquement les valeurs des propriétés. Vous pouvez ainsi
créer des interfaces utilisateur flexibles et réactives en calculant les dimensions en fonction de la
taille de la fenêtre d’affichage ou d’autres éléments.