Pour qui travaille dans le web et s’intéresse ou collabore avec des professionnels du webdesign, voici une liste de mots et expressions indispensables à connaître. Ce glossaire regroupe tous les termes, et leurs définitions, relatifs aux outils, aux tâches, et aux supports des webdesigners.

.AI (Adobe Illustrator) : format d’Adobe Illustrator pour l’enregistrement de documents d’images vectorielles.

Affordance : En ergonomie, l’affordance est la capacité d’un objet ou d’une caractéristique à suggérer sa propre utilisation. Les principaux éléments avec affordance à prendre en compte sont les boutons et les onglets, les liens, les icônes et les champs de formulaires par exemple. « Mets du CTA, mets du CTA bien voyant » : phrase que les professionnels du milieu sauront reconnaître !

Anticrénelage (ou antialiasing) : procédé qui permet de réduire l’effet de pixellisation d’un élément graphique ou d’un caractère à l’écran. 

Approche de caractère : approche qui définit l’espace entre deux lettres.

Arborescence : organisation logique des différentes pages d’un site. De cette arborescence découle la logique de navigation et d’accès à l’information sur le site.

Bandeau identitaire (ou header) : zone horizontale située en haut de page, dans laquelle apparaissent le logo et les éléments iconographiques qui incarnent la marque, ainsi qu’un message textuel (baseline) sous forme d’accroche

Baseline : Il s’agit d’une simple expression facile à retenir, marquant les esprits permettant de définir l’univers d’une marque. Elle est souvent utilisée sous le logo ou en bas d’un document en signature : « Le média des professionnels du digital ».

Brief (ou cahier des charges) : document rédigé par le commanditaire d’un projet, qui définit le contexte, les spécificités et les objectifs du projet web. Il précise notamment les contraintes techniques et fonctionnelles liées à la mise en œuvre du site. Il détaille également les objectifs à atteindre vis-à-vis des cibles marketing. Le brief est valable pour tout projet créatif, pas uniquement pour un site (création de logo, charte graphique, documents commerciaux, campagne pub, etc…)

Charte éditoriale : la charte éditoriale d’un site web garantit l’homogénéité du contenu dans ses normes d’écriture (calibrage des libellés, registre lexical, découpage du texte, etc.). Ces règles d’écriture sont déterminées en fonction de la cible du site, dans le but de rendre la consultation des pages plus pertinente et efficace. Concrètement, la charte éditoriale donne le ton, l’ambiance, le style…

Cinématique : enchaînement des écrans selon les scénarios possibles de navigation dans l’interface.

CSS : code informatique qui sert à déterminer l’apparence d’un site web, indépendamment de son contenu.

CTA (Call To Action) : lien, bouton ou visuel appelant l’internaute à entreprendre une action (inscription, clic…). L’efficacité d’un call to action dépend avant tout de la qualité visuelle de l’accroche afin de maximiser le taux de réalisation de l’objectif.

Détourage : Opération consistant à séparer un ou plusieurs éléments du fond sur une photo ou une image.

DPI (Dot per inch en anglais ou PPP pour « point par pouce ») : indique la résolution d’une image numérique. Cette valeur définit le nombre de pixels utilisés par unité de longueur. (72 DPI pour un affichage web).

Em : unité de mesure relative utilisée pour la typographie sur le web.

Empattements (avec ou sans) : les empattements sont les terminaisons des lettres (ou sérifs). Les lettres sans empattements sont des lettres bâton (ou sans sérif).

Ergonomie : un site ergonomique est un site qui conduit naturellement et rapidement le visiteur vers l’information qu’il recherche et lui offre un confort de navigation.

Gabarit (ou template) : modèle de mise en page, d’images et de textes, qui peut être réutilisé pour plusieurs pages d’un site web afin d’en faciliter le développement.

.GIF : format d’image parmi les plus communément utilisés sur Internet, (il a même été élu « Mot de l’année » pour l’édition américaine du dictionnaire d’Oxford University Press en 2012). Une caractéristique du GIF est le nombre de couleurs supportées : au maximum 256 choisies parmi la palette RVB (16 777 216 nuances), qui limite donc son utilisation à des images peu détaillées. En contrepartie, ce format offre l’avantage de pouvoir stocker plusieurs images dans un même fichier et permettre de créer des GIF animés.

Graphiste (ou graphic designer) : professionnel de la communication qui conçoit, met en forme et coordonne la réalisation d’un processus de communication visuelle, à la demande d’un commanditaire. Pour cela, il est amené à proposer des solutions conceptuelles et stratégiques adaptées aux problématiques de ses clients. (définition extraite de la charte du graphisme du Syndicat des graphistes – 1995).

Habillage (de site) : dispositif publicitaire qui consiste à reprendre des éléments d’identité visuelle d’un annonceur, notamment ses couleurs et son logo, pour donner un aspect personnalisé aux   pages d’un site ou à une newsletter. Ce type de dispositif peu intrusif est généralement utilisé en    complémentarité avec d’autres formats.

Image vectorielle : contrairement aux images pixels, les images vectorielles utilisent des lignes et des formes. Une particularité qui permet à ces images vectorielles d’être agrandies tout en conservant leur netteté et leur qualité, ce qui n’est pas le cas des formats pixelisés.

Interface : partie visible d’un site web ou d’une application, que l’internaute voit sur son écran, et qui permet au système et à l’internaute un échange réciproque d’informations.

