Le Webdesign (ou Web design), comme toute spécialité, à son propre langage. Mais au fait, qu’est-ce que le Webdesign ?
Dans Wikipédia, si on tape « webdesign », on est renvoyé vers la page conception de site web. C’est logique puisque « webdesign » est une expression anglaise que l’on pourrait traduire par « conception web », faisant référence à la création d’interfaces sur internet, qu’il s’agisse des pages d’un site ou d’une application.
Tout cela pour dire que ce sont des notions auxquelles nous avons souvent à faire en tant qu’internaute. Et davantage si vous entreprenez de créer votre site internet, alors autant être à l’aise avec ce vocabulaire.
Arborescence
L’arborescence est le plan du site web, autrement dit l’organisation logique des pages. L’arborescence permet donc d’avoir une vision globale du site et des différents parcours de navigation.
Bandeau identitaire (ou header)
Zone horizontale située en haut de page. C’est dans cette zone qu’apparaissent le logo et les éléments iconographiques qui incarnent la marque. C’est aussi dans cette zone que l’on placera le menu de navigation du site.
Business Plan
Dossier écrit présentant le projet de création d’entreprise dans sa globalité. Autrement dit, c’est la résultante de toutes les études menées pour la réussite du projet regroupées en un document unique.
Cahier des charges (ou Brief)
Document rédigé par le commanditaire d’un projet définissant 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, parfois aussi les contraintes financières. Il détaille également les objectifs à atteindre vis-à-vis des cibles marketing. Le brief est conseillé pour tout projet créatif (création de logo, documents commerciaux, campagne pub, etc.).
CTA (Call To Action) – Appel à l’action
Le CTA est un bouton ayant pour fonction principale d’inciter au clic. Plus précisément, il peut prendre aussi la forme d’un lien ou d’un visuel appelant l’internaute à entreprendre une action (inscription, commentaire, commande d’achat…).
Charte éditoriale
Document définissant le ton, l’ambiance et le style d’un site Internet. La charte éditoriale garantit ainsi l’homogénéité du contenu dans ses normes rédactionnelles. Ces dernières sont déterminées en fonction de la cible du site, dans le but de rendre la consultation des pages plus pertinente et efficace.
Charte graphique
Document contenant toutes les exigences graphiques liées à une marque et devant être respectées. On y trouvera les typographies, la palette des couleurs, le logo et ses variantes, et parfois des exemples d’images et d’icônes à utiliser dans le projet créatif.
Cinemagraph
Contrairement à ce que l’on pourrait en déduire, un Cinemagraph est une photo … mais pas tout à fait comme les autres. En effet, dans un Cinemagraph, un ou plusieurs éléments de la photo sont en mouvement. Le Cinemagraph crée un effet subtil et très efficace, plus proche de la réalité qu’une photo.
CMS
Un CMS (« Content Management System » ou « Système de Gestion de Contenu » en français) permet de gérer des sites dans leur totalité sans pour autant maîtriser les différents codes (HTML, CSS, PHP, etc). WordPress est par exemple leader sur le marché des CMS.
CSS
Acronyme de « Cascading Style Sheets » ou « Feuille de Styles en Cascade » en français. Le CSS est un format de fichier contenant toutes les informations de style d’un site web. Ce code informatique sert à déterminer l’apparence d’un site web, indépendamment de son contenu.
Détourage
Opération consistant à séparer un ou plusieurs éléments du fond d’une photo ou d’une image. Des logiciels comme Photoshop ou Affinity Photo opèrent ce détourage en quelques clics.
Em
Unité de mesure de typographie ayant une particularité : elle est relative et non fixe. Elle permet donc d’adapter sa taille relativement aux résolutions et aux paramètres des utilisateurs, ce qui est très pratique dans le cas d’un design responsive (cf. définition responsive design).
Empattements (avec ou sans)
Les empattements sont les petites extensions terminant les extrémités des lettres dans certaines polices d’écriture. On les appelle également sérif. L’origine de l’empattement pourrait provenir de la trace laissée par la plume ou le pinceau lorsque la main s’élève en achevant le geste d’écriture.
Les lettres sans empattements sont des lettres bâton, ou sans sérif.
Ergonomie
Un site ergonomique est un site qui facilite le parcours utilisateurs, c’est-à-dire qu’il conduit naturellement et rapidement le visiteur vers l’information qu’il recherche, tout en lui offrant un confort de navigation.
Espaces négatifs
On parle d’espace négatif lorsque le blanc laissé entre les différents caractères forme une image. Cette technique est souvent utilisée pour les logos.
Dans les exemples ci-dessous, vous remarquerez le paon se dessinant dans le cœur de l’éventail NBC, le lion et la hyène se dessinant entre les pattes de l’éléphant ainsi qu’entre ses pattes et sa trompe ; et enfin la statuette de l’Oscar, récompense ultime de l’industrie cinématographique hollywoodienne.
En plus du design évident, cette technique permet une double lecture en créant une autre signification plus profonde.
Executive Summary
Premier document de présentation d’un projet consistant en un résumé ; son objectif étant de susciter l’intérêt du lecteur en un minimum de temps. On peut le considérer comme le CV de l’entreprise, le document doit donner envie à l’investisseur d’en savoir plus sur le projet pour proposer un entretien. L’executive summary précède donc le Business Plan.
Favicon
Logo miniature (ou émoticône) d’un site dans la barre de recherche, à gauche de l’URL, sur les onglets d’un navigateur. Le favicon permet d’identifier un site plus facilement et d’associer une image représentative d’une marque.
Footer (ou pied de page)
Désigne la zone la plus basse d’un site, que l’on retrouve de manière fixe sur l’ensemble des pages et des articles d’un site. On y retrouve généralement un certain nombre d’informations dont les informations de contact, les informations d’identification de l’entreprise, un menu de navigation, etc.
Gabarit (ou template)
Modèle de mise en page, de différents contenus composés 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. Une caractéristique du GIF est le nombre de couleurs supportées : au maximum 256 choisies parmi la palette RVB (cf. definition 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).
Header (ou bandeau identitaire)
En-tête d’un site, où l’on placera généralement le logo et le menu de navigation.
Interface
Partie d’un site web ou d’une application permettant une connexion à un logiciel ou à un service afin de procéder à un échange réciproque de données, d’informations et de fonctionnalités.
.Jpeg (jpg)
Sigle de « Joint Photographic experts Group » (Groupe mixte d’experts photographiques en français), le format JPG est le résultat d’une compression d’images numériques fixes. Ce format est standard, universel, lisible sur quasiment toutes les machines capables d’afficher des images. C’est pour cette raison qu’il est couramment utilisé.
Ligne de flottaison
Limite théorique de visibilité dans une page. Au-delà de cette ligne, l’utilisateur doit scroller (faire défiler) pour afficher le reste du contenu. La définition de la ligne de flottaison d’un site est essentielle puisqu’elle maximise la valeur du contenu placé au-dessus d’elle.
Logo (ou logotype)
Graphisme, signature visuelle aidant à l’identification d’une marque ou d’une entreprise. Le logo est un élément très important de la communication visuelle permettant de se démarquer de la concurrence. Il peut être typographique, crée en sigle ou en visuel.
Lorem Ipsum
Texte de latin modifié (n’ayant absolument aucun sens) qui peut se rajouter n’importe où, dans une page Web ou un article, pour donner une impression de paragraphe écrit. Ce générateur de faux-texte est très pratique pour créer des maquettes (cf. définition) et avoir un aperçu global du design.
Maquette (ou Mockup)
Représentation graphique simplifiée de la façon dont on peut agencer une page de site Web. La maquette formalise l’ensemble des contenus, des rubriques et des fonctionnalités, visant à 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. Méthode de plus en plus utilisée face à l’augmentation du trafic Internet mobile.
À l’inverse, le concept traditionnel de développement Web consistait à adapter progressivement un site web pour l’adapter à un affichage sur des écrans plus petits.
Mockup (ou Maquette)
Maquette graphique simplifiée d’une page Web visant à représenter les fonctionnalités sans s’attarder sur l’aspect visuel. Ce terme est aujourd’hui moins utilisé, remplacé par le terme « wireframe » (vue schématique d’une page ; cf. définition) et « gabarit » (maquette standardisée d’une page).
Optimisation (du poids des images)
Enregistrement des images contenues dans une page, à partir du fichier source (souvent PSD), en choisissant un format adapté à leur utilisation (GIF, JPG, PNG).
L’optimisation est égale au niveau de compression de l’image pour obtenir un affichage de qualité et un fichier le plus léger possible, pour une rapidité d’affichage de la page du site.
Parallax
Défilement du fond d’écran moins rapide que les autres sections du site, donnant une certaine profondeur, proche d’un effet 3D. Cet effet ayant pour but de rendre le site encore plus dynamique pour capter l’attention des visiteurs.
Persona (ou buyer personna)
Personnage fictif stéréotypé en marketing, représentant un ensemble de personnes qui partagent la même problématique par rapport à votre offre. En d’autres termes, il s’agit du cœur de cible réellement susceptible d’être intéressé par une catégorie de produits et/ou de services.
Pictogramme (ou icône)
Représentation graphique minimaliste, porteuse d’un sens unique et aisément compréhensible, permettant d’informer et/ou d’orienter rapidement l’utilisateur.
Pixel
Plus petit élément composant une image numérique et permettant d’en déterminer la résolution. Souvent abrégé en « px », le pixel permet de créer une couleur, à partir de trois composants diffusant les couleurs primaires rouge, vert et bleu (RVB, ou « RGB » en anglais).
.PNG (Portable Netword Graphic)
Signe de « Portable Netword Graphic », « Graphique de Réseau Portable » en français) ce format d’image permet la gestion de la transparence du fond d’une image. Il est donc souvent utilisé pour l’affichage des logos et des icônes.
.PSD (PhotoShop Data)
Acronyme de « PhotoShop Data », le PSD est un format d’image natif d’Adobe permettant d’enregistrer des compositions réalisées avec le logiciel Photoshop. Ce format permet de conserver notamment l’ensemble des calques sur lesquels sont repartis les éléments graphiques de l’image. Le format 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 et toutes les dimensions d’écrans : ordinateur de bureau, tablette, smartphone.
Résolution
Finesse de rendu d’un élément graphique sur un écran ou d’un document informatique en DPI (« Dot Pen Inch ») ou « Point par Pouce » en français) ou PPP (« Pixel/Point Par Pouce »).
La résolution d’un écran est son nombre de pixels sur sa longueur multiplié par celui sur sa hauteur. Par exemple, la résolution d’un MacBook pro 15,4 pouces retina est de 2880 x 1800 px.
Rollover
Effet de texte ou d’image apparaissant au survol d’une zone d’une page web avec le curseur de la souris.
RVB (Rouge, Vert, Bleu)
Mode colorimétrique utilisé en informatique permettant le codage des couleurs utilisé pour tous les documents destinés à un affichage écran.
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.
Scénario (ou story-board)
Étape de scénarisation intervenant après la définition de la stratégie du projet web, et avant la phase de réalisation graphique.
Contrairement au zoning (cf. définition), le scénario définit de manière détaillée la structure, le découpage et les interactions dans une page.
Site statique ou dynamique
Un site statique est constitué de pages HTML avec du contenu fixe : les pages s’affichent telles qu’elles ont été conçues. Un site dynamique est stocké dans une base de données et s’affiche de différentes manières selon les internautes. C’est notamment le cas de la plupart des sites e-commerce, qui présentent différents produits selon les interactions des visiteurs.
Template (ou Gabarit)
Modèle graphique, sorte de gabarit, permettant de construire visuellement une page Web. Le template est l’architecture du design d’un site définissant l’habillage et la position des éléments. Les templates assurent une cohérence entre les différentes pages du site.
Typographie
Manière dont les mots et les textes sont mis en forme en utilisant des caractères individuels, à savoir les lettres, accents, chiffres, symboles, ponctuation et autres caractères spéciaux.
UI (user interface ou interface utilisateur)
Désigne l’amélioration de l’interaction entre l’homme et la machine, notamment par le biais d’une interface visuelle. Le travail sur l’UI d’un site web ou d’une application consiste à créer un système visuel qui facilitera la navigation et par conséquent, l’accès aux contenus.
Reste que les définitions ne font pas consensus et l’UI peut également être considérée comme une composante de l’UX (cf. définition). 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 (User Experience ou Expérience Utilisateur)
Désigne l’expérience globale ressentie par l’utilisateur lors de l’utilisation d’un site Web, d’une application, d’une interface ou d’un support digital. On s’accorde pour dire que l’UX s’appuie aussi bien sur 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 ».
Vectoriel
Image numérique composée d’éléments graphiques ne se dégradant pas lorsqu’on l’agrandit. Composée uniquement de formes et de couleurs, l’image vectorielle est différente de l’image matricielle (formats JPG, PNG…) car elle ne comporte pas de pixels.
Les principaux formats d’images vectorielles sont EPS, AI et SVG. Dans la suite logicielle d’Adobe, Illustrator est spécialisé dans la création et l’édition d’images vectorielles.
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 (cf. définition) est de traduire et de 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 selon la culture et/ou l’organisation de l’entreprise.
Dans un contexte français, les attributions du webdesigner relèvent davantage de la création et des déclinaisons graphiques. En revanche, dans un contexte anglo-saxon, le terme englobe une connotation à la fois créative et technique (codage et programmation).
Wireframe
Schéma simplifié d’une page d’un site Web permettant d’indiquer le contenu de chaque bloc dans le but de structurer la page. Ce schéma a pour mission également de faciliter la communication entre les différents intervenants dans la conception d’un site.
Zoning
Détermine la structure des pages clés du futur site Web, sous forme de schémas très simples. Le zoning indique l’emplacement des différentes zones de contenus pour établir les premiers niveaux de lecture.
