Les graphistes possèdent leur propre langage. Si vous faites appel à un designer, vous avez tout intérêt à connaître les rudiments de la terminologie spécialisée pour mieux communiquer vos besoins et obtenir un résultat d’autant meilleur. (Promis, ce n’est pas aussi compliqué que le chinois !)

Lisez les différents termes listés dans cet article, étudiez-les et apprenez-les par cœur. Euh… bon d’accord c’est beaucoup trop de travail ! Contentez-vous de garder cette page sous le coude et de vous y référer chaque fois que nécessaire.

Le design : les bases

Réalisé par robbyprada

Composition et mise en page

La composition correspond à l’agencement des différents graphiques qui forment une image. Une composition réussie attire l’œil et guide notre regard sur la page. Dans le monde de l’art visuel, on emploie souvent le terme « forme » pour parler de composition. En design graphique, on parle de mise en page (ou layout, en anglais). La composition d’un design est constituée d’un certain nombre d’éléments visuels, tels que l’équilibre, la proximité, l’alignement, la répétition, le contraste et l’espace blanc.

Équilibre

Il ne s’agit pas de votre capacité à marcher sur les mains après avoir bu quelques bières. En design graphique, on parle d’équilibre à propos de l’agencement des éléments d’une page, lorsque le texte et les éléments visuels sont bien répartis. Il existe trois manières d’atteindre ce fameux équilibre : symétrique, asymétrique et radialement.

Symmetrical logo by Mad pepper
Asymmetrically balanced logo by artsigma
Radially symmetrical logo by stevanga

Symétrique

On parle de symétrie lorsque tous les éléments de design sont répartis de manière égale d’une part et d’autres d’un axe central.

Asymétrie

Lorsque les éléments graphiques et le texte ne sont pas répartis à parts égales autour d’un axe central, le design est dit asymétrique. Dans l’exemple ci-dessus, l’équilibre existe toujours, mais le texte se trouve d’un côté de l’axe tandis que le visuel se trouve de l’autre.

Symétrie radiale

On parle de symétrie radiale lorsque les éléments d’un design sont disposés selon les rayons d’un point central, de sorte à atteindre un certain équilibre visuel.

Proximité

Il s’agit de la manière dont les éléments graphiques sont regroupés, ou au contraire espacés, sur une page. Les bons designs rassemblent les éléments similaires entre eux.

Alignement

L’alignement correspond à la position du texte ou des éléments graphiques (gauche, droite, centre ou justifié).

Répétition

Pour maintenir un aspect unifié, les graphistes utilisent certains éléments plusieurs fois dans le même design. (On pense aussi au nombre de fois qu’un enfant de cinq ans vous supplie de lui donner des biscuits pour le dîner, mais c’est une autre histoire.)

Contraste

Il y a contraste lorsque que l’on ajoute des éléments considérablement différents des autres éléments au sein d’un même design. Le contraste peut se faire au niveau de la couleur, de la forme, du texte, de la taille ou de la typographie.

Espace négatif

L’espace négatif (ou espace blanc) correspond aux espaces d’une page où aucun texte ou image n’apparaît.

rule of thirds

Règle des tiers

Il s’agit d’une technique que les graphistes utilisent pour déterminer le point de force d’un design. On dessine une grille de neuf cases (trois colonnes et trois lignes) et les points de force se trouvent aux quatre intersections des lignes. Les graphistes s’en servent de guide pour déterminer l’emplacement des éléments importants sur la page.

Grille

Une grille est une série de lignes verticales, horizontales, angulaires ou courbes, se croisant, utilisée pour agencer les éléments graphiques sur une page ou les uns par rapport aux autres.

Hiérarchie

En design, on parle de hiérarchie pour décrire l’organisation des éléments par degré d’importance. Cet aspect du design est particulièrement visible dans les journaux, les magazines ou encore sur les affiches : les gros titres sont généralement placés en haut de page, tandis que le corps du texte est disposé en dessous.

boy and giraffe

Échelle

L’échelle correspond à la taille d’un objet par rapport à un autre objet. On peut par exemple jouer sur l’échelle pour attirer le regard sur un élément précis d’un design.

Aperçu

Au cours de la phase de conceptualisation, les graphistes réalisent souvent de petits dessins (ou aperçus) pour présenter différentes idées.

