Le lexique Branding

C’est le fait de rendre les interfaces et contenus utilisables par tous, y compris les personnes en situation de handicap. Cela inclut des ajustements techniques, visuels et ergonomiques pour une expérience inclusive.

Format de fichier natif d’Adobe Illustrator. Il conserve les calques, objets et paramètres vectoriels.

Placement organisé des éléments selon des repères ou grilles. Un alignement précis garantit une mise en page professionnelle et lisible.

Type d’animation utilisant des formes vectorielles pour des mouvements fluides et évolutifs. Ces animations sont idéales pour les vidéos explicatives ou les interfaces interactives.

Prévisualisation du rendu final d’un projet permettant d’aider à valider des choix de pistes graphiques avant une production complète.

L’arborescence d’un site web est sa structure hiérarchisée, semblable à un arbre, qui organise les pages et les contenus pour faciliter la navigation et l’accès à l’information pour l’utilisateur.

C’est un design où les éléments sont disposés de manière irrégulière ou déséquilibrée. Cela peut apporter un effet moderne et dynamique.

Plateforme proposant des photos, vidéos ou illustrations, parfois gratuites, souvent payantes. Idéal pour trouver rapidement des visuels professionnels et libres de droit.

Slogan ou phrase d’accroche définissant la mission ou le positionnement d’une marque. La baseline est très souvent utilisée avec le logo pour renforcer l’identité visuelle.

Espaces vides intentionnels autour d’éléments pour aérer un design. Ce « vide » améliore en fait la lisibilité et met encore plus en valeur les contenus principaux.

Ensemble des éléments qui définissent l’identité d’une marque, comme le logo, les couleurs et le ton de communication. Il vise à créer une image de marque cohérente et marquante.

Points définissant où un design doit s’adapter selon la taille de l’écran (mobile, tablette, desktop). Ils sont essentiels dans le responsive design.

Document structuré expliquant les attentes, objectifs et contraintes d’un projet. C’est une base indispensable pour garantir une collaboration efficace.

Document décrivant les besoins, objectifs et contraintes d’un projet. Il sert de guide pour les équipes impliquées dans le développement.

C’est un ensemble d’images ou de contenus défilant horizontalement ou verticalement.

Call To Action , est un élément interactif, comme un bouton ou un lien, qui incite l’utilisateur à effectuer une action.

Un document regroupant toutes les règles visuelles d’une marque, comme les couleurs, polices et logos. Elle garantit la cohérence des supports de communication.

Plan visuel des pages d’un projet éditorial, permettant d’organiser de manière plus abstraite le contenu avant sa réalisation.

Cyan, Magenta, Jaune et Noir, modèle de colorimétrie utilisé pour l’impression.

Méthode où toutes les parties prenantes collaborent activement à la création d’un projet. La méthode préférée de Pilot’in, utilisée pour l’ensemble des projets que l’agence produit.

Élément graphique réutilisable, comme un bouton ou une icône. Les composants facilitent la cohérence et l’efficacité dans les projets de design.

C’est une différence marquée entre deux éléments (couleurs, tailles, formes). Un bon contraste va attirer l’attention et permettra de faciliter la lisibilité.

La taille des caractères utilisés pour le texte principal d’un document.

Couleurs opposées sur le cercle chromatique qui se renforcent mutuellement lorsqu’elles sont associées. Elles sont idéales pour créer des designs visuellement impactants !

Ajustement de l’espace entre deux caractères pour améliorer la lisibilité ou l’esthétique. Il est particulièrement important dans les titres ou les logos.

Transition progressive entre deux couleurs ou plus. Il peut ajouter de la profondeur et du dynamisme à un design.

Dot Per Inch, c’est la mesure de la résolution d’une image imprimée, exprimée en points par pouce. Plus le DPI est élevé, meilleure est la qualité de l’image.

Ensemble de règles, composants et outils pour assurer la cohérence visuelle et fonctionnelle d’un projet.

Tout savoir sur le design system

Le rapport de taille entre les différents éléments d’un design

Format de fichier vectoriel compatible avec les logiciels de graphisme et l’impression. Il est idéal pour des visuels comme les logos ou illustrations.

Il désigne la distance entre les différents éléments d’une composition visuelle (textes, images, boutons, etc.). Il joue un rôle crucial dans la hiérarchisation de l’information, l’amélioration de la lisibilité et la création d’une esthétique équilibrée.

C’est une zone vide dans un design, utilisée pour aérer et structurer votre contenu.

C’est le meilleur outil collaboratif (avis des designers de Pilot’in :p) pour le design d’interface et le prototypage interactif.

