Le langage du webdesigner

25 Jan 2023 | WEBDESIGN

Le graphisme est une discipline très large qui regroupe beaucoup de termes qui lui sont propres. Souvent méconnus ou même confondus, certains termes méritent d’être précisés pour mieux comprendre le domaine, mais surtout pour faciliter la communication et la compréhension client/graphiste.
Pour cela, je vous ai concocté un lexique regroupant plusieurs termes techniques. Il sera régulièrement mis à jour avec de nouvelles définitions, alors si des termes te manquent, n’hésite pas à me les soumettre, je les ajouterai.

Deux options pour parcourir cet article :

– Une lecture par catégorie

1. Types de sites internet

2. Étapes de conception d’un site

3. Composition et mise en page

4. Design d’un site

5. Développement d’un site

6. Marketing digital

7. SEO et référencement

8. Publicité et analyse du trafic

– ou une consultation par ordre alphabétique 

1. Types de sites internet

Blog : 

Un blog est un site internet ou une section d’un site internet qui a pour objectif la publication régulière d’articles. Ces articles sont composés de contenus visuels et textuels sur un sujet, une cause, une entreprise, une marque, etc.
Le blogging est l’un des concepts de l’inboud marketing, car il permet de mettre en avant du contenu utile et informatif à l’utilisateur afin de générer des leads et du trafic sur son site.
C’est aussi un outil précieux en termes de référencement naturel (SEO) avec la rédaction d’articles optimisés à base de mots clés recherchés par son audience.

Site vitrine : 

À l’inverse du site marchand, le site vitrine ne propose pas de vente en ligne. Il s’agit d’un site internet qui se résume à la présentation d’une entreprise, une organisation, un produit, ou autre.

Site marchand / Site e-commerce : 

Un site marchand, aussi appelé site e-commerce, est un site permettant à une entreprise la vente de ses produits et services en ligne.

Site statique : 

Un site statique est constitué de pages HTML avec du contenu fixe : les pages s’affichent telles qu’elles ont été conçues.

Site dynamique : 

Un site dynamique est stocké dans une base de données et s’affiche de différentes manières selon les internautes. Ces sites sont gérés par un CMS. C’est ainsi le cas de la plupart des sites e-commerce, qui présentent différents produits selon les interactions des visiteurs.

Landing page : 

Page web d’atterrissage après un clic sur un lien placé dans une publicité le plus souvent. La landing page a souvent vocation à inciter à l’action (achat, prise de contact, inscription, etc.).

2. Étapes de conception d’un site

Cahier des charges / Brief : 

Document détaillé qui rassemble les demandes et besoins du client. Le cahier des charges va donc définir l’orientation à prendre pour la conception d’un site internet. Il regroupe des renseignements sur le type de contenu textuel et visuel, les fonctionnalités du site, ses objectifs, ainsi que tout élément technique à prendre en compte, et évoque parfois même un budget ! Il définit les contraintes et permet d’éviter au prestataire de s’engager la mauvaise direction. C’est un document primordial pour une bonne relation client/webdesigner.

Zoning : 

Étape préalable à la création de la maquette d’un site internet, le zoning correspond à la découpe l’interface en types de zones de contenus pour établir les premiers niveaux de lecture.

Wireframe : 

Etape suivant le zoning et précédant la maquette graphique, le wireframe est une représentation schématique des grandes lignes d’un site internet permettant de définir l’emplacement des éléments (images, texte, video, formulaire, etc.).

Maquettage / Maquette : 

Prototype d’un site qui permet de visualiser son esthétique globale et son rendu final. La maquette représente de manière détaillée l’ensemble des contenus, rubriquages et fonctionnalités présentes sur une page. Elle peut utiliser du faux texte (Lorem ipsum) et de fausses images. Elle vise à donner l’impression graphique d’ensemble du projet final avant son intégration.

Intégration / Développement : 

L’intégration d’un site internet, aussi appelé développement, est la dernière phase de conception d’un site internet qui vise à donner vie au maquettage. Il s’agit de transformer le contenu graphique en ligne de codes, par l’intermédiaire d’un CMS ou de langages informatiques comme HTML, CSS, Javascript, etc.

3. Composition et mise en page d’un site internet

Arborescence / Architecture : 