Maquette

Une maquette peut être soit numérique, soit concrète/tangible. On crée une maquette pour pouvoir tester ses idées au cours des premières phases de développement afin de se rendre compte de leur efficacité « en vrai .»

Illustration  & photographie

Résolution

La résolution d’une image correspond au nombre de pixels qui la constituent. Plus la résolution est grande, plus l’image est nette.

PPP (ou DPI)

PPP signifie Point Par Pouce (ou DPI en anglais, pour Dots Per Inch). Il s’agit d’une unité servant à mesurer la qualité d’impression d’un document. Pour une impression haute définition, on recommandera 300 dpi. Par exemple, une image à 300 dpi de 1200×1800 pixels aura une taille de 4×6 pouces une fois imprimée (soit 10×15 cm).

ppp (ou PPI)

L’acronyme ppp (en minuscules, à ne pas confondre avec PPP en majuscules !) signifie Pixel Par Pouce. L’appellation anglaise PPI (ou Pixel Per Inch) est également couramment utilisée. Il s’agit d’une unité servant à mesurer la densité en pixels d’une image numérique. Ce terme est largement employé sur les notices d’appareils photo numériques, scanners, écrans d’ordinateur ou encore télévision. En savoir plus sur la différence entre DPI (PPP) et PPI (ppp).

bleed and trim

Fond perdu

On utilise le terme de fond perdu pour décrire la zone de sécurité où le design est toujours présent, bien qu’en dehors de la zone d’impression. Le fond perdu permet d’éviter d’avoir des bandes blanches autour du design après impression et découpe.

Découpage

La taille de découpe correspond à la taille finale d’un document après qu’il ait été imprimé et qu’on ait coupé les bords de la page. La découpe s’effectue le long des « tracés de découpe ».

Pixels

Les pixels sont des petits carrés qui constituent une image numérique raster. Plus une image contient de pixels, plus elle est de bonne qualité/résolution.

Recadrage (ou rognage)

Un graphiste peut parfois rogner une image pour supprimer les zones inutiles. L’objectif est d’améliorer le cadrage de l’image, de modifier son rapport de format ou de mettre en valeur un élément particulier.

Banque d’images

Les images provenant des banques d’images en ligne ont été créées par un tiers et sont assujetties aux copyrights. L’utilisation de ces images évite d’avoir à faire appel à un photographe professionnel. Lisez cet article pour voir où trouver les meilleures images gratuites en ligne.

Typographie

Types  de polices

La plupart des polices de caractères font partie de l’une des quatre grandes familles de polices.

serif
sans serif
script
slab serif

Sérif

Les sérifs sont les petites lignes et boucles au bout des traits principaux de certaines lettres.

Sans sérif

Comme son nom l’indique, une police « sans sérif » n’a aucune lettre comprenant des sérifs.

Script

Les polices script ont un aspect naturel, inspiré de l’écriture manuscrite.

Égyptienne (ou mécane)

Ces polices-là sont caractérisées par l’épaisseur conséquente des sérifs.

Composition des polices

Toutes les polices de caractères sont constituées des mêmes éléments de base.

parts of typography

Hampe

La hampe est la partie d’une lettre minuscule qui dépasse le corps de la lettre au-dessus de la ligne de pied, comme c’est le cas pour les lettres b et h, par exemple.

Ligne de pied

Tous les caractères reposent sur la ligne de pied (parfois nommée ligne de base). La ligne de pied correspond au point le plus bas de toutes les majuscules et de la plupart des minuscules.

Jambage

Le jambage est la partie d’une lettre minuscule qui dépasse le corps de la lettre sous la ligne de pied, comme c’est le cas pour les lettres g et p, par exemple.

Hauteur d’x

La hauteur d’x correspond à la hauteur maximum de la plupart des lettres minuscules. Cette valeur est déterminée pour chaque police par la hauteur de la lettre x.

Interlettre

Il s’agit de l’espacement vertical et horizontal d’une police. L’interlettre est souvent modifiée pour changer l’apparence de la police.

kerning leading tracking

Crénage

Le crénage correspond à l’ajustement de l’espace qui sépare deux lettres dans un même mot. Certaines lettres, lorsqu’elles sont mises l’une à côté de l’autre, créent un espace peu naturel à l’œil. On modifie alors le crénage pour élargir ou réduire cet espace.

