Maquetación Web Dinámica / Proyectos finales: el examen del diseñador-desarrollador

Proyecto final B: del logo al sitio con GSAP

Proyecto250 min150 XP

El examen del diseñador-desarrollador, segunda parte: crear desde CERO. Tomas una MARCA —su logo, su personalidad— extraes su sistema visual y construyes su página, viva con animaciones GSAP. Es el proyecto que mejor resume el curso: de una identidad a un sitio que se siente, aplicando diseño, tokens y animación en una sola pieza de portafolio.

Reto

De una marca a su sitio animado

Difícil240 min150 XP(×2 sin mirar la solución)

Qué debes construir

Elige o inventa una marca (un café, una app, un estudio, una ONG), define su identidad, y construye su landing con:

Sistema visual extraído de la marca: la personalidad decide la paleta, la tipografía y el "tono" del movimiento (módulos 4, 17). Una marca seria y una juguetona NO se animan igual.
Tokens completos (dos niveles) y tema coherente (módulo 17).
Estructura semántica, responsive y accesible (módulos 2, 8, 18).
Animación GSAP con intención: entrada coreografiada (timeline) y al menos un efecto de scroll (ScrollTrigger), con prefers-reduced-motion (módulo 16).
El logo, protagonista: dibújalo en SVG (módulo 12) y anímalo (que se trace o se ensamble) como sello de la marca.

Reglas

Diseño abierto: NO hay una solución correcta. La coherencia entre marca, sistema y movimiento es lo que se evalúa.
HTML/CSS/JS(+GSAP) — sin frameworks (eso llega en M20 y los cursos siguientes).
El movimiento debe SERVIR a la marca, no decorar por decorar: contención (el "presupuesto de movimiento" del módulo 10).

240:00

Cuando estés listo, arranca el reloj.

El razonamiento — un sitio con alma nace de la coherencia, no de los efectos:

La personalidad es la fuente de verdad. Antes de un solo token, defines quién es la marca en una frase, y de ahí se DERIVA todo: la paleta (cálida vs fría), la tipografía (serif vs sans), y —clave— el tono del movimiento (¿ease-out largos y suaves, o cortos y precisos?). Cuando el sistema sale de la personalidad, el sitio se siente "de una pieza".
El logo animado es el sello. Un logo que se traza o ensambla al cargar (SVG + GSAP) da el primer segundo de identidad — y fija el tono del resto. Es el módulo 12 y el 16 juntos, al servicio de la marca.
El movimiento sirve a la marca, con presupuesto. La entrada coreografiada y el scroll no son "efectos": comunican el carácter (una marca de lujo se mueve lento y seguro; una de niños, rebota). Y siempre con contención y reduced-motion — lo premium es sutil.

Aquí una referencia: el hero de la marca ficticia "Cauce" (agua y sostenibilidad — personalidad "serena y natural"), con su sistema y su entrada GSAP:

Fíjate en la coherencia: personalidad "serena y natural" → serif cálida, verdes de agua, y un movimiento LENTO (power1.inOut, duraciones largas) — si "Cauce" fuera una marca de energéticas, el mismo layout pediría sans agresiva, colores eléctricos y movimiento cortante (back.out, rápido). El logo se traza como sello, y la entrada respeta reduced-motion con el guard de siempre.

Autoevaluación: ¿tu sistema visual SE DERIVA de una personalidad clara? ¿el movimiento comunica ese carácter (y no solo decora)? ¿el logo en SVG es protagonista? ¿todo respeta teclado, contraste y reduced-motion? Si un desconocido puede describir la "personalidad" de tu marca solo viendo el sitio, lo lograste.

Qué sigue

Dos proyectos de portafolio terminados. Antes de cerrar el curso, la última pieza del oficio: el CHECKLIST de calidad con el que un profesional revisa CUALQUIER entrega —tuya o ajena— antes de darla por buena. La diferencia entre "creo que está bien" y "sé que está bien".