Lexique du graphisme & webdesign

Si vous êtes ici, c’est probablement parce que vous vous êtes retrouvé face à des termes techniques en discutant avec des graphistes ou des webdesigners, et vous vous êtes demandé :
« Mais qu’est-ce que ça veut dire ? ». Pas de panique, vous n’êtes pas seul !
Le monde du design est rempli de mots et d’expressions qui peuvent sembler incompréhensibles. C’est pourquoi nous avons décidé de créer ce lexique pour vous aider à mieux comprendre le monde du graphisme et du web.

Agence de communication digitale owmel saint gilles croix de vie Lexique du graphisme et du web 1

Général

Design : C’est la manière de représenter graphiquement une pensée, un concept ou une intention, en tenant compte des contraintes d’un brief.

Graphisme : Discipline qui consiste à créer, choisir et utiliser des éléments graphiques pour élaborer un objet de communication. En mixant plusieurs disciplines tel que la typographie, l’illustration, la photographie, le motion design ou autre on créé un support de communication dont le but est de promouvoir, informer ou instruire.

Cahier des charges / Brief : Ce document est un outil essentiel pour la réussite de tout projet. Il permet de garantir que toutes les parties prenantes sont sur la même longueur d’onde et que le projet est mené à bien dans les délais, le budget et les limites impartis.

BAT / Bon à tirer : Il fait référence au dernier document réalisé et remis pour signature du client avant impression. À contrario des maquettes ou versions intermédiaires, le BAT a valeur contractuelle et permet de vérifier sa conformité par rapport à ce qui a été validé : le rendu qui en découle est forcément celui voulu par le client.

Maquette : Le fichier avec le contenu texte et images mis en page mais qui sera sujet à modification ou non en échange avec le client.

PLV (Publicité sur le Lieu de Vente) : L’ensemble des moyens utilisés par les fabricants ou les distributeurs pour attirer l’attention du client vers un produit ou une offre, au sein du magasin.⁣ Elle peut prendre plusieurs formes : outils de signalisation (panneaux, roll-up, banderoles…), présentoirs en carton ou électroniques, mobilier, écrans tactiles et bornes interactives, ou encore vitrophanie.

Signalétique : Ensemble des éléments distinctif pour se déplacer dans un lieu ou un espace. Elle est fondée sur une sémantique utilisant des signes (chiffres, pictogrammes, logos, couleurs symboliques…) et/ou des mots.

Identité visuelle

Identité visuelle : Tout ce qui permet d’identifier visuellement une entreprise, une marque ou une entité. Cela inclut les couleurs, les polices de caractères, le logo, le style, les formes et les outils visuels utilisés pour communiquer. Le but est d’apporter une cohérence visuelle et de transmettre l’image qui te correspond, pour que tout le monde te connaisse et te reconnaisse.

Logotype : Un logo ou logotype est une représentation graphique d’une marque ou d’une entreprise qui est utilisé sur les différents supports de communication. Le logo renforce l’image de l’entreprise et favorise la reconnaissance de la marque lorsqu’il figure sur le produit ou sur un support.
Le logo doit donc généralement posséder, entre autres, des qualités d’évocation de l’activité et des valeurs de l’entreprise, mais également des qualités de lisibilité. Pour éviter un effet de discordance, le logo doit évoluer en même temps que l’entreprise ou la marque et ses ambitions à travers les refontes de logo.

Baseline (= slogan) : Il s’agit d’une phrase courte qui permet de préciser l’activité ou attirer la cible. Elle est souvent liée au logo (on parle alors de bloc marque) mais peut aussi vivre seule sur un support de communication, comme une phrase d’accroche. « Just do it » en est le parfait exemple (Nike).

Charte graphique : Un dossier qui détaille l’identité visuelle et son application sur les supports de communication. Il contient les règles d’utilisation des éléments graphiques, servant de guide pour garantir la cohérence visuelle de tout contenu créé au nom de l’entreprise.

Ici quelques exemple : https://brandingstyleguides.com/https:/brandingstyleguides.com/

Mood board / Planche de tendance : Planche qui regroupe différentes inspirations, images, photo, références graphique pour définir une direction visuelle sur la recherche de création d’un logotype ou d’un support de communication ou des 2 en même temps.

Identité de marque : Elle permet d’exprimer le ton de marque, dans le discours, la communication, le rapport avec la clientèle en accord avec les valeurs émise par l’activité de l’entreprise.

Agence de communication digitale owmel saint gilles croix de vie Lexique du graphisme et du web 2
Agence de communication digitale owmel saint gilles croix de vie Lexique du graphisme et du web 3

Typographie

Caractère : Dessin d’une lettre, qui peut être en bas de casse (minuscule) ou en capitale (majuscule).