Schéma représentant l’organisation hiérarchique des différentes pages d’un site. Aussi appelé architecture, l’arborescence permet d’avoir une vue générale de la navigation sur un site. Une bonne arborescence permettra à l’utilisateur d’avoir un accès simple et rapide à l’information qu’il cherche : un des critères de l’ergonomie d’un site.

Formulaire : 

Ensemble de champs permettant à l’utilisateur de communiquer des informations avec un site internet. Ils peuvent prendre la forme d’un contenu textuel, de numéros, d’adresse mail, de date, de liste déroulante, d’un contenu multimédia, etc. Côté éditeur du site, l’objectif est de générer des leads et recueillir des informations sur le prospect.

CTA (call to action) : 

Un CTA (call to action) se traduit en français par Bouton d’Appel à l’action. Il s’agit d’un élément visuel (lien, bouton ou visuel) incitant l’internaute à réaliser une action (clic, inscription, formulaire, etc.) L’objectif est de maximiser l’engagement du visiteur.

Favicone : 

Toute petite icône apparaissant à gauche de l’onglet dans un navigateur web avec le titre du site. Il permet d’identifier un site plus facilement et d’associer une image représentative à la marque.

Icône / Pictogramme : 

Représentation graphique minimaliste et porteuse de sens et aisément compréhensible. En webdesign, on utilisera des pictogrammes pour faciliter la lecture visuelle du contenu d’un site internet afin d’orienter rapidement l’utilisateur.

Bannière : 

Bandeau, image fixe ou animée présentant un contenu publicitaire. Le but principal d’une bannière est, bien sûr, de recevoir le plus de clics. Ces bannières permettent aux sites de se financer et donc de percevoir un revenu de la part de l’annonceur.

WEBP : 

Format spécifique d’image créé par Google dans le but de remplacer les différents formats d’images standard : jpeg, jpg, png, gif, tiff… pour un site internet. L’objectif est de conserver une bonne qualité d’image tout en réduisant leur poids afin d’optimiser la vitesse de chargement d’un site internet.

Optimisation poids des images : 

Lors de la création d’un site internet l’étape d’optimisation du poids des images est primordiale. Plus les images d’un site internet seront optimisées en termes de compression et de format de fichier, plus le site en question se chargera rapidement tout en maintenant un affichage de qualité. Ce critère joue aussi sur le référencement naturel (SEO) du site.

Texte de substitution / Lorem ipsum

Faux texte utilisé dans un visuel à la place du texte final permettant de simuler sa position dans la conception d’un projet, la création d’une maquette. Il s’agit de faux latin tiré de « Des vrais Biens et des vrais Maux », écrit par Cicéron en 45 avant J-C. Il a l’avantage de n’être pas compréhensible, ce qui évite à l’œil d’être déconcentré par le contenu.

Couleurs froides : 

Par opposition avec les couleurs chaudes, les couleurs froides contiennent du bleu. On retrouve le vert, le bleu et le mauve. Elles inspirent plutôt le calme, la sérénité, la fraîcheur.

4. Design d’un site

Webesign : 

Domaine de la conception d’interfaces web consistant à structurer les éléments graphiques d’un site.

UX (User Experience) : 

Le terme UX vient de l’anglais « user experience » qui se traduit par « expérience utilisateur » en français. Le travail de l’UX designer consiste à concevoir une interface accessible et facile à prendre en main pour tout type de support. Il doit permettre d’améliorer le ressenti des utilisateurs à l’utilisation de l’interface comme par exemple avec la facilité d’utilisation, l’accessibilité, l’esthétisme, la rapidité de chargement, etc.

UI (User Interface) : 

Le terme UI est l’abréviation de « user interface » en anglais qui désigne « l’interface utilisateur » en français. Il s’agit d’une composante de l’UX. Le rôle de l’UI designer consiste à concevoir une interface agréable par le biais duquel l’utilisateur entre en contact avec le produit. L’UI design est chargé du respect de l’identité visuelle et de l’aspect esthétique de l’interface comme par exemple le choix des couleurs, les caractères typographiques, le design des boutons de navigation, leur disposition, etc.

Ergonomie : 

Plus un site est ergonomique, plus le parcours utilisateur y est facilité. Le visiteur est conduit rapidement et naturellement vers l’information qu’il cherche tout en lui offrant un confort de navigation. C’est, en partie, le rôle de l’UX design.

Ligne de flottaison : 

