Glossaire du site web et du web design : les termes du web design en langage clair

Pour une oreille non initiée, certains termes techniques peuvent sembler bien étrangers. Nous avons réuni un glossaire de termes et de fonctionnalités de sites web pour vous aider à mieux échanger avec nous, votre développeur web. Considérez-le comme un guide en langage clair des termes de web design, de la terminologie du design de site web et du jargon qui circule en réunion de projet. Nous l’avons composé à partir des questions que l’on nous pose en tant que studio Webflow, et nous continuerons de l’enrichir au fil des nouvelles questions, mais cette liste n’est bien sûr pas propre aux designers Webflow : elle vaut pour tout le monde.

Si vous hésitez encore sur le choix de votre partenaire, voici pourquoi choisir un studio Webflow pour votre prochain projet de site web, et ce qui entre dans le coût d’un site web.

Design adaptatif

La façon dont un site web est construit détermine son apparence sur les différents appareils. Le design adaptatif crée un site en plusieurs mises en page, chacune conçue pour des tailles d’écran différentes.

Design responsive

Garantit qu’un site s’affiche correctement quel que soit l’appareil utilisé par le visiteur. Les sites responsive sont conçus pour s’adapter aux différentes tailles d’écran, de sorte que l’utilisateur profite de la même qualité et de la même facilité d’utilisation, qu’il navigue sur ordinateur, mobile ou tablette.

Adaptatif ou responsive

Le design responsive reconfigure tous les éléments de design, que le site soit consulté sur un ordinateur de bureau, un portable, une tablette ou un téléphone mobile. Avec le design adaptatif, on crée plusieurs mises en page fixes qui s’ajustent à la taille de l’écran de l’utilisateur. À l’inverse de l’approche responsive, plus fluide, le design adaptatif emploie plusieurs versions d’un design fixe.

Chez Milk Moon, nous privilégions en général une approche responsive, mais il nous arrive de panacher. Il se peut qu’un élément ne fonctionne tout simplement pas sur mobile : il est alors masqué sur cet appareil et remplacé par un design plus adaptatif, uniquement pour cette section précise.

Lightbox

Un affichage plein écran immersif pour vos photos, vos graphismes et vos vidéos.

Accordéons

‍L’accordéon est un élément d’interface graphique composé d’une liste verticale d’éléments, comme des libellés ou des vignettes. Il a la même vocation qu’une interface à onglets : une liste d’éléments dont un seul est déployé en panneau à la fois.

Chargement différé (lazy load)

Les images se chargent au moment où elles apparaissent à l’écran, au lieu que toutes les images d’une page se chargent dès l’ouverture du site. C’est l’un des moyens les plus simples d’accélérer une page (pourquoi c’est important, vous le verrez dans notre article sur la façon dont la vitesse des pages fait progresser votre activité).

Animation Lottie

Lottie est un format de fichier d’animation qui permet aux designers de livrer des animations sur n’importe quelle plateforme aussi facilement que des ressources statiques. Ce sont de petits fichiers, qui fonctionnent sur tous les appareils et peuvent être agrandis ou réduits sans pixellisation.

Barre de navigation

Une barre de navigation est un élément d’interface utilisateur d’une page web qui contient des liens vers les autres sections du site.

Système de gestion de contenu (CMS)

Un CMS désigne un système en ligne dans lequel les utilisateurs finaux peuvent créer, modifier et éditer le contenu du site grâce à un éditeur, afin que les non-développeurs gèrent plus facilement leur contenu.

Pagination

Répartir une longue liste de contenus, comme des articles de blog ou des produits, sur des pages numérotées, pour que les visiteurs la parcourent une page à la fois. Si vous voulez que la page reste en place au lieu de remonter tout en haut quand quelqu’un clique sur « suivant », découvrez ici notre astuce de pagination fluide.

Sliders et carrousels HTML/CSS

Le terme carrousel désigne une collection, ou « pellicule », d’images qui défilent par paliers ou de façon continue autour d’un axe central. Il peut avoir un aspect 2D ou un rendu de type 3D.

Intégrations HTML (embeds)

L’élément HTML embed intègre un contenu externe à l’endroit précis du document. Ce contenu provient d’une application externe ou d’une autre source de contenu interactif, comme un plug-in de navigateur.

SSL

SSL signifie Secure Sockets Layer. C’est un protocole de sécurité standard qui garantit que toutes les données échangées entre le serveur web et le navigateur restent chiffrées, donc illisibles à l’œil nu. Pour savoir si un site dispose d’un certificat SSL, regardez l’adresse web : si l’URL commence par « https », le site est sécurisé. Vous verrez aussi un cadenas dans la barre du navigateur, même si Chrome l’a remplacé par une icône de réglages en 2023, ce qui s’affiche dépend donc de votre navigateur. À proprement parler, SSL a été remplacé par TLS (Transport Layer Security), mais tout le monde continue de dire SSL.

