Resumindo
- O Gradiently consegue ler o site de uma marca e oferecer o nome, a descrição, a cor do tema e o ícone para o kit de marca.
- Nada é adicionado automaticamente: cada item encontrado aparece como uma sugestão que você pode usar ou ignorar.
- O nome vem das próprias tags de nome do site, a descrição da meta description, a cor da tag theme-color e o ícone do touch icon ou do favicon.
- Um site sem a tag theme-color ou só com um ícone SVG gera menos sugestões, então algumas linhas no head do HTML melhoram o resultado.
- Ler um site faz parte do kit de marca, que vem com o Gradiently Pro.
Nesta página
Para importar a marca do site no Gradiently, abra a página Marca, digite o seu endereço em Site, na seção Identidade, e escolha Ler site. O Gradiently busca o nome, a descrição, a cor do tema e o ícone do site e oferece cada um: usar o nome, usar a descrição como slogan ou em Sobre, adicionar a cor às cores da marca, adicionar o ícone como logo. Você escolhe o que entra. Leva alguns segundos e poupa a parte mais chata de montar um kit.
Como importar a sua marca a partir de um site
- 1
Abra a página Marca
Escolha a marca que você quer preencher. Cada marca da sua conta tem o próprio kit, então confira se está na certa.
- 2
Digite o site
Em Identidade, digite o endereço em Site. Um domínio simples como
crumb.cobasta; não precisa do https. - 3
Escolha Ler site
O Gradiently visita a página uma vez, lê o head e busca o ícone. O botão mostra Lendo… enquanto trabalha.
- 4
Use o que servir
Cada item encontrado aparece com o próprio botão: Usar “Crumb” como nome, Usar a descrição como slogan, Usar a descrição em Sobre, Adicionar a cor, Adicionar o ícone como logo. Ignore o que estiver errado.
- 5
Leia de novo depois de mudanças
Se você atualizar o site, escolha Ler de novo. Quando tudo o que é útil já estiver no kit, a página avisa.
A cor do site também aparece depois como sugestão na seção Cores, identificada com o nome do seu site, então você pode adicioná-la por lá se tiver pulado da primeira vez.
O que o Gradiently lê do seu site
Ele lê só a página inicial pública no endereço que você informa, e só as partes que descrevem a marca. Não percorre outras páginas, não faz login e não lê o seu conteúdo.
og:site_name, application-name ou o título de web app da AppleVira
De onde vem
meta name="description", ou a descrição Open GraphVira
meta name="theme-color" em hex ou rgb()Vira
apple-touch-icon, outros ícones raster e depois /favicon.icoVira
Vale saber dois detalhes. Ícones SVG são ignorados, porque o Gradiently não rasteriza o SVG de outra pessoa, então um site só com favicon SVG não gera ícone. E a cor precisa ser um valor hex ou rgb() simples; uma variável CSS na tag theme-color não pode ser lida.
Deixe o seu site fácil de ler
Se o Ler site trouxer pouca coisa, a solução costuma ser algumas linhas no head do HTML do seu site. Elas ajudam mais do que o Gradiently: os navegadores usam theme-color na barra de endereço do celular, e as prévias de link usam as suas tags Open Graph. Tags Open Graph e design de favicon vão mais fundo.
<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>Rende pouco
- Sem meta description, ou uma recheada de palavras-chave
- Sem tag theme-color, ou com uma variável CSS nela
- Só um favicon SVG
- Uma página inicial que redireciona para uma tela de login
Rende um kit bem encaminhado
- Uma frase honesta sobre o que você faz
- Uma cor de tema em hex que combine com o seu logo
- Um touch icon PNG de 180×180
- Uma página inicial pública que carrega rápido
O que fazer depois da importação
A importação dá uma base, não um kit pronto. Vale fazer quatro coisas em seguida, nesta ordem.
- Envie os arquivos de logo de verdade. Um favicon é minúsculo e quadrado. Adicione o seu logo completo em PNG, JPEG, WebP, GIF ou AVIF, um para fundos escuros e outro para fundos claros; veja logo sobre fundo com gradiente.
- Complete as cores. Uma cor de tema é um começo. Acrescente uma cor de apoio e os seus neutros mais escuro e mais claro; como escolher as cores da marca ajuda.
- Defina as fontes. Escolha uma fonte para títulos e outra para o texto, ou envie os seus próprios arquivos de fonte.
- Escreva a voz. A descrição do site diz ao Designer o que você é, não como você soa. Preencha Tom, Com suas palavras, Sempre e Nunca; voz da marca para IA mostra como.
Um primeiro post logo depois da importação: nome e descrição vindos do site.
A mesma marca como story em 1080×1920, pronta assim que o kit estiver configurado.
Quando a leitura do site falha
Se você vir Não conseguimos ler esse site., a página não respondeu a tempo, devolveu um erro ou bloqueou a solicitação. Confira se o endereço abre numa janela anônima do navegador. Endereços que apontam para uma rede privada, uma página de login ou um arquivo em vez de uma página web são recusados de propósito. Um site atrás de uma barreira rígida contra robôs talvez nunca possa ser lido; digite os dados à mão, o que leva uns dois minutos.
Com o kit preenchido, o Studio coloca as suas cores em primeiro lugar em todo seletor, oferece os seus logos e começa os designs nas suas fontes, e o Designer escreve a partir da sua descrição. Junte isso a um Mark que ninguém mais pode usar e os seus posts têm a sua cara desde o primeiro. O resto do kit está em como configurar o kit de marca.
Perguntas frequentes
Como pego as cores da minha marca a partir do meu site?
No Gradiently, digite o seu site na página Marca e escolha Ler site. Se o site tiver uma tag theme-color, a cor dela é oferecida como cor da marca.
Por que o Ler site não encontrou o meu logo?
Ele procura ícones raster, como um apple-touch-icon ou o favicon.ico, e ignora ícones SVG. Adicione um touch icon PNG ao seu site ou envie o seu logo diretamente.
Importar substitui o meu kit de marca?
Não. Cada item encontrado é oferecido como sugestão, e nada muda no kit até você escolher usá-lo.
Posso importar a marca do site de outra pessoa?
A ferramenta lê qualquer site público, mas use-a para marcas que você administra ou para as quais trabalha. O kit deve guardar materiais que você tem o direito de usar.
E se o meu site não tiver descrição?
O Ler site ainda oferece o que encontrar. Escreva o slogan e o Sobre à mão e pense em acrescentar uma meta description ao site, o que também ajuda nos resultados de busca.
Escrito pelo Gradiently
A equipe por trás do Gradiently, uma ferramenta de design criada em torno dos Marks: gradientes vivos que fazem tudo o que você cria ter a sua cara.
Ver nosso perfil