Limite sur un site à partir de laquelle le visiteur est obligé de scroller pour voir le reste du contenu. Le contenu de la page au-dessus de la ligne de flottaison doit donc être optimisé qualitativement pour inciter l’utilisateur de consulter le reste du contenu du site.

Scroll : 

Action de dérouler une page internet, avec sa souris sur ordinateur ou avec un doigt sur écran tactile.

Responsive design : 

Le responsive design, qui peut être traduit comme “design réactif/adapté”, permet à l’utilisateur de consulter le contenu d’un site internet ou d’une application sur tous types d’écrans : ordinateur, tablette, téléphone, TV connecté, etc. Il s’agit de l’adaptation du contenu textuel et visuel à la largeur et la résolution de l’écran.

Mobile first : 

Méthode de conception qui privilégie la conception da la version mobile d’un site dans un premier temps, puis son adaptation progressive à des écrans plus larges. Traditionnellement, le concept inverse est le plus souvent appliqué, c’est-à-dire décliner progressivement un site web pour l’adapter à un affichage sur des écrans plus petit.

Em : 

Comme le pixel ou le point, le “em” est une unité de mesure de typographie, qui a la particularité d’être relative et non fixe. Elle permet donc d’adapter sa taille relativement aux résolutions et aux tailles d’écran et est donc utilisé en responsive design.

5. Développement d’un site

HTML : 

Acronyme de l’anglais « Hypertext Markup Language », le HTML est un langage informatique permettant de structurer le contenu d’un site (titres, sous-titres…), d’habiller de texte (images, légendes, etc.) et d’insérer des liens hypertextes. C’est un langage composé de balises <> qui viennent encadrer du contenu.

CSS : 

Le CSS est un code/langage informatique qui sert à déterminer l’apparence d’un site internet, indépendamment de son contenu, qui est lui déterminé par le code informatique HTML.

Javascript : 

Langage de programmation de scripts qui permet la mise en place de divers effets ou modifications du contenu alors que les utilisateurs le consultent.

CMS : 

Un CMS, issu de l’anglais “Content Management System”, est un système de gestion de contenu. Il s’agit d’un éditeur de contenu grâce auquel il est possible de créer, gérer et modifier facilement un site internet, sans avoir besoin de connaissances techniques en langage informatique. WordPress, Joomla, Shopify, Drupal, Magento… sont les plus populaires du marché.

WordPress : 

WordPress est un CMS gratuit et open source permettant de créer des sites internet complets et variés reposant sur une base de données MySQL. Les sites développés avec WordPress représentent plus de 43% des sites dans le monde.

Base de données : 

Tout CMS utilise une base de données pour stocker le contenu des pages d’un site dynamique. La base de données la plus utilisée est la MySQL, car il s’agit en effet de la plus rapide.

Extension / Plugin : 

L’extension ou plugin est un programme informatique ayant pour but de compléter un logiciel afin de lui apporter de nouvelles fonctionnalités. Il en existe de nombreuses s’associant à des CMS pour apporter de nouvelles solutions en termes de référencement, sauvegarde, sécurité, personnalisation, etc.

Thème / Template : 

Un template, est un modèle de site internet déjà pré-fait qui n’a plus qu’à être installé sur un éditeur de contenu (CMS). Il s’agit d’un design de site qui définit l’habillage et la position des éléments tout en homogénéisant les différentes pages du site. Pour un webdesigner, ces templates sont utilisés comme des gabarits personnalisables permettant de construire un site internet.

Gabarit / Modèle : 

Modèle de mise en page, d’images et de textes, qui pourra être réutilisé pour plusieurs pages d’un site afin d’en faciliter le développement. Les CMS utilisent un certain nombre de gabarits standards qu’un webdesigner pourra personnaliser comme par exemple une page de contact.

Hébergement : 

Un hébergement désigne la mise à disposition d’un espace de stockage (sur le web) pour la publication de sites internet afin de pouvoir le consulter par tout et à tout moment grâce à un serveur connecté à Internet 24h/24.
De tels serveurs sont généralement mis à disposition par des prestataires d’hébergements professionnels, bien qu’il soit possible d’héberger soi-même son site internet. Il existe plusieurs types d’hébergements pouvant aller de 3€/mois à plusieurs centaines d’euros/mois.

Nom de domaine : 

Tout site internet est rattaché à un nom de domaine. Il s’agit d’une adresse grâce à laquelle les utilisateurs trouvent le site internet, un peu comme une adresse postale. Un nom de domaine est donc indispensable lors de la création de votre site. Il permet aussi la personnalisation de votre adresse mail.

