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
- Illustration & photographie
- Typographie
- Couleur
- Site web
- Formats de fichier
- Types de logo
Le design : les bases
—
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.
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.
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.
É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).
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.
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.
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.
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.
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.
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).
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.
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.
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.
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.
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.
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).
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.
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.
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 !
—