Police de caractère (typographie, fonte) : Ensemble des glyphes ou caractères typographiques (lettres, chiffres, ponctuation, symboles) d’un même dessin dans toutes les tailles et styles (italic, bold, etc.).

Famille de caractère : Groupes de polices avec des similitudes. La classification Vox les regroupe en 11 familles. (En savoir + : https://caracteres.typographie.org/classification/vox.html)

Signe : Éléments typographiques : lettres, chiffres, espaces et ponctuation.

Approche (interlettrage) : Intervalle entre deux caractères.

Œil (hauteur d’x) : Hauteur de la lettre « x » en bas de casse. À partir du bas de la lettre.

Chasse : Largeur d’un caractère incluant ses approches.

Corps : Taille d’un caractère en points. (1pt = 0,3cm)

Graisse : Épaisseur du trait d’un caractère (thin, bold, etc.).

Italique : Caractères penchés, utilisés pour titres, citations, ou mise en relief.

Espace : Espace entre les mots, avec plusieurs types (sécable, insécable, fine).

Justification : Longueur des lignes de texte. Six types : Alignement à gauche, Justifié à gauche, Alignement à droite, Justifié à droite, Centré ou Justifié au centre

Césure : Couper un mot en fin de ligne pour ajuster la justification. (En savoir + : http://plumefrancaise.fr/la-cesure-en-typographie )

Orpheline : Première ligne d’un paragraphe isolée en bas de page.

Veuve : Dernière ligne d’un paragraphe isolée en haut de page.

Exposant : Lettre ou chiffre en hauteur et à corps réduit (ex : cm²).

Faux texte (Lorem Ipsum) : Texte de substitution en faux latin pour créer une maquette sans distraire par le contenu.

Couleurs

Couleur : Perception visuelle des couleurs, influencée par la nature de l’objet, la lumière, et l’œil.

Teinte : La couleur elle-même (rouge, vert, bleu, etc.), définie par le pigment ou le mélange de couleurs de base.

Ton : Variations d’une même couleur, éclaircie ou foncée avec du noir ou du blanc.

Nuance : Couleur obtenue en mélangeant une teinte pure avec une de ses voisines.

Valeur : Caractère clair ou foncé d’une couleur.

Saturation : Pureté d’une couleur. Désaturation par ajout de blanc, noir, gris, ou couleur complémentaire.

Camaïeu / harmonie ton sur ton : Utilisation de plusieurs tons clairs ou foncés d’une seule couleur.

Harmonie de nuances : Ajout de nuances de couleurs voisines à une couleur de base.

Quadrichromie / CMJN : Mode colorimétrique pour l’impression, utilisant Cyan, Magenta, Jaune, et Noir.

RVB : Mode colorimétrique pour écrans, combinant Rouge, Vert, et Bleu. Les couleurs varient selon la configuration de l’écran et diffèrent à l’impression.

Pantone / ton direct : Couleurs normalisées et pré-mélangées, offrant un rendu homogène en un seul passage d’impression.

Agence de communication digitale owmel saint gilles croix de vie Lexique du graphisme et du web 4
Agence de communication digitale owmel saint gilles croix de vie Lexique du graphisme et du web 8

Composition et mise en page

À la française : Format de page vertical, dit aussi « format portrait ».

À l’italienne : Format de page horizontal, dit aussi « format paysage ».

Gris typographique : C’est la couleur que l’œil perçoit lorsqu’il rencontre un bloc de texte, ou plutôt l’impression produite sur l’œil lorsqu’on additionne le blanc des espaces et la couleur des mots. Plissez les yeux pour vous rendre compte du flou et donc de l’espace que prend un texte sur une page. S’il y a trop de taches sombres ou trop de blanc, c’est que le gris n’est pas harmonieux, il faut donc améliorer l’homogénéité du pavé de texte pour que la lecture soit fluide.

Chemin de fer : Vue d’ensemble d’un ouvrage éditorial (livre, magazine, journal, brochure,…) page par page, à échelle très réduite, pour se rendre compte de la mise en place des éléments qui composeront votre support.

Imposition : Opération qui consiste à placer les pages d’un document éditorial dans la disposition conforme pour que, une fois le papier plié, les pages (folios) se succèdent dans le bon ordre.

Folio : Numéro des pages d’un support (livre, magazine, journal, brochure,…).

Grille de mise en page : Canevas pour élaborer une page, aidant à répartir l’espace et l’interlignage.

Blanc tournant : Espace vide autour d’un visuel ou texte pour structurer la page et les relations entre les éléments.

Petit / Grand fond, Tête / Pied : 

  • Petit fond : espace entre le texte et le pli central.
  • Grand fond : espace entre le texte et le bord extérieur.
  • Tête : espace entre le texte et le bord haut.
  • Pied : espace entre le texte et le bord bas.

Traits de coupe : Repères permettant à l’imprimeur de couper correctement le support.

Fond perdu : Marge (3 à 5 mm) à l’extérieur du format fini où le contenu déborde pour éviter un liseré blanc en cas de décalage à la coupe.

Image

Accroche : Titre ou en-tête d’un texte, mise en avant pour capter le lecteur sur le contenu qui suit le texte.

Chapeau : Paragraphe d’introduction, généralement placé après le titre et avant le texte courant.

Agence de communication / publicité : Entreprise spécialisée dans la communication. Elle se charge de la conception et création des identités graphiques, des supports de communication ou encore des sites web pour un client (entreprise, auto-entrepreneur, services…). Elle est souvent composé de plusieurs domaine d’activité : Directeur artistique, graphiste, webmaster, développeur, photographe, vidéaste…

Freelance / indépendant : Professionnel (graphiste,photographe, webdesigner, illustrateur,…) qui travaille à son compte. Il n’est pas employé ou salarié d’une entreprise et n’est pas lié à un client particulier. Il travaille à la commande auprès de plusieurs clients et décide de ses conditions de travail.

Agence de communication digitale owmel saint gilles croix de vie Lexique du graphisme et du web 7
Agence de communication digitale owmel saint gilles croix de vie Lexique du graphisme et du web 5

Web

Nom de domaine : Le nom de domaine est l’adresse de votre site sur le web (exemple : owmel.fr). C’est la première étape indispensable pour créer votre site web. Il permet de vous retrouver sur internet et est unique. 

Hébergement : Pour rendre accessible votre nom de domaine, il est nécessaire de l’héberger sur internet grâce à un hébergement. Un site internet se définit par des fichiers : fichiers de codes, d’images, de sons, de vidéo… L’hébergement de votre site internet correspond tout simplement aux serveurs qui stockent ces fichiers.

CMS : « Content Management System », logiciel de gestion des contenus web permettant de créer, gérer et mettre à un jour un site Internet. Par exemple, notre agence Owmel utilise le CMS « WordPress ». Utilisé à 80% par les webdesigner, c’est un logiciel très intuitif et facilement administrable par vos soins.

Base de Données :  C’est une « bibliothèque digitale » qui stocke l’ensemble des données de votre site web. Elle est essentielle à la création d’un site web. 

Cookies : Désignent les fichiers stockés ayant pour objectif de voir les habitudes de navigation des utilisateurs. Ils permettent d’analyser les statistiques du site (nombre d’utilisateurs qui accèdent au site, le nombre de pages visitées, fréquence, durée…) dans le but d’améliorer la performance du site. N’ayez crainte, ils ne sont en aucun cas méchants 🙂 

Cache : On vous demandera souvent de penser à « vider les caches« . Votre navigateur a une mémoire, il enregistre les dernières données de la page. C’est donc pour cela que parfois, vous ne voyez pas vos dernières modifications (oui c’est très agaçant!). Mais ne vous inquiétez pas, la page s’affichera correctement pour un nouvel utilisateur. Vous trouverez toutes les astuces ici pour vider vos caches ! 

Pop-up : Petite fenêtre qui apparaît sur l’écran de l’utilisateur à l’ouverture d’un site web. Ils sont généralement installés temporairement, pour annoncer une nouveauté ou un événement.  

Responsive design : Cela consiste à rendre un site internet accessible et adaptable à tous les formats d’appareils ( PC, tablette ou smartphone). 

Référencement

Fiche Google MyBusiness : C’est le petit encart qui apparait en premier lorsque vous lancez votre recherche. C’est un outil gratuit et indispensable pour améliorer votre visibilité sur Google. Il permet d’informer les petits robots Google que vous existez, grâce à cela, ils pourront faire le lien entre votre fiche MyBusiness et votre site web. Dans un premier temps, pensez à bien remplir votre fiche avec toutes les informations nécessaires. Ensuite, demandez des avis, ils vous permettront de remonter dans les résultats de recherche.

SEO : Le « Search Engine Optimization » (Référencement Naturel), permet de positionner une page ou un site web le plus haut possible dans les pages de résultats des moteurs de recherche (Google, Yahoo, Baidu, Yandex…), juste après les résultats  « Google MyBusiness ».  Le SEO est le contraire du SEA car le positionnement atteint sur la page des résultats s’obtient sans publicité.

SEA : Le « Search Engine Advertising » (Référencement Payant) est une technique de référencement payante permettant d’être tout en haut des moteurs de recherche avec la petite mention « Annonce ». Cependant, avant de penser au référencement payant, il est nécessaire de mettre en place un référencement naturel (SEO) optimal. Si la base de votre site web n’est pas correctement optimisée, votre référencement payant ne sera pas rentable.

 

Agence de communication digitale owmel saint gilles croix de vie Lexique du graphisme et du web 6

Alors, il y a d’autres termes que vous ne connaissez pas ?