Interlignage

Correspond à l’espace qui se situe entre deux lignes de texte.

Interlettrage

À ne pas confondre avec le crénage. L’interlettrage correspond à l’ajustement de l’espace d’un groupe de lettres ou d’un paragraphe entier. L’interlettrage affecte chaque caractère et est utilisé pour changer l’apparence générale du texte.

écriture bicamérale

Généralement, il existe deux formes pour chaque caractère.

Majuscule

Fait référence aux « grandes » lettres. Également utilisées par les mamans de par le monde POUR VOUS CRIER DESSUS SANS LE VOULOIR PAR TEXTO.

Minuscule

Fait référence aux « petites » lettres.

Petite capitale

Les petites capitales sont des caractères en majuscule qui ont la même hauteur d’x que les minuscules. Les petites capitales sont utilisées pour marquer l’emphase d’un mot sans qu’il ne paraisse plus grand que les autres. Un exemple ? Ouvrez n’importe quel livre et regardez le premier mot d’un chapitre.

Style des polices

Les polices de caractères peuvent également être modifiées en taille, poids et style..

Point (ou taille)

Il s’agit de la taille d’un caractère. On compte environ 72 points (72 272 exactement) dans 2,54 cm (soit un pouce).

Poids

On parle du poids d’un caractère pour faire référence au fait qu’il apparaisse en gras, léger ou normal.

Italique

Lorsqu’un caractère est en italique, il apparaît incliné en l’avant. Cette technique est utilisée pour attirer l’attention sur un mot ou sur une phrase à l’intérieur d’un paragraphe.

 Veuves et orphelines

Les veuves et les orphelines rendent les graphistes très tristes… C’est parce qu’il s’agit des lignes qui ont été séparées de leur paragraphe et se retrouvent seules et isolées en haut ou en bas de la page ou colonne suivante (ou précédente).

Lorem ipsum

Il s’agit d’un faux-texte en faux latin utilisé pour remplir l’espace d’une page où se trouvera plus tard le texte définitif. Le lorem ipsum standard est en faux latin tiré du texte écrit en 45 av J.-C. par Cicéron, Des vrais Biens et des vrais Maux.

Couleur

Théorie des couleurs

La théorie des couleurs rend compte de l’effet des couleurs sur les gens et au sein d’un design. On l’utilise pour explorer les meilleures couleurs pour un projet donné. Par exemple, on pourra choisir une palette pastel pour un rendu doux ou du rouge et du jaune pour un effet dynamisant.

hue
tint
tone
shade

Teinte, ton et nuance

Une teinte est une couleur pure. Un ton est une teinte à laquelle on a ajouté soit du blanc soit du gris. Une nuance est une teinte à laquelle on a ajouté du noir.

Saturation

La saturation correspond à l’intensité des couleurs.

Palette

Une palette est une gamme de couleurs utilisées dans un design. Elles vont bien les unes avec les autres et produisent généralement un effet visuel plaisant. Les graphistes définissent une palette de couleurs pour chaque projet, afin de créer une cohérence visuelle et de susciter un sentiment spécifique.

warm colors
cool colors

 Couleurs chaudes et couleurs froides

Les couleurs chaudes se situent sur la moitié du cercle chromatique (rouges, jaunes, oranges et jaunes). Les couleurs froides se trouvent, elles, sur l’autre moitié (bleus, verts et violets).

Monochromatic palette
Grayscale palette

Monochromatique

Une palette monochromatique repose sur une seule couleur.

Niveau de gris

Il s’agit du nom que l’on donne à une palette monochromatique basée sur la couleur grise.

analogous color scheme
complementary color scheme
triadic color scheme

 Analogues

Il s’agit des couleurs qui se trouvent adjacentes l’une à l’autre sur le cercle chromatique (par exemple, le rouge-violet, le rouge et le rouge-orange sont des couleurs analogues).

Complémentaires

Les couleurs complémentaires se situent à l’opposé les unes des autres sur le cercle chromatique. Lorsque deux couleurs complémentaires sont mises côte à côte, cela crée une tension visuelle, un choc.

Triadiques

Les couleurs triadiques sont trois couleurs séparées à distances égales sur le cercle chromatique. L’une des trois domine, la deuxième soutient et la troisième accentue.

gradient
opacity

Dégradé

On parle de dégradé lorsque l’on passe d’une couleur à une autre de manière progressive. Par exemple, transitionner du bleu au vert graduellement.

Opacité

L’opacité équivaut à la non-transparence. Plus une image est transparente, moins elle est opaque.

cmyk
rgb

CMJN

Il s’agit des quatre couleurs utilisées en l’imprimerie : cyan, magenta, jaune et noir. Ces couleurs ne seront jamais aussi vibrantes sur un écran que sur papier parce que le procédé CMJN créé des couleurs en les additionnant (rendant donc l’image plus foncée), tandis que le procédé RVB utilisé en numérique créé les couleurs en ajoutant de la lumière.

RVB

Acronyme pour Rouge Vert Bleu, soit les trois couleurs généralement utilisées pour reproduire des couleurs sur des écrans numériques.

Pantone

Développé par Pantone Corporation, une entreprise spécialisée dans la couleur, Pantone est le système de mélange de couleurs le plus largement utilisé. Ce système inclut des couleurs qui ne peuvent pas être réalisées selon le procédé CMJN.

Site webl

 Éléments de page web

La plupart des pages web comprennent une combinaison des éléments suivants.

website elements gif

En-tête

Correspond aux éléments graphiques qui se trouvent en haut de chaque page.

Navigation & barre de navigation

La navigation est le chemin donné vers les éléments les plus importants d’un site web. Il est important que la navigation soit cohérente sur l’ensemble des pages d’un site donné.

La barre de navigation est un ensemble de liens qui apparaissent sur chaque page. On y trouve généralement un lien vers les pages « à propos », « produits », « contactez-nous » et « témoignages ».

Fil d’Ariane

On parle de fil d’Ariane (ou breadcrumbs en anglais) pour désigner les éléments qui se situent généralement près du haut de page et qui renseignent sur la hiérarchie de la page sur laquelle l’utilisateur se trouve.

Corps du texte

Il s’agit du texte principal d’une page donnée.

Liens

N’importe quel mot ou image peut contenir un lien internet pour diriger les utilisateurs vers une autre page.

Barre latérale

La barre latérale peut être placée à droite ou à gauche d’une page. Elle contient généralement des liens de navigation verticale ou des publicités. On trouve parfois également l’outil de recherche, d’inscription à la newsletter ou RSS, ainsi que les liens vers les réseaux sociaux.

Bannière

Généralement placées en haut de page ou dans une barre latérale, les bannières sont des publicités qui redirigent les utilisateurs vers d’autres sites web.

Pied de page

Correspond aux éléments graphiques qui se trouvent en bas de chaque page.

HTML

L’acronyme HTML signifie HyperText Markup Language. Il s’agit du langage informatique standard pour site web permettant de coder les polices, couleurs et éléments graphiques que l’on voit en ligne.

Landing page

Il s’agit de la page qui apparaît en réponse à une recherche effectuée sur un moteur. Les landing pages sont utilisées pour générer des leads.

Interface utilisateur

On parle d’interface utilisateur pour décrire le design des applications (pour ordinateurs, smartphone et tout autre appareil). L’interface est conçue pour maximiser la facilité d’utilisation et l’expérience des utilisateurs.

Wireframe

Correspond aux images basiques qui contiennent les fonctions essentielles d’un site web. Les graphistes se servent des wireframes pour montrer à leurs clients comment une page ou un site web fonctionne.

Formats de fichiers d’image

Un format de fichier d’image est une manière standardisée d’encoder numériquement une illustration, un design ou une photo.

image file formats

Images vectorielles

Les designs vectoriels sont de petits éléments graphiques créés à partir d’un procédé mathématique. Ces designs peuvent être agrandis sans perdre en qualité, ce qui fait d’eux un choix idéal pour toutes sortes de supports (panneaux publicitaires, cartes de visite, etc.).

AI

Il s’agit de l’extension des fichiers créés avec Adobe Illustrator. Développés par Adobe Systems, ces fichiers contiennent des designs vectoriels sur une seule page.

EPS

Acronyme de Encapsulated Post Script. Les fichiers créés dans ce format peuvent être agrandis ou réduits sans perdre leur très haute qualité d’image. Ce format est communément utilisé pour les designs destinés à être imprimés (logo, cartes de visite ou brochure).

PDF

Acronyme pour Portable Document Format. Ce format de fichier a également été développé par Adobe. Les documents créés avec ce format peuvent être lus par n’importe quel ordinateur. Les fichiers PDF sont utiles pour présenter l’aperçu d’un design en cours de création.

Images raster

Les images raster sont composées de pixels. Chacun de ces pixels a une couleur attitrée. Ce type de format est idéal pour ajouter des effets spéciaux aux images et pour les retoucher de manière générale. En revanche, la qualité de ces images dépend de leur taille, ce qui signifie qu’elles ne peuvent pas être agrandies sans perdre en qualité.

GIF

Acronyme de Graphics Interchange Format. Il s’agit d’un format d’image raster permettant de créer des animations et de la transparence. Les GIF ne peuvent contenir que 256 couleurs au maximum produisant ainsi toujours des fichiers de petite taille.

JPEG

Acronyme pour Joint Photographic Electronic Group. C’est le format de fichier d’images raster le plus répandu pour les utilisations digitales. Les JPEG sont des fichiers compressés qui se chargent rapidement. On les utilise couramment pour les emails, les bannières publicitaires, les photos mises en ligne et à peu près n’importe quelle autre situation qui a à voir avec internet. Contrairement aux GIF, les JPEG ne peuvent pas contenir un fond transparent (un fond blanc est ajouté automatiquement).

PNG

Acronyme pour Portable Network Graphics. Ce format numérique ne perd pas de qualité après compression. Les fichiers PNG ont été créés pour améliorer la qualité des GIF.

PSD

Il s’agit de l’extension des fichiers créés avec Adobe Photoshop. Ces fichiers contiennent des images raster non compressées.

TIFF

Acronyme de Tagged Image File Format. C’est un format communément utilisé pour faire passer des images raster d’une application à une autre. La qualité des images TIFF est plus grande que celle des images JPEG ou PNG, c’est pourquoi les photographes et les maisons d’édition se servent souvent de ce format.

Types de logo

Tous les logos sont composés de texte, d’images et de formes et peuvent être rangés dans l’une des six grandes catégories de logos. Chacune d’elle produit un effet spécifique et présente les entreprises de manière unique. Il est également possible de combiner ces grands types de logos entre eux pour créer un design d’autant plus unique.

circle logo
logo design by goopanic
EMBLEM LOGO
Emblem logo design by Neatlines for Palouse Pint
LETTER MARK LOGO
Lettermark logo design by arkum

Abstrait

Un logo abstrait repose sur les qualités émotionnelles des couleurs et des formes pour communiquer le message des marques qu’ils représentent. Au lieu d’utiliser des images reconnaissables (comme une pomme ou un poulet), les logos abstraits sont constitués de formes abstraites.

Emblème

Ces logos entourent le nom de la marque (ou de l’organisation) d’un cadre, ce qui rappelle les badges, sceaux et armures.

Lettre-symbole

Les logo lettres-symboles (lettermarks en anglais) sont faits d’une ou plusieurs lettres stylisées (les initiales de l’entreprise par exemple). Les célèbres logos de ce type inclus notamment ceux d’IBM, de CNN, de HP ou encore de HBO.

giraffe logo
Pictorial logo design by SpoonLancer
moose MASCOT LOGO
Mascot logo design by Nico Strike
wordmark mexican restaurant logo
Wordmark logo design by nnorth

Symbole ou illustration

Les logos reposant sur un symbole ou sur une illustration sont à l’opposé des logos abstraits. Ils se servent d’une icône visuelle pour représenter une entreprise. C’est le cas des logos d’Apple ou de Twitter par exemple.

Mascotte

Ce type de logos sont conçus autour d’un personnage. Parmi les mascottes connues, on retrouve le Colonel Sanders, Kool-Aid Man et Mr. Peanut.

Mot-symbole

Les mots-symboles (wordmark en anglais) reposent sur un traitement typographique du texte pour illustrer la marque qu’ils représentent, comme c’est le cas pour Coca-cola, VISA ou encore Google.

Pfiou ! Maintenant que vous connaissez le jargon, lancez-vous dans votre premier concours de design graphique  dès aujourd’hui !