Le lexique Webdesign

C’est le fait de rendre les interfaces et contenus utilisables par tous, y compris les personnes en situation de handicap. Cela inclut des ajustements techniques, visuels et ergonomiques pour une expérience inclusive.

Placement organisé des éléments selon des repères ou grilles. Un alignement précis garantit une mise en page professionnelle et lisible.

Prévisualisation du rendu final d’un projet permettant d’aider à valider des choix de pistes graphiques avant une production complète.

L’arborescence d’un site web est sa structure hiérarchisée, semblable à un arbre, qui organise les pages et les contenus pour faciliter la navigation et l’accès à l’information pour l’utilisateur.

Une archive désigne une page ou une section d’un site qui regroupe des contenus anciens ou classés par date, catégorie ou tag. Elle est souvent utilisée pour structurer des articles de blog, des actualités ou des ressources, facilitant ainsi la navigation et la recherche d’informations passées.

C’est une analyse des sites concurrents ou de référence pour identifier les bonnes pratiques, tendances et éléments différenciants afin d’optimiser l’ergonomie, le design et l’expérience utilisateur d’un projet web.

Espaces vides intentionnels autour d’éléments pour aérer un design. Ce « vide » améliore en fait la lisibilité et met encore plus en valeur les contenus principaux.

Points définissant où un design doit s’adapter selon la taille de l’écran (mobile, tablette, desktop). Ils sont essentiels dans le responsive design.

Document structuré expliquant les attentes, objectifs et contraintes d’un projet. C’est une base indispensable pour garantir une collaboration efficace.

Document décrivant les besoins, objectifs et contraintes d’un projet. Il sert de guide pour les équipes impliquées dans le développement.

C’est un ensemble d’images ou de contenus défilant horizontalement ou verticalement.

Custom Post Type, est un type de contenu personnalisé dans WordPress. Il permet de créer et gérer des contenus spécifiques autres que les articles et pages classiques, comme des portfolios, témoignages ou événements.

Call To Action , est un élément interactif, comme un bouton ou un lien, qui incite l’utilisateur à effectuer une action.

Plan visuel des pages d’un projet éditorial, permettant d’organiser de manière plus abstraite le contenu avant sa réalisation.

Méthode où toutes les parties prenantes collaborent activement à la création d’un projet. La méthode préférée de Pilot’in, utilisée pour l’ensemble des projets que l’agence produit.

Élément graphique réutilisable, comme un bouton ou une icône. Les composants facilitent la cohérence et l’efficacité dans les projets de design.

La taille des caractères utilisés pour le texte principal d’un document.

Dot Per Inch, c’est la mesure de la résolution d’une image imprimée, exprimée en points par pouce. Plus le DPI est élevé, meilleure est la qualité de l’image.

C’est le meilleur outil collaboratif (avis des designers de Pilot’in :p) pour le design d’interface et le prototypage interactif.

Tout savoir sur Figma

Le footer (pied de page) est la section située en bas d’un site web. Il contient généralement des informations comme les mentions légales, les liens utiles, les coordonnées ou encore les réseaux sociaux.

Obstacles ou difficultés rencontrés par un utilisateur lors de son parcours dans une interface.

Petite pause dans le lexique Webdesign. C’est une rame utilisée à l’arrière d’un petit bateau pour le faire avancer en dessinant des « S » dans l’eau !

Un header (ou en-tête) est la section située en haut d’une page web. Il contient généralement le logo, le menu de navigation, et parfois des éléments comme un bouton d’appel à l’action ou une barre de recherche. Il sert à structurer l’accès aux principales informations du site.

Visualisation des zones les plus consultées ou cliquées d’une interface. Elle aide à analyser le comportement des utilisateurs.

Cela désigne une section visuelle impactante placée en haut d’une page web, souvent composée d’une image ou d’une vidéo de fond, d’un titre accrocheur et d’un appel à l’action (CTA). Son objectif est de capter l’attention des visiteurs et de présenter l’essentiel du message du site dès le premier regard.

