LOBO23-PO/logo-design

Diseño de Logotipos

Diseña logotipos como lo haría un diseñador de identidad profesional: primero entiende la marca, explora conceptos genuinamente diferentes, luego refina uno para convertirlo en una marca escalable y lista para producción. El resultado es SVG escrito a mano, que es preciso, editable e independiente de la resolución.

Reglas fundamentales

• Originalidad. Nunca reproduzcas, calques o imites de cerca el logotipo, mascota o marca comercial de una empresa real, incluso si te piden "haz que se parezca a X". Puedes tomar prestado un estilo general (por ejemplo, "geométrico plano como las marcas tecnológicas modernas"), pero la marca en sí debe ser nueva. Si el usuario proporciona su propio logotipo existente, puedes refinarlo o redibujarlo.
• Vectorial primero. Cada marca es un SVG construido a partir de geometría simple (rect, circle, path, polygon). Sin imágenes rasterizadas incrustadas, sin filtros ni desenfoques para la marca principal, sin fuentes externas en el entregable final (consulta Tipografía).
• Funciona en un solo color. Un logotipo que solo funciona con degradados no está terminado. Siempre verifica una versión monocromática.
• Funciona en pequeño. Verifica la marca a 16 px y 32 px. Si se vuelve ilegible, simplifícalo.

Flujo de trabajo

1. Briefing (pregunta solo lo que no puedas inferir)

Recopila, de la conversación o con un breve conjunto de preguntas:

Elemento	Por qué es importante
Nombre (ortografía exacta, mayúsculas/minúsculas) y eslogan si lo hay	Guía la marca denominativa y las composiciones
Qué hace la empresa, para quién	Fuente de conceptos
3 adjetivos de personalidad (ej. cálido, artesanal, confiable)	Define el lenguaje de formas, tipo y color
Colores preferidos / prohibidos	Restricciones
Dónde se usará (señalización, icono de app, empaque, avatar social, bordado)	Determina el nivel de detalle
Preferencia de tipo de logotipo, si la hay (ver más abajo)	Acota la exploración
Logotipos que les gustan o disgustan, y por qué	Calibración del gusto (no los copies)

Si el usuario proporciona poca información, haz suposiciones razonables, indícalas en una o dos líneas y continúa. No te detengas en un cuestionario.

2. Exploración de conceptos (3–4 conceptos)

Produce 3–4 conceptos que sean significativamente diferentes, no simples cambios de color. Varíalos en estos ejes:

• Tipo de logotipo: marca denominativa, letra/monograma, marca pictórica, marca abstracta, emblema/insignia, marca combinada (símbolo + marca denominativa).
• Idea: literal (lo que hacen), metafórica (lo que representan), tipográfica (juego con formas de letras), truco de espacio negativo.
• Lenguaje de formas: geométrico vs. orgánico, redondeado vs. afilado, pesado vs. ligero.

Para cada concepto, escribe una oración de justificación: la idea y por qué encaja con el briefing. Consulta references/concepts.md para técnicas de generación de ideas.

Presenta los conceptos lado a lado (una página HTML o un SVG compuesto único) para que el usuario pueda compararlos, luego pregunta qué dirección desarrollar. Si el usuario solicitó un solo logotipo terminado y sin opciones, elige tú mismo el concepto más fuerte y explica por qué.

3. Refinamiento

Sobre el concepto elegido:

1. Construye sobre una cuadrícula. Usa un viewBox como 0 0 512 512 para símbolos; alinea los puntos clave a números enteros o a un módulo consistente (ej. múltiplos de 8 o 16).
2. Correcciones ópticas. Los círculos y puntos sobresalen ligeramente de los bordes planos (≈1–3 %) para que parezcan del mismo tamaño; los trazos horizontales parecen más gruesos que los verticales del mismo ancho, así que adelgázalos un poco.
3. Simplifica. Elimina todo elemento que no sobreviva a 32 px o que no transmita la idea.
4. Equilibra la composición. La altura del símbolo suele ser ≈ 1.5–2.5 veces la altura de la mayúscula para composiciones horizontales; el espacio entre el símbolo y la marca denominativa ≈ 0.5–1 vez el ancho de un grupo de trazos de letras clave. Centra ópticamente, no matemáticamente.
5. Color. Empieza en negro. Añade color solo cuando la forma funcione. Consulta references/color-and-type.md.

4. Validación

Ejecuta el script de vista previa, luego mira los PNG (usa la herramienta de Lectura en las imágenes) y corrige lo que veas:

node <ruta-del-skill>/scripts/preview.mjs ruta/al/logo.svg [más.svg ...] --out previews/

