Diseño Web Guiado por el Logotipo
Convierte el propio logotipo de un producto en el material visual de su sitio web. Diseña las ilustraciones, el movimiento y la composición de forma conjunta para que el resultado explique el producto y se sienta específico de su marca.
Este es un método de diseño e implementación, no una plantilla de sitio. Deriva el resultado del logotipo y producto reales. No heredes la marca, paleta, número de capítulos, temas de ilustración, tipografía o modelo de desplazamiento de un sitio de ejemplo.
Un sitio web simple puede tener pocas secciones y poco texto mientras sus ilustraciones siguen siendo completas y cuidadosamente dibujadas. Mantén el alcance pequeño mediante la selección de contenido, no eliminando las estructuras que hacen reconocible la obra.
Comprender el producto e inspeccionar el logotipo
Usa la información del producto proporcionada, el sitio web existente, el logotipo y las referencias. Establece qué es el producto, sus funciones principales y la acción principal. Reutiliza la información conocida; pregunta solo cuando falte un activo esencial o una elección realmente consecuente.
Visualiza el logotipo real antes de diseñar. Inspecciona su silueta, trazos o masas rellenas, espacios negativos, ritmo, proporciones, colores y conexiones distintivas. Identifica qué elementos pueden convertirse en material visual útil y qué características hacen reconocible la marca original. No todos los logotipos deben reducirse a líneas o dividirse en tres partes.
Cuando se proporcionen trazados vectoriales utilizables, trabaja a partir de esos trazados. Normalmente basta con una breve inspección visual y de sus grupos/contornos; no es necesario volver a medir su geometría mediante análisis de píxeles.
Lee design-and-assets.md para el análisis del logotipo, el mapeo producto-a-forma y la producción de activos.
Desarrollar una historia visual específica de la marca
Traduce los elementos del logotipo en composiciones relacionadas con las funciones del producto. Una curva podría convertirse en un flujo de trabajo, una abertura podría enmarcar una imagen, o una forma rellena podría desplegarse en un espacio de trabajo. Estas son posibilidades, no motivos obligatorios. Rotar un logotipo completo sobre tarjetas no relacionadas no cumple con esta tarea.
Para cada sección importante de la página, define:
- Qué debe entender el visitante, expresado como una declaración breve de producto/función.
- La ilustración completa que lo comunica y cómo participan las formas derivadas del logotipo.
- El objeto significativo o la relación visual que persiste en el siguiente estado.
- Cómo comparte el arte el espacio con el texto y la acción en tamaños de escritorio y móvil.
Planifica qué elementos derivados del logotipo sobreviven en cada destino, luego desarrolla la obra del destino antes de ajustar su interpolación. Usa deformación, despliegue, dibujo, enmascaramiento, reordenación de partes o cambios de material según convenga a la marca. Mantén el logotipo original intacto siempre que se presente como la marca oficial. El reensamblaje en la marca original puede proporcionar un cierre cuando se ajuste a la historia; no es obligatorio que haya una sección de descarga o un final con el logotipo.
Elegir el modelo de página y movimiento juntos
Elige la disposición que se adapte al contenido y la experiencia solicitada: un héroe animado fuerte con secciones más tranquilas, una historia continua vinculada al desplazamiento, una secuencia compacta u otra composición justificada. Respeta las referencias seleccionadas por el usuario y el modelo de interacción. No fuerces capítulos alternos de pantalla completa en cada producto.
Para trabajo vinculado al desplazamiento, prefiere el desplazamiento nativo del documento a menos que el briefing requiera otro comportamiento. Dale a los lectores estados de reposo claros y compuestos, y coloca las transformaciones donde apoyen la secuencia de lectura. Deriva la sincronización del diseño real en lugar de imponer umbrales de muestra.
Usa texto breve que diga qué es el producto y qué pueden hacer los usuarios. Deja que la ilustración y la composición lleven la explicación. Haz coincidir el tipo, los espaciados, los controles y los ornamentos con la marca, en lugar de rodear la animación con una plantilla de marketing genérica.
Dibujar destinos completos, luego coreografiar su transformación
Lee la sección de creación de ilustraciones de design-and-assets.md y mira la comparación visual; su fuente editable es illustration-craft.svg. Los ejemplos explican estructura y acabado, no un estilo prescrito o una plantilla de página.
Renderiza cada destino importante como una ilustración real en la página de trabajo o un activo editable. Establece sus proporciones, contorno distintivo, componentes significativos, conexiones y superposiciones. Añade jerarquía de línea/color/material donde sea útil. Detén temporalmente la escena para juzgar la composición: debe explicar su tema sin depender del título para identificar un blob ambiguo. Este es un paso de trabajo, no una solicitud de propuesta separada o aprobación del usuario en cada etapa.
Separa las responsabilidades del movimiento: la estructura derivada del logotipo puede transformarse continuamente; los componentes adjuntos siguen esa estructura; el contenido y acabado específicos del destino pueden desplegarse o aparecer una vez que su espacio existe. Estos son roles, no un número fijo de grupos. Preserva la obra rica sin forzar cada detalle a través de la misma función de interpolación.
Deja que cada elemento del logotipo transportado gane su papel en cada destino. No fuerces una capa a convertirse en un objeto de producto no relacionado solo para mantenerla presente en todas las secciones; puede terminar una transformación y salir a medida que entra nuevo contenido de escena.
Haz visible la correspondencia origen-destino en la geometría o el traspaso espacial. Desvanecer todo el logotipo y mostrar un símbolo no relacionado no demuestra la transformación solicitada. Una vez establecidos los destinos y las correspondencias, crea las poses de transición y sincronízalas con la página.
Implementar la obra en el medio elegido
Usa el stack del proyecto existente. Lee implementation.md para elegir SVG/CSS, una biblioteca de timeline, canvas/3D o medios renderizados, y para geometría, sincronización y composición responsive.
Prefiere geometría vectorial original para formas derivadas precisas del logotipo. Crea la obra intermedia deliberadamente; usa herramientas de generación de imágenes o movimiento cuando la dirección artística elegida realmente necesite su resultado. Las imágenes generadas deben apoyar la misma gramática de marca, no sustituir un activo decorativo no relacionado por la transformación solicitada.
Crea una página funcional, no solo una propuesta de movimiento. Coordina la geometría, el viaje, el material y el contenido ilustrativo a través de un modelo de animación coherente. Preserva texto legible, controles útiles y la marca fuente exacta en los estados de reposo del logotipo oficial. Respeta las preferencias de movimiento reducido con una composición comprensible.
Revisar y refinar el sitio web renderizado
Usa visual-review.md para inspeccionar primero las ilustraciones en reposo, luego sus transiciones y la colocación en escritorio/móvil. Distingue la falta de estructura visual del muestreo de contornos y la sincronización de fotogramas; aumentar la precisión numérica no añade detalles faltantes del producto. Juzga si otra marca podría obtener la misma página cambiando solo el logotipo y los colores: si es así, revisa el mapeo de logotipo a función.
Inspecciona al menos un estado intermedio por transición importante. Si se lee como un híbrido accidental, corrige la correspondencia de elementos o crea una pose de transición más clara; escalonar cada capa o aumentar la precisión del contorno no reparará una transformación semánticamente incorrecta. Refina el problema observado: redibuja una pose intermedia poco atractiva, ajusta una ruta de viaje conflictiva o cambia una revelación mal sincronizada. Después de un cambio enfocado, revisa el movimiento afectado y los estados cercanos en lugar de re-ejecutar suites no relacionadas.
Entrega la vista previa funcional, los activos/código fuente editables y un breve informe de lo que realmente se verificó. Si se solicita una validación independiente del agente, haz que use un briefing de producto/logotipo genuinamente diferente; reproducir solo la marca fuente no demuestra generalidad. Informa directamente si la validación no está disponible.
Caso práctico opcional
Lee tapestry-case-study.md solo cuando una historia SVG continua similar sea útil o el usuario solicite ese caso. La carpeta assets/reference-site contiene el ejemplo Tapestry ejecutable y sus activos de logotipo/fuente. Es una implementación trabajada opcional, no la disposición inicial predeterminada ni una fuente de branding para otros productos.