De la personnalité de marque au mini brand book : couleurs, typographies, logo et déclinaisons — pour avoir l'air pro dès le premier jour, même sans designer.
NoCode & Co · Jean Patrick Iehlen — Formateur IA & NoCode
La personnalité de marque avant les couleurs — sinon vous décorez du vide.
Construire une palette pro : psychologie, règle 60-30-10, contraste.
Choisir 2 polices qui travaillent ensemble, gratuitement.
Ce qui fait un bon logo, et 3 façons de l'obtenir selon votre budget.
Tout assembler dans une mini-charte d'1 page, applicable partout.
4 exercices
6 prompts Claude
et votre charte V1 en sortant
C'est le temps qu'il faut à un visiteur pour se faire une opinion sur votre site — avant d'avoir lu un seul mot.
Source : étude Lindgaard et al., « Attention web designers: You have 50 milliseconds »
Objectif réaliste du jour : pas une charte d'agence à 15 000 € — une mini-charte V1 propre et cohérente, qui tiendra 1 à 2 ans et que vous pourrez faire évoluer.
Les couleurs expriment une personnalité. Encore faut-il en avoir une.
Imaginez votre marque comme quelqu'un qui entre dans la pièce. Comment est-elle habillée ? Comment parle-t-elle ? Qu'est-ce qu'elle ne ferait jamais ?
Exemples :
Ces 6 mots sont votre boussole pour TOUTES les décisions visuelles à venir. Couleur hésitante ? Typo hésitante ? Revenez aux adjectifs.
Tu es un directeur de création en agence de branding, habitué à travailler avec des créateurs d'entreprise au budget limité. Mon projet : - Activité : [ACTIVITÉ] - Cible : [CIBLE — qui elle est, ce qui la rassure] - Mes 3 adjectifs de marque : [ADJ 1, ADJ 2, ADJ 3] - Mes 3 anti-adjectifs (à ne jamais dégager) : [ANTI 1, ANTI 2, ANTI 3] - Marques dont j'aime l'ambiance (même hors secteur) : [2-3 MARQUES] - Mon concurrent principal ressemble à : [DESCRIPTION RAPIDE DE SON STYLE] Construis ma plateforme de marque en 1 page : 1. PERSONNALITÉ : un portrait de ma marque comme si c'était une personne (3-4 phrases vivantes). 2. PROMESSE : la phrase qui résume ce que ma marque garantit à ses clients (3 variantes). 3. TON DE VOIX : comment ma marque parle — 4 règles d'écriture concrètes avec pour chacune un exemple "on dit / on ne dit pas". 4. TERRITOIRE VISUEL : à partir des adjectifs, décris l'ambiance visuelle recommandée (moderne/classique, épuré/riche, chaud/froid, arrondi/anguleux) SANS choisir encore de couleurs précises. 5. DIFFÉRENCIATION : comment me distinguer visuellement de mon concurrent principal sans tomber dans l'excentrique. Sois concret : chaque section doit m'aider à prendre des décisions, pas à rêver.
Bons viviers : Pinterest, Dribbble, Behance, land-book.com (pour les sites), et… les rayons de supermarché de votre secteur.
La décision la plus visible — et la plus facile à rater.
À manier avec des pincettes : ces associations sont culturelles et contextuelles, pas magiques. Le vrai critère : la couleur sert-elle vos 3 adjectifs, et vous démarque-t-elle de vos concurrents directs ? (Si les 5 leaders de votre secteur sont bleus, le bleu vous rend invisible.)
60% de neutre (fonds), 30% de couleur principale, 10% d'accent. C'est ce dosage — pas les couleurs elles-mêmes — qui fait « pro ».
Le contraste n'est pas négociable : texte foncé sur fond clair (ou l'inverse), jamais de texte gris clair sur blanc. Vérifiez gratuitement avec un « contrast checker » WCAG en ligne (visez le niveau AA minimum) — 8% des hommes sont daltoniens, et Google pénalise l'illisible.
Pas d'inspiration ? Prenez en photo un objet dont vous aimez les couleurs et importez-le dans coolors (fonction « extract from image »). Ou passez directement au prompt suivant.
Tu es un designer spécialisé en identités visuelles, expert en théorie des couleurs et en accessibilité (WCAG). Ma marque : - Activité : [ACTIVITÉ] - 3 adjectifs : [ADJ 1, ADJ 2, ADJ 3] - 3 anti-adjectifs : [ANTI 1, ANTI 2, ANTI 3] - Couleurs dominantes chez mes concurrents directs : [ex : bleu, bleu, vert] - Couleurs que je refuse : [SI VOUS EN AVEZ] - Supports principaux : [SITE WEB / RÉSEAUX SOCIAUX / PACKAGING / VÉHICULE / VITRINE...] Propose-moi 3 palettes complètes, chacune avec une personnalité différente (ex : une sage, une audacieuse, une entre-deux). Pour CHAQUE palette : 1. Un nom d'ambiance + 2 phrases sur ce qu'elle raconte 2. Les codes hex : principale, accent, neutre clair, neutre foncé, + succès et erreur 3. La répartition 60-30-10 appliquée : quelle couleur pour les fonds, les titres, les boutons 4. La vérification contraste : les combinaisons texte/fond autorisées (ratio ≥ 4.5:1) et celles à éviter 5. Un mini-aperçu en texte : à quoi ressemblerait le bouton principal de mon site Termine par ta recommandation argumentée (laquelle des 3 et pourquoi, au regard de mes adjectifs ET de la différenciation concurrentielle).
Astuce démo live : demandez ensuite à Claude « génère une page HTML de démonstration avec la palette recommandée » — les participants voient leur palette vivre en 30 secondes.
La voix silencieuse de votre marque.
Google Fonts : ~1 800 polices gratuites, y compris pour usage commercial, utilisables sur votre site et vos documents. Aucune raison de payer au début — ni de « pirater » une police (oui, les polices ont des licences).
| Titres | Texte | Ambiance | Idéal pour |
|---|---|---|---|
| Montserrat | Open Sans | Moderne, net, fiable | Services, conseil, tech |
| Playfair Display | Source Sans 3 | Élégant, éditorial | Premium, artisanat d'art, hôtellerie |
| Poppins | Inter | Rond, accessible, sympathique | Grand public, éducation, bien-être |
| Space Grotesk | Inter | Tech, contemporain, affirmé | Startups, SaaS, innovation |
| Lora | Lato | Chaleureux, humain, rassurant | Santé, coaching, alimentation |
Test ultime avant de valider : écrivez votre nom de marque + une phrase de votre site dans la police (fonts.google.com permet de taper son propre texte). Une police se juge sur VOS mots, pas sur « Lorem ipsum ».
Tu es un typographe-conseil pour petites marques. Ma marque : [ACTIVITÉ] — adjectifs : [ADJ 1, ADJ 2, ADJ 3] — anti-adjectifs : [ANTI 1, ANTI 2, ANTI 3]. Ma couleur principale : [#HEX]. Polices de titres que je présélectionne sur Google Fonts : [POLICE A, POLICE B, POLICE C] (ou "aucune idée, propose"). 1. Analyse chaque police présélectionnée : ce qu'elle dégage, en quoi elle sert (ou trahit) mes adjectifs. 2. Recommande LE duo final titres + texte (Google Fonts uniquement), avec justification. 3. Donne ma hiérarchie complète : taille et graisse pour H1, H2, H3, texte courant, petites mentions — en pixels pour le web ET en points pour mes documents. 4. Indique les 2 erreurs d'usage typiques avec ce duo, à éviter. 5. Bonus : le fallback système (police de secours) à utiliser dans mes emails, où les polices custom ne s'affichent pas.
Moins important que vous ne le pensez. Plus simple que vous ne le craignez.
Vérité qui libère : au lancement, votre logo compte pour ~5% de votre image. La cohérence couleurs + typos + ton sur tous vos supports compte pour le reste. Un wordmark propre suffit largement pour 1 an.
| Option | Budget | Délai | Pour qui / limites |
|---|---|---|---|
| 🛠️ DIY : Canva + IA | 0 – 15 € | 1 journée | Parfait pour un wordmark de lancement. Limite : évitez les templates Canva ultra-vus ; personnalisez avec VOS typo/couleurs. |
| 🎨 Designer freelance | 300 – 1 500 € | 2-4 sem. | Le bon rapport qualité/prix quand le MVP est validé. La qualité du résultat dépend à 80% de la qualité de votre BRIEF (→ prompt suivant). |
| 🏢 Agence de branding | 3 000 € et + | 1-3 mois | Identité complète + stratégie. Pertinent quand l'entreprise tourne déjà — pas au stade MVP. |
Deux vérifications avant d'adopter un logo : 1) le nom + logo ne sont pas déjà déposés dans votre secteur (recherche sur data.inpi.fr, gratuite) ; 2) si une IA a généré l'image, vérifiez les conditions d'usage commercial de l'outil utilisé.
Tu es un directeur artistique qui rédige des briefs de logo professionnels. Ma marque : - Nom : [NOM] — éventuel slogan : [SLOGAN OU "aucun"] - Activité et cible : [...] - 3 adjectifs : [...] — 3 anti-adjectifs : [...] - Palette validée : principale [#HEX], accent [#HEX], neutres [#HEX, #HEX] - Duo typographique validé : [TITRES + TEXTE] - Logos que j'aime (et pourquoi) : [2-3 EXEMPLES] - Logos de mes concurrents : [DESCRIPTION RAPIDE — pour s'en démarquer] - Usage prioritaire : [SITE / ENSEIGNE / PACKAGING / RÉSEAUX / VÉHICULE...] Rédige un brief de création de logo professionnel contenant : 1. Le contexte de marque en 5 lignes 2. La direction créative : famille recommandée (wordmark / monogramme / symbole+nom) avec justification, style graphique, ce qui est exclu 3. Les contraintes techniques : lisibilité à 32px, version noir & blanc obligatoire, déclinaisons attendues (horizontale, verticale, icône seule), formats de livraison (SVG + PNG fond transparent) 4. Les 3 fausses bonnes idées à éviter pour MON secteur (clichés visuels sur-utilisés) 5. Une grille d'évaluation : les 5 critères sur lesquels je jugerai les propositions Puis ajoute une section "VERSION GÉNÉRATION IA" : 3 prompts en anglais, prêts à coller dans un générateur d'images, pour explorer des pistes visuelles de ce logo (précise bien : résultat = piste d'exploration à faire retracer proprement en vectoriel, pas fichier final).
Ce brief a une double vie : envoyé tel quel à un freelance, il vous fait gagner un aller-retour (et souvent de l'argent). Utilisé avec un générateur d'images, il produit des pistes à faire vectoriser (~50-80 € sur les plateformes freelance).
Une page qui gouverne tous vos supports.
Versions (couleur, N&B, icône), taille minimum, zone de protection, les 3 interdits (déformer, changer les couleurs, fond illisible).
Les codes hex de chaque couleur + son rôle (principale / accent / neutres) + la règle 60-30-10.
Le duo + la hiérarchie (H1, H2, texte, mentions) avec tailles et graisses.
Les 4 règles d'écriture + exemples « on dit / on ne dit pas » (prompt 1).
Style photo/illustration : lumineux ou sombre ? Humain ou objet ? Avec 2-3 images de référence du moodboard.
La liste anti-dérive : les anti-adjectifs traduits en règles visuelles concrètes.
Pourquoi 1 page ? Parce qu'une charte de 40 pages ne sera jamais ouverte. La vôtre doit tenir affichée au-dessus de votre bureau — et être envoyable à n'importe quel prestataire (graphiste, imprimeur, community manager) en une pièce jointe.
Vous venez de créer en 2 heures ce que beaucoup d'entreprises n'ont toujours pas après 5 ans : une identité écrite, cohérente et transmissible.
Claude compile tout votre travail du jour en un document de charte propre — et même en page web.
Tu es un designer senior qui rédige des chartes graphiques claires et actionnables pour de petites entreprises. Voici tous les éléments validés de mon identité : - Marque : [NOM + ACTIVITÉ] - Adjectifs : [3 ADJECTIFS] / Interdits : [3 ANTI-ADJECTIFS] - Ton de voix : [LES 4 RÈGLES DU PROMPT 1, OU "à rédiger"] - Palette : principale [#HEX], accent [#HEX], neutre clair [#HEX], neutre foncé [#HEX] - Typographies : titres [POLICE], texte [POLICE] - Logo : [DESCRIPTION, OU "wordmark : le nom en police de titres, couleur principale"] - Style d'images souhaité : [DESCRIPTION RAPIDE] Étape 1 — Rédige ma charte graphique complète et structurée : 1. La marque en bref (personnalité, promesse) 2. Logo : usages, taille minimum, zone de protection, 5 interdits illustrés par des descriptions 3. Couleurs : rôle de chacune, règle 60-30-10, combinaisons texte/fond autorisées (contraste vérifié) 4. Typographies : hiérarchie complète web (px) et print (pt) 5. Ton de voix : règles + 3 exemples "on dit / on ne dit pas" 6. Images : style, ce qu'on montre, ce qu'on ne montre jamais 7. Checklist "avant de publier quoi que ce soit" (7 points à cocher) Étape 2 — Génère cette charte en un fichier HTML/CSS autonome, élégant, qui UTILISE lui-même ma palette et mes typographies (via Google Fonts) : ma charte doit être sa propre démonstration. Avec les pastilles de couleurs cliquables (copie du code hex au clic).
Tu es un directeur artistique spécialisé en contenus pour réseaux sociaux de petites marques. Ma charte (résumé) : - Marque : [NOM + ACTIVITÉ] — adjectifs : [3 ADJECTIFS] - Palette : [CODES HEX + RÔLES] - Typographies : [TITRES + TEXTE] - Réseaux prioritaires : [LINKEDIN / INSTAGRAM / FACEBOOK / GOOGLE BUSINESS...] 1. Définis mon système visuel de publication : 3 gabarits récurrents (ex : post citation, post conseil, post preuve client) avec pour chacun la composition (zones, couleurs de fond, taille du texte) décrite précisément. 2. Pour chaque gabarit, écris le mode d'emploi Canva pas à pas pour le construire une seule fois en template réutilisable (dimensions exactes par réseau incluses). 3. Donne les règles de cohérence : ce qui ne change JAMAIS d'un post à l'autre (position du logo, couleurs) vs ce qui varie (photo, texte). 4. Propose un test : décris 2 posts d'exemple avec mes gabarits pour que je visualise le rendu. Objectif : que chaque post soit reconnaissable comme "ma marque" en 1 seconde dans un fil d'actualité, même sans lire le nom.
C'est ici que la charte devient rentable : 1 heure pour créer 3 templates Canva → des mois de posts cohérents en 10 minutes chacun, au lieu de réinventer la roue à chaque publication.
Le test final : dans 48h, montrez un support « habillé » à quelqu'un qui ne connaît pas votre projet. S'il dit spontanément un de vos 3 adjectifs — c'est gagné.
Votre idée est testée : problème, cible, MVP, plan 30 jours.
Votre projet est structuré : canvas, marché, prix, prévisionnel, pitch.
Votre marque a un visage : couleurs, typos, logo, charte.
Il ne manque plus qu'une chose, et aucun prompt ne peut la générer à votre place : commencer.
NoCode & Co · Jean Patrick Iehlen · nocodeco.io