Esto renderiza cada SVG a 16, 32, 64, 128 y 512 px sobre fondos blanco, negro y de tono medio, además de una hoja de contactos previews/<nombre>-sheet.png. Verifica:

• Legible y reconocible a 16 px y 32 px
• Funciona sobre fondos claros y oscuros (proporciona una versión invertida si es necesario)
• La versión monocromática se mantiene
• Sin formas accidentales o lecturas no deseadas (gíralo, entornando los ojos)
• No se parece a un logotipo conocido existente
• El texto está escrito exactamente como se proporcionó

5. Entrega

Produce un kit pequeño y bien nombrado (adáptalo a lo solicitado):

<marca>-logo/
  <marca>-principal.svg            # marca combinada a todo color / composición principal
  <marca>-horizontal.svg           # símbolo a la izquierda, marca denominativa a la derecha
  <marca>-apilado.svg              # símbolo sobre marca denominativa
  <marca>-simbolo.svg              # solo símbolo (avatares, icono de app)
  <marca>-marca.txt.svg            # solo nombre
  <marca>-mono-negro.svg
  <marca>-mono-blanco.svg
  <marca>-favicon.svg              # símbolo simplificado, viewBox cuadrado
  png/                             # exportaciones de preview.mjs (ej. 512, 1024)
  <marca>-hoja.html                # una página: marcas, espacio de respeto, colores (hex/RGB/CMYK aprox.), tipo

scripts/export.mjs renderiza cualquier SVG a PNG en los tamaños elegidos:

node <ruta-del-skill>/scripts/export.mjs logo.svg --sizes 512,1024 --out png/

Termina con una nota breve: la justificación del concepto, la paleta con valores hex, la tipografía utilizada y el espacio de respeto y tamaño mínimo recomendados.

Reglas de autoría SVG

• Elemento raíz: <svg xmlns="http://www.w3.org/2000/svg" viewBox="…"> sin width/height fijos en el archivo maestro (añádelos solo para exportaciones que los necesiten).
• Incluye <title> con el nombre de la marca para accesibilidad.
• Usa fill en las formas; evita los trazos en los archivos finales cuando sea posible (convierte mentalmente los trazos en rellenos dibujando la ruta del contorno), porque los trazos escalan de forma impredecible en algunas herramientas. Los trazos están bien durante la exploración.
• Mantén los IDs únicos y con prefijo (acme-grad-1) para que varios logotipos puedan insertarse en una misma página.
• Define los colores una vez: coloca los colores de la marca en un <style> con clases, o repite los valores hex exactos. Sin currentColor en el archivo principal; usa currentColor en una variante de icono separada si el usuario quiere iconos que se adapten al tema.
• Coordenadas redondeadas a un máximo de 2 decimales.
• Sin <image>, sin <foreignObject>, sin scripts.

Tipografía

El texto en un SVG depende de que el visor tenga la fuente, por lo que:

• Exploración: <text> con una pila de fuentes robusta está bien (font-family="Inter, Helvetica, Arial, sans-serif"), y puedes cargar Google Fonts en una página HTML de comparación.
• Marca denominativa final: prefiere dibujar las letras como rutas (las letras a medida se adaptan mejor a los logotipos), o convierte el texto en contornos si hay una herramienta disponible (ej. fonttools/opentype.js — consulta scripts/text-to-path.mjs). Si ninguno es posible, mantén <text> pero menciona la fuente exacta y la licencia en la nota de entrega y envíala con una fuente de licencia abierta (las fuentes SIL OFL de Google Fonts son opciones seguras por defecto).
• Ajusta el espaciado entre letras (tracking) a ojo; las marcas denominativas en mayúsculas suelen necesitar de +2 % a +10 % de tracking, las minúsculas normalmente de 0 a −2 %. Ajusta los pares conflictivos (AV, To, LT, ry).

Modos de fallo comunes a evitar

• Conceptos que son la misma idea en cuatro colores.
• Literalismo de clip-art (una taza de café para una cafetería, una casa para un agente inmobiliario) sin un giro. Si optas por lo literal, encuentra un ángulo inesperado o un espacio negativo ingenioso.
• Demasiados detalles, degradados, sombras paralelas o trazos muy finos.
• Texto demasiado pequeño dentro de un emblema para ser legible a tamaños reales.
• Efectos modernos que quedan obsoletos rápidamente, a menos que el usuario los solicite.
• Desequilibrio: un símbolo pesado junto a una marca denominativa delgada (o viceversa). Iguala los grosores de trazo.

Referencias

• references/concepts.md — técnicas de generación de ideas y guía de tipos de logotipo
• references/color-and-type.md — psicología del color, construcción de paletas, contraste, combinación de tipografías
• examples/ — SVGs de muestra que muestran estructura y convenciones (marcas ficticias)