Ordre d’importance des éléments dans un design. Elle guide l’œil et met en avant les informations clés.

Effet qui se produit lorsqu’un utilisateur survole un élément avec sa souris. Il permet de modifier l’apparence ou le comportement de l’élément (changement de couleur, apparition d’un menu, animation, etc.) pour améliorer l’expérience utilisateur.

Pictogramme utilisé pour représenter de manière simplifiée une action, une fonction ou une information.

Représentation visuelle de données ou concepts. Elle permet de simplifier et de rendre attrayantes des informations complexes.

Espacement global entre les lettres d’un texte.

Espacement entre les lignes de texte.

Capacité ou volume d’un navire, souvent exprimé en tonneaux.

Petit crustacé ressemblant à une crevette, base de la chaîne alimentaire océanique et festin des baleines.

La ligne de flottaison désigne la limite visible d’une page web sans avoir à faire défiler l’écran. Tout ce qui se trouve au-dessus est immédiatement visible par l’utilisateur, tandis que le contenu en dessous nécessite un scroll pour être découvert.

Ligne imaginaire sur laquelle reposent les caractères d’une police de texte. Elle assure un alignement propre et précis.

Texte en latin (fictif) utilisé dans les maquettes pour simuler le contenu. Cela permet de visualiser le design sans se concentrer sur le texte.

Prototype fonctionnel d’un site web ou d’une application. Elle permet de tester les interactions avant le développement.

Ce sont les espaces vides autour du contenu d’un document ou d’une page. Elles permettent d’aérer le design et de garantir une lisibilité optimale.

Menu souvent illustré avec trois lignes parallèles, notamment utilisée sur les interfaces mobiles pour optimiser l’espace.

Petites animations ou actions déclenchées par l’utilisateur (clics, survols). Elles améliorent l’expérience utilisateur en rendant l’interface plus vivante.

C’est une maquette ou un prototype visuel d’un design. C’est une représentation visuelle qui permet de se faire une idée concrète de ce à quoi ressemblera un produit fini, avant même sa réalisation (par exemple, sur un t-shirt ou un écran).

Appendice utilisé par les poissons et certains mammifères marins pour se déplacer dans l’eau.

C’est une maquette ou un prototype visuel d’un design. C’est une représentation visuelle qui permet de se faire une idée concrète de ce à quoi ressemblera un produit fini, avant même sa réalisation (par exemple, sur un t-shirt ou un écran).

C’est une représentation visuelle et narrative du chemin parcouru par un utilisateur lorsqu’il interagit avec un produit, un service ou une marque. Il permet de comprendre en profondeur ses besoins, ses attentes, ses émotions et ses actions à chaque étape de son expérience.

Profil fictif représentant un utilisateur type d’un site ou d’une application. Elle aide à concevoir une expérience adaptée aux besoins, comportements et attentes des utilisateurs cibles.

Cela correspond à la taille du fichier image (exprimée en Ko, Mo, etc.). Il impacte la vitesse de chargement d’un site : plus une image est lourde, plus elle ralentit l’affichage des pages. Optimiser le poids des images (compression, format adapté) permet d’améliorer les performances et le SEO.

Version préliminaire d’un produit ou d’un système, conçue pour tester et évaluer son fonctionnement, son design et son utilisation. Il

Portable Document Format. Il s’agit d’un format de fichier créé par Adobe Systems qui permet de représenter des documents de manière indépendante du logiciel et du matériel utilisé pour les créer.

Portable Network Graphics. Il s’agit d’un format d’image numérique sans perte, ce qui signifie que la qualité de l’image reste intacte, même après plusieurs compressions et décompressions.

Photoshop Document. C’est le format de fichier natif du logiciel Adobe Photoshop.

Ancien instrument de navigation utilisé pour mesurer la hauteur des astres et déterminer la position d’un navire.

