L’essentiel en bref
- Gradiently peut lire le site web d’une marque et proposer son nom, sa description, sa couleur de thème et son icône pour le kit de marque.
- Rien n’est ajouté automatiquement : chaque élément trouvé apparaît comme une suggestion que vous pouvez utiliser ou ignorer.
- Le nom vient des balises de nom du site, la description de sa meta description, la couleur de sa balise theme-color et l’icône de son icône tactile ou de son favicon.
- Un site sans balise theme-color ou avec seulement une icône SVG donne moins de suggestions : quelques lignes dans son head HTML améliorent le résultat.
- La lecture d’un site fait partie du kit de marque, inclus dans Gradiently Pro.
Sur cette page
Pour importer votre marque depuis votre site dans Gradiently, ouvrez la page Marque, saisissez votre adresse dans Site web sous Identité et choisissez Lire le site. Gradiently récupère le nom du site, sa description, sa couleur de thème et son icône, puis propose chacun : utiliser le nom, utiliser la description comme slogan ou pour À propos, ajouter la couleur à vos couleurs de marque, ajouter l’icône comme logo. Vous choisissez ce qui entre. Cela prend quelques secondes et vous épargne la partie la plus fastidieuse de la configuration d’un kit.
Importer votre marque depuis un site web
- 1
Ouvrez la page Marque
Choisissez la marque à remplir. Chaque marque de votre compte a son propre kit : vérifiez que vous êtes dans la bonne.
- 2
Saisissez le site web
Sous Identité, saisissez l’adresse dans Site web. Un simple domaine comme
crumb.cosuffit ; le https est inutile. - 3
Choisissez Lire le site
Gradiently consulte la page une fois, lit son head et récupère son icône. Le bouton affiche Lecture… pendant le traitement.
- 4
Utilisez ce qui convient
Chaque élément trouvé apparaît avec son propre bouton : Utiliser « Crumb » comme nom, Utiliser sa description comme slogan, Utiliser sa description pour À propos, Ajouter sa couleur, Ajouter son icône comme logo. Ignorez ce qui ne va pas.
- 5
Relisez après des changements
Si vous mettez votre site à jour, choisissez Relire. Quand tout ce qui est utile se trouve déjà dans le kit, la page vous l’indique.
La couleur du site réapparaît aussi plus tard comme suggestion dans la section Couleurs, accompagnée du nom de votre site : vous pouvez l’y ajouter si vous l’avez ignorée la première fois.
Ce que Gradiently lit sur votre site
Il ne lit que la page d’accueil publique à l’adresse indiquée, et seulement les parties qui décrivent la marque. Il ne parcourt pas d’autres pages, ne se connecte pas et ne lit pas votre contenu.
og:site_name, application-name ou le titre d’app web AppleDevient
Provenance
meta name="description", ou la description Open GraphDevient
meta name="theme-color" en hex ou rgb()Devient
apple-touch-icon, les autres icônes matricielles, puis /favicon.icoDevient
Deux détails sont bons à savoir. Les icônes SVG sont ignorées, car Gradiently ne pixellise pas le SVG de quelqu’un d’autre : un site qui n’a qu’un favicon SVG ne donne donc pas d’icône. Et la couleur doit être une simple valeur hex ou rgb() ; une variable CSS dans la balise theme-color ne peut pas être lue.
Rendre votre site facile à lire
Si Lire le site renvoie peu de choses, la solution tient en général en quelques lignes dans le head HTML de votre site. Elles servent bien au-delà de Gradiently : les navigateurs utilisent theme-color pour la barre d’adresse sur téléphone, et les aperçus de liens utilisent vos balises Open Graph. Les balises Open Graph et le design de favicon vont plus loin.
<head>
<title>Crumb · Sourdough bakery in Leeds</title>
<meta name="description" content="Slow sourdough and pastries, baked every morning on Kirkgate.">
<meta property="og:site_name" content="Crumb">
<meta name="theme-color" content="#c2410c">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
</head>Donne peu
- Pas de meta description, ou une description bourrée de mots-clés
- Pas de balise theme-color, ou une variable CSS dedans
- Seulement un favicon SVG
- Une page d’accueil qui redirige vers un écran de connexion
Donne un kit bien lancé
- Une phrase honnête sur ce que vous faites
- Une couleur de thème en hex assortie à votre logo
- Une icône tactile PNG en 180×180
- Une page d’accueil publique qui se charge vite
Que faire après l’import
L’import vous donne une base, pas un kit terminé. Quatre choses méritent d’être faites ensuite, dans cet ordre.
- Importez de vrais fichiers de logo. Un favicon est minuscule et carré. Ajoutez votre logo complet en PNG, JPEG, WebP, GIF ou AVIF, un pour les fonds sombres et un pour les fonds clairs ; voir un logo sur un fond en dégradé.
- Complétez les couleurs. Une couleur de thème est un début. Ajoutez une couleur de soutien ainsi que vos neutres les plus sombres et les plus clairs ; comment choisir ses couleurs de marque vous aide.
- Réglez vos polices. Choisissez une police de titre et une police de texte, ou importez vos propres fichiers de police.
- Écrivez la voix. Une description de site dit au Designer ce que vous êtes, pas comment vous parlez. Remplissez Ton, Avec vos mots, Toujours et Jamais ; la voix de marque pour l’IA montre comment.
Une première publication juste après l’import : nom et description tirés du site.
La même marque en story 1080×1920, prête une fois le kit configuré.
Quand la lecture d’un site échoue
Si vous voyez Nous n’avons pas pu lire ce site web, la page n’a pas répondu à temps, a renvoyé une erreur ou a bloqué la requête. Vérifiez que l’adresse s’ouvre dans une fenêtre de navigation privée. Les adresses qui pointent vers un réseau privé, une page de connexion ou un fichier plutôt qu’une page web sont refusées volontairement. Un site derrière une protection anti-robots stricte peut ne jamais être lisible ; saisissez alors les informations à la main, ce qui prend deux minutes.
Une fois le kit rempli, le Studio place vos couleurs en tête de chaque sélecteur, propose vos logos et démarre les créations dans vos polices, et le Designer écrit à partir de votre description. Associez-le à un Mark que personne d’autre ne peut utiliser et vos publications vous ressemblent dès la première. Le reste du kit est détaillé dans la configuration du kit de marque.
Les questions qu’on nous pose
Comment récupérer mes couleurs de marque depuis mon site ?
Dans Gradiently, saisissez votre site sur la page Marque et choisissez Lire le site. Si votre site a une balise theme-color, sa couleur est proposée comme couleur de marque.
Pourquoi Lire le site n’a-t-il pas trouvé mon logo ?
Il cherche des icônes matricielles comme une apple-touch-icon ou favicon.ico et ignore les icônes SVG. Ajoutez une icône tactile PNG à votre site, ou importez directement votre logo.
L’import écrase-t-il mon kit de marque ?
Non. Chaque élément trouvé est proposé comme suggestion, et rien ne change dans le kit tant que vous ne choisissez pas de l’utiliser.
Puis-je importer une marque depuis le site de quelqu’un d’autre ?
L’outil lit n’importe quel site public, mais utilisez-le pour les marques que vous gérez ou pour lesquelles vous travaillez. Le kit doit contenir des éléments que vous avez le droit d’utiliser.
Et si mon site n’a pas de description ?
Lire le site proposera quand même ce qu’il trouve. Écrivez votre slogan et votre À propos à la main, et pensez à ajouter une meta description à votre site, ce qui aide aussi dans les résultats de recherche.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil