Diego Kaminsky · Escuela de Canto

Contexto

Un profesor de canto en Madrid que evoluciona de marca personal a escuela. Enseña un método integral que combina técnica vocal, trabajo emocional y entrenamiento físico-muscular.

La web anterior estaba hecha con un page builder y tenía el problema clásico de las webs que crecen sin plan: cuatro mensajes compitiendo en el hero, un banner de avisos apilado sobre otro, y ninguna jerarquía.

Enfoque

• Una idea por pantalla. El hero anterior intentaba anunciar cursos de verano, matrícula gratuita, inscripciones de temporada y la propuesta de la escuela a la vez. El rediseño deja una sola cosa arriba y baja el resto a su sitio.
• Dos dorados, porque uno no se lee. La paleta es marfil con halo dorado, y el dorado de marca sobre el fondo crema da 3,7:1 — por debajo del 4,5:1 que exige el texto normal. Se reserva para filetes, iconos y titulares grandes, y entra un segundo dorado más profundo para el texto pequeño: 7,1:1 sobre el crema y 5,6:1 sobre la zona ámbar del degradado, que es el peor caso de la página.
• GSAP y Alpine self-hosted, nunca desde CDN. Cargar una librería desde un CDN de terceros envía la IP del visitante a ese tercero, y eso hay que declararlo. Servirlo desde el propio dominio evita el problema de raíz.
• Las cookies de Google no se activan hasta que alguien acepta. Consent Mode con denegación por defecto: el contenedor de medición no se carga mientras no haya consentimiento, y al retirarlo se limpian las cookies que hubiera puesto.
• Tema FSE con theme.json como fuente de verdad, sustituyendo por completo al page builder.

Trabajo realizado

• Tema WordPress FSE a medida reemplazando al page builder
• Sistema de diseño marfil con dos dorados y los ratios documentados en el propio CSS
• Capa de motion con GSAP y Alpine, self-hosted y con reducción de movimiento
• Estructura de cursos, método, talleres y blog
• Formularios con SMTP propio, y llamada y WhatsApp como contacto directo
• Consentimiento de cookies con embeds bloqueados hasta aceptación

Resultado

En producción sobre su dominio. La web anterior ya no existe: el cutover se hizo sobre el mismo dominio conservando las URLs, así que el posicionamiento ganado no se perdió por el camino.

Nota sobre el trabajo

Proyecto desarrollado en Agencia Xpandex, donde llevo el ciclo completo: diseño, desarrollo, rendimiento, accesibilidad, SEO técnico y despliegue.