Le vocabulaire du webdesign

Le vocabulaire du webdesign

Le vocabulaire du webdesign 2000 1250 TYPY

Le webdesign et les métiers du web utilisent souvent un vocabulaire que seuls les initiés comprennent : CSS, header, wireframe, favicon… Voici une sélection de mots bien utiles pour comprendre un webdesigner quand il parle.

A

Antialiasing

L’anticrénelage (en bon français) est une technique permettant de réduire l’effet de pixellisation d’un caractère à l’écran. Si une typo vous paraît floue à l’écran, c’est que l’antialiasing n’a pas été activé.

Arborescence

Organisation schématique et hiérarchique des différentes pages d’un site. L’arborescence permet d’avoir une vue générale de la navigation sur un site.

B

Bannière

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.

Baseline

Phrase simple et courte, résumant à elle seule la fonction ou l’activité générale du site. Cette baseline est généralement placée, en gros, sur la home page du site, bien en évidence au-dessus de la ligne de flottaison.

Brief

Document de travail, en général rédigé par le commanditaire d’un projet, qui définit tous les contours de sa commande : contexte, particularités et objectifs du projet (et parfois même, budget !). Ce document est extrêmement précieux pour les agences, puisqu’il permet de cadrer au mieux la demande et d’éviter les hors-sujet.

C

Call-to-action

Le CTA est un bouton dont la fonction principale est d’inciter au clic.

Charte graphique

Document contenant toutes les exigences graphiques liées à une marque et devant être respectées, par exemple, dans la création d’un site web. On y trouvera les typographies, les couleurs, le logo et ses variantes, et parfois des exemples d’images et d’icônes à utiliser.

CMS

Un CMS (« Content Management System ») est, comme son nom l’indique en anglais, un système de gestion de contenu, permettant de gérer des sites complets. Exemple de CMS : WordPress, Drupal, Magento…

CSS

Acronyme de « Cascading Style Sheets », le CSS est un format de fichier contenant toutes les information de style d’un site web.

E

Em

Le « em » est une unité de mesure de typographie, comme le pixel ou le point. Sa 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.

Ergonomie

Plus un site ou une application est ergonomique, plus le parcours utilisateur y est facilité. C’est en partie le travail de l’UX designer de rendre une interface web la plus ergonomique possible.

F

Favicon

Le favicon (« favorite icon ») est un logo miniture permettant d’identifier facilement un site sur les onglets d’un navigateur.

Footer

Le footer, ou « pied de page » en français, désigne la zone la plus basse d’un site. On y retrouve généralement le menu détaillé.

G

Gabarit (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. Contrairement aux sites statiques, les sites dynamiques construits sur des CMS utilisent un certain nombre de gabarits standards qu’un webdesigner devra designer, quoiqu’il arrive. Ces gabarits sont, par exemple : une page type, la liste des articles, un article seul, la liste des items de portfolio, un item de portfolio seul, etc.

H

Header

En-tête d’un site, où l’on placera généralement le logo et le menu. On peut également créer un pré-header, qui se placera comme son nom l’indique, au-dessus du header

L

Ligne de flottaison

Limite théorique de visibilité dans une page. Au-delà de cette ligne, l’utilisateur doit scroller pour afficher le contenu. En webdesign, il est important de bien définir la ligne de flottaison d’un site (« page fold » en anglais), pour bien placer les éléments les plus importants dans la partie visible des pages du site.

M

Mock-up

Un mock-up est une maquette graphique simplifiée d’une page web. On n’utilise plus trop le terme, qu’on remplacera par les termes plus précis de « wireframe » (vue schématique d’une page) et « gabarit » (maquette standardisée d’une page).

P

Pictogramme

Représentation graphique minimaliste et porteuse d’un sens unique et aisément compréhensible. En webdesign, le choix ou la création d’un « set de pictos » cohérent graphiquement est très important, puisqu’il permet d’informer ou d’orienter rapidement l’utilisateur.

Pixel

Un pixel (souvent abrégé en « px ») est le plus petit élément d’une image numérique et permet d’en déterminer la résolution. Un pixel permet de créer une couleur, à partir de trois composants diffusant les couleurs primaires rouge, vert et bleu (RVB, ou « RGB » en anglais).

PSD

Acronyme de « PhotoShop Data », le PSD est un format propriétaire d’Adobe permettant d’enregistrer des compositions réalisées avec le logiciel Photoshop. Ce format permet notamment de conserver tous les calques d’une image. Initialement très utilisé pour créer des designs de sites web et d’applications, Photoshop est de plus en plus remplacé aujourd’hui par des logiciels plus spécialisés et plus adaptés au webdesign, comme Adobe XD, Sketch ou Figma.

R

Responsive design

Le responsive design permet d’adapter un design de site web aux différentes tailles et résolutions d’écrans, comme les écrans d’ordinateurs, tablettes, téléphones…

Résolution

La résolution est la finesse de rendu d’un élément graphique sur un écran. 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.

Retina

Le retina est un type d’écran lancé par Apple et présentant une résolution très élevée. Ces écrans, composés en général de deux fois plus de pixels que les écrans traditionnels (donc d’une densité de pixels deux fois plus importante), nécessitent de créer des éléments graphiques adaptés, notamment des images deux fois plus grandes (@X2) pour qu’elles n’apparaissent pas floues sur ces écrans.

Rollover

Effet de texte ou d’image apparaissant au survol d’une zone d’une page web avec le curseur de la souris.

RVB

Le RVB (ou « RGB » en anglais), abréviation de Rouge, Vert et Bleu, est le principal système informatique de couleur. Les écrans, grâce aux pixels (eux-mêmes une combinaison de ces trois couleurs), reconstituent une couleur par synthèse additive de ces trois couleurs projetées. Chaque pixel crée ainsi une couleur unique en combinant des pourcentages

U

UI

L’UI (pour « User Interface ») désigne le lien entre l’homme et les machines, 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 l’accès aux contenus.

UX

L’UX (pour « User experience ») regroupe le travail sur l’expérience générale vécue par l’utilisateur d’un site web ou d’une application. L’UX designer devra donc prendre en compte aussi bien la dimension fonctionnelle d’une interface que sa dimension affective.

V

Vectoriel

Une image vectorielle est une image numérique composée d’éléments graphiques ne se dégradant pas lorsqu’on l’agrandit. Elle diffère en cela d’une image matricielle (JPEG, PNG…) qu’elle n’est pas composée de pixels, mais de formes et de couleurs. 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.

W

Wireframe

Un wireframe est la maquette fonctionnelle d’un site ou d’une application. Créés en amont des maquettes graphiques, les wireframes permettent de définir la structure générale des pages sous forme schématique. Nous recommandons l’application en ligne Moqups.