Importare il brand dal sito web: il brand kit in un passaggio

Per importare il brand dal sito web in Gradiently, apri la pagina Brand, scrivi l’indirizzo in Sito web sotto Identità e scegli Leggi sito. Gradiently recupera nome, descrizione, colore del tema e icona del sito, poi propone ciascun elemento: usa il nome, usa la descrizione come slogan o come Chi siamo, aggiungi il colore ai colori del brand, aggiungi l’icona come logo. Scegli tu cosa inserire. Bastano pochi secondi e ti risparmia la parte più noiosa della configurazione di un kit.

Come importare il brand da un sito web

1. 1

   Apri la pagina Brand

   Scegli il brand da compilare. Ogni brand del tuo account ha il proprio kit, quindi assicurati di essere in quello giusto.

2. 2

   Inserisci il sito web

   Sotto Identità, scrivi l’indirizzo in Sito web. Basta un semplice dominio come crumb.co: non serve https.

3. 3

   Scegli Leggi sito

   Gradiently visita la pagina una volta, legge il suo head e recupera l’icona. Mentre lavora, il pulsante mostra Lettura in corso….

4. 4

   Usa ciò che funziona

   Ogni risultato compare con il suo pulsante: Usa “Crumb” come nome, Usa la descrizione come slogan, Usa la descrizione come Chi siamo, Aggiungi il suo colore, Aggiungi l’icona come logo. Ignora ciò che non va.

5. 5

   Rileggi dopo le modifiche

   Se aggiorni il sito, scegli Leggi di nuovo. Quando tutto ciò che serve è già nel kit, la pagina te lo dice.

Il colore del sito compare poi anche come suggerimento nella sezione Colori, con il nome del tuo sito, così puoi aggiungerlo lì se la prima volta l’avevi saltato.

Cosa legge Gradiently dal tuo sito

Legge solo la homepage pubblica all’indirizzo che indichi, e solo le parti che descrivono il brand. Non esplora le altre pagine, non fa login e non legge i tuoi contenuti.

Due dettagli da sapere. Le icone SVG vengono saltate, perché Gradiently non converte in raster l’SVG di qualcun altro: un sito con la sola favicon SVG non dà nessuna icona. E il colore deve essere un semplice valore esadecimale o rgb(): una variabile CSS nel tag theme-color non si può leggere.

Rendi il tuo sito facile da leggere

Se Leggi sito restituisce poco, la soluzione di solito sono poche righe nell’head HTML del tuo sito. Aiutano più di Gradiently: i browser usano theme-color per la barra degli indirizzi sui telefoni e le anteprime dei link usano i tag Open Graph. Approfondisci con Open Graph tags e favicon design.

<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>

Cosa fare dopo l’importazione

L’importazione ti dà una base, non un kit finito. Vale la pena fare quattro cose, in quest’ordine.

1. Carica i file del logo veri e propri. Una favicon è minuscola e quadrata. Aggiungi il logo completo in PNG, JPEG, WebP, GIF o AVIF, uno per sfondi scuri e uno per sfondi chiari; vedi logo on a gradient background.
2. Completa i colori. Un solo colore del tema è un inizio. Aggiungi un colore di supporto e i tuoi neutri più scuro e più chiaro; how to choose brand colors ti aiuta.
3. Imposta i font. Scegli un carattere per i titoli e uno per il testo, oppure carica i tuoi file font.
4. Scrivi la voce. La descrizione di un sito dice al Designer che cosa sei, non come parli. Compila Tono, Con parole tue, Sempre e Mai; brand voice for AI ti mostra come.

Quando la lettura del sito non riesce

Se vedi Non siamo riusciti a leggere quel sito, la pagina non ha risposto in tempo, ha restituito un errore o ha bloccato la richiesta. Controlla che l’indirizzo si apra in una finestra privata del browser. Gli indirizzi che puntano a una rete privata, a una pagina di login o a un file invece che a una pagina web vengono rifiutati di proposito. Un sito dietro un filtro anti-bot severo potrebbe non essere mai leggibile: inserisci i dati a mano, ci vogliono un paio di minuti.

Con il kit compilato, lo Studio mette i tuoi colori per primi in ogni selettore, propone i tuoi loghi e avvia i design con i tuoi font, e il Designer scrive partendo dalla tua descrizione. Abbinalo a un Mark che nessun altro può usare e i tuoi post ti somiglieranno fin dal primo. Il resto del kit è spiegato in brand kit setup.