Vous collaborez avec des professionnels du webdesign et vous souhaitez comprendre leur jargon ? Alors ce glossaire est fait pour vous ! Voici une large liste de termes relatifs aux outils, aux tâches et aux supports des webdesigner.
A
Active end
Emplacement où l’utilisateur relâche le bouton de la souris lorsqu’il sélectionne une série d’objets.
Affordance
L’affordance est la capacité d’un objet ou d’une caractéristique à suggérer son utilisation au sein d’une interface. Il s’agit finalement « d’appels à action ». Par exemple, la poignée d’une porte incite l’individu à appuyer dessus pour l’ouvrir, en webdesign, c’est pareil. Tirer, pousser, cliquer, effleurer… sont autant de moyen d’interagir avec un objet ou une interface.
AI
Format d’Adobe Illustrator pour l’enregistrement de documents d’images vectorielles.
Ancre
Point de repère pour atteindre directement une partie spécifique d’une page longue.
Un attribut #ID est ajouté à une balise HTML qui va alors servir de repère.
Antialiasing ou Anticrénelage
L’antialiasing est une technique permettant de réduire l’effet de pixellisation d’un caractère à l’écran. En effet, une image numérique est composée de pixels, lorsqu’elle est redimensionnée, le bord des formes prend parfois la forme de petits escaliers : il s’agit de l’aliasing ou crénelage. Pour supprimer cet effet visuel, nous utilisons alors l’antialiasing ou anticrénelage. Si une typographie semble floue à l’écran, c’est surement que votre antialiasing n’est pas activé.
API ou Application Programming Interface
Il s’agit d’un logiciel qui permet à deux applications sources différentes de communiquer entre elles de manière instantanée.
Approche de caractère ou interlettrage
Il s’agit de la valeur d’espacement entre 2 caractères d’un mot ou de plusieurs caractères. Vous pouvez également employer le terme d’interlettrage.
Arborescence
L’arborescence d’un site désigne l’organisation logique de ses différentes pages et de son contenu. Généralement, l’arborescence commence par une page d’accueil où l’on retrouve plusieurs rubriques contenant des sous rubriques contenant des pages.
B
Balise
La balise est une marque utilisée dans un texte HTML pour signaler un programme qu’une commande spécifique doit être exécuté. Exemple : <body>, <h1>, <head>, <meta>…
Bannière
Sur un site web, une bannière est un espace destiné à transmettre un message publicitaire, le plus souvent cliquable et animé.
Baseline
La baseline est une ligne de texte, facile à mémoriser, marquant les esprits et permettant de définir l’univers d’une marque. La baseline se situe généralement en dessous du logo et est écrite dans une taille de police plus petite.
Benchmark graphique
Il s’agit d’un document d’analyse concurrentielle présentant les planches des sites web des entreprises concurrentes.
Brief
Le brief est le cahier des charges, dans la plupart des cas rédigé, par le commanditaire du projet. Ce document définit tous les contours du projet (contexte, objectifs, budget, ressources…) plus le brief est complet et mieux vous pourrez répondre au projet de manière efficace.
C
Call-to-action ou CTA
Le call-to-action est un élément du site mis en avant visuellement et dont le but est d’inciter les visiteurs à cliquer dessus.
Captcha
Programme de test visant à protéger un site web des robots. Ce système est souvent mis en place sur les pages de formulaire et d’inscription et peut être solutionné rapidement et simplement par des humains. Exemple : recopier une série de chiffres et de lettres / cliquer sur les images contenant une maison.
Caractère
En typographie, un caractère informatique peut représenter une lettre minuscule, une lettre majuscule, un chiffre, un signe de ponctuation, un espace, une tabulation, un retour à la ligne ou quelques autres opérations spéciales telles qu’une sonnerie ou un effacement.
Chat
Il s’agit du terme anglais pour parler de messagerie instantanée qui permet un échange entre plusieurs personnes par l’intermédiaire d’ordinateurs, de smartphones ou de tablettes.
Charte graphique
La charte graphique définit l’ensemble des bases graphiques fondamentales (couleurs, pictogrammes), qui constituent l’identité visuelle d’un site et d’une marque. Elle est composée de la présentation du logo en détail, de ses dimensions, de sa zone de protection, des interdits, des couleurs et des typographies à utiliser sur le site internet ou encore de tous les éléments constitutifs de la papeterie.
Cinémagraphe
Le Cinémagraphe est une technique qui consiste à créer une image animée en gardant quelques détails en mouvement de manière répétitive.
CMJN
Acronyme de Cyan, Magenta, Jaune, Noir. Ce mode colorimétrique est adapté pour les impressions.
CMS ou Content Management System
Le CMS est un système de gestion de contenu permettant de gérer des sites web complets. Exemple de CMS : WordPress, Magento, Drupal…
Code Hex ou Hexadécimal
Code utilisé en HTML et en CSS pour définir une couleur spécifique. Le code peut-être un mélange de numéros et de lettres précédés d’un #.
Compression
La compression est le fait de réduire la taille / le poids d’un fichier en éliminant les données superflues.
Contraste
Il s’agit de l’accentuation des différences entre les couleurs, l’espacement, les formes ou tout autre élément de conception.
CSS ou Cascading Style Sheets
Il s’agit d’un fichier informatique qui permet de mettre en forme des documents HTML et XML afin de séparer le fond de la forme pour plus de praticité.
D
Détourage
Opération qui consiste à séparer un ou plusieurs éléments du fond sur une photo ou une image.
DPI ou Dot Per Inch (point par pouce)
Le DPI est une unité de mesure qui indique la résolution d’une image numérique. Pour un affichage web on priviligiera 72DPI contre 300DPI pour l’impression.
E
Em
L’Em est une unité de mesure typographique.
Empattements
En typographie, les empattements sont les petites extensions qui terminent les extrémités des caractères dans certaines polices d’écriture. Les polices d’écriture sans empattements sont des caractères à bâton.
EPS
Format de fichier utilisé pour les images vectorielles contenant du texte et des graphiques.
Ergonomie
Un site ergonomique est un site qui conduit le plus rapidement le visiteur vers l’information qu’il recherche, qui répond efficacement à ses attentes et lui offre un confort de navigation.
F
Favicon ou icône de favoris
Un favicon est l’icône affichée dans la barre des favoris d’un navigateur internet. Cette icône reprend généralement le logo de votre marque ou un logo simplifié dans le cas où celui-ci est trop complexe pour apparaître en miniature. Il permet aux internautes d’identifier plus rapidement votre site dans leur barre de favoris.
Footer
Le footer désigne le « pied de page ». Il s’agit de la zone la plus basse d’un site web.
G
Gabarit ou Template
Un gabarit est un modèle de page que l’on pourra réutiliser dans la construction de différentes pages d’un site. Le gabarit peut être une page type, un modèle de newsletter….
GIF
Format d’images numériques permettant de créer des images animées ou à fond transparent.
H
Header
Le Header est l’en-tête d’un site web. Nous y insérons généralement le logo et le menu. Il est également possible de créer un pré-header, qui, comme son nom l’indique, se situe avant le header.
HTML
Il s’agit du langage informatique utilisé pour afficher du contenu sous forme de texte, d’image, de vidéo et de lien sur le web.
I
Image vectorielle
Contrairement aux images pixels, les images vectorielles utilisent des lignes et des formes. Cette particularité permet à ce type d’image d’être agrandies sans alterer leur netteté et leur qualité.
Interface web
L’interface est la partie visible d’un site web ou d’une application par les internautes. Elle permet le dialogue entre le système technique et son utilisateur et est visualisable depuis tous les dispositifs possédant un navigateur web.
J
JPEG
Format standardisé d’images numériques permettant de réduire la taille des fichiers. Ce format ne supporte pas la transparence contrairement au PNG et au GIF.
L
Ligne de flottaison
La ligne de flottaison est une ligne virtuelle en dessous de laquelle le contenu d’une page web n’est pas visible. Le contenu situé sous la ligne de flottaison est accessible uniquement si l’internaute utilise la barre de défilement ou la molette de la souris. Elle est très importante en ergonomie et en merchandising et notamment pour les pages d’accueil car les éléments importants doivent être visibles dès l’arrivée de l’internaute sur la page web.
Logotype
Le logotype est une représentation graphique qui permet à une marque d’être identifiée par les consommateurs.
M
Maquette
La maquette d’un site web formalise de manière détaillée l’ensemble des contenus, rubriques et fonctionnalités présentes sur un gabarit de page. Elle permet de donner une impression graphique de l’ensemble du projet.
Mobile First
Le Mobile First est un concept qui consiste à concevoir un site en réalisant, en priorité, la version mobile et en adaptant progressivement celle-ci pour les écrans plus larges.
Mock-up
Un mock-up est un fichier image modifiable. Il est calibré de manière à pouvoir modifier rapidement une zone précise du visuel, pour y insérer ses propres éléments. Il est très utile pour présenter et illustrer son projet de façon plus réaliste.
P
Pantone
Le Pantone est un système de correspondance de couleur qui permet de faire correspondre les couleurs imprimées à celles qui apparaissent sur l’écran pendant la phase numérique de la conception.
Format de document portable très pratique car il ne peut pas être modifié par une tierce personne et peut être ouvert par tous les ordinateurs.
Pixel
Le pixel est une unité de mesure de la définition d’une image numérique. Abrégée en px, elle est souvent présentée comme un petit carré de couleur. Lorsqu’on zoome sur une image numérique, nous apercevons une multitude de petits carrés colorés. Il s’agit des pixels. Le pixel est l’élément le plus petit sur une surface d’affichage.
Pixellisation ou crénelage
La pixellisation est l’effet produit lorsque les points qui composent une image deviennent apparents à l’oeil nu. Généralement, une image dites « pixélisée » est une image de mauvaise qualité.
Pictogrammes
Représentation graphique, minimaliste, porteuse d’un sens unique, facilement compréhensible et reproduisant le contenu d’un message sans se référer à sa forme linguistique.
Planche
La planche est un outil d’inspiration et d’orientation qui regroupe plusieurs visuels dans le but d’avoir une vision d’ensemble d’un élément.
PNG
PNG est un format qui format d’image qui convient lorsque votre image possède des fonds transparents.
Police d'écriture
La police d’écriture est un ensemble de représentations visuelles de caractères d’une même famille dont le style est coordonné afin de former un alphabet complet et cohérent. Exemple : Arial Italique en taille 12
PSD
Format d’image d’Adobe Photoshop comportant l’ensemble des calques sur lesquels sont répartis les éléments graphiques de l’image.
Q
Quadrichromie ou CMJN
Il s’agit d’un acronyme pour Cyan, Magenta, Jaune et Noir. Cet ensemble de couleurs est utilisé dans la conception d’impression en raison de la façon dont le papier absorbe la lumière.
R
Responsive design
Ce terme signifie qu’un site web est capable de s’adapter à toutes les tailles d’écrans, que ce soit sur ordinateur, smartphone ou tablette.
Résolution
La résolution est l’unité de mesure permettant d’apprécier la netteté et le niveau de détail d’une image. Plus la résolution est élevée, plus les pixels seront nombreux. Par conséquent, le fichier sera plus volumineux.
Rollover
Il s’agit de l’apparition de textes et/ou d’image au survol de la souris sur une zone précise d’une page web.
RVB
Acronyme de Rouge, Vert, Bleu. Ce mode colorimétrique est adapté pour les rendus sur écrans.
S
Site dynamique
Un site dynamique est stocké dans une base de données, ce qui lui permet de s’afficher de manière différente en fonction des internautes. C’est le cas pour la plupart des sites e-commerce, qui présentent des produits en fonction des précédentes interactions des visiteurs.
Site statique
Un site statique est un site avec du contenu fixe. Les pages s’affichent telles qu’elles ont été conçues et ne changent pas en fonction du parcours internaute.
Skeuomorphic design
Cette technique de webdesign consiste à reproduire virtuellement les caractéristiques graphiques d’un objet réel en reprenant son apparence, le tout dans une logique d’intuitivité. Exemple : un bouton 3D.
T
Template
Le template est l’équivalent du gabarit. En effet, il s’agit de l’architecture du design d’un site qui définit l’habillage et la position des éléments. Il permet de servir de modèle graphique afin d’assurer une cohérence entre les différentes pages d’un site web.
Typographie
La typographie désigne l’art et l’utilisation de caractères d’écriture dans un but artistique ou tout simplement pratique.
U
UI ou User Interface
L’UI désigne l’apparence graphique d’un site. Il s’agit de concevoir une interface agréable pour faciliter l’accès au contenu aux visiteurs, à travers les couleurs, les caractères typographiques, les boutons de navigation et leur disposition.
UX ou User Expérience
L’UX désigne l’expérience globale ressentie par les utilisateurs lorsqu’ils naviguent sur un site web. L’UX s’appuie d’une part sur la facilité d’usage, et d’autre part, sur l’émotion. Dans ce cas nous faisons référence à l’architecture du site et à ses différentes fonctionnalités.
W
Webdesign
Le webdesign est l’étape de conception visuelle d’un site web. Il consiste à structurer les éléments graphiques du site : arborescence, création de la charte graphique, structure des contenus, de la navigation, production des éléments pour l’intégration.
Webdesigner
Le webdesigner est la personne en charge du webdesign. Son objectif est de traduire et de renforcer l’identité visuelle d’une entreprise en valorisant son image par le biais d’éléments graphiques, tout en assurant une navigation agréable au visiteur.
Wireframe
Un wireframe est la maquette fonctionnelle d’un site ou d’une application. Il permet de définir la structure générale des pages sous forme schématique en indiquant les zones et les contenus de chaque bloc, afin d’améliorer l’ergonomie globale d’un site. Il est possible de réaliser vos wireframe sur Adobe XD.
Z
Zoning
Le zoning consiste à définir et à positionner les différents blocs dans une page web.