Front-office / Interface : 

Partie visible d’un site, que l’internaute voit sur son écran, et qui permet au système et à l’internaute un échange réciproque d’informations. À ne pas confondre avec le back-office.

Back-office : 

Le terme de back-office désigne l’interface permettant de gérer le contenu d’un site dynamique. Bien souvent édité par un CMS, le back-office est la coulisse où travaillent les administrateurs de site web, les webmasters, en opposition au front-office.

6. Marketing digital

Inbound marketing :

L’inbound marketing est une stratégie de contenu marketing qui a pour but d’attirer des visiteurs sur un site internet afin de les convertir en leads puis en clients. Grossièrement, l’objectif de l’inbound marketing est de livrer un contenu de valeur à la bonne audience en lui fournissant des informations pertinentes durant les différentes étapes du cycle de vie d’un achat. Il prend la forme d’articles de blog, de vidéos, de posts sur les réseaux sociaux, de photos, de présentations, e-book ou encore de podcasts permettant au visiteur de s’engager et de partager.

Lead : 

Un lead correspond à un contact d’un client potentiel, également appelé prospect. En inbound marketing, la génération de leads est une technique qui fait partie du chemin de conversion dans le but de conclure des clients.

Chemin de conversion :

Un chemin de conversion regroupe une série d’évènements sur un site internet qui facilitent la capture de leads. Par exemple : Un CTA (bouton décrivant une offre), mène à une page de destination comportant un formulaire (pour capturer le lead), qui mène à une page de remerciement offrant du contenu qui l’aidera au cours d’un processus d’achat (e-book par exemple).

E-book / Livre blanc  :

Le livre blanc, aussi appelé e-book, est un type de contenu utilisé en marketing pour générer des leads. Généralement, il s’agit de documents numériques téléchargés en contrepartie d’un formulaire permettant de recueillir des informations sur le prospect. Exemple : livre de recette, tuto, etc.

Newsletter / E-mailling :

Une newsletter, aussi appelé e-mailling ou lettre d’information, permet à une entreprise de diffuser largement des informations par courrier électronique à une liste de diffusion. Cette liste de diffusion correspond à un ensemble de destinataires qui souscrivent à l’envoi d’e-mails volontairement.

7. Formats de fichier

Format de fichier :

Le format d’un fichier désigne la nature d’un document informatique et permet d’identifier le ou les logiciels nécessaire(s) à sa lecture. Chaque fichier porte une extension (généralement entre 2 et 4 lettres) située à la fin de son nom. Exemple : MP3 est un format pour les musique, son extension sera .mp3 et le fichier pourra s’appeler fichier.mp3.

JPG / JPEG :

Acronyme signifiant Joint Photographic Experts Group. Format de fichier d’image compressée (qui se charge rapidement) pouvant utiliser l’extension .JPEG ou .JPG. À privilégier pour le web et les écrans, mais pas pour les impressions.

PNG :

Acronyme signifiant Portable Network Graphics. Format d’image numérique qui permet d’afficher de la transparence en cas d’absence de fond, principalement utilisé sur le web.

GIF :

Acronyme signifiant Graphics Interchange Format. Format d’image permettant de créer des images animées et/ou à fond transparent.

PDF :

Acronyme signifiant Portable Document Format. Format de fichier compressé permettant une fiabilité certaine de la colorimétrie utilisée dans le document et de sa mise en page.

AI :

Les fichiers au format .ai sont ceux créés avec le logiciel Adobe Illustrator. Ils peuvent être édités avec ce logiciel ou ceux de la suite Adobe et sont composés de vecteurs.

PSD : 

Extension des fichiers créés sous Adobe Photoshop. Ils peuvent toutefois être édités dans d’autres logiciels comme GIMP (alternative gratuite à Photoshop).

EPS : 

L’extension .eps est celle d’un fichier Adobe composé d’images vectorielles ou bitmap. On peut créer un fichier .EPS à l’aide d’Adobe Illustrator ou Adobe Photoshop par exemple. C’est le format à privilégier pour l’impression d’une image (avec le format .TIFF).

ZIP :

Format de fichier permettant la compression d’un ou plusieurs fichiers, ce qui réduit leur taille globale et facilite leur transfert. 

Parcourez d’autres articles :