{"id":110,"date":"2025-12-19T12:58:20","date_gmt":"2025-12-19T11:58:20","guid":{"rendered":"https:\/\/wp11.infocom.work\/?page_id=110"},"modified":"2025-12-21T12:46:22","modified_gmt":"2025-12-21T11:46:22","slug":"branding-identite-visuelle","status":"publish","type":"page","link":"https:\/\/wp11.infocom.work\/index.php\/branding-identite-visuelle\/","title":{"rendered":"Branding & identit\u00e9 visuelle"},"content":{"rendered":"\n
\n
\n
\n <\/div>\n\n
\n

\n Th\u00e9matique\n <\/p>\n\n

\n Branding & identit\u00e9 visuelle \/<\/span>\n Design Atlas<\/span>\n <\/h1>\n\n

\n Un branding solide, ce n\u2019est pas \u201cun logo + une couleur\u201d. C\u2019est un syst\u00e8me<\/strong> : typographies, couleurs,\n r\u00e8gles d\u2019usage, ton, composants, coh\u00e9rence multi-supports. Ici : une mini-charte, des exemples et des rep\u00e8res actionnables.\n <\/p>\n <\/div>\n <\/div>\n<\/section>\n\n\n\n

\n
\n \n
<\/div>\n
\n

Mini-charte<\/strong>
fondations<\/span><\/p>\n <\/div>\n <\/a>\n\n \n

<\/div>\n
\n

Typographies<\/strong>
hi\u00e9rarchie<\/span><\/p>\n <\/div>\n <\/a>\n\n \n

<\/div>\n
\n

Composants<\/strong>
UI \/ print<\/span><\/p>\n <\/div>\n <\/a>\n\n \n

<\/div>\n
\n

Guides<\/strong>
r\u00e8gles<\/span><\/p>\n <\/div>\n <\/a>\n <\/div>\n<\/section>\n\n\n\n

\n

\n Mini-charte (exemple)\n <\/h2>\n\n
\n
\n Brand system<\/span>\n Logo<\/span>\n Couleurs<\/span>\n Typo<\/span>\n Usage<\/span>\n <\/div>\n\n
\n \n
\n
\n

Logo lockup<\/p>\n

\n
DESIGN<\/div>\n
ATLAS<\/div>\n <\/div>\n <\/div>\n
\n Exemple volontaire : Sans tr\u00e8s forte<\/strong> + serif italique<\/strong> pour cr\u00e9er un contraste \u201c\u00e9ditorial\u201d.\n R\u00e8gle : le lockup ne change jamais (m\u00eames proportions, m\u00eames espaces).\n <\/div>\n <\/div>\n\n \n
\n
\n

Color tokens<\/p>\n\n

\n
\n
<\/div>\n
INK
#0E0E0E<\/div>\n <\/div>\n
\n
<\/div>\n
PAPER
#FAFAFA<\/div>\n <\/div>\n
\n
<\/div>\n
ATLAS\n\nOk, on passe en **mode frappe nucl\u00e9aire**, mais en restant **compatible Gutenberg** (HTML personnalis\u00e9). \nJe te donne une page **Branding & Identit\u00e9 visuelle** ultra visuelle + mini-charte + \u201cmicro-interactions\u201d (hover + accord\u00e9ons `
`). \n\n\u2705 Copie-colle **les blocs dans l\u2019ordre** : **A \u2192 B \u2192 C \u2192 D \u2192 E**. \n*(Chaque bloc est autonome, donc si un bloc te saoule tu peux l\u2019enlever sans casser la page.)*\n\n—\n\n## \u2705 BLOC A \u2014 HERO (lourd, visuel, \u201cbrand energy\u201d)\n\u00ab\u00a0`html\n
\n
\n
\n <\/div>\n\n
\n

\n Th\u00e9matique\n <\/p>\n\n

\n Branding & identit\u00e9 visuelle \/<\/span>\n Design Atlas<\/span>\n <\/h1>\n\n

\n Une identit\u00e9 visuelle solide est un syst\u00e8me<\/strong> : r\u00e8gles, composants, ton, coh\u00e9rence multi-supports.\n Ici, tu as un exemple de mini-charte (tokens, typographies, logo lockup) + des \u201cguides\u201d concis.\n <\/p>\n <\/div>\n <\/div>\n<\/section><\/details><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/section>\n\n\n\n

\n

\n Typographies : 3 directions (exemples)\n <\/h2>\n\n
\n
\n \n Direction A<\/span>\n Strict Swiss<\/span>\n Neutre, lisible, ultra pro.<\/span>\n <\/summary>\n
\n

\n Titres : Helvetica\/Arial Bold<\/strong>
\n Texte : Helvetica\/Arial Regular<\/strong>
\n Usage : portfolios, \u00e9ditorial, sites de studio.\n <\/p>\n <\/div>\n <\/details>\n\n

\n \n Direction B<\/span>\n Editorial Contrast<\/span>\n \n Classy, culture, \u201cmagazine\u201d.\n <\/span>\n <\/summary>\n
\n

\n Titres : Serif italique<\/strong> (fallback Georgia)
\n Texte : Sans neutre<\/strong> (fallback Arial)
\n Usage : marques culturelles, mode, luxe sobre.\n <\/p>\n <\/div>\n <\/details>\n\n

\n \n Direction C<\/span>\n Mono Utility<\/span>\n \n Tech, UI, tokens, pr\u00e9cision.\n <\/span>\n <\/summary>\n
\n

\n Titres : Sans bold<\/strong>
\n Meta : Monospace<\/strong>
\n Usage : design systems, produits, dashboards.\n <\/p>\n <\/div>\n <\/details>\n <\/div>\n<\/section>\n\n\n\n

\n

\n Composants (UI \/ print) + guides rapides\n <\/h2>\n\n
\n \n
\n
\n

\n Component \u2014 UI card\n <\/p>\n

\n Primary card\n <\/h3>\n

\n Une carte = une r\u00e8gle : marges, contraste, hi\u00e9rarchie stable.\n <\/p>\n <\/div>\n\n

\n
\n Bouton primaire<\/span>\n Secondaire<\/span>\n Tag<\/span>\n <\/div>\n\n

\n R\u00e8gle : une couleur d\u2019action (primary), le reste neutre. Le branding se voit dans la r\u00e9p\u00e9tition, pas dans l\u2019effet.\n <\/p>\n <\/div>\n <\/div>\n\n \n

\n
\n

\n Component \u2014 Print layout\n <\/p>\n <\/div>\n\n

\n
\n

\n Brochure \/ A4\n <\/p>\n

\n Brand story\n <\/h3>\n

\n Un print propre = hi\u00e9rarchie stable + blancs g\u00e9n\u00e9reux + contraste lisible. \u00c9vite les fonds trop satur\u00e9s.\n <\/p>\n

<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n
\n
\n
\n

Guide 1<\/p>\n

\n Coh\u00e9rence\n <\/h3>\n

\n Un syst\u00e8me simple r\u00e9p\u00e9t\u00e9 100 fois bat un syst\u00e8me compliqu\u00e9 utilis\u00e9 5 fois.\n <\/p>\n <\/div>\n\n

\n

Guide 2<\/p>\n

\n Contraste\n <\/h3>\n

\n Si on ne lit pas, ce n\u2019est pas du branding : c\u2019est du d\u00e9cor.\n <\/p>\n <\/div>\n\n

\n

Guide 3<\/p>\n

\n R\u00e8gles d\u2019usage\n <\/h3>\n

\n D\u00e9finis ce qui est autoris\u00e9\/interdit : tailles de logo, marges, couleurs, ton.\n <\/p>\n <\/div>\n <\/div>\n <\/section>\n<\/section>\n\n\n\n

\n