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. Lire la définition complète…
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. Lire la définition complète…