Tout savoir sur Figma

Ligne fine utilisée pour structurer ou délimiter les sections d’un design. Il est souvent utilisé dans les mises en page éditoriales.

Style graphique minimaliste caractérisé par des formes simples et des couleurs vives. Il est souvent utilisé dans les interfaces modernes.

Zone ajoutée autour d’un visuel pour éviter les bords blancs lors de la découpe en impression. C’est une précaution essentielle dans les projets imprimés !

Types de fichiers pour enregistrer des visuels (JPEG, PNG, TIFF, etc.). Chaque format a ses avantages selon l’usage (web, impression, etc.).

Obstacles ou difficultés rencontrés par un utilisateur lors de son parcours dans une interface.

Palette de couleurs choisie pour un projet.

C’est une structure invisible qui aide à aligner et organiser les éléments dans un design.

Format d’image supportant les animations légères et les couleurs limitées. Il est souvent utilisé pour les mèmes et animations simples.

Partie verticale des lettres, comme dans « b », « d » ou « l ».

Visualisation des zones les plus consultées ou cliquées d’une interface. Elle aide à analyser le comportement des utilisateurs.

Ordre d’importance des éléments dans un design. Elle guide l’œil et met en avant les informations clés.

Pictogramme utilisé pour représenter de manière simplifiée une action, une fonction ou une information.

C’est l’ensemble des éléments graphiques qui définissent l’image d’une marque. Cela inclut le logo, les couleurs et les typographies.

Représentation visuelle de données ou concepts. Elle permet de simplifier et de rendre attrayantes des informations complexes.

Espacement global entre les lettres d’un texte.

Espacement entre les lignes de texte.

Format d’image compressée très utilisé pour le web.

Ligne imaginaire sur laquelle reposent les caractères d’une police de texte. Elle assure un alignement propre et précis.

Symbole graphique représentant une marque ou une organisation. Il est essentiel pour l’identité visuelle et la reconnaissance de la marque.

Version textuelle d’un logo, utilisant uniquement le nom de la marque. Il peut être accompagné de détails graphiques pour le personnaliser.

Texte en latin (fictif) utilisé dans les maquettes pour simuler le contenu. Cela permet de visualiser le design sans se concentrer sur le texte.

Prototype fonctionnel d’un site web ou d’une application. Elle permet de tester les interactions avant le développement.

Ce sont les espaces vides autour du contenu d’un document ou d’une page. Elles permettent d’aérer le design et de garantir une lisibilité optimale.

Menu souvent illustré avec trois lignes parallèles, notamment utilisée sur les interfaces mobiles pour optimiser l’espace.

Petites animations ou actions déclenchées par l’utilisateur (clics, survols). Elles améliorent l’expérience utilisateur en rendant l’interface plus vivante.

C’est une maquette ou un prototype visuel d’un design. C’est une représentation visuelle qui permet de se faire une idée concrète de ce à quoi ressemblera un produit fini, avant même sa réalisation (par exemple, sur un t-shirt ou un écran).

Prototype avancé permettant de simuler le comportement d’une interface. Il est utilisé pour tester les parcours utilisateur.

En design, en art et en décoration, un élément monochrome est composé d’une seule couleur, avec éventuellement des variations de teintes ou de nuances.

Un monogramme est une signature visuelle composée des initiales d’un nom ou de plusieurs noms, entrelacées ou juxtaposées de manière esthétique.

Moodboard, ou planche d’ambiance, est un outil visuel qui sert à rassembler et organiser des images, des couleurs, des textures, des typographies et d’autres éléments inspirants pour définir le style et l’atmosphère d’un projet créatif.

Le motion design, ou design graphique animé, est l’art de créer des animations à partir d’éléments graphiques. C’est un peu comme donner vie à des images fixes pour créer des vidéos dynamiques et captivantes.

Les niveaux de gris représentent une échelle de valeurs tonales allant du noir pur au blanc pur, en passant par toutes les nuances de gris intermédiaires. C’est une simplification de l’image qui élimine toutes les informations de couleur, ne conservant que les informations de luminosité.

Elle englobe une multitude de subtilités, de variations et de degrés au sein d’un même élément. Par exemple, les teintes et tonalités, les différentes matières…

En design l’opacité d’un calque définit le degré de visibilité qui se trouve en dessous. Un calque ayant une opacité de 1 % est presque transparent, tandis qu’un calque ayant une opacité de 100 % est opaque.

C’est l’espacement que l’on ajoute à l’intérieur d’une zone définie. Il crée une marge entre le contenu de cette zone et ses bords.

