Projet 1 - Lancement d'une marque
Identité visuelle
Créez l'identité visuelle d'une marque fictive de votre choix comprenant un logo, une palette de couleurs, un moodboard et des supports imprimés.
✅ Remise
📁 Livrable final
1 - Guide d'identité visuelle
Lien Figma basé sur ce gabarit comprenant les sections suivantes :
Analyse de marque
Moodboard
Palette de couleurs
Logo
Typographie et bibliothèque d'icônes
Supports imprimés
2 - Présentation
Lien Figma Slides vers votre présentation (En mode éditeur)
🧭 Objectifs
À la fin de cet atelier, tu auras développé ces compétences :
Maîtrise des outils de base de Figma
Comprendre les bases de l’identité visuelle et de la cohérence de marque
Créer un moodboard pour définir l’univers graphique de votre marque fictive
Concevoir une palette de couleurs et comprendre leur impact
Réaliser un logo avec trois déclinaisons adaptées à différents usages
Mettre en page des supports imprimés (carte d’affaires, dépliant, etc.)
Assembler une mini-charte graphique qui documente l’ensemble de vos choix
🏗️ L'atelier
Livrable final
Vous devez livrer un fichier Figma avec une page pour chacun de ces livrables basé sur ce gabarit :
Analyse de marque
Définissez :
La mission
La personnalité
Les valeurs
Identifier le public cible et ses attentes
Un persona
Positionnement par rapport à la concurrence (ex. : restaurants écoresponsables, marques streetwear locales).
Remise : Inclure une section "Analyse" dans le fichier Figma
Moodboards
3 moodboards comprenant :
Logos
Palette de couleurs
Photos/Illustration/Images (Ambiance, texture, typographies)
Des éléments graphiques (Pictogrammes, symboles, formes, etc.)
Mots-clés qui résument l'univers de la marque
Vos moodboards doivent comprendre au moins 12 éléments chacun.
⛔️ Faites valider par le formateur (votre client) vos moodboards avant de passer à la prochaine étape. Il choisira le concept final pour la marque.
Remise : Inclure une section "Moodboard" dans le fichier Figma
Palette de couleurs
Une couleur primaire (dominante qui représente la marque)
Une couleur secondaire (harmonie, contraste, hierarchie)
Une couleur d'accent (mise en avant d'éléments clés comme les CTA)
Remise : Inclure une section "Palette de couleurs" dans le fichier Figma
Logo
Création de 3 variants de votre logo - TOUT EN BLANC !
Vertical
Horizontal
Logomark
Remise : Inclure une section "Logo" dans le fichier Figma
Typographie et icônes
Choisissez une (ou deux) polices de caractères cohérentes avec l'identité de marque ainsi qu'une librairie d'icône.
Remise : Inclure une section "Police" dans le fichier Figma
Supports imprimés
Votre premier support imprimé sera la carte d'affaire du fondateur de votre marque (Vous).
Vous devez inclure au minimum :
Nom d’un fondateur fictif.
Numéro de téléphone.
Adresse e-mail.
Site web ou réseaux sociaux.
Ensuite, le client vous donnera un deuxième support imprimé à créer. Ça pourra être quelque chose comme une affiche promotionnelle, un pamphlet, un emballage, etc.
Remise : Inclure une section "Support imprimé" dans le fichier Figma
Présentation
Créez une présentation sur l'outil de votre choix entre PowerPoint, Figma Slides ou Canva qui parle en 2 à 5 minutes de :
Votre choix de marque
Petite présentation de votre analyse
Votre processus créatif
Vos moodboards
Quel a été choisi par le client
Votre palette de couleur, polices et bibliothèque d'icônes
Vos supports imprimés
Vos choix design (Si vous avez laissé tombé des idées vous pouvez quand même les présenter
Remise : Inclure un LIEN vers votre présentation (partage)
🎓 La théorie
Inscription à Figma
Rendez-vous au www.figma.com/education et créez-vous un compte avec votre courriel CyberCap.
Cochez les cases "oui" et sélectionnez "High School / Lycée" lorsqu'on vous le demandera.
Répondez aux questions et lorsque vous serez de retour sur Figma, simplement assigner le plan professionnel au "team" portant votre nom.
Premiers pas dans Figma
Figma est un outil utilisé par la majorité des designers de plusieurs domaines. C’est un outil qui peut servir à créer toute sorte de contenu. Nous pouvons utiliser Figma pour créer des affiches, des tutoriels, des produits imprimés, des maquettes fonctionnelles, des micro-interations et plus encore !
C’est donc un outil qui peut devenir complexe très rapidement, mais n’ayez crainte, nous utiliserons seulement les fonctionnalités de base dans le but de colliger des références, créer notre identité de marque !
En plus, les fonctionnalités de Figma que vous allez apprendre vont vous servir lorsque nous arriverons sur Framer car les deux outils sont très similaires.
Structure de Figma
Figma fonctionne un peu comme un grand classeur numérique : on y retrouve des projets, des fichiers, des pages et des cadres (frames). Chaque niveau aide à garder votre travail bien organisé.
1. Projet (Project)
C’est le dossier principal dans lequel on regroupe plusieurs fichiers. À l’intérieur, on peut avoir plusieurs fichiers : logo, supports imprimés, présentation finale, etc.
Exemple : un projet peut s’appeler “Identité de marque – Café Luma”.
💡 Un projet = un thème ou un client
2. Fichier (File)
Chaque fichier correspond à un document de travail. Il s’ouvre dans l’éditeur Figma et contient vos pages, vos dessins, vos textes, etc.
Exemple : dans votre projet, vous pouvez avoir un fichier nommé “Logo et palette de couleurs” ou “Maquettes du site web”.
Pour créer un fichier, cliquez sur New File → vous arrivez sur une page blanche : le canevas.
💡 Un fichier = un espace de création.
3. Page (Canevas)
À l’intérieur d’un fichier, on peut créer plusieurs pages pour séparer les étapes du travail.
Exemple de pages :
“Moodboard”
“Exploration de logo”
“Supports imprimés”
“Présentation finale”
💡 Une page = une section de votre projet.
4. Frame
Dans chaque page, vous dessinez à l’intérieur de cadres (frames). C’est l’équivalent d’une feuille ou zone de travail.
Exemple : un cadre pour une carte d’affaires, un autre pour une affiche.
💡 Un cadre = une zone de création visuelle.
5. Layers (Calques)
À l’intérieur d’un cadre, chaque élément (forme, image, texte) est un calque. Les calques s’empilent comme dans Photoshop. Vous pouvez les renommer, les grouper et les déplacer.
💡 Un calque = un objet dans votre design.
🧩 En résumé :
Niveau | Fonction | Exemple |
|---|---|---|
Projet | Regroupe tous les fichiers d’un même thème | “Identité Café Luma” |
Fichier | Espace de travail complet | “Logo et palette de couleurs” |
Page | Étape ou catégorie du fichier | “Moodboard” |
Cadre (Frame) | Zone de création | “Carte d’affaires recto” |
Calque (Layer) | Élément visuel individuel | Logo, texte, icône |
Comprendre l’interface
À gauche (Layers) : la liste de tous vos éléments (images, textes, cadres).
Au centre : le canevas → l’espace de création.
À droite (Properties) : les options de l’élément sélectionné (taille, couleurs, alignement).
En bas : les outils principaux (déplacement, formes, texte, etc.).
Les outils essentiels
Curseur (V) : pour déplacer les éléments.
Cadre (F) : créer une « boîte » (comme une feuille) dans laquelle organiser vos images → parfait pour votre moodboard.
Texte (T) : écrire un mot-clé, un titre, ou annoter une image.
Rectangle / Cercle (R / O) : créer des formes simples.
Zoom (Ctrl/Cmd + molette) : naviguer facilement dans le canevas.
Importer des images
Glissez-déposez une image depuis votre ordinateur directement sur le canevas.
Vous pouvez aussi copier-coller une image depuis le web (clic droit > copier l’image > coller dans Figma).
Analyse et recherche
Avant tout, vous devez trouver un produit ou un service pour lequel vous ferez le branding tout en gardant en tête que vous devrez "pitcher" ce concept aux dragons lors d'une présentation "Dans l'oeil du dragon" dans quelques semaines (Shark Tank).
Avant de créer un logo, une palette de couleurs ou des supports visuels, il faut savoir où on s’en va. La recherche et l’inspiration sont l’étape où l’on collecte des idées, des images et des références qui serviront à construire l’identité visuelle de la marque fictive. C'est aussi à cette étape que nous évaluerons la compétition dans le but de nous en inspirer !
Cette étape nous permet de ne pas "partir dans le vide" en donnant une direction créative claire; elle permet d'assurer la cohérence visuelle entre tous les éléments que vous allez créer, mais elle permet surtout d'alimenter votre créativité en regardant ce qui existe afin de trouver de nouvelles combinaisons originales !
Pour commencer copiez ce gabarit dans un nouveau projet
Recherche
La mission
La mission, c’est la raison d’être de la marque. Elle répond à la question : Pourquoi cette marque existe-t-elle ?
👉 Exemple :
Restaurant écoresponsable → “Proposer des repas accessibles, délicieux et bons pour la planète.”
Marque de vêtements streetwear → “Exprimer la créativité urbaine à travers des vêtements confortables et uniques.”
Commencez par écrire une phrase simple commençant par :
“Notre marque existe pour…”
“Nous voulons que nos clients…”
La personnalité
On peut imaginer la marque comme une personne. Quelle personnalité aurait-elle ?
Choisissez 3 adjectifs qui décrivent votre marque.
Exemples de traits de personnalité :
Moderne, technologique, innovante
Éco-responsable, naturelle, authentique
Ludique, joyeuse, colorée
Prestigieuse, élégante, minimaliste
Ces mots deviendront un fil conducteur pour les choix visuels : couleurs, typographie, ton des messages.
Les valeurs
Les valeurs représentent ce que la marque défend. Elles ne sont pas juste décoratives : elles doivent se refléter dans la communication et le design.
👉 Exemples :
Respect de l’environnement → matériaux durables, couleurs vertes/terreuses.
Accessibilité → prix abordables, design simple, langage inclusif.
Innovation → expérimentation graphique, typographies modernes.
Communauté → photos de groupes, mise en avant des clients.
Choisissez 3 valeurs clés et note un exemple concret de comment cela se traduit dans le visuel.
Identifier le public cible et ses attentes
Le public cible, c’est la personne type qui va consommer la marque.
Définir un “persona” (profil type)
Âge (adolescent, jeunes adultes, familles, professionnels…)
Habitudes (sortir au restaurant, suivre des tendances, acheter local, chercher le luxe, etc.)
Attentes (prix bas, originalité, qualité, engagement éthique, convivialité).
👉 Exemple :
Restaurant végétarien → Jeunes adultes urbains, sensibles à l’écologie, aimant tester de nouvelles saveurs.
Marque de vêtements streetwear → Adolescents et jeunes adultes branchés, suivant la mode sur Instagram/TikTok, en quête de différenciation.
Questions pratiques à poser :
Qui est-ce qu’on imagine comme “client idéal” ?
Qu’est-ce qu’il ou elle recherche dans ce type de marque ?
Pourquoi choisirait-il/elle ma marque plutôt qu’une autre ?
Positionnement par rapport à la concurrence
Le positionnement, c’est la manière dont votre marque se distingue des autres dans le même domaine.
Identifier la concurrence
Listez 3 marques réelles comparables.
Exemple : Restaurants locaux végétariens, autres cafés du quartier, marques streetwear locales.
La concurrence n'est pas toujours directe ! Ça peut aussi être un autre service/produit qui comble le même besoin. Par exemple, un concurrent de Coca Cola pourrait être une compagnie de bouteille d'eau puisqu'ils comblent le même besoin : se désaltérer.
Observer ce qu’elles font
Visuel : couleurs, logos, typographies.
Ton : sérieux, humoristique, inspirant.
Produits/services : spécialités, gammes, prix.
Trouver votre différence
Posez cette question : Si mon projet était une nouvelle option sur le marché, qu’est-ce qui le rend unique ?
👉 Exemple :
Tous les restaurants écoresponsables utilisent le vert… mais nous, on va oser une identité en orange vif pour représenter l’énergie et la chaleur.
La plupart des marques streetwear locales sont sombres et minimalistes… nous, on va jouer sur un style coloré et ludique.
Moodboard : Organisation des idées
Un moodboard (ou planche d'inspiration) est un collage visuel qui rassemble les références, les couleurs et les idées principales. C'est un outil essentiel pour visualiser l'univers de la marque en un coup d'oeil. Cette étape permet aussi de valider avec le client que la direction artistique envisagée lui plaît.
Comment trouver l'inspiration ?
Pinterest : recherchez des mots-clés en lien avec votre projet fictif.
Exemple : “Healthy restaurant logo”, “streetwear branding”, “modern color palette”.
Vous trouverez des moodboards déjà créés par d’autres.
Behance / Dribbble : des plateformes de designers professionnels.
Inspirez-vous des mises en page, typographies et styles graphiques.
Google Images : rapide et accessible.
Exemple : tapez “food truck logo vintage” → plein d’idées apparaissent.
Dans la vie réelle : Observez ce qui vous entoure !
Observez les menus de restaurant, les affiches dans la rue, les packagings au supermarché.
Prenez en photo ce qui vous inspire et importez-les ensuite dans Figma.
💡 Astuce : Ne cherchez pas uniquement des logos. Une identité visuelle, c’est aussi une ambiance globale → photos, textures, formes, typographies, couleurs.
Organiser son moodboard
Dans le gabarit Figma, vous trouverez une section "Moodboards"
Placez vos images à l’intérieur des frames Moodboard 1, 2 et 3 par style/thème.
Ajoutez quelques mots-clés avec l’outil Texte (T) pour résumer l’ambiance : Ex: “authentique”, “minimaliste”, “coloré”.
Ajustez la taille pour équilibrer la planche.
Faites la même chose pour les 2 autres planches, mais avec des styles différents.
💡 Astuce : Le moodboard doit juste exprimer une ambiance, pas être beau à 100%.
⛔️ Faites valider par le formateur (votre client) vos moodboards avant de passer à la prochaine étape. Il choisira le concept final que vous développerez pour la marque.
Exemple :
Palette de couleurs
Maintenant que votre moodboard a été approuvé par votre client, basez-vous sur les concepts de design pour créer votre palette de couleurs (Roue chromatique, couleurs complémentaires, analogues, triadique, la psychologie des couleurs et son impact émotionnel, imprimabilité, etc.)
Préparez une palette qui comprends :
Une couleur primaire (dominante qui représente la marque)
Une couleur secondaire (harmonie, contraste, hierarchie)
Une couleur d'accent (mise en avant d'éléments clés comme les CTA)
Votre palette de couleur doit comprendre les codes HEX (hexadécimaux) de chacune des couleurs.
Logo
Principes du logo
Simplicité, lisibilité, mémorabilité.
Adaptabilité : un logo doit fonctionner en petit comme en grand, en couleur comme en noir et blanc.
Signification et symbolique : un logo peut refléter l’essence de la marque.
Processus de création
Croquis rapides (idéation par l’esquisse).
Vectorisation dans un logiciel adapté (Illustrator, Affinity Designer, Figma, etc.).
Ajustements de proportions, équilibre et symétrie.
Déclinaisons
Version verticale (complète, avec nom de la marque un à côté de l'autre).
Version horizontale (omplète, avec nom de la marque un au dessus de l'autre).
Icône/symbole (Logomark) (favicon, réseaux sociaux, estampille).
Résultat attendu : 3 déclinaisons du logo tout en blanc ! Utiliser une seule couleur vous obligera à garder le concept simple.
Typographie et iconographie
La typographie et l’iconographie sont deux piliers d’une identité visuelle. Elles transmettent la personnalité de la marque avant même qu’on lise le contenu.
Choisir une ou deux polices de caractères cohérentes avec l’identité
Pourquoi limiter à 1 ou 2 polices ?
Trop de polices → effet brouillon, manque de cohérence.
Une ou deux bien choisies → unité et professionnalisme.
👉 En règle générale :
1 police pour les titres et éléments impactants et larges (style affirmé).
1 police pour le texte courant (lisible et sobre).
Polices pour les titres
Leur rôle : attirer l’œil, donner une personnalité forte.
Souvent plus audacieuses, décoratives, ou modernes (sans l'être trop)
Exemples de styles et leurs effets :
Sans-serif géométrique (ex. Poppins, Montserrat) → moderne, accessible.
Serif classique (ex. Playfair Display, Times New Roman) → élégant, prestigieux.
Manuscrite / script (ex. Pacifico) → ludique, artisanal.
Condensée (étroite) → urbaine, dynamique.
Polices pour le texte courant
Leur rôle : faciliter la lecture, même sur de longs paragraphes.
Toujours sobres, simples, régulières.
Exemples de choix sûrs :
Sans-serif lisible (ex. Inter, Roboto, Open Sans).
Serif moderne (ex. Merriweather) pour un effet plus sérieux.
Association typographique
Le duo titre/texte doit créer un équilibre :
Contraste : une police expressive pour les titres + une police neutre pour le texte.
Complémentarité : éviter que les deux se ressemblent trop.
Cohérence : toutes deux doivent refléter la personnalité de la marque.
👉 Exemple :
Restaurant écoresponsable → Titre : Playfair Display (élégant), Texte : Inter (sobre).
Marque streetwear → Titre : Anton (impact visuel fort), Texte : Roboto (neutre et lisible).
Hiérarchie typographique
Une fois les polices choisies, il faut organiser comment elles s’utilisent.
Taille : gros titres (H1), sous-titres (H2/H3), texte courant (body).
Graisse (épaisseur) : bold pour attirer l’attention, regular pour lire confortablement.
Espacement : jouer sur l’interligne et l’espace entre lettres pour renforcer la lisibilité.
👉 Exemple pratique :
H1 (titre principal) : 48 px, bold.
H2 (sous-titre) : 28 px, semi-bold.
Texte courant : 16 px, regular, interligne 1.5.
Utilisez un outil comme Typescale pour vous aider !
Icônes et illustrations
Les icônes et illustrations renforcent l’univers de la marque, mais attention : si les styles ne sont pas cohérents, l’identité paraît amateur.
Styles possibles
Icônes linéaires (outline) : modernes, minimalistes.
Icônes pleines (filled) : plus affirmées, simples à comprendre.
Pictogrammes : très simplifiés, pratiques pour signalétique ou menus.
Illustrations organiques (dessinées à la main, formes irrégulières) : ludiques, humaines.
Illustrations vectorielles stylisées : professionnelles, web-friendly.
Comment choisir
Le style doit être aligné avec la personnalité définie à l’étape 1 :
Marque prestigieuse → icônes fines, élégantes, discrètes.
Marque ludique → illustrations colorées, formes arrondies.
Marque éco-responsable → pictogrammes simples, inspirés de la nature.
Marque streetwear → icônes pleines, lignes audacieuses.
Cohérence visuelle
Toujours utiliser la même famille d’icônes (ex. tous outline ou tous filled).
Éviter de mélanger un style cartoon avec un style hyper-réaliste.
Harmoniser avec la typographie et la palette de couleurs choisies.
Trouvez maintenant une bibliothèque d'icônes que vous pourriez utiliser pour votre projet : Phosphor, Feather, Material, etc.
⛔️ Faites valider par le formateur (votre client) vos polices, icônes, palette de couleurs et logo avant de passer à la prochaine étape. C'est à ce moment que le formateur vous donnera votre livrable pour supports imprimés.
Supports imprimés
Une identité visuelle ne vit pas uniquement sur un écran : elle doit aussi être capable de s’incarner dans des supports concrets que les gens manipulent, voient ou partagent. Pour cette partie du projet, vous allez créer deux items imprimables (Carte d'affaire, emballage, affiche, etc.).
Carte d’affaires (Business Card)
La carte d’affaires est un support emblématique : petite, mais puissante, elle doit concentrer l’essence de la marque en un format de poche.
Recto (face avant)
Logo → l’élément central, immédiatement reconnaissable.
Nom de la marque → placé de façon claire, en cohérence avec la hiérarchie typographique.
Slogan (facultatif) → si la marque en possède un, il doit renforcer le message (ex. « Frais, local, écoresponsable » pour un resto fictif).
👉 L’objectif : créer un visuel percutant qui donne envie de retourner la carte.
Verso (face arrière)
Informations de contact (fictives pour l’exercice) :
Nom d’un fondateur fictif.
Numéro de téléphone.
Adresse e-mail.
Site web ou réseaux sociaux.
Organisation hiérarchisée → informations essentielles mises en avant (site web ou email), détails secondaires en plus petit.
Points clés de design
Lisibilité → taille du texte suffisante, contraste clair/foncé.
Hiérarchie visuelle → le regard doit d’abord accrocher le logo, puis passer naturellement aux infos.
Équilibre → pas trop chargé, aéré, marges respectées.
Résultat attendu
Chaque équipe devra livrer au moins deux supports imprimés finalisés.
👉 Tous les supports devront :
Réutiliser la palette de couleurs.
Intégrer le logo et ses déclinaisons.
Respecter la hiérarchie typographique.
Maintenir une cohérence visuelle globale.
🛠️ Ressources
Voici quelques ressources pertinentes :
Tutoriels
Formation Figma Débutant
Les bases de figma
Les bases d'Affinity Designer
Créer un logo dans Affinity Designer
Inspirations
Outils
Google Fonts (Polices)
Typescale (Taille des polices)
Coolors (Palette de couleurs)
Bibliothèques d'icônes
Cari Institute (Styles)