Approche de conception web qui permet à un site de s’adapter automatiquement à la taille de l’écran sur lequel il est affiché. Qu’il s’agisse d’un ordinateur de bureau, d’une tablette ou d’un smartphone, le site s’ajuste pour offrir une expérience utilisateur optimale.

Un single désigne une page unique dédiée à un contenu spécifique, comme un article de blog, une fiche produit ou une page de service. Elle est souvent conçue pour maximiser l’engagement et la conversion, avec une mise en page optimisée et des appels à l’action stratégiques.

Test utilisateur ou test d’utilisabilité, est une méthode essentielle dans le domaine du design et du développement. Il consiste à observer des utilisateurs réels en interaction avec un produit (site web, application, logiciel, etc.) afin d’évaluer son efficacité, sa facilité d’utilisation et de repérer les éventuels problèmes.

User Interface, que l’on traduit en français par Interface Utilisateur. C’est tout simplement la partie d’un produit numérique avec laquelle l’utilisateur interagit directement.
UI Design (ou conception d’interface utilisateur) consiste à créer des interfaces visuellement attrayantes et intuitives, facilitant ainsi l’interaction de l’utilisateur avec le produit.

Une approche « user-centric » consiste à placer l’utilisateur au cœur de toutes les décisions de conception.

User Experience, se traduit littéralement par expérience utilisateur. Il s’agit de l’ensemble des ressentis et des perceptions d’un utilisateur lorsqu’il interagit avec un produit ou un service, qu’il soit numérique ou physique.
L’UX Design, (ou Design de l’expérience utilisateur), est une discipline qui vise à concevoir des produits numériques en mettant l’utilisateur au centre de toutes les réflexions.

Rédaction UX en français, est une discipline qui consiste à rédiger les textes présents dans les interfaces numériques de manière à optimiser l’expérience utilisateur. En d’autres termes, il s’agit de choisir les mots justes pour guider l’utilisateur de manière intuitive et efficace tout au long de son parcours sur un site web, une application mobile ou tout autre produit numérique.

Vent soufflant directement en face du bateau, rendant la progression plus difficile.

Il englobe à la fois l’aspect visuel (UI) et l’expérience utilisateur (UX). Un bon web design vise à rendre un site web non seulement esthétique, mais aussi fonctionnel et facile à naviguer.

Le W3C (World Wide Web Consortium) est l’organisme international qui définit les standards du web, notamment en matière de HTML, CSS et accessibilité. Son objectif est d’assurer un web ouvert, accessible et compatible sur tous les navigateurs et appareils.

Il est utilisé principalement pour diffuser des vidéos en ligne de haute qualité, tout en offrant une compression efficace pour réduire la taille des fichiers et améliorer les temps de chargement.

Le format WEBP est un format d’image moderne développé par Google. Il offre une compression d’image sans perte ou avec perte, ce qui signifie qu’il peut réduire considérablement la taille des fichiers sans compromettre significativement la qualité visuelle, voire en l’améliorant dans certains cas.

C’est une représentation visuelle simplifiée de l’architecture et de la structure d’une interface utilisateur. Il sert de base pour la conception d’un site web, d’une application mobile ou d’un logiciel.

L’ensemble des étapes et outils utilisés pour concevoir, développer et livrer un site web. Il inclut la planification, le design, l’intégration, le développement, les tests et la mise en ligne, facilitant ainsi la collaboration entre les équipes et l’optimisation des processus.

Poissons tropicaux appartenant aux labridés, dont certaines espèces sont appelées poissons-rasoirs en raison de leur forme allongée.

Activité de navigation de plaisance ou de compétition pratiquée à bord d’un yacht ou d’un voilier.

Diviser un espace en différentes zones, chacune ayant une fonction ou une caractéristique spécifique. Le zoning en design graphique et web est une étape cruciale qui consiste à organiser visuellement l’espace d’une page en différentes zones distinctes.