Vous savez maintenant parler à un développeur, mais l’autre jour, vous avez discuté avec un groupe de designer et vous vous êtes contentez de sourire et de faire oui de la tête durant toute la conversation?

On dit guif ou jif? Vous ne comprenez pas pourquoi ils parlent de polices, d’orphelins et de veuves? Et est-ce que tous les designers savent écrire en latin? Ne vous inquiétez pas, voici le Petit Robert édition Design.

Le lexique du designer

Adobe

Adobe (qui se prononce «Adobi») est une compagnie qui crée des logiciels pour artistes pour créer différents types de contenu graphique audio ou vidéo. Les logiciels les plus populaires sont Photoshop (pour tout ce qui est graphisme), Illustrator (pour créer des illustrations vectoriels), InDesign (pour créer des supports en print comme des affiches ou des brochures), Xd (pour la création d’interface utilisateur, Premier Pro (pour la vidéo) et After Effects (pour la création de motion design et d’effets spéciaux).

Awwwards

Awwwards est un site web qui regroupe et désigne les meilleurs sites web selon leurs standards. Il donne le prix du meilleur site du jour, du mois et de l’année en plus de d’autre catégories de prix. Il existe aussi CSS Design Awards et Webby Award, qui font pratiquement la même chose.

Branding

Un branding est la pratique marketing de conception d’image de marque pour une entreprise. Un brand regroupe plusieurs éléments tels que son logo, ses couleurs, son ton pour parler à ses consommateurs, etc.

Comic Sans MS

Est une police d’écriture démoniaque et vraiment laide. Arrêtez de l’utiliser.

Crop

Un crop est l’action de couper une image. Par exemple, l’image était en 1920px de large et 1500px de haut, mais je l’ai croppé en haut et en bas pour l’avoir en 1080px de haut.

CTA

Un CTA ou Call To Action (appel à l’action) est une composante graphique qui permet de mettre l’accent sur une action qu’on aimerait que l’utilisateur fasse (ex.: aller sur la page «Boutique» ou acheter un produit en particulier).

Definition/Résolution

La définition veut dire le nombre de pixels présent sur un écran (ex : un écran 1920px de largeur et 1080px de hauteur) alors que la résolution veut plutôt dire la densité de pixel sur l’écran (ex.: il y a 72px par pouce).

Design system

Le Design System est une bibliothèque qui regroupe toutes les composantes, les visuels et les principes/codes réutilisables d’une interface graphique.

Design Thinking

Le Design Thinking est une méthodologie de travail pour le design qui est constituée de 7 étapes, qui se veut collaborative et qui implique un retour de l’utilisateur final.

DPI/PPI

DPI et PPI sont des unités de mesure qui montrent la densité soit de points par pouce (Dots Per Inch) soit de pixels par pource (Pixels Per Inch).

Fil d’Ariane

Le fil d’Ariane désigne une composante dans la navigation qui présente l’arborescence d’où se trouve l’utilisateur (ex.: Accueil > Boutique > Montres). Le terme «fil d’Ariane» vient de la mythologie grecque.

Flat design

Le flat design un style graphique où les éléments visuels sont minimalistes et où l’utilisation d’aplat de couleurs et de formes simples est utilisé.

Font-weight

Un font-weight veut dire la graisse d’une police d’un texte. Par exemple, mince, normal, grosse.

GIF

GIF, pour Graphic Interchange Format, qui se prononce jif selon son créateur (même si la majorité des gens prononce guif), est un format d’image numérique qui ne peut avoir que 256 couleurs enregistrées, mais qui gère la transparence et qui permet d’avoir une séquence d’image animée.

Graphic designer

Un Graphic Designer est une personne qui crée des éléments graphiques à l’ordinateur ou à la main.

Header/Hero

Ce sont différentes sections d’une page web. Le Header est la partie qui se trouve tout en haut de la page et est composé du logo et de la navigation, habituellement. La zone Hero est un grand bandeau qui se trouve généralement en haut de la page juste en-dessous du Header et qui permet de mettre de l’avant l’élément le plus important du site web (ex.: un CTA pour aller à la page la plus importante du site).

Helvetica

Helvetica est une police d’écriture sans-serif créée en 1957. C’est une des polices la plus utilisée dans le monde (ex.: elle est utilisée dans le métro de New-York) et est beaucoup appréciée dans la communauté des designers. Elle a été dessinée dans un objectif précis : atteindre l’harmonie optique la plus aboutie possible.

JPG

JPG un format d’image compressé qui permet de réduire le poids de celle-ci en réduisant plus ou moins la qualité de l’image selon le niveau de compression choisie. C’est un format très utilisé sur le web.

Leading

Le leading ou l’interlignage est un terme qui désigne l’espace qu’il y a entre les lignes de texte.

Logotype

Un logotype ou logo est un visuel graphique qui sert à identifier une entreprise.

Lorem ipsum

Du lorem ipsum est du faux texte générer aléatoirement en latin pour avoir un semblant de texte. Utilisé de façon temporaire (jusqu’à ce que le vrai contenu soit intégré), il aide à calibrer la mise en page et à visualiser.

Maquette

Une maquette est le rendu visuelle finale d’une interface.

Mockup

Un mockup permet de présenter une idée graphique (ex.: une maquette d’un site web) dans un contexte réel. Par exemple, voici un mockup du site web de la FTQ Construction.

Moodboard

Un moodboard est une planche de style qui permet d’avoir une inspiration et qui donne une idée de direction artistique.

Motion design

Le Motion Design désigne l’art de créer des oeuvres animées graphiques. Le mouvement est au coeur de cette pratique artistique.

Orphelin/veuve

Un orphelin est lorsqu’il y a un mot seul sur la dernière ligne d’un paragraphe. Une veuve est lorsque la dernière ligne d’un paragraphe est isolée (ex.: la dernière ligne se retrouve au début de la deuxième page). Idéalement, un designer tentera d’éviter ces deux éléments, qui peuvent déranger l’oeil de l’utilisateur.

Pixel

Le pixel, souvent abrégé en px, est l’unité de base pour mesurer la définition d’une image numérique matricielle.

PNG

Le PNG est un format d’image où il n’y a pas de perte de qualité. Cela permet de garder une image de bonne qualité et ce format gère aussi la transparence, contrairement au JPG.

Police/Fonte/Typographie

Une police (d’écriture) est un ensemble visuel de caractères d’une même famille (ex.: la police «Arial» ou la police «Times New Roman»).

Une fonte désigne l’ensemble des caractères d’un même style (ex : «Arial» en gras et de taille 12).

La typographie désigne l’art de créer une police, que ça soit pour des fins esthétiques ou pratiques. Cependant, dans le langage courant, on utilise souvent ces trois termes pour dire la police (ex.: la typo «Comic Sans MS» est vraiment affreuse).

Prototype

Un prototype est une version d’un produit qui permet de visualiser la version finale de celui-ci (ex.: un prototype d’une application mobile contenant toutes les interactions).

RGB(A)/HEX/CMYK/PANTONE

Ce sont tous des formats de couleurs. Le RGB(A) consiste à calculer, pour le numérique, la quantité de rouge (red), de vert (green), de bleu (blue) et parfois de transparence (alpha).

On peut aussi le calculé en bit, ce qui donne un code hexadécimal (HEX).

Pour l’imprimé, le CMYK est un peu pareil que le RGB(A). Il calcule la quantité de peinture des couleurs d’impression, soit le cyan, le magenta, le jaune et le noir.

Les couleurs Pantone, quant à elles, sont des couleurs standardisées par la compagnie du même nom pour l’imprimerie. Elles offrent un éventail de couleurs et d’échantillons (un nuancier) pour voir à quoi ressemblera une couleur une fois imprimée.

Serif/Sans-Serif/Slab Serif

Ces termes désignent des catégories de style visuel en typographie. Le serif est pour les polices d’écriture qui ont des empattements (des petites extensions fines) qui se retrouvent aux extrémités des caractères. Le sans-serif est l’inverse et veut dire les caractères qui n’ont pas d’extension à la fin de leurs traits. Le slab serif est un peu comme le Serif, mais au lieu d’avoir de fines empattements en pointes, les caractères ont des empattements rectangulaires un peu plus gros. On dit parfois que c’est un mélange de style serif et sans-serif.

Sketch

Un sketch est un brouillon/croquis d’une idée qu’on a d’un visuel. Cela permet de conceptualiser des idées plus rapidement et simplement, car on a seulement besoin d’un crayon et de papier. À ne pas confondre avec le logiciel Sketch app qui est un logiciel de design pour faire des interfaces.

Skeuomorphism

Le Skeuomorphism est un style graphique, en design digital, qui consiste à imiter l’apparence d’un objet réel lors de la conception d’un objet virtuel.

Sprint Design

Est un processus de travail pour faire du design qui focalise sur la résolution de problèmes utilisateurs dans un court laps de temps, généralement 5 jours.

Stock photo

Ce sont des photos provenant de banques d’images misent à la disposition des gens pour différents usages.

Tracking/Kerning

Le tracking signifie l’espace entre les lettres (l’interlettrage) dans un mot ou un ensemble de mot. Voici un exemple d’un tracking large : Hello World!

À ne pas confondre avec le kerning (ou le crénage) qui désigne l’espace blanc entre deux lettres pour permettre une balance visuelle. Par exemple, le kerning est différent entre les lettres «AW» et entre les lettres «JL».

UI/UX

Les termes UI et UX sont beaucoup utilisés, mais quelle est la différence? Le UI (pour l’anglais User Interface) est toute la partie visuelle d’un produit numérique (ex: icônes, boutons, formulaires, etc.). Le UX (pour l’anglais User Experience) désigne toute la partie expérience utilisateur, c’est à dire comment va être l’expérience de l’utilisateur avec mon produit (app, site web ou autre). J’ai déjà écrit un article sur la différence entre le UI et le UX, si jamais vous voulez approfondir vos connaissances.

User flow

Un user flow est un schéma qui montre les possibilités d’actions et les chemins que l’utilisateur peut emprunter lors de l’utilisation d’un produit. Cela permet de voir si le tout a du sens et quelles sont toutes les possibilités qui sont offertes à l’utilisateur.

Vectoriel

Le vectoriel est un format d’image numérique qui est composé de vecteurs pour créer différentes formes géométriques (polygone, cercle, rectangle, etc.). Contrairement au pixel, ce format est donc basé sur des calculs mathématiques et fait en sorte qu’il peut être réduit ou agrandit indéfiniment sans perdre de qualité.

Web designer

Un web designer est quelqu’un qui conçoit le visuel/l’interface d’un site web avec différents outils de créations graphique.

Wireframe

Un wireframe (maquette fonctionnelle en français) est une version plus fidèle qu’un sketch, mais qui n’est pas non plus la version finale d’un interface. C’est un schéma qui montre les zones, les composantes sous forme de croquis. Généralement, ce sera en nuances de gris et sans image.

WYSIWYG

Le WYSIWYG (qui se prononce «wiziwigue») est l’abréviation en anglais de What You See Is What You Get. Cela veut littéralement dire «ce que vous voyez est ce que vous obtenez». C’est un terme qui désigne une interface utilisateur qui permet de composer visuellement le résultat voulu. L’utilisateur voit directement le résultat final lorsqu’il interagit avec ceci, un peu comme un mini Word ou Pages.

Écrit par Thierry Lemaître