Guide du débutant pour plus de 100 termes relatifs à la conception de sites web

In this article, we’ll unravel the mysteries of web design vocabulary and introduce you to 100+ terms, explained in plain language.

Que vous soyez un débutant dans le monde de la conception de sites web ou un professionnel cherchant à rafraîchir son vocabulaire, ce guide est conçu pour vous. Rendons le langage de la conception web simple et accessible.

100+ termes relatifs à la conception de sites web

301 Redirection

Une redirection 301 est une méthode permettant de rediriger de manière permanente une URL (adresse web) vers une autre. Elle informe les utilisateurs et les moteurs de recherche que l'URL d'origine a été déplacée ou remplacée par une nouvelle.

404 Erreur

404 est le code d'état HTTP d'une page d'erreur. Il apparaît lorsqu'un utilisateur tente d'accéder à une page web qui n'existe pas sur le serveur.

A

Accessibilité

L'accessibilité garantit que les sites web sont utilisables et navigables par les personnes handicapées. Elle comprend des caractéristiques telles que la compatibilité avec les lecteurs d'écran, la navigation au clavier et le texte alternatif pour les images, afin de rendre le contenu du web accessible à tous les utilisateurs.

Alignement

L'alignement est le positionnement et la disposition des éléments (tels que le texte, les images ou les boutons) sur une page web. Ce paragraphe de texte, par exemple, est aligné sur la marge gauche.

Texte Alt (Texte alternatif)

Le texte Alt, ou texte alternatif, est un texte descriptif ajouté à une image en HTML pour des raisons d'accessibilité et de sécurité. RÉFÉRENCEMENT avantages.

Texte d'ancrage

Le texte d'ancrage est un texte cliquable dans un lien hypertexte. Il fournit un contexte pour aider les utilisateurs à comprendre où mène le lien et est également important pour l'optimisation des moteurs de recherche (SEO).

Au-dessus du pli

“Le ”above the fold’ est la partie d'une page web que l'utilisateur voit immédiatement après son chargement, sans avoir à la faire défiler. Cette zone contient des informations importantes et des appels à l'action pour attirer rapidement l'attention des utilisateurs.

B

Back-End (extrémité arrière)

Le back-end est en quelque sorte la “salle des machines” cachée d'un site web. Il s'occupe de tout ce qui se passe en coulisses, comme le stockage des données et le bon fonctionnement du site.

Fil d'Ariane

Les fils d'Ariane sont des liens de navigation qui montrent le chemin hiérarchique ou la piste des pages qu'un utilisateur a visitées sur un site web. Ils facilitent la navigation des utilisateurs en leur permettant de revenir aux pages précédentes. Par exemple, sur un site blog les fils d'Ariane peuvent ressembler à Accueil > Blog > Catégorie > Article

Sous le pli

“Le terme ”below the fold" (sous le pli) est emprunté à la presse écrite ; il désigne tout ce qui se trouve sous le pli. Dans le domaine de la conception de sites web, il s'agit du contenu d'une page web qui n'est pas immédiatement visible lorsque la page est chargée ; il faut faire défiler la page pour le trouver.

Corps de texte

Le corps du texte est le contenu principal d'une page web, à l'exclusion des titres, sous-titres et autres éléments structurels. Il fournit l'information ou le message principal de la page et est essentiel pour communiquer avec les visiteurs du site web. 

Bouton

Un bouton est un élément interactif cliquable sur une page web, souvent utilisé pour déclencher des actions, telles que l'envoi d'un formulaire, la navigation vers une autre page ou la réalisation d'un achat. 

C

Cache

Le cache désigne une zone de stockage temporaire utilisée pour stocker des fichiers web tels que des images et des scripts. Il stocke temporairement les éléments du site web de sorte que lors de votre prochaine visite, les choses se chargent plus rapidement.

Appel à l'action (CTA)

Un appel à l'action (CTA) est une invite ou un bouton conçu pour encourager les utilisateurs à entreprendre des actions spécifiques, telles que s'inscrire à une lettre d'information, effectuer un achat ou demander plus d'informations. 

Core Web Vitals

Core Web Vitals are a set of specific performance metrics by Google qui mesurent l'expérience utilisateur d'un site web, y compris des facteurs tels que la vitesse de chargement des pages, l'interactivité et la stabilité visuelle.

CMYK

CMYK signifie Cyan, Magenta, Jaune et Clé (Noir). Il s'agit d'un modèle de couleur utilisé dans l'impression et la conception graphique. Contrairement au modèle de couleurs RVB utilisé pour les écrans numériques, le modèle CMJN est utilisé pour l'impression couleur, où les couleurs sont créées en combinant des pourcentages de ces quatre couleurs d'encre.