Jpeg (jpg) : format de compression d’images numériques.

Logotype : signature visuelle aidant à l’identification d’une marque ou d’une entreprise. Le logotype peut être typographique en sigle et/ou un visuel.

Maquette : la maquette fonctionnelle formalise de manière détaillée l’ensemble des contenus, rubriquages et fonctionnalités présentes sur un gabarit de page. La maquette peut utiliser du faux texte (Lorem ipsum) et de fausses images. Elle vise à donner l’impression graphique d’ensemble du projet final.

Mobile First : concept qui consiste à concevoir un site en réalisant en priorité la version mobile et en adaptant progressivement celui-ci pour les écrans plus larges, soit à l’inverse du concept traditionnel qui consiste à dégrader progressivement un site web pour l’adapter à un affichage sur des écrans plus petit.

Mock-up : maquette graphique simplifiée d’une page Web qui vise à représenter les fonctionnalités sans commencer à étudier l’aspect visuel. Ce terme est aujourd’hui un peu galvaudé et peut aussi signifier « gabarit ».

Optimisation (du poids des images) : enregistrer les images contenues dans une page, à partir du fichier source PSD, en choisissant leur format (GIF, JPG, PNG) et leur niveau de compression pour obtenir un affichage de qualité et des fichiers le plus léger possible.

Pictogramme : un pictogramme est la représentation graphique minimaliste et intelligible d’une action (souscription à la newsletter ou au flux RSS par exemple), d’une fonctionnalité ou d’une thématique etc. Le pictogramme fait partie du système signalétique d’un site web, et se distingue d’une illustration ou d’un logo, car son objectif est d’aider l’internaute à identifier l’information qu’il cherche.

Pixel : plus petit élément composant une image numérique ou l’affichage de votre écran.

.PNG (Portable Netword Graphic) : format d’image qui a la possibilité d’avoir un fond transparent sur le web.

Prototype : pages fonctionnelles cliquables et interactives servant régulièrement aux tests utilisateurs.

PSD (PhotoShop Data) : format d’image natif d’Adobe Photoshop comportant l’ensemble des calques sur lesquels sont repartis les éléments graphiques de l’image. Le PSD est souvent mentionné dans la liste des livrables d’un projet web comme le fichier source pour la création graphique.

Responsive design : design d’un site Web qui lui permet de s’adapter à tous les supports : PC, tablette, smartphone, etc.

Résolution : Finesse de rendu d’un document informatique en DPI ou PPP

RVB (Rouge, Vert, Bleu) : format de codage des couleurs, utilisé pour tous les documents destinés à un affichage écran. Tout comme le code couleur HTML, le code couleur RVB se présente sous la forme de 3 couples de codes en chiffres compris entre 0 et 255. Chaque couple représente le dosage nécessaire de chacune des couleurs primaires pour obtenir la couleur désirée. Ces trois codes représentent respectivement le dosage du rouge, du vert et du bleu.

Scenario (ou story-board) : étape de scénarisation qui intervient après la définition de la stratégie du projet web, et avant la phase de réalisation graphique. Le scénario définit de manière détaillée (contrairement au zoning) la structure, le découpage et les interactions dans une page.

Typographie (bonus) : tous les termes liés à la typographie, en vidéo.

UI : (interface utilisateur) ce qui fait le lien entre l’humain et la machine. C’est donc « le produit fini », le résultat final d’un site web présenté à l’internaute, et sur lequel il peut naviguer facilement, sans rencontrer de difficultés. Mais les définitions ne font pas consensus et l’UI peut également être considérée comme une composante de l’UX. Dans ce cas, l’UI est l’apparence graphique, la personnalité de l’interface et c’est l’UX qui fait le lien IHM (interactions homme-machine).

UX : l’expérience globale ressentie par l’utilisateur lors de l’utilisation d’une interface, d’un appareil digital. On s’accorde pour dire que l’UX s’appuie aussi bien sur l’utilisabilité, autrement dit la « facilité d’usage » d’une interface, que sur l’impact émotionnel ressenti. Ces deux aspects de l’expérience utilisateur sont indispensables et indissociables pour qualifier une expérience de « bonne UX ».

Webdesign : conception visuelle d’un site Web qui 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 intégration, etc. L’objectif du webdesigner est de traduire et renforcer l’identité visuelle de l’entreprise en valorisant son image par le biais d’éléments graphiques, tout en assurant une navigation fluide et ergonomique au visiteur.

Webdesigner : le terme de webdesigner est polysémique, selon son usage anglo-saxon ou français et également la culture/organisation de l’agence ou de l’entreprise.  Employé dans un contexte anglo-saxon, le terme comprend une connotation à la fois créative et technique (codage, programmation). Dans son acceptation française, les attributions du webdesigner relèvent davantage de la création et des déclinaisons graphiques.

Wireframe : schéma simplifié d’une page d’un site Web qui permet d’indiquer le contenu de chaque bloc dans le but de structurer la page et de faciliter la communication entre les différents intervenants dans la conception d’un site. Connu également sous le terme « maquette ergonomique », « boites grises », etc.

Template : modèle graphique, sorte de gabarit, permettant de construire visuellement une page Web.

Zoning : découper l’interface en types de zones de contenus pour établir les premiers niveaux de lecture.

Source : https://blog-fr.orson.io/top-10-logiciels-francais-indispensables-2017