Ton identité web
0 / 9 leçons terminées
Réussir son identité web 🏆
Tu sais produire des photos et des vidéos. Il te manque tout le reste : un logo, un site, une page de liens, des visuels. Ce module te fait passer de « je crée du contenu » à « j'ai une marque ».
⚠️ L'erreur que fait 90 % des débutants
Ils créent un logo lundi, une story mardi, un site jeudi — et rien ne va ensemble.
Trois polices différentes, quatre bleus qui ne sont pas le même bleu, un logo qui ne ressemble pas au site. Résultat : ça fait bricolé, et on n'achète pas à quelqu'un qui a l'air bricolé.
1️⃣ La charte d'abord, tout le reste ensuite
Tes couleurs et tes typos se décident une seule fois, à la leçon 2. Après, chaque visuel les réutilise.
C'est ennuyeux, ça prend 30 minutes, et c'est ce qui sépare une marque d'un compte Instagram.
2️⃣ Une IA sans contexte produit du générique
Exactement comme pour tes photos. Si tu demandes « fais-moi un logo », tu auras le logo de tout le monde.
C'est pour ça qu'on commence par écrire ta fiche identité — ce que tu vends, à qui, avec quelle personnalité. Tu la colleras au début de chaque prompt de ce module.
3️⃣ Tu n'as pas besoin de savoir coder
Ton site et ta page de liens ne se construisent pas dans un logiciel compliqué. Tu les décris, l'IA écrit le fichier, tu le déposes en ligne. Trois minutes, gratuit.
Si tu sais glisser un fichier dans une fenêtre, tu sais mettre un site en ligne.
📝 Ta fiche identité — fais-la maintenant
Remplis ces 6 lignes dans tes notes. Tu vas les recoller dans tous les prompts qui suivent.
Ton logo & ta charte graphique 🎨
On commence par la charte, pas par le logo. Parce qu'un logo sans charte, c'est juste une image — et tu vas devoir tout refaire dans deux mois.
Étape 1 · Ta charte en 3 couleurs et 2 polices
Pas plus. Une charte, ce n'est pas une palette de 12 couleurs : c'est une couleur principale, une couleur de fond, une couleur d'accent. Et deux polices : une pour les titres, une pour le texte.
Tu es directeur artistique. Propose-moi 3 chartes graphiques complètes et distinctes pour ma marque. MA FICHE IDENTITÉ : - Nom : [NOM] - Ce que je vends : [UNE PHRASE] - Ma cliente idéale : [UNE PHRASE] - Mes 3 adjectifs : [ADJ 1, ADJ 2, ADJ 3] - Marques dont j'aime l'esthétique : [3 MARQUES] - Ce que je ne veux surtout pas : [TES INTERDITS] Pour CHAQUE proposition, donne-moi exactement : 1. Un nom d'ambiance (2-3 mots) 2. Trois couleurs avec leur code hexadécimal : une principale, une de fond, une d'accent. Précise en une ligne pourquoi ce trio fonctionne. 3. Deux polices Google Fonts (gratuites) : une pour les titres, une pour le texte. Donne leur nom exact. 4. Une phrase qui décrit la personnalité visuelle obtenue. Contraintes : - Les 3 propositions doivent être vraiment différentes, pas 3 variantes de la même. - Vérifie que le texte reste lisible sur le fond (contraste suffisant). - Uniquement des polices Google Fonts gratuites.
Étape 2 · Ton logo
Ton logo doit fonctionner en tout petit — dans un cercle de photo de profil Instagram, à 40 pixels. Si on ne le reconnaît pas à cette taille, il est raté.
C'est pourquoi on demande du simple. Pas d'illustration détaillée, pas de dégradé, pas de slogan intégré.
Crée un logo pour la marque "[NOM]". Activité : [CE QUE TU VENDS, UNE PHRASE] Personnalité : [TES 3 ADJECTIFS] Couleurs imposées : [TA COULEUR PRINCIPALE] et [TA COULEUR D'ACCENT], sur fond [TA COULEUR DE FOND] Style demandé : - Minimaliste, à plat, sans dégradé, sans ombre, sans effet 3D. - Une seule idée visuelle forte : soit un monogramme (les initiales), soit un symbole simple. - Doit rester lisible et reconnaissable à très petite taille (photo de profil). - Pas de slogan, pas de texte en dehors du nom. Format : carré, fond uni.
⚠️ Le piège du logo
L'IA adore les logos compliqués : dégradés, effets, symboles bricolés dans une lettre. Ça rend bien sur l'écran de génération et c'est illisible partout ailleurs.
Plus c'est simple, plus ça tient. Regarde les marques que tu admires : elles ont presque toutes un logo qu'un enfant pourrait dessiner de mémoire.
Ton site web avec l'IA 🌐
De zéro à en ligne, sans coder, sans abonnement, sans WordPress. Tu décris ton site, l'IA écrit le fichier, tu le déposes sur Internet. Compte 1 heure la première fois.
🧭 La méthode en 4 temps
1. Tu écris le brief (10 min) → 2. L'IA génère le site (5 min) → 3. Tu demandes des retouches (20 min) → 4. Tu le mets en ligne (3 min)
Étape 1 · Le brief
Un site de solo-entrepreneur, c'est une seule page. Pas un menu à 8 onglets. Une page qu'on déroule, qui répond à quatre questions dans cet ordre :
→ Qu'est-ce que tu fais ? (au-dessus de la ligne de flottaison)
→ Pourquoi je devrais te croire ?
→ Qu'est-ce que je gagne concrètement ?
→ Comment je te contacte / j'achète ?
C'est tout. Une page qui répond à ça convertit mieux qu'un site de 12 pages.
Crée-moi un site web en UNE SEULE PAGE, dans un unique fichier index.html autonome (CSS et JavaScript inclus dans le fichier, aucune dépendance externe sauf les Google Fonts). MA FICHE IDENTITÉ : - Nom : [NOM] - Ce que je vends : [UNE PHRASE] - Ma cliente idéale : [UNE PHRASE] - Mes 3 adjectifs : [ADJ 1, ADJ 2, ADJ 3] MA CHARTE (à respecter strictement) : - Couleur principale : [#XXXXXX] - Couleur de fond : [#XXXXXX] - Couleur d'accent : [#XXXXXX] - Police titres : [NOM] - Police texte : [NOM] STRUCTURE DE LA PAGE, dans cet ordre : 1. Hero : mon logo, une accroche en 6 mots maximum, une phrase d'explication, un bouton d'action. 2. Le problème que je résous, en 3 points. 3. Ce que je propose : mon offre, ses bénéfices concrets (pas ses caractéristiques). 4. Qui je suis : une photo, 3 phrases, ce qui me légitime. 5. Une section de réassurance (questions fréquentes, 4 questions). 6. L'action finale : un bouton, et mon contact. EXIGENCES TECHNIQUES : - Responsive, pensé mobile d'abord. - Les images sont desavec un src en placeholder que je remplacerai. - Textes rédigés par toi, prêts à publier, dans un ton [TES 3 ADJECTIFS]. - Aucun lorem ipsum : écris de vrais textes. - Code propre et commenté en français, pour que je puisse modifier moi-même.
Étape 2 · Les retouches
Le premier jet ne sera pas parfait. C'est normal — et c'est là que la plupart abandonnent. Ne recommence pas de zéro : demande des corrections précises.
« Le hero est trop chargé, garde uniquement l'accroche et le bouton. »
« Les boutons sont trop petits sur mobile. »
« Remplace la FAQ par 3 témoignages. »
Une demande à la fois. Tu itères, tu ne repars pas à zéro.
Étape 3 · Mettre en ligne (3 minutes, gratuit)
Ta page de liens premium 🔗
C'est le lien de ta bio Instagram. Le seul lien cliquable que tu as. Et 90 % des gens y mettent un Linktree gratuit gris avec la pub de Linktree dessus.
Pourquoi ne pas utiliser Linktree
→ Tes visiteurs voient la marque de Linktree, pas la tienne
→ Tu ne contrôles ni les couleurs, ni les polices, ni la mise en page
→ Tu ne peux pas y mettre une vidéo qui se lance toute seule
La page que tu vas faire est exactement la même méthode que ton site — en dix fois plus court. Un fichier, un zip, Netlify.
Crée-moi une page de liens (type Linktree) en un seul fichier index.html autonome, pensée pour le mobile. MA CHARTE (à respecter strictement) : - Couleur principale : [#XXXXXX] - Couleur de fond : [#XXXXXX] - Couleur d'accent : [#XXXXXX] - Police titres : [NOM] - Police texte : [NOM] CONTENU, de haut en bas : 1. Ma photo ou mon logo, en rond. 2. Mon nom, puis une ligne qui dit ce que je fais. 3. [SI TU EN AS UNE] Une vidéo de présentation en autoplay, sans son, en boucle, sans contrôles visibles. 4. Mes boutons de liens, dans cet ordre d'importance : - [LIEN 1 : intitulé + URL] - [LIEN 2 : intitulé + URL] - [LIEN 3 : intitulé + URL] 5. Mes icônes de réseaux sociaux, en bas. EXIGENCES : - Tout doit tenir sur un écran de téléphone sans scroller, ou presque. - Les boutons sont larges, hauts, faciles à toucher au pouce. - Une animation discrète au survol / au toucher. - Aucune dépendance externe sauf les Google Fonts. - Code commenté en français.
La mise en ligne
Tes flyers & affiches 📄
Print ou digital, la logique est la même : une affiche se lit en 3 secondes, de loin. Si on doit s'approcher pour comprendre, elle est ratée.
La règle des 3 secondes
Une affiche contient une seule information principale, et elle doit être lisible à 3 mètres.
→ Un message fort (5 mots max)
→ Une image qui accroche
→ Une action : où aller, quoi faire
→ Ton logo
Tout le reste — l'adresse, les horaires, les mentions — passe en tout petit, en bas.
⚠️ L'IA et le texte dans les images
Les générateurs d'images écrivent encore mal le texte : lettres tordues, mots inventés, accents qui sautent.
La bonne méthode : tu génères le fond avec l'IA, et tu ajoutes le texte par-dessus dans Canva. Tu gardes le rendu IA et un texte impeccable.
Crée le VISUEL DE FOND d'une affiche. Aucun texte dans l'image. Sujet : [CE QUE TU MONTRES : ton produit, ton mannequin IA, une ambiance…] Ambiance : [TES 3 ADJECTIFS] Couleurs dominantes : [TA COULEUR PRINCIPALE] et [TA COULEUR DE FOND] Composition : - Laisse une zone volontairement vide et calme dans [le tiers supérieur / le tiers inférieur] : j'y ajouterai mon texte. - Le sujet est décentré, pas au milieu. - Rendu photographique réaliste, lumière naturelle, grain léger. Interdits : aucun texte, aucune lettre, aucun logo, aucun filigrane. Format : A4 vertical (rapport 1:1,41).
Le montage dans Canva
Tes cartes de visite 💼
Format 85 × 55 mm. Une carte de visite ne raconte pas ta vie : elle fait qu'on te retrouve.
Ce qu'on met dessus
Recto — ton logo, sur ta couleur de marque. Rien d'autre. Une carte dont le recto est juste un logo sur un aplat de couleur, ça a l'air cher.
Verso — ton nom, ce que tu fais (4 mots), ton contact (un mail, un compte Instagram, une adresse de site). Un QR code vers ta page de liens.
⚠️ Les 3 erreurs classiques
✖️ Mettre trois numéros, deux mails et cinq réseaux. Personne ne t'écrira sur cinq canaux : choisis-en un ou deux.
✖️ Écrire trop petit. En dessous de 8 points, ça ne se lit plus.
✖️ Coller le texte au bord. Prévois 4 mm de marge, sinon l'imprimeur te le coupe.
Dans Canva, en 15 minutes
Tes templates réseaux sociaux 📱
Un template, c'est un design que tu fais UNE fois et que tu réutilises cent fois. C'est ce qui te fera passer de 40 minutes par post à 4 minutes.
🎯 Les 5 templates dont tu as besoin
1. Le post citation — ta couleur de fond, une phrase forte, ton logo en bas
2. Le carrousel — une page de couverture, des pages de contenu, une page d'action
3. La story — cadre vertical avec une zone pour le texte
4. La cover de reel — le titre de ta vidéo, lisible dans la grille
5. La bannière — pour LinkedIn, YouTube ou ta newsletter
La règle du template
Un template n'est un template que si tu ne changes que le texte. Dès que tu déplaces les éléments, tu recommences à bricoler.
Position du logo, taille du titre, marges : elles ne bougent jamais. C'est cette répétition qui crée la reconnaissance.
Comment les créer
Tu es directeur artistique. Décris-moi précisément 5 templates de réseaux sociaux pour ma marque, que je vais reproduire dans Canva. MA CHARTE : - Couleur principale : [#XXXXXX] · Fond : [#XXXXXX] · Accent : [#XXXXXX] - Police titres : [NOM] · Police texte : [NOM] - Personnalité : [TES 3 ADJECTIFS] Les 5 templates : post citation · couverture de carrousel · story · cover de reel · bannière. Pour CHACUN, donne-moi : 1. Le format exact en pixels. 2. La composition, zone par zone (où va le titre, où va le logo, quelles marges). 3. Les tailles de police en points. 4. Une phrase d'exemple pour le remplir. Sois assez précis pour que je puisse le reproduire sans réfléchir. Pas de théorie : des instructions.
Ta signature mail ✉️
Le détail que personne ne fait, et qui te fait passer pour une entreprise plutôt que pour quelqu'un qui écrit depuis sa cuisine.
Ce qu'elle contient
→ Ton nom et ce que tu fais
→ Ton logo, petit
→ Un lien : ton site ou ta page de liens
→ Éventuellement une ligne d'accroche (« Je crée du contenu IA pour les marques »)
Et c'est tout. Pas de citation inspirante, pas de quatre logos de réseaux, pas de « Pensez à l'environnement avant d'imprimer ».
Crée-moi une signature d'e-mail en HTML, dans un seul bloc que je pourrai coller dans Gmail. MES INFOS : - Nom : [TON NOM] - Ce que je fais : [4-5 MOTS] - Site ou page de liens : [URL] - Mail : [TON MAIL] MA CHARTE : - Couleur principale : [#XXXXXX] · Accent : [#XXXXXX] - Police : une police système lisible (les Google Fonts ne s'affichent pas dans tous les clients mail) EXIGENCES TECHNIQUES : - Structure en tableau HTML (c'est la seule chose que les clients mail affichent correctement). - Styles en ligne uniquement (style="..."), aucun CSS externe. - Largeur maximale 500 px. - Lisible en mode sombre comme en mode clair. - Pas d'image de fond, pas de police exotique.
L'installer dans Gmail
Tes mockups & présentation d'offre 🖼️
Un mockup, c'est une mise en situation : ton ebook posé sur une table, ta formation affichée sur un écran, ton produit dans une main. C'est ce qui rend tangible quelque chose qui n'existe que dans un fichier.
Pourquoi c'est décisif
On n'achète pas un « PDF de 40 pages ». On achète un objet qu'on peut se représenter.
Le même produit, présenté comme un fichier ou présenté posé sur un bureau avec une tasse de café à côté, ne se vend pas au même prix. C'est le mockup qui fait la différence.
Crée une photo de mise en situation ultra-réaliste de mon produit. MON PRODUIT : [ex : un ebook, un carnet, une formation affichée sur un écran d'ordinateur portable, un pot de crème…] LA COUVERTURE / L'ÉCRAN AFFICHE : [décris ce qu'on voit dessus, ou joins ton visuel] LA SCÈNE : - Lieu : [ex : un bureau clair en bois, un plan de travail en marbre, une table de café…] - Autour : [2 ou 3 objets qui racontent ma cliente : une tasse, des lunettes, une plante…] - Lumière : naturelle, venant d'une fenêtre sur le côté. - Angle : [vue du dessus / légèrement de trois quarts]. RENDU : - Photographique, réaliste, faible profondeur de champ, le produit est net. - Ombres douces et cohérentes avec la lumière. - Les couleurs de la scène s'accordent avec [TA COULEUR PRINCIPALE]. Interdits : rendu 3D artificiel, texte illisible sur la couverture, objets flottants sans ombre. Format : 4:5.
⚠️ La ligne à ne pas franchir
Un mockup montre ton produit sous son meilleur jour. Il ne fabrique pas une preuve.
Ne génère jamais une fausse cliente en train d'utiliser ton produit et ne la présente pas comme un vrai témoignage. Tu peux mettre en scène — tu ne peux pas mentir. (On l'a vu au Module 1.)
Ta présentation d'offre
Une fois tes mockups faits, assemble-les en une page qui présente ton offre : le mockup en haut, ce que ça contient, pour qui, le prix, le bouton.
C'est le même prompt que ton site (leçon 3), en plus court — une seule section, un seul objectif : faire cliquer.