La versión corta
- Gradiently puede leer la web de una marca y ofrecer su nombre, descripción, color de tema e icono para el kit de marca.
- No se añade nada automáticamente: cada hallazgo aparece como una sugerencia que puedes usar o ignorar.
- El nombre sale de las etiquetas de nombre del propio sitio, la descripción de su meta description, el color de su etiqueta theme-color y el icono de su touch icon o favicon.
- Un sitio sin etiqueta theme-color o con solo un icono SVG da menos sugerencias, así que unas pocas líneas en el head de su HTML mejoran el resultado.
- Leer una web forma parte del kit de marca, que viene con Gradiently Pro.
En esta página
Para importar los datos de tu marca desde tu web en Gradiently, abre la página Marca, escribe tu dirección en Sitio web, dentro de Identidad, y elige Leer el sitio. Gradiently obtiene el nombre, la descripción, el color de tema y el icono del sitio, y te ofrece cada uno: usar el nombre, usar la descripción como eslogan o en Acerca de, añadir el color a tus colores de marca, añadir el icono como logo. Tú eliges qué entra. Tarda unos segundos y te ahorra la parte más pesada de montar un kit.
Cómo importar tu marca desde una web
- 1
Abre la página Marca
Elige la marca que quieres completar. Cada marca de tu cuenta tiene su propio kit, así que asegúrate de estar en la correcta.
- 2
Escribe la web
En Identidad, escribe la dirección en Sitio web. Basta con un dominio sencillo como
crumb.co; no hace falta el https. - 3
Elige Leer el sitio
Gradiently visita la página una vez, lee su head y obtiene su icono. El botón muestra Leyendo… mientras trabaja.
- 4
Usa lo que encaje
Cada hallazgo aparece con su propio botón: Usar «Crumb» como nombre, Usar su descripción como eslogan, Usar su descripción en Acerca de, Añadir su color, Añadir su icono como logo. Ignora lo que no esté bien.
- 5
Vuelve a leer tras los cambios
Si actualizas tu web, elige Volver a leer. Cuando todo lo útil ya está en el kit, la página te lo dice.
El color del sitio también aparece después como sugerencia en la sección Colores, etiquetado con el nombre de tu sitio, así que puedes añadirlo allí si te lo saltaste la primera vez.
Qué lee Gradiently de tu web
Solo lee la página de inicio pública de la dirección que indicas, y solo las partes que describen la marca. No rastrea otras páginas, no inicia sesión ni lee tu contenido.
og:site_name, application-name o el título de app web de AppleSe convierte en
De dónde sale
meta name="description", o la descripción Open GraphSe convierte en
meta name="theme-color" en hex o rgb()Se convierte en
apple-touch-icon más grande, otros iconos rasterizados y después /favicon.icoSe convierte en
Conviene saber dos detalles. Los iconos SVG se omiten, porque Gradiently no rasteriza el SVG de otra persona, así que un sitio con solo un favicon SVG no da icono. Y el color tiene que ser un valor hex o rgb() sencillo; una variable CSS en la etiqueta theme-color no se puede leer.
Haz que tu web sea fácil de leer
Si Leer el sitio devuelve poco, la solución suele ser unas pocas líneas en el head del HTML de tu web. Ayudan más allá de Gradiently: los navegadores usan theme-color para la barra de direcciones en el móvil, y las vistas previas de enlaces usan tus etiquetas Open Graph. Las etiquetas Open Graph y el diseño de favicons profundizan más.
<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>Da poco
- Sin meta description, o una llena de palabras clave
- Sin etiqueta theme-color, o con una variable CSS dentro
- Solo un favicon SVG
- Una página de inicio que redirige a una pantalla de acceso
Da un kit bien encaminado
- Una frase honesta sobre lo que haces
- Un color de tema en hex que encaja con tu logo
- Un touch icon PNG de 180×180
- Una página de inicio pública que carga rápido
Qué hacer después de importar
La importación te da una base, no un kit terminado. Merece la pena hacer cuatro cosas a continuación, en este orden.
- Sube los archivos de logo de verdad. Un favicon es diminuto y cuadrado. Añade tu logo completo en PNG, JPEG, WebP, GIF o AVIF, uno para fondos oscuros y otro para claros; consulta el logo sobre un fondo degradado.
- Completa los colores. Un color de tema es un comienzo. Añade un color secundario y tus neutros más oscuro y más claro; cómo elegir los colores de marca te ayuda.
- Define tus fuentes. Elige una para títulos y otra para el texto, o sube tus propios archivos de fuente.
- Escribe la voz. La descripción de un sitio le dice al Designer qué eres, no cómo suenas. Rellena Tono, En tus palabras, Siempre y Nunca; la voz de marca para la IA muestra cómo.
Una primera publicación justo después de importar: nombre y descripción sacados del sitio.
La misma marca como historia a 1080×1920, lista en cuanto el kit está configurado.
Cuando no se puede leer una web
Si ves No pudimos leer ese sitio web, la página no respondió a tiempo, devolvió un error o bloqueó la petición. Comprueba que la dirección se abre en una ventana privada del navegador. Las direcciones que apuntan a una red privada, a una página de acceso o a un archivo en lugar de una página web se rechazan a propósito. Un sitio detrás de un muro antibots estricto puede no ser legible nunca; escribe los datos a mano, que lleva un par de minutos.
Con el kit completo, el Studio pone tus colores primero en cada selector, te ofrece tus logos y empieza los diseños con tus fuentes, y el Designer escribe a partir de tu descripción. Combínalo con un Mark que nadie más puede usar y tus publicaciones se parecerán a ti desde la primera. El resto del kit se explica en configurar el kit de marca.
Preguntas frecuentes
¿Cómo obtengo los colores de mi marca desde mi web?
En Gradiently, escribe tu web en la página Marca y elige Leer el sitio. Si tu sitio tiene una etiqueta theme-color, su color se ofrece como color de marca.
¿Por qué Leer el sitio no encontró mi logo?
Busca iconos rasterizados como un apple-touch-icon o un favicon.ico y omite los iconos SVG. Añade un touch icon PNG a tu sitio o sube tu logo directamente.
¿Importar sobrescribe mi kit de marca?
No. Cada hallazgo se ofrece como sugerencia, y nada cambia en el kit hasta que decides usarlo.
¿Puedo importar una marca desde la web de otra persona?
La herramienta lee cualquier sitio público, pero úsala para marcas que diriges o para las que trabajas. El kit debe contener recursos que tengas derecho a usar.
¿Y si mi sitio no tiene descripción?
Leer el sitio te ofrecerá igualmente lo que encuentre. Escribe tu eslogan y Acerca de a mano, y plantéate añadir una meta description al sitio, que además ayuda en los resultados de búsqueda.
Escrito por Gradiently
El equipo detrás de Gradiently, una herramienta de diseño creada en torno a los Marks: degradados vivos que hacen que todo lo que diseñas parezca tuyo.
Ver nuestro perfil