Ensemble de couleurs sélectionnées et utilisées de manière cohérente dans un projet de design. C’est un peu comme une boîte à outils pour le créateur, qui lui permet de construire une composition visuellement harmonieuse et cohérente.

C’est un élément de papeterie indispensable pour toute entreprise souhaitant véhiculer une image professionnelle et soignée. Il sert de support à vos courriers, devis, factures et autres documents officiels.

C’est une représentation visuelle et narrative du chemin parcouru par un utilisateur lorsqu’il interagit avec un produit, un service ou une marque. Il permet de comprendre en profondeur ses besoins, ses attentes, ses émotions et ses actions à chaque étape de son expérience.

Représentation fictive, mais basée sur des données réelles, d’un type d’utilisateur typique. C’est comme un portrait-robot qui permet de mieux comprendre les besoins, les comportements, les motivations et les frustrations d’un groupe spécifique d’utilisateurs.

Imaginez une image comme une mosaïque. Chaque petite pièce de cette mosaïque est un pixel. Plus vous avez de pièces, plus l’image sera détaillée et nette. À l’inverse, moins vous en avez, plus l’image sera grossière et pixellisée.

La pixelisation est un phénomène qui se produit lorsqu’une image numérique est agrandie au-delà de sa résolution d’origine, ou lorsqu’elle est visualisée sur un écran avec une résolution insuffisante. Cela se traduit par l’apparition de carrés colorés, appelés pixels, qui deviennent visibles à l’œil nu et dégradent la qualité de l’image.

Pixels Par Pouce ou DPI (dots per inch) en anglais, représentent la densité de pixels sur une surface donnée, généralement exprimée en pouces. Cela vous permet d’évaluer la qualité d’une image numérique, qu’elle soit destinée à un écran ou à un support imprimé.

Version préliminaire d’un produit ou d’un système, conçue pour tester et évaluer son fonctionnement, son design et son utilisation. Il

Portable Document Format. Il s’agit d’un format de fichier créé par Adobe Systems qui permet de représenter des documents de manière indépendante du logiciel et du matériel utilisé pour les créer.

Portable Network Graphics. Il s’agit d’un format d’image numérique sans perte, ce qui signifie que la qualité de l’image reste intacte, même après plusieurs compressions et décompressions.

Photoshop Document. C’est le format de fichier natif du logiciel Adobe Photoshop.

C’est un processus qui implique un changement d’identité de marque. Cela peut inclure des modifications du nom, du logo, de la palette de couleurs, du slogan, de la stratégie de communication, et même de la culture d’entreprise.

Principe de composition qui permet de guider le regard du spectateur en divisant l’image en neuf parties égales. Les points d’intersection de ces lignes sont des points forts où il est conseillé de placer les éléments clés de la photo ou d’un design.

Elle est déterminée par le nombre de pixels qui composent l’image. Plus il y a de pixels, plus l’image plus la résolution de l’image sera grande.

Principe fondamental en design graphique qui consiste à utiliser de manière répétée un élément visuel (forme, couleur, texture, typographie) au sein d’une composition. Cette technique, lorsqu’elle est bien maîtrisée, permet de créer un sentiment d’unité, de cohérence et de renforcer l’identité visuelle d’un projet.

Approche de conception web qui permet à un site de s’adapter automatiquement à la taille de l’écran sur lequel il est affiché. Qu’il s’agisse d’un ordinateur de bureau, d’une tablette ou d’un smartphone, le site s’ajuste pour offrir une expérience utilisateur optimale.

Rouge, Vert, Bleu. (Ou RVB en anglais) C’est un modèle de couleur additive utilisé pour représenter une large gamme de couleurs sur les écrans d’ordinateur, les téléviseurs et d’autres dispositifs d’affichage.

Une police sans-serif est une police de caractères qui ne possède pas d’empattement. Les empattements, ce sont ces petites lignes qui prolongent les traits des lettres

C’est une notion essentielle qui définit l’intensité ou la pureté d’une couleur. C’est ce qui rend une couleur vive ou terne !

C’est une technique de navigation sur internet qui permet d’afficher du contenu de manière continue, sans que l’utilisateur ait besoin de cliquer sur un bouton ‘Suivant’. Le contenu se charge automatiquement au fur et à mesure que l’on fait défiler la page.

Serif est un terme utilisé en typographie pour désigner les petites lignes ou traits qui ornent les extrémités des lettres. Ces empattements, comme on les appelle aussi, donnent aux polices de caractères un aspect plus traditionnel et formel.

