A versão curta
- 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 descoberta aparece como uma sugestão que podes usar ou ignorar.
- O nome vem das etiquetas de nome do próprio site, a descrição da sua meta descrição, a cor da etiqueta theme-color e o ícone do seu touch icon ou favicon.
- Um site sem etiqueta theme-color ou só com um ícone SVG dá menos sugestões, por isso umas 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 a partir do site no Gradiently, abre a página Marca, escreve o teu endereço em Site, em Identidade, e escolhe Ler o site. O Gradiently obtém 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 logótipo. Tu escolhes o que entra. Demora uns segundos e poupa a parte mais maçadora de montar um kit.
Como importar a tua marca a partir de um site
- 1
Abre a página Marca
Escolhe a marca que queres preencher. Cada marca da tua conta tem o seu próprio kit, por isso confirma que estás na certa.
- 2
Introduz o site
Em Identidade, escreve o endereço em Site. Basta um domínio simples como
crumb.co; não precisas do https. - 3
Escolhe Ler o site
O Gradiently visita a página uma vez, lê o seu head e obtém o ícone. O botão mostra A ler… enquanto trabalha.
- 4
Usa o que serve
Cada descoberta aparece com o seu 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 logótipo. Ignora o que estiver errado.
- 5
Lê de novo depois de alterações
Se atualizares o teu site, escolhe Ler novamente. Quando tudo o que era útil já estiver no kit, a página di-lo.
A cor do site aparece também mais tarde como sugestão na secção Cores, com o nome do teu site, para a poderes adicionar aí se a saltaste à primeira.
O que o Gradiently lê do teu site
Lê apenas a página inicial pública no endereço que indicas, e só as partes que descrevem a marca. Não percorre outras páginas, não inicia sessão nem lê o teu conteúdo.
og:site_name, application-name ou o título da aplicação web da AppleTorna-se
De onde vem
meta name="description", ou a descrição Open GraphTorna-se
meta name="theme-color" em hex ou rgb()Torna-se
apple-touch-icon, outros ícones raster e depois /favicon.icoTorna-se
Vale a pena saber dois pormenores. Os ícones SVG são ignorados, porque o Gradiently não rasteriza o SVG de outra pessoa, por isso um site só com um favicon SVG não dá ícone. E a cor tem de ser um valor hex ou rgb() simples; uma variável CSS na etiqueta theme-color não pode ser lida.
Torna o teu site fácil de ler
Se o Ler o site trouxer pouco, a solução costuma ser umas linhas no head do HTML do teu site. Ajudam mais do que ao Gradiently: os navegadores usam theme-color na barra de endereços dos telemóveis e as pré-visualizações de ligações usam as tuas etiquetas Open Graph. As etiquetas Open Graph e o design de favicon aprofundam isto.
<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>Dá pouco
- Sem meta descrição, ou uma cheia de palavras-chave
- Sem etiqueta theme-color, ou com uma variável CSS lá dentro
- Só um favicon SVG
- Uma página inicial que redireciona para um ecrã de login
Dá um bom início de kit
- Uma frase honesta sobre o que fazes
- Uma cor de tema em hex que combina com o teu logótipo
- Um touch icon PNG de 180×180
- Uma página inicial pública que carrega depressa
O que fazer depois da importação
A importação dá-te uma base, não um kit acabado. Vale a pena fazer quatro coisas a seguir, por esta ordem.
- Carrega ficheiros de logótipo a sério. Um favicon é minúsculo e quadrado. Adiciona o teu logótipo completo em PNG, JPEG, WebP, GIF ou AVIF, um para fundos escuros e outro para claros; vê logótipo sobre fundo em gradiente.
- Completa as cores. Uma cor de tema é um começo. Junta uma cor de apoio e os teus neutros mais escuro e mais claro; como escolher as cores da marca ajuda.
- Define os tipos de letra. Escolhe um para títulos e outro para o texto, ou carrega os teus próprios ficheiros de tipos de letra.
- Escreve a voz. A descrição de um site diz ao Designer o que és, não como soas. Preenche Tom, Nas tuas palavras, Sempre e Nunca; a voz da marca para a IA mostra como.
Uma primeira publicação logo a seguir à importação: nome e descrição vindos do site.
A mesma marca como story a 1080×1920, pronta assim que o kit estiver definido.
Quando a leitura de um site falha
Se vires Não conseguimos ler esse site, a página não respondeu a tempo, devolveu um erro ou bloqueou o pedido. Confirma que o endereço abre numa janela privada do navegador. Os endereços que apontam para uma rede privada, uma página de login ou um ficheiro em vez de uma página web são recusados de propósito. Um site atrás de uma proteção rígida contra robôs pode nunca ser legível; escreve os dados à mão, o que demora uns minutos.
Com o kit preenchido, o Studio põe as tuas cores primeiro em cada seletor, oferece os teus logótipos e começa os designs nos teus tipos de letra, e o Designer escreve a partir da tua descrição. Junta-lhe um Mark que mais ninguém pode usar e as tuas publicações têm a tua cara desde a primeira. O resto do kit está coberto em configurar o kit de marca.
Perguntas frequentes
Como obtenho as cores da minha marca a partir do meu site?
No Gradiently, introduz o teu site na página Marca e escolhe Ler o site. Se o teu site tiver uma etiqueta theme-color, a sua cor é oferecida como cor da marca.
Porque é que o Ler o site não encontrou o meu logótipo?
Procura ícones raster, como um apple-touch-icon ou favicon.ico, e ignora ícones SVG. Adiciona um touch icon PNG ao teu site ou carrega diretamente o teu logótipo.
A importação substitui o meu kit de marca?
Não. Cada descoberta é oferecida como sugestão e nada muda no kit até escolheres usá-la.
Posso importar uma marca a partir do site de outra pessoa?
A ferramenta lê qualquer site público, mas usa-a para marcas que giras ou para as quais trabalhas. O kit deve conter materiais que tens o direito de usar.
E se o meu site não tiver descrição?
O Ler o site oferece na mesma o que encontrar. Escreve à mão o teu slogan e o Sobre, e pensa em juntar uma meta descrição ao site, o que também ajuda nos resultados de pesquisa.
Escrito pela Gradiently
A equipa por trás da Gradiently, uma ferramenta de design construída em torno dos Marks: gradientes vivos que fazem tudo o que crias parecer teu.
Ver o nosso perfil