Lámina de marcas

Hoja de marcas

Un logotipo se elige más de lo que se genera. El trabajo consiste en poner cinco ideas honestas y diferentes frente a la persona, cada una probada en los tamaños en los que un logotipo realmente vive, en una página que pueda juzgar en un minuto. Esa página es la hoja de marcas. Es una página para mirar, no para leer: cinco columnas de imágenes y casi ninguna palabra.

El método proviene de dos trabajos reales de identidad en los que la persona eligió una marca en menos de noventa segundos desde que se abrió la hoja, y de pruebas contra lo que un modelo capaz produce sin ningún método. Las pruebas enseñaron dos cosas, y los pasos a continuación sirven para ambas.

• La disciplina es lo que aporta el método. Conocimiento real de la marca antes de dibujar, cinco ideas verdaderamente diferentes, prueba a 16 píxeles, una debilidad clara nombrada para cada marca y una elección que recae en la persona.
• El carácter es lo que no debe perder. Las marcas que la gente prefiere tienen sentido a simple vista y parecen dibujadas con cuidado. Una hoja de glifos ordenados que cada uno necesita una oración para significar algo pierde frente a una imagen audaz y bien dibujada del nombre.

Trabaja rápido. En los trabajos originales, la hoja se abría cinco minutos después de la solicitud. Es un primer vistazo y otra ronda es económica, así que elige bien, dibuja con cuidado y no pulas.

Los pasos: conoce la marca, encuentra las ideas, bosqueja y elige cinco, construye la hoja, mírala, ábrela y preséntala, realiza rondas adicionales, aplica la selección.

1. Conoce la marca antes de dibujar

Necesitas cinco cosas. Búscalas antes de pedirlas.

• El nombre, exactamente como la marca lo escribe, en su propia tipografía, y lo que significa: el significado literal, la raíz, un modismo que evoca, un juego de palabras.
• Lo que hace, en una oración, idealmente como un cambio: qué entra y qué sale.
• Para quién es y cómo debería sentirse, en dos o tres palabras.
• Lo que ya existe: la tipografía que usa el sitio, un logotipo antiguo, el titular, el vocabulario propio del producto.
• Cualquier cosa que la persona ya haya dicho sobre el logotipo: una restricción, un boceto, un logotipo que admiran.

En un proyecto, lee primero: el README, el texto de la página de inicio, el título de la página y los metadatos, la configuración de la fuente (@font-face, next/font, la configuración de Tailwind, un enlace de Google Fonts), cualquier archivo de marca o logotipo, y la conversación hasta ahora. Pregunta solo por lo que no pudiste encontrar, en un mensaje de máximo tres preguntas cortas. Si no se puede preguntar a la persona, o te dijo que sigas adelante, entonces sigue adelante y di lo que asumiste cuando presentes.

Esto viene primero porque las marcas dibujadas sin esto salen como iconos genéricos. En las hojas originales, cada marca se apoyaba en algo específico: lo que significa el nombre, una línea del titular del sitio, lo que el sistema hace con las cosas que maneja.

El resumen por defecto

A menos que la persona diga lo contrario, diseña para esto: un color, tan simple como sea posible, con un propósito, un poco único.

Eso significa negro sobre un blanco roto cálido y nada más. Si quieren color, o el sitio tiene un color de acento, elige la forma en negro primero. El color no debería ser lo que hace aceptable una forma débil, y una marca tiene que funcionar en un color de todos modos (iconos de pestañas, sellos, superficies oscuras). El color y los efectos llegan cuando se aplica la marca.

2. Encuentra ideas de diferentes lugares

Escribe alrededor de diez candidatos, una línea cada uno. Lee references/concept-moves.md antes de listarlos: describe los lugares de donde vienen las buenas marcas, con ejemplos y la trampa en cada uno.

Apunta a una variedad de tipos, porque el gusto de la gente se divide en estas líneas:

• una marca basada en la letra de la marca;
• una imagen del nombre, cuando el nombre es una cosa;
• lo que hace el producto, mostrado como una forma;
• un signo o patrón del propio mundo de la marca;
• uno o dos de más lejos.

Reglas para elegir entre ellos:

• Cinco ideas, no cinco estilos. Dos marcas basadas en la misma metáfora cuentan como una. Agrupa los candidatos por la idea subyacente y conserva uno de cada grupo.
• La mayoría debería leerse a simple vista. La hoja no explica nada: una marca tiene su imagen y un nombre corto. Así que al menos tres de las cinco finales deberían tener sentido solo con eso: una cosa, una letra, una acción que se pueda ver. Tu mensaje puede profundizar una marca, no rescatarla. Un glifo simple que no es nada sin una oración (un punto y una barra, dos barras, un bloque simple) tiene que ser impactante para ganar un lugar.
• Silueta antes que historia. Entre dos candidatos, conserva la forma más fuerte, no la historia más ingeniosa. La historia se cuenta una vez y la forma se ve todos los días.
• Nombra los iconos obvios y racionalízalos. Cada categoría tiene uno: una burbuja de diálogo para chat, una casa para propiedades, una chispa para IA, un carrito para tiendas, un escudo para seguridad, una página o una pila de líneas para cualquier cosa relacionada con documentos. El nombre a menudo también tiene uno propio (una llama para una marca llamada Kiln). Di cuáles son para esta marca. Como máximo una de las cinco puede apoyarse en cualquiera de ellos, y solo fusionada con algo que esta marca posee exclusivamente. Una marca que es una página y otra que es una llama son dos, no una cada una. Cualquier cosa que la persona haya descartado se queda fuera.
• Una idea por marca. Si una marca necesita la palabra "y" para explicarse, son dos marcas. Divídela o elimina la mitad.

Las primeras ideas se agrupan en lo obvio. En una hoja original, tres de las primeras cinco marcas eran burbujas de diálogo, y la marca que ganó vino de una ronda posterior que se mantuvo alejada de ellas.

Cinco es el número correcto a menos que la persona pida otro: menos no da una opción real, más convierte la elección en trabajo, y cinco columnas caben en una pantalla.

3. Bosqueja, luego elige cinco

Dibuja tus candidatos antes de comprometerte con alguno. Copia assets/contact-sheet.html a design-lab/logo/candidates.html en el proyecto, agrega un <symbol> por candidato, renderízalo con el script del paso 5 y mira la imagen. Muestra cada candidato grande, pequeño y como un icono verdadero de 16px ampliado. Conserva los cinco que sean más fuertes como formas y más separados como ideas, y mejora esos. Dedica la mayor parte de tu tiempo de dibujo a los dos en los que más crees: la hoja necesita al menos una marca que enviarías tal como está, y una hoja de cinco primeros borradores iguales pierde frente a un logotipo terminado.

Una hoja de contacto es normal. Una segunda es para redibujar marcas que casi funcionan. Detente ahí: la persona puede pedir otra ronda. Elimina candidates.html y su imagen antes de presentar.

Este paso existe porque un dibujo en tu cabeza y un dibujo en la página son cosas diferentes. En las pruebas, las ejecuciones que miraron sus candidatos antes de elegir hicieron marcas claramente mejores que las ejecuciones que dibujaron cinco y se detuvieron.

Cómo dibujar una marca

Cada marca es un <symbol> en una cuadrícula de 64 por 64.