L’ensemble des éléments graphiques qui permettent d’identifier de manière instantanée une marque, un produit ou une entreprise. C’est un peu comme une empreinte digitale, mais en version graphique. Elle joue un rôle essentiel dans la communication et la mémorisation de la marque auprès du public.

Une tendance en design qui consiste à donner à un objet numérique une apparence qui imite un objet réel correspondant. En d’autres termes, c’est un peu comme si on voulait rendre un objet virtuel aussi réaliste que possible en lui donnant l’apparence d’un objet physique.

Outil visuel qui sert à raconter une histoire de manière séquentielle. Il se compose d’une série d’images, souvent dessinées à la main ou créées numériquement, accompagnées de courtes descriptions textuelles. Chaque image représente une scène ou un moment clé de l’histoire, permettant ainsi de visualiser le déroulement de l’action.

En termes simples, une figure ou un objet est symétrique lorsqu’on peut le diviser en deux parties identiques.

Elle fait partie des trois composantes de base d’une couleur, avec la saturation et la luminosité. Elle correspond à ce que nous appelons communément la « couleur » elle-même : le rouge, le bleu, le vert, etc.

Test utilisateur ou test d’utilisabilité, est une méthode essentielle dans le domaine du design et du développement. Il consiste à observer des utilisateurs réels en interaction avec un produit (site web, application, logiciel, etc.) afin d’évaluer son efficacité, sa facilité d’utilisation et de repérer les éventuels problèmes.

Tagged Image File Format. Il s’agit d’un format de fichier image numérique flexible et de haute qualité, souvent utilisé pour l’archivage d’images et la production d’imprimés de qualité professionnelle.

Le ton en couleur, désigne en réalité le degré de clarté ou d’obscurité d’une couleur. Il correspond à la quantité de lumière ou d’ombre ajoutée à une couleur pure.

C’est une composition artistique où les lettres, les mots ou les phrases sont utilisés comme éléments graphiques pour former une image ou un motif.

Sélectionner et à organiser les caractères (lettres, chiffres, signes de ponctuation) pour créer des compositions visuelles efficaces et esthétiques.

User Interface, que l’on traduit en français par Interface Utilisateur. C’est tout simplement la partie d’un produit numérique avec laquelle l’utilisateur interagit directement.
UI Design (ou conception d’interface utilisateur) consiste à créer des interfaces visuellement attrayantes et intuitives, facilitant ainsi l’interaction de l’utilisateur avec le produit.

Une approche « user-centric » consiste à placer l’utilisateur au cœur de toutes les décisions de conception.

User Experience, se traduit littéralement par expérience utilisateur. Il s’agit de l’ensemble des ressentis et des perceptions d’un utilisateur lorsqu’il interagit avec un produit ou un service, qu’il soit numérique ou physique.
L’UX Design, (ou Design de l’expérience utilisateur), est une discipline qui vise à concevoir des produits numériques en mettant l’utilisateur au centre de toutes les réflexions.

Rédaction UX en français, est une discipline qui consiste à rédiger les textes présents dans les interfaces numériques de manière à optimiser l’expérience utilisateur. En d’autres termes, il s’agit de choisir les mots justes pour guider l’utilisateur de manière intuitive et efficace tout au long de son parcours sur un site web, une application mobile ou tout autre produit numérique.

C’est l’ensemble des perceptions, des associations et des émotions que les consommateurs lient à votre marque.

Méthode de création graphique qui utilise des points mathématiques pour définir les formes. Contrairement aux images matricielles (comme les JPEG ou les PNG), les images vectorielles ne perdent pas en qualité lorsqu’elles sont redimensionnées.

Il englobe à la fois l’aspect visuel (UI) et l’expérience utilisateur (UX). Un bon web design vise à rendre un site web non seulement esthétique, mais aussi fonctionnel et facile à naviguer.

C’est une représentation visuelle simplifiée de l’architecture et de la structure d’une interface utilisateur. Il sert de base pour la conception d’un site web, d’une application mobile ou d’un logiciel.

Il est utilisé principalement pour diffuser des vidéos en ligne de haute qualité, tout en offrant une compression efficace pour réduire la taille des fichiers et améliorer les temps de chargement.

Le format WEBP est un format d’image moderne développé par Google. Il offre une compression d’image sans perte ou avec perte, ce qui signifie qu’il peut réduire considérablement la taille des fichiers sans compromettre significativement la qualité visuelle, voire en l’améliorant dans certains cas.

Diviser un espace en différentes zones, chacune ayant une fonction ou une caractéristique spécifique. Le zoning en design graphique et web est une étape cruciale qui consiste à organiser visuellement l’espace d’une page en différentes zones distinctes.