Palette de couleurs

Une palette de couleurs est un ensemble de couleurs utilisées pour maintenir la cohérence visuelle et établir l'identité de la marque sur un site web.

Contraste

Le contraste dans la conception de sites web fait référence à la différence de couleur, de tonalité ou de luminosité entre divers éléments d'une page web. Il est utilisé pour faire ressortir le contenu, améliorer la lisibilité et créer un intérêt visuel.

Cultures

Le recadrage consiste à couper une partie d'une image ou d'un élément pour se concentrer sur une zone spécifique. 

CSS

CSS signifie - Cascading Style Sheets (feuilles de style en cascade) est un langage de codage utilisé dans la conception de sites web pour contrôler le style visuel et la mise en page des pages web. Il définit la manière dont les éléments doivent apparaître, y compris les polices, les couleurs, l'espacement et le positionnement.

Cookies

Les cookies sont de petits fichiers texte stockés sur l'appareil de l'utilisateur lorsqu'il visite un site web. Ils stockent des informations sur les préférences de l'utilisateur et ses identifiants de connexion, et se souviennent de ces informations afin que vous n'ayez pas à les répéter sans cesse sur le site web.

Système de gestion de contenu (CMS)

Content Management System (CMS) is a back-end tool that simplifies the process of updating and maintaining a website’s text, images, and other media. If you’ve ever used WordPress to build a website, you’ve used a CMS. 

Carrousel

Un carrousel est un affichage rotatif d'images ou de contenu qui permet de présenter plusieurs informations ou produits dans un espace limité.

D

DHTML

Le DHTML, ou HTML dynamique, est une combinaison de technologies (HTML, CSS et JavaScript) utilisée pour créer un contenu web interactif et dynamique. 

Menu déroulant

Un menu déroulant est un menu de navigation qui affiche une liste d'options lorsque l'utilisateur clique ou survole un élément de menu spécifique. 

Ombre portée