Design UI

UI design signifie « user interface design », soit la conception de l’interface utilisateur : tout ce qui concerne les écrans et les points de contact interactifs d’un site web ou d’une application. Les balayages du doigt, les barres de défilement et les boutons cliquables font partie du design UI : en somme, tout ce qui compose l’interface utilisateur.

Design UX

UX design signifie « user experience design », soit la conception de l’expérience utilisateur : il s’agit d’offrir à l’utilisateur final une expérience fluide et agréable lorsqu’il navigue sur un site web ou une application. Voici comment un site bien conçu peut booster votre activité.

Wireframe

La structure d’un site web. Ni polices, ni couleurs, ni images : cette mise en page est la première étape pour s’assurer que les fondations sont solides avant d’ajouter le contenu.

Cookies

Un cookie est une petite donnée servant à activer des services essentiels ou autres sur un site web. Les cookies aident les sites à collecter des données sur la façon dont les visiteurs interagissent avec les sites, les produits et les services. Ils peuvent aussi servir à mémoriser les préférences d’un utilisateur sur un site. En acceptant les cookies, vous consentez à ce qu’une entreprise utilise ces outils à des fins de publicité et d’analyse. Vous vous demandez ce qu’un bandeau de cookies fait à vos chiffres ? Nous avons partagé les nôtres dans le dilemme du consentement aux cookies.

Défilement parallaxe

Une technique qui consiste à concevoir l’arrière-plan d’une mise en page pour qu’il se déplace plus lentement que le premier plan lorsque l’utilisateur fait défiler la page, ce qui crée un effet de type 3D.

Favicon

‍Abréviation de « favourite icon » (icône favorite), c’est l’icône qui apparaît dans l’onglet du navigateur de votre site web.

CSS

Voyez le HTML (Hypertext Markup Language) comme le squelette, la colonne vertébrale, et le CSS comme l’apparence. CSS signifie Cascading Style Sheets (feuilles de style en cascade) et c’est le moyen le plus courant de définir l’aspect visuel d’un site web. Alors que le HTML indique au navigateur ce qui figure sur la page, le CSS lui dit comment le présenter, par exemple les couleurs, les polices, la mise en page et bien plus.

SEO

‍Le SEO, ou Search Engine Optimisation (optimisation pour les moteurs de recherche, référencement naturel), désigne en général l’ensemble des actions sur site et hors site qui permettent d’obtenir un meilleur classement, ou un classement plus ciblé, dans les résultats de recherche de Google ou de la plupart des autres moteurs.‍

Accessibilité

Désigne la pratique consistant à s’assurer que votre site web peut être utilisé et consulté par tous, quelles que soient les capacités et les handicaps.

Texte alternatif (alt text)

Le texte alternatif est le texte qui s’affiche à la place d’une image sur une page web lorsque celle-ci ne se charge pas sur l’écran de l’utilisateur. C’est aussi ce que les lecteurs d’écran lisent à voix haute aux personnes qui ne peuvent pas voir l’image, et il aide les moteurs de recherche à comprendre ce que montre l’image.

FAQ

Quels sont les termes de web design les plus courants ?

Ceux qu’on nous demande le plus souvent sont le design responsive, le design UI et UX, les wireframes, le CMS, le SSL, le SEO, le texte alternatif et l’accessibilité, et chacun est expliqué plus haut. En résumé : le design responsive est la façon dont un site s’adapte aux différentes tailles d’écran, un wireframe est la mise en page épurée avant toute police, couleur ou image, un CMS vous permet de modifier votre propre contenu sans développeur, et le SEO regroupe tout ce que vous faites pour mieux vous classer dans les résultats de recherche.

Quelle est la différence entre le design UI et le design UX ?

Le design UI, c’est l’apparence et la sensation des écrans et des points de contact, comme les boutons, les barres de défilement et les balayages du doigt, tandis que le design UX, c’est la fluidité et la convivialité de toute l’expérience lorsqu’on parcourt votre site web ou votre application. L’UI, c’est ce que les gens touchent, l’UX, c’est ce qu’ils ressentent en l’utilisant.

Quelle est la différence entre le design responsive et le design adaptatif ?

Le design responsive est fluide : il reconfigure chaque élément de design pour s’ajuster à l’écran sur lequel le site est consulté. Le design adaptatif utilise plusieurs mises en page fixes et choisit celle qui convient à la taille d’écran de l’utilisateur. Chez Milk Moon, nous penchons vers le responsive, mais il nous arrive d’ajouter un élément adaptatif lorsqu’une section ne fonctionne tout simplement pas sur mobile.