• Pocas partes, una silueta. De una a cuatro formas; el script de renderizado advierte sobre una marca que usa más. Simple no significa solo rectángulos: un arco, un rizo, una campana ensanchada o el cuenco de una letra son bienvenidos cuando son una forma limpia. Ambas marcas que se enviaron de los trabajos originales son cuatro rectángulos redondeados, y la mejor marca en las pruebas era una sola silueta de la cosa que da nombre a la marca.
• Formas sólidas o líneas audaces. Una forma sólida no lleva atributo fill, porque la hoja pinta el mismo dibujo en negro en un lugar y en blanco en otro. Una forma dibujada con líneas lleva fill="none" stroke="currentColor", extremos redondeados y uniones redondeadas, y un ancho de trazo para toda la marca, 7 unidades o más. Sin degradados, opacidad, filtros, máscaras ni <text>. Una letra se construye a partir de formas y nunca se escribe, ya que una letra escrita es la fuente de otra persona.
• Calcula, no adivines. Para cualquier cosa más allá de rectángulos y círculos, calcula los puntos: dónde se encuentra un arco con una línea, dónde termina una curva, un grosor uniforme alrededor de una curva. Unas pocas líneas de Python que impriman la ruta son más rápidas que adivinar, y las curvas adivinadas parecen adivinadas.
• Ajusta a la cuadrícula. Unidades enteras o medias, espacios iguales, bordes alineados, un radio de esquina en toda la marca.
• Llena el cuadro de manera uniforme. Deja que cada marca abarque alrededor de 48 unidades en su dirección más larga, centrada, para que las cinco tengan un peso similar y la comparación sea justa.
• Diseña para el icono de pestaña. Un espacio o línea más delgada que aproximadamente 6 unidades se convierte en un borrón a 16px. Las formas grandes y los espacios abiertos sobreviven, y generalmente hacen una mejor marca en todos los tamaños.
• Sigue la dirección de lectura. Una marca que muestra un antes y un después va en la dirección en que se lee la escritura de la marca: de derecha a izquierda para árabe o hebreo.

4. Construye la hoja

Copia assets/sheet-template.html a design-lab/logo/marks-sheet.html en el proyecto, creando las carpetas, y completa los seis lugares numerados. El script de la plantilla construye cada columna a partir de tus símbolos, por lo que cada marca se dibuja una vez y es idéntica en todos los tamaños.

La página es simple a propósito: un título de una línea, luego cinco columnas una al lado de la otra. Cada columna muestra, de arriba a abajo:

• la marca, grande;
• la marca junto al nombre, sobre claro y sobre oscuro;
• la marca como icono a 64, 32 y 16 píxeles, y ese icono de 16 píxeles ampliado para que se puedan ver sus píxeles reales;
• dos botones que descargan esa marca sola sobre un fondo transparente, como PNG y como SVG.

La gente mira esta página; no la lee. No agregues nada: sin razones, sin pies de foto, sin línea sobre cómo leerla, sin recomendación. Lo que significa una marca, dónde es débil y cuál elegirías va todo en tu mensaje (paso 6).

• Idioma. Escribe el título y los nombres en el idioma de la marca, aquel en el que está su marca denominativa, cuando la persona claramente lo lee. Establece dir="rtl" para escrituras de derecha a izquierda. Si la marca está escrita en dos escrituras, la hoja muestra la principal; el segundo bloque de marca viene con la selección.
• Tipografía. Configura la marca denominativa en la tipografía que la marca realmente usa: los archivos de fuente del proyecto a través de una ruta relativa a la hoja, o la fuente alojada que carga el sitio. Coincide con el peso, las mayúsculas y el espaciado de letras que el sitio da a su nombre. Si la marca no tiene tipografía, elige una a propósito y dilo.
• Título. Una línea corta, por ejemplo "Cinco logotipos para Harbor".
• Nombres. Cada marca recibe un nombre corto de una a tres palabras, nunca una oración. La gente elige y recuerda las marcas por su nombre ("Me gusta el nudo"), por lo que el nombre hace un trabajo real.
• Letras. Nombra las marcas de la A a la E.
• Nombre de archivo. Un nombre corto en minúsculas en letras latinas para las descargas: harbor da harbor-logo-A.png.

Si el proyecto ya tiene una hoja de marcas, no la sobrescribas. El paso 7 dice qué hacer.

5. Mírala antes de que ellos lo hagan

Renderiza la hoja, luego mira la imagen. El script está en la propia carpeta de esta habilidad y funciona en cualquier página HTML, incluida la hoja de contacto:

bash "<carpeta de esta habilidad>/scripts/render.sh" design-lab/logo/marks-sheet.html

Escribe un PNG junto al HTML con el Chromium sin cabeza que tenga la máquina, e imprime la ruta, seguida de una advertencia para cualquier marca dibujada con más de cuatro formas o con una línea más delgada de 7 unidades. Actúa sobre esas advertencias. Abre esa imagen y comprueba, marca por marca:

• ¿Es la hoja en absoluto: cinco columnas, la tipografía correcta en la marca denominativa, sin {{placeholders}} sobrantes? Un renderizado puede capturar silenciosamente la página incorrecta o una fuente de respaldo.
• ¿Cada marca se lee como lo que dice su nombre, sin nada más que lo explique?
• ¿Alguna marca se lee como algo que no pretendías: un dígito, una letra diferente, un icono de menú, un logotipo que ya conoces?
• En el icono de 16px ampliado en la parte inferior de cada columna, ¿las formas se mantienen separadas, o los espacios se cierran y las partes delgadas se vuelven grises?
• ¿Hay algo recortado en el borde de su cuadro, descentrado, o visiblemente más pesado o más claro que sus vecinos?
• ¿Un nombre largo todavía cabe junto a su marca, y cada columna tiene la misma altura?
• Junto a la marca denominativa, ¿la marca se sienta bien con el nombre, o tartamudea repitiendo la primera letra del nombre justo al lado?

Arregla lo que encuentres y renderiza una vez más para confirmar. Una marca que falla a 16px se redibuja con menos partes, más grandes, o se reemplaza por tu siguiente mejor candidato. Como máximo dos de las cinco pueden mostrarse con una debilidad conocida a 16px, y cada una debe decirlo en su línea de debilidad.

Si el script no puede renderizar (sale con un motivo), abre el HTML en un navegador del que puedas tomar una captura de pantalla, si tienes uno. Si no puedes mirar en absoluto, dilo cuando presentes.

6. Ábrela y preséntala

Abre la hoja para la persona: open en macOS, xdg-open en Linux, start en Windows. El HTML es lo que hay que abrir, y el PNG es para verificar y compartir. Deja ambos en design-lab/logo/, y confírmalos solo si la persona o las reglas del proyecto lo dicen.

No conectes ninguna marca al producto, ni hagas archivos de producción, antes de que la persona haya elegido. Esa es su decisión, y toma dos minutos una vez que se toma. Los botones de descarga en la hoja son para probar una marca en una diapositiva o un mock-up. Los archivos adecuados vienen con la selección.

Luego escribe un mensaje corto:

• dónde está la hoja, y que está abierta;
• una línea por marca, como letra, nombre, qué es y por qué pertenece a esta marca, y su debilidad honesta si la tiene ("la más cercana a un icono de edificio genérico", "tranquila y un poco literal"). La página no lleva nada de esto, por lo que la línea es donde vive el significado de una marca;
• tu selección y por qué, en una o dos oraciones. Recomienda una marca que enviarías tal como está: una que se lea a simple vista y se sostenga como un icono de 16px. Si la idea que más te gusta tiene un defecto conocido, di que es tu idea favorita y nombra una marca diferente como la que enviarías;
• una pregunta de cierre: cuál, o cuáles dos para avanzar más. Di que una vez que elijan, harás los archivos y los pondrás en el sitio.

Da una opinión real y debilidades reales, luego deja la elección con ellos. En los trabajos originales, la persona anuló la recomendación una vez. No les pidas que elijan colores, estilos o fuentes en este punto, y mantén el mensaje en esas pocas líneas: la página muestra y el mensaje explica, cada uno una vez.

7. Rondas adicionales

• "Otros cinco." Escribe un nuevo archivo, marks-sheet-2.html, y continúa las letras (F a J) para que cada marca mantenga una letra única en todas las rondas. Pon un enlace de vuelta a la hoja anterior debajo del título, como muestra la plantilla. Los nuevos cinco deben provenir de ideas que las anteriores...