Une ombre portée est un effet visuel dans la conception de sites web qui ajoute une ombre pour faire ressortir un élément (tel qu'un texte ou une image). 

DNS

DNS, Le système de noms de domaine, ou Domain Name System, est une sorte de traducteur pour l'internet. Il transforme les noms de sites web (comme exemple.com) en nombres que les ordinateurs comprennent, ce qui les aide à trouver des sites web et des objets en ligne.

Domaine

Un domaine est une adresse web unique que les utilisateurs saisissent dans leur navigateur pour visiter un site web. Par exemple, diviflash.com est notre nom de domaine.

E

Commerce électronique

Commerce électronique ou commerce électronique est une méthode d'achat et de vente de biens et de services en ligne ou sur Internet. 

Disposition élastique

Une mise en page élastique est une conception de site web qui s'adapte à différentes tailles d'écran, garantissant ainsi une bonne présentation sur tous les appareils.

F

Favicon

Un favicon est une petite icône ou image affichée dans l'onglet du navigateur à côté du titre du site web. Elle aide les utilisateurs à identifier et à distinguer un site web lorsque plusieurs onglets sont ouverts.

Front-End

Front-end is typically the opposite of the back-end. It is a client-side of développement web, where the user designs and codes the website’s visible features and user interfaces, such as buttons, menus, and forms.

Filtre

Les filtres sont utilisés dans la conception de sites web pour manipuler l'apparence des images ou du contenu. Ils peuvent modifier les couleurs, appliquer des effets tels que le flou ou la netteté, et améliorer le style visuel des éléments.

Point focal

Le point focal est la zone ou l'élément central d'une page web qui attire l'attention de l'utilisateur. Il est souvent utilisé pour mettre en évidence un contenu important ou des appels à l'action.

Police 

Une police de caractères se réfère à une conception spécifique de caractères, y compris son style, sa taille et son poids. Les polices sont choisies pour véhiculer la personnalité, la lisibilité et l'esthétique visuelle d'un site web.

Famille de polices

Une famille de polices est un groupe de polices apparentées présentant des caractéristiques de conception similaires. Elle comprend des variantes comme le gras, l'italique et des graisses différentes au sein d'une même police de caractères.

Poids de la police

La graisse de la police fait référence à l'épaisseur ou à la lourdeur des caractères d'une police. Elle peut aller de fin (léger) à gras (lourd).

Taille de la police

La taille de la police spécifie la hauteur des caractères dans une police de caractères. Elle est mesurée en points ou en pixels.

Style de police

Le style de police fait référence aux variations au sein d'une police de caractères, telles que l'italique ou l'oblique. 

Pied de page

Le pied de page est la partie inférieure d'une page web qui contient des informations et des liens importants, tels que les mentions de copyright, les coordonnées, les politiques de confidentialité et les options de navigation supplémentaires. 

G

Grille

La grille est une structure de mise en page utilisée pour organiser le contenu et les éléments en lignes et en colonnes. Elle fournit un cadre systématique et cohérent pour l'alignement et le positionnement des éléments de conception.

GIF (Graphics Interchange Format)

Le GIF est un type d'image qui peut également bouger, comme une mini-vidéo. Il est souvent utilisé pour des mèmes amusants, des autocollants et des animations simples sur l'internet.

Gradient

Un dégradé est une transition graduelle entre deux ou plusieurs couleurs. Dans la conception de sites web, il est utilisé pour donner un aspect cool aux arrière-plans, aux boutons et au texte en mélangeant les couleurs.

GUI (Graphical User Interface)

L'interface graphique est l'élément visuel que vous voyez sur l'écran d'un ordinateur ou d'un appareil. Il s'agit des boutons, des icônes et des menus qui vous permettent de cliquer, d'appuyer ou d'interagir avec les logiciels et les sites web.

H

En-tête

L'en-tête d'une page web est la partie supérieure qui contient généralement le logo du site web, le menu de navigation et d'autres éléments clés. Il sert d'identifiant visuel cohérent et permet d'accéder aux fonctions essentielles du site.

Section des héros

La section "héros", qui se trouve généralement en haut de la page web, sous le logo et le menu, comprend une grande image, un titre et un appel à l'action.

Page d'accueil

La page d'accueil est la principale page d'atterrissage d'un site web. Il sert de point d'entrée aux visiteurs et donne un aperçu du contenu du site, des options de navigation et des informations clés.

Code couleur HEX

Code de 6 caractères utilisé pour définir les couleurs sur le web. Il représente la combinaison des valeurs de rouge, de vert et de bleu et est couramment utilisé dans les CSS pour une sélection précise des couleurs.

HTML

HTML ou Hypertext Markup Language est le langage standard utilisé pour créer des pages web. Il définit la structure et les éléments d'une page web, tels que les titres, les paragraphes, les liens et les images.

HTTP

HTTP (Hypertext Transfer Protocol) est le protocole utilisé pour le transfert de données sur l'internet. Il est à la base de la communication sur le web, mais il n'est pas sécurisé et est progressivement remplacé par HTTPS.

HTTPS

HTTPS signifie Hyper Text Transfer Protocol Secure (protocole de transfert de texte sécurisé). Il s'agit de la version sécurisée de HTTP, le principal protocole utilisé pour envoyer des données entre un navigateur web et un site web.

Hébergement

L'hébergement est le service qui consiste à stocker un site web et à le rendre accessible sur l'internet 24 heures sur 24 et 7 jours sur 7.

I

Icône

Les icônes sont de petites images symboliques ou des graphiques utilisés sur un site web pour représenter des actions, des caractéristiques ou des concepts d'une manière facile à comprendre. 

Superposition d'images

Une superposition d'images est une technique qui consiste à placer une image sur une autre avec une opacité réduite, afin de créer un effet visuel. Elle est couramment utilisée pour les légendes, le texte ou pour fournir des informations supplémentaires lorsqu'un utilisateur survole une image.

iFrame (cadre en ligne)

Un iFrame est comme une page web à l'intérieur d'une page web. Elle est utilisée pour placer des éléments tels que des cartes, des vidéos ou des images. médias sociaux sur un site web sans perturber la mise en page principale.

J

JPEG

JPEG est l'acronyme de Joint Photographic Experts Group, un format de fichier d'image commun utilisé sur le web et adapté aux photographies et aux images présentant des dégradés de couleurs complexes.

K

Kerning

Le crénage est un terme typographique qui permet d'ajuster l'espace entre les différents caractères d'une police. Il est utilisé pour s'assurer que les lettres sont uniformément espacées et visuellement agréables.

L

Page d'atterrissage

Une page d'atterrissage est une page web autonome conçue dans un but précis, souvent utilisée dans le cadre de campagnes de marketing. Son objectif est de fournir des informations ciblées sur un produit ou un service et d'encourager les utilisateurs à effectuer des actions spécifiques telles que s'inscrire ou effectuer un achat.

Chargement paresseux

Le chargement paresseux est une technique utilisée pour améliorer les performances d'un site web en chargeant le contenu (généralement des images) uniquement lorsqu'il devient visible dans la fenêtre du navigateur de l'utilisateur. Cette technique permet de réduire le temps de chargement initial des pages et d'économiser la bande passante.

Boîte à lumière

A lightbox is a UI element that displays images or other content in a modal or pop-up window, overlaying the main webpage.

M

Maquette

Une maquette est une représentation statique ou interactive d'un design ou d'une page web utilisée pour visualiser l'aspect et le fonctionnement du site web final.

Menu

Un menu est comme une carte routière sur un site web, vous indiquant où aller. Il s'agit d'une liste de liens ou de boutons qui vous aident à explorer le site. Il peut se trouver en haut, en bas ou sur le côté, et il peut ressembler à une liste déroulante, à un hamburger ou à une barre normale.

Marge

La marge est l'espace entre le contenu d'un élément tel que du texte ou des images et la limite de son conteneur.

N

Navigation

La navigation englobe les menus, les liens et les boutons qui aident les utilisateurs à se déplacer efficacement sur un site web.

O

Opacité

L'opacité fait référence au degré de transparence d'un élément.

Optimisation

L'optimisation est un contexte de la conception de sites web, qui implique de faire divers ajustements de la conception et du code pour améliorer les performances du site web, la vitesse de chargement et l'expérience de l'utilisateur.

P

PNG

PNG (Portable Network Graphics) est un format de fichier image couramment utilisé. Il prend en charge la transparence et les images de haute qualité, ce qui convient aux graphiques, aux logos et aux images qui requièrent un aspect net.

Rembourrage

Le remplissage est l'espace entre le contenu d'un élément (tel qu'un texte ou une image) et sa bordure, utilisé pour créer un espacement visuel. 

Pixel

Le pixel est la plus petite unité de mesure de l'imagerie numérique et de la conception de sites web. Il représente un seul point de couleur sur un écran, utilisé pour déterminer la résolution et la taille des images et des éléments d'une page web.

Prototype

Un prototype est une sorte de version pratique d'un site web. Il aide les concepteurs et autres personnes à tester des idées et à résoudre des problèmes avant de construire le site réel.

PPI

PPI est l'abréviation de "Pixels par pouce", une mesure de la résolution des images, en particulier pour les écrans numériques. Il indique le nombre de pixels contenus dans un pouce d'espace d'écran.

Permalink

Un permalien est un lien web qui ne change jamais et qui vous permet de toujours trouver une page ou un élément spécifique sur un site web. C'est une sorte d'adresse permanente pour les choses en ligne.

R

RVB

Le RVB est la façon dont les ordinateurs parlent des couleurs. C'est comme si l'on mélangeait la lumière rouge, verte et bleue pour obtenir différentes couleurs sur l'écran.

Résolution

La résolution est le nombre de pixels d'une image ou d'un écran, généralement exprimé en largeur x hauteur (par exemple, 1920×1080). Plus la résolution est élevée, plus l'image est claire.

Graphiques matriciels

Les graphiques tramés consistent en une grille de pixels, où chaque pixel est défini individuellement. Ils conviennent bien aux photos, mais peuvent devenir flous lorsqu'ils sont étirés.

Conception adaptée

Le Responsive Design est un moyen de faire fonctionner les sites web sur différents appareils et tailles d'écran. Il utilise des mises en page flexibles et un code intelligent pour que le site s'affiche correctement sur les ordinateurs, les tablettes et les téléphones.

Robots.Txt

Robots.txt est un fichier utilisé pour communiquer avec les robots d'indexation des sites web ou des moteurs de recherche. Il précise les parties d'un site qui ne doivent pas être explorées ou indexées.

Champs obligatoires

Les champs obligatoires sont comme les questions obligatoires d'un formulaire. Vous devez y répondre avant de pouvoir envoyer le formulaire.

Snippets riches

Les snippets enrichis rendent les résultats de recherche plus attrayants, tels que les évaluations, les commentaires et les détails des produits, dans les pages de résultats des moteurs de recherche (SERP).

S

Barre de recherche

Une barre de recherche est une sorte de Google pour un site web spécifique qui permet aux utilisateurs de saisir des mots-clés ou des requêtes pour rechercher un contenu spécifique sur le site.

Curseur

Un slider est un affichage rotatif d'images ou de contenu sur une page web. Il affiche différentes images ou informations l'une après l'autre.

SVG

SVG est un format d'image vectorielle qui utilise XML pour définir des graphiques vectoriels en deux dimensions, idéaux pour les logos et les icônes sur les sites web. Il peut être agrandi ou réduit sans devenir flou.

SERP

SERP ou Search Engine Results Page (page de résultats des moteurs de recherche) est la page de résultats de recherche que l'on trouve sur Google. Elle répertorie les résultats de la recherche, y compris les liens et les brèves descriptions des pages web correspondant à la requête.

Accident vasculaire cérébral

Les traits sont les contours ou les bordures des formes ou du texte. Ils définissent les bords des objets et peuvent être personnalisés en termes d'épaisseur, de couleur et de style.

Encadré

Une barre latérale est une sorte de menu sur le côté d'une page web qui contient généralement du contenu secondaire, des liens de navigation ou des widgets.

Page statique

Une page statique est une page web qui reste fixe et ne change pas dynamiquement en fonction des interactions de l'utilisateur. Elle est toujours utilisée pour des contenus qui ne nécessitent pas de mises à jour en temps réel.

RÉFÉRENCEMENT

SEO est l'acronyme de "search engine optimization" (optimisation pour les moteurs de recherche). Il s'agit d'une stratégie visant à rendre un site web facile à trouver sur Google. Il aide les sites web à obtenir plus de visiteurs.

T

TIFF

Le format TIFF (Tagged Image File Format) est un format de fichier image de haute qualité souvent utilisé pour le stockage et l'échange d'images, en particulier dans les domaines de la conception graphique et de l'impression professionnelles.

Police de caractères

Une police de caractères est un ensemble spécifique de polices présentant des caractéristiques de conception cohérentes, telles que le gras, l'italique et le normal, au sein d'une famille de polices particulière.

Modèle

Un modèle est une mise en page ou une structure préconçue que vous pouvez utiliser pour une page web.

Typographie

La typographie est la manière dont le texte est disposé et stylisé sur une page web. Elle influe sur la lisibilité, l'identité de la marque et l'esthétique générale de la conception.

U

Interface utilisateur (UI)

L'interface utilisateur désigne tous les boutons et éléments sur lesquels vous cliquez sur un site web, y compris les boutons, les formulaires, les menus ou tout autre élément visuel permettant de naviguer et d'interagir avec le site.

Expérience utilisateur (UX)

L'UX, ou “expérience utilisateur”, est l'expérience globale et la satisfaction que vous ressentez lorsque vous interagissez avec un site web.

URL

URL signifie Uniform Resource Locator (localisateur de ressources uniformes), une adresse qui spécifie où une page particulière ou d'autres ressources peuvent être trouvées.

V

Vecteur

Les vecteurs sont des graphiques créés à l'aide d'équations mathématiques, couramment utilisés pour les logos, les icônes et les illustrations sur les sites web. Il s'agit d'images que l'on peut redimensionner sans perte de qualité.

W

Fil de fer

Les wireframes sont des représentations simples et schématiques de la mise en page d'un site web. Elles décrivent l'emplacement des éléments, mais ne contiennent pas de détails de conception tels que les couleurs et les images.

Espace blanc

L'espace blanc est l'espace vide autour et entre les éléments d'une page web. Il facilite la lecture des sites web.

WYSIWYG (What You See Is What You Get) (Ce que vous voyez est ce que vous obtenez)

WYSIWYG fait référence aux constructeurs de sites web ou aux éditeurs de contenu qui permettent aux utilisateurs de voir l'aspect final du contenu au fur et à mesure qu'ils le modifient. C'est comme si vous voyiez votre travail en temps réel.

Filigrane

Un filigrane est une image semi-transparente ou un texte placé sur des photos ou des graphiques pour indiquer “Cette image appartient à quelqu'un” ou “Ne me copiez pas !”.”

X

XHTML (Extensible Hypertext Markup Language)

Le XHTML est une version structurée du HTML utilisée pour créer des pages web. C'est comme utiliser une écriture soignée pour les pages web.

Plan du site XML

Un sitemap XML est une sorte de table des matières pour les sites web. Il aide les moteurs de recherche à trouver tout ce qui se trouve sur un site, comme une carte.

Z

Fichier ZIP

Un fichier ZIP est une archive compressée qui peut contenir plusieurs fichiers ou dossiers, comme un sac à dos pour le matériel informatique. Vous mettez beaucoup de fichiers dans un sac pour les rendre plus faciles à transporter et à envoyer.

Conclusion

La conception de sites web est un domaine dynamique, en constante évolution, et de nouveaux termes apparaissent au fur et à mesure que la technologie progresse. Nous serions ravis que vous nous indiquiez les termes relatifs à la conception Web qui, selon vous, devraient être ajoutés à notre liste. Vos idées et vos suggestions nous permettront de rendre ce guide encore plus complet.

Quelles autres définitions de la conception de sites web ajouteriez-vous à cette liste ? Faites-le nous savoir dans les commentaires.