Plano geométrico de logotipo
Un plano es una lista breve de instrucciones que reconstruye un logotipo exactamente, desde un lienzo en blanco, sin medir ni calcificar el archivo antiguo. Si no puedes escribir esa lista, tienes decoración, no un sistema. El entregable es una especificación que puedes describir, defender y reproducir, no una imagen.
Inspirado por diseñadores de logotipos que construyen marcas a partir de geometría simple: los escritos de James Barnard sobre planos de logotipos y las identidades construidas de Chermayeff & Geismar & Haviv y Bruce Blackburn. La versión 2 añade práctica de tres proyectos abiertos:
- La habilidad de diseño de logotipos de código abierto de Kaan Kızıltuğ (batería de pruebas, correcciones ópticas, crítica);
- Las convenciones de iconos del proyecto Simple Icons (exportación monocromática de una sola ruta);
- El relato publicado de Inkloom sobre la construcción de marcas bajo reglas de construcción.
Notas en references/inspirations.md.
Diez reglas
- Concepto primero, geometría al final. Sepa qué significa cada elemento antes de dibujar un círculo. La cuadrícula ordena el diseño en el último 10% del trabajo.
- La prueba de reconstrucción define un plano. ¿Puede alguien recrear la marca exactamente a partir del diagrama y unas pocas instrucciones sencillas?
- Pocos primitivos, compartidos. Una familia de formas base, con radios compartidos, uniones tangentes y un estilo terminal.
- No todas las marcas se adaptan a un plano. Las marcas caligráficas o muy ópticas no se reducen a geometría limpia. No las fuerces.
- Nunca adaptes a posteriori. Los círculos de la proporción áurea dibujados sobre un logotipo terminado parecen alineados y no prueban nada.
- La corrección óptica es un número, no un ajuste. Escribe cada corrección en las reglas (ver paso 5).
- Detente temprano. Deja de agregar construcción una vez que la marca sea reproducible.
- Explora en amplitud, luego reduce. Muchos conceptos de una línea baratos, algunas construcciones, uno final. Conserva cada iteración.
- Mide, no admires. Cada candidato se ve bien a 512. Juzga a 16px a partir de renderizados reales.
- Entrega la especificación. La lista de reglas, el diagrama y los resultados de la prueba.
Si una construcción necesita muchas mediciones, no es lo suficientemente simple. Simplifica la marca o el sistema.
Procedimiento
1. Brief a limitaciones. Enumera lo que significa cada elemento. Convierte los adjetivos, la audiencia y los competidores del brief en parámetros concretos antes de dibujar:
- peso del trazo;
- ancho y proporción;
- familia geométrica;
- forma de contraforma;
- estilo terminal (redondo o plano);
- qué tipos de marca encajan.
Luego enumera los clichés de la categoría (para una herramienta de desarrollo: corchetes, cheurones, ventanas de terminal, cursores). Usa un cliché solo con una forma fresca.
Si existe una versión anterior, inspecciona los datos reales del archivo (tamaños, anchos de trazo, ángulos de arco, centros) e ingenia su sistema primero. Anota lo que es arbitrario: tamaños fuera del módulo, espacios desiguales, masa que se sitúa descentrada.
2. Fija el marco y sus recortes.
- Tamaño del lienzo (512) y todo recorte que la marca deba soportar: avatar circular (r = S/2), icono de aplicación redondeado, favicon cuadrado.
- Círculo seguro a 7/8 del radio de recorte (224 en 512). Toda la tinta permanece dentro de él.
- Qué se sitúa en el centro del recorte. Si la marca se construye sobre un círculo, coloca el centro de ese círculo en el centro del recorte. Dos círculos casi concéntricos que fallan por unos pocos píxeles se leen como un error, y el ojo perdona antes el peso desigual. Centra en el centroide del área solo cuando nada en la marca se haga eco del recorte.
- Si un brief menciona que la marca es cortada por un recorte, decide en voz alta: seguro para recorte (el valor predeterminado) o sangrado deliberado (un elemento se sale del borde en un punto documentado).
3. Elige un módulo y un primitivo.
- Unidad
uque divide el lienzo (8 en 512). Peso del trazo un múltiplo limpio (48 = 6u). - Prefiere relaciones que una persona pueda reconstruir con compás y regla: triples pitagóricos (3:4:5), radio igual a la mitad del lienzo.
- Ángulos por bisección (90°, 45°, 22.5°) o por hexágono (60°, 30°). Sin ángulos de aproximación.
4. Coloca cada elemento mediante una regla. Cada uno recibe una instrucción de una línea, por ejemplo: «el asta se apoya en el punto oeste del círculo y se eleva hasta que su tapa toca el círculo seguro».
- Un solo peso de trazo, medido perpendicular al trazo. Un brazo de 45° cortado de 48 de ancho horizontalmente tiene solo 34 de grosor.
- Un estilo de tapa y unión para cada elemento. Esquinas afiladas junto a tapas redondas se leen como dos sistemas.
- Una regla de espacio, por ejemplo «cada espacio es igual a un trazo», o para un anillo roto «divídelo en sectores iguales y entinta los alternos».
- El diámetro del punto es igual al trazo.
5. Óptica, como números.
- Masa: para marcas sin círculo que se haga eco del recorte, coloca el centroide del área en el centro óptico (aproximadamente un 1% por encima del centro geométrico), no en la caja delimitadora. Para marcas basadas en anillos, ver paso 2: el anillo gana, y el espacio abierto en el lado claro equilibra el peso.
- Sobrepaso: formas redondas del 1 al 3% de la altura; puntas del 3 al 6%. Un punto redondo junto a trazos rectos necesita aproximadamente un +4% de diámetro.
- Irradiación: claro sobre oscuro se lee más pesado. Adelgaza el archivo invertido del 2 al 5% y nómbralo como su propio archivo.
- Letras: las horizontales de 5 a 10% más delgadas que las verticales.
Escribe cada corrección en la lista de reglas.
6. Ejecuta la prueba de reconstrucción. Escribe las reglas en 8 líneas o menos. Reconstruye la marca solo a partir de la lista, en código, y compara la diferencia con el dibujo. Cualquier cosa que hayas tenido que medir necesita una regla mejor.
7. Explora, luego realiza un torneo.
- Escribe de 12 a 15 conceptos de una oración en al menos tres tipos de marca. Una buena distribución:
- refinamientos de la marca actual;
- híbridos que reinterpretan un elemento;
- direcciones frescas (letra, ligadura, contenedor, espacio negativo, mapa de bits).
- Constrúyelos todos a partir de reglas.
- Aplica los filtros, luego puntúa a los supervivientes (ver la tarjeta de puntuación).
- Preselecciona tres finalistas de diferentes direcciones, no los tres primeros de una familia.
- Reitera cada finalista para corregir lo que sus pruebas expusieron, luego reitera al ganador una vez más hasta el final.
- Conserva los archivos de cada ronda. Una reiteración puede empeorar una marca. Dilo y conserva la versión anterior.
- Muestra cada ronda donde trabaja el decisor (una página de Figma, un tablero compartido), un fotograma etiquetado por versión con su puntuación, antes de pedir a alguien que elija. Las puntuaciones calculadas fuera de la vista parecen no verificables.
- Deja que la persona elija una preselección a simple vista, luego revisa cada selección con su plano. Las puntuaciones informan la elección. No la toman.
8. Batería de pruebas. Usa renderizados reales, nunca una captura de pantalla reducida.
- Tamaño: 16, 20, 24, 32, 48, 64, 128, 256 píxeles.
- Recuento de formas: umbral al 50% y cuenta las formas de tinta y los agujeros cerrados a 512, 32 y 16 píxeles. Si el recuento a 16 píxeles difiere del de 512 píxeles, los espacios se han cerrado o la marca se ha fragmentado.
- Espacio más pequeño: al menos 1/32 del ancho de la marca. A 16 píxeles, por debajo de aproximadamente 1,3 píxeles, los espacios se cierran.
- Prueba de letra: cada letra todavía se lee como tal a primera vista. Vuelve a ejecutarla después de cualquier cambio en el peso, el tamaño del anillo o las roturas. Un trazo más pesado puede ahogar un ascendente, y una nueva rotura puede convertir una b en un botón de reproducción.
- Lecturas no intencionadas: refleja, rota 180°, mira diminuto, desenfoca (entornar los ojos).
- Color: blanco y negro a un color, invertido, color de marca, una foto, un patrón.
- Estante y familiaridad: coloca la marca junto a 4 a 6 marcas de su categoría que usen el mismo recurso. Si se siente familiar y no es tuya, es de otro.
- Uniones: amplía cada lugar donde los trazos se encuentran. Busca muescas, astillas y protuberancias.
- Compuestos de contexto: coloca la marca en los lugares reales donde vivirá, usando una captura de pantalla del propio Dock, pantalla de inicio o barra de pestañas de la persona a resolución nativa, y compárala con sus vecinos.
- Mide honestamente: muestra los centros de los píxeles al rasterizar. Los rellenos de polígonos que incluyen píxeles de borde añaden un falso borde gris e inflan los números de desenfoque.
9. Esquemas de color. Una inversión intercambia fondo y primer plano y mantiene la geometría, aparte del archivo invertido adelgazado. Verifica el contraste (apunta a 4,5:1 o más). Un color plano por versión, sin degradados en el maestro.
- Un acento, un significado. Si se usa un segundo color, asígnaselo al único elemento que lleva un significado (por ejemplo, el cursor o el prompt que dice «código»). Un acento gráfico necesita al menos 3:1 contra su fondo, así que úsalo solo en fondos donde alcance eso.
10. Archivos de producción.
- Contornos, no trazos. Una
<ruta>, un<título>, coordenadas a 2 decimales. - Arcos escritos como arcos. Una marca construida a partir de primitivos necesita decenas de nodos, no cientos.
- Subrutas superpuestas con el mismo devanado se renderizan como una unión (relleno distinto de cero). Eso está bien para pantalla e impresión. Únelas en un editor vectorial para cortadoras y bordado.
- Exportación de icono de 24 px (convención Simple Icons):
- viewBox de 24×24, monocromo, una ruta;
- toca al menos dos lados y está centrado;
- precisión de 3 decimales;
- sin atributos de relleno, ancho o alto;
- el color de marca registrado como un hex de 6 dígitos.
- Cuando una versión monocroma necesite segmentos separados, usa espacios de aproximadamente 0,5 sobre 24 (1/48).
- Corte de tamaño pequeño: si los detalles del maestro se fusionan a 16 píxeles, dibuja una versión separada de 16 píxeles. Elimina el elemento más pequeño y engrosa el trazo, luego úsalo solo a ese tamaño. No debilites al maestro para que encaje.
- Construcción de cuadrícula de píxeles para marcas que deben ser nítidas: usa celdas de lienzo/16 (32 en 512), para que una celda sea exactamente 1 px a 16 px y 2 px a 32 px. Coloca solo en celdas completas. Ajusta los tallos verticales de las marcas curvas a una cuadrícula de 16 unidades para que se mantengan nítidos a 32 y 64 px.
- Recorte de favicon: los favicons cuadrados no necesitan el círculo seguro. Vuelve a recortar el viewBox a los límites de tinta más un margen del 6% para que la marca se dibuje más grande.
- Espacio libre proviene de la propia geometría de la marca (por ejemplo, un trazo o el diámetro de un punto), no de un número fijo.
11. Punto de control antes del kit. Muestra la hoja de concepto y tu recomendación, luego espera. Construye bloqueos, conjuntos de iconos y pautas solo para la dirección que la persona elija.
12. Entrega.
- El maestro en versiones positiva, invertida (adelgazada) y de un color.
- El diagrama del plano.
- La prueba de recorte y el recorte de favicon.
- El icono de ruta única de 24 px.
- La lista de reglas.
- La tarjeta de puntuación con medidas.
- Una breve justificación que diga qué cambió y por qué.
En Figma, añade nuevos fotogramas junto al original y nunca lo sobrescribas.
Tarjeta de puntuación
Filtros primero. Fallar cualquiera de ellos descarta a un candidato, sea cual sea su total:
- Recorte: la tinta más lejana se sitúa dentro o en el círculo seguro.
- Prueba de letra: las letras previstas todavía se leen.
Luego puntúa sobre 5, ponle peso y muestra tu trabajo (total /50):
| Criterio | Peso |
|---|---|
| Lectura de favicon: ¿la silueta sigue diciendo lo que significa a 16 px? | ×3 |
| Formas y espacios: los recuentos de formas medidos se mantienen a 32 y 16 px; espacio más pequeño | ×2 |
| Ajuste al brief: conserva los elementos que llevan significado | ×2 |
| Distinción: pruebas de estante y familiaridad | ×2 |
| Artesanía y reconstrucción: un peso, un terminal, óptica como números, reglas cortas | ×1 |
El total más alto no es automáticamente la elección. Una versión que gana en tamaño eliminando los elementos que llevan el significado de la marca no ha sobrevivido. Dilo y nómbrala como la subcampeona.
Roturas y espacios. Coloca una rotura donde no cambie qué letra o forma se lee. Prueba cada nueva rotura con la prueba de letra y la prueba de lecturas no intencionadas.
Herramientas
scripts/blueprint_kit.py (necesita shapely, numpy y pillow) cubre:
- primitivos: arcos, líneas y puntos con tapas redondas;
- colocación: centrado de masa y ajuste de círculo seguro;
- salida SVG: maestro y recorte de favicon, más la exportación de 24 px Simple Icons;
- medición: un rasterizador de cobertura de área y el recuento de formas y agujeros a cualquier tamaño.
Ejecuta python3 scripts/blueprint_kit.py --demo out/ para verlo en una marca de demostración.
Convenciones del diagrama del plano
- Marca al 25-30% de opacidad sobre la construcción.
- Un color de acento para las líneas de construcción. Cuadrícula en un tinte apagado a aproximadamente el 18% de opacidad.
- Dibuja:
- el círculo de recorte (sólido) y el círculo seguro (discontinuo);
- cada círculo primitivo, con una línea central sólida y bordes de trazo discontinuos;
- los rayos de compás que usaste;
- el triángulo o proporción clave, con etiquetas numéricas.
- Etiqueta proporciones y reglas, no cada dimensión.
Explicador de movimiento (opcional)
Anima un paso a la vez:
- Marco (círculo de recorte y seguro)
- Cuadrícula
- Primitivo
- Ángulos
- Triángulo de regla
- Elementos
- Andamio eliminado
- Prueba de recorte
- Prueba de escala
Construye cada fotograma como SVG con geometría parcial: los arcos crecen por ángulo y las líneas por longitud. Evita trucos de guiones, que algunos renderizadores ignoran. Ensambla un GIF con una pausa en el último fotograma de cada paso.
Antipatrones
- Círculos de la proporción áurea adaptados a posteriori.
- Trazos diagonales cortados al ancho horizontal, por lo que se leen más delgados.
- Esquinas afiladas mezcladas con tapas redondas.
- Espacios desiguales sin una regla detrás.
- Masa centrada en la caja delimitadora mientras el recorte está centrado en otro lugar.
- Elementos que tocan el borde del recorte por accidente.
- Ajustes ópticos no documentados.
- Cientos de nodos en una marca hecha de círculos y líneas.
- Un anillo que casi, pero no del todo, comparte el centro del recorte.
- Puntuar versiones que el decisor no puede ver.
- Preseleccionar tres versiones de la misma idea.
- Sobrescribir iteraciones, o editar el maestro original en su lugar.
- Juzgar la escalabilidad a 512 píxeles.
- Afirmar una prueba que no realizaste, o una autorización de marca registrada que no puedes dar. Recomienda una búsqueda profesional.