Que quien llegue a la web, sea una madrastra o una diputada, salga viendo la palabra de otra manera.
ASTRAS es la primera asociación en España que trabaja por el reconocimiento del rol de la madrastra y por la protección de la infancia en las familias ensambladas. Necesitaba su primera web: un lugar desde el que explicar quiénes son, qué piden y cómo colaborar con ellas.
La dificultad estaba en la propia palabra. «Madrastra» llega cargada de siglos de cuentos de hadas, y la web tenía que darle la vuelta sin caer en los extremos habituales: ni frases motivacionales, ni tono de víctima, ni protesta agresiva, ni la frialdad de una institución.
Las asociaciones sociales suelen comunicar con un lenguaje suave: tonos pastel, fotos de manos entrelazadas y frases de ánimo. Para ASTRAS, ese registro jugaba en contra. Reforzaba la idea de un colectivo frágil que pide comprensión, cuando lo que la asociación quiere es reconocimiento.
Tampoco servía una web institucional y fría. Tenía que hablar con diputadas y periodistas, sí, pero también hacerse recordar y compartir. Así que fijamos tres principios antes de diseñar nada:
Si el rol ha sido invisible, la web no puede susurrar. Titulares grandes, color saturado y movimiento.
El estigma nace de un cuento; se desmonta mejor con humor que con queja. Por eso, el cómic.
Detrás del ruido, datos, propuestas legales y un contacto claro para cada perfil.
Partimos del manual corporativo de la asociación: magenta, tinta y blanco como colores principales; turquesa, lima, violeta y fucsia como secundarios; collage en blanco y negro con trama de puntos, y un repertorio de formas geométricas —estrellas de cuatro puntas, pétalos, arcos y cuartos de círculo—.
Llevamos ese lenguaje hacia el cómic. El cuento de hadas es acuarela, filigrana y final feliz; el cómic es tinta, viñeta y onomatopeya. Cada bloque de la web se dibuja como una viñeta: borde de 3 px, sombra dura sin difuminar y titulares en League Gothic, la tipografía condensada del manual. El texto explicativo va siempre en Inter y a tamaño de lectura, para que el ruido nunca se coma el contenido.
La web se abre con una viñeta a pantalla completa: una explosión presenta el logo y el grito «¡Sin cuento!». En dos segundos marca el tono de todo lo que viene después.
El nombre de la asociación nace de la propia palabra: madrastras. Es la idea central de la web, y la convertimos en una animación: aparecen las etiquetas que arrastra la palabra, se tachan y se caen; «madr» desaparece, queda «astras», y «astras» se transforma en una estrella. Astra significa estrella.
El resto de piezas del collage también cuentan algo:
El dedo que acusaba a la madrastra en los cuentos ahora señala lo que importa, y suelta una chispa al hacerlo.
Lanzarse a un rol sin manual de instrucciones. Desciende con el scroll hasta el centro de la pantalla.
La comunidad alrededor del logo: mujeres distintas, en España y Argentina, que forman un mismo dibujo.
La misma idea recorre toda la página. En la frase «queremos que nos llamen por lo que somos», un subrayado magenta aparece con el scroll detrás de «madrastras», como quien la marca con rotulador, y la mano suelta sus rayos.
El momento central de la web es una secuencia ligada al scroll. La buceadora desciende sobre la frase «Nadie nos dio el manual» mientras las dos líneas del titular se cruzan. Cuando llega al centro, la explosión sale de su pecho, a la altura del corazón, llena la pantalla de magenta y da paso a la respuesta: «Así que decidimos crearlo».
Ese giro resume la asociación en una sola interacción: de la falta de referentes a la investigación propia.
La web habla a la vez a madrastras que buscan apoyo y a instituciones, medios y profesionales que necesitan datos para actuar. En lugar de separarlas en dos webs, ordenamos una sola página en bloques que alternan los dos registros: lo que la asociación pide y con quién colabora, junto a lo que hace, la agenda de encuentros y la prensa.
Cada tipo de colaboración abre el formulario de contacto en una ventana con el perfil ya elegido —institución, profesional, medio de comunicación o madrastra—, para que cada mensaje llegue clasificado sin que nadie tenga que buscar dónde escribir.
La mayoría de las visitas llegarán desde el móvil, así que cada animación tiene su versión. La secuencia de la buceadora pide menos scroll y la explosión ocupa toda la altura aunque cambie la barra del navegador. Las tarjetas que tiemblan en escritorio se quedan quietas en móvil, y el menú abierto solo muestra la cruz para cerrarlo.
Construimos la web en HTML, CSS y JavaScript, con GSAP y ScrollTrigger para las animaciones y Lenis para el scroll suave. Trabajamos con Claude Code como copiloto de desarrollo: nosotros marcábamos la dirección de arte, la narrativa y cada ajuste fino —el punto exacto del que sale la explosión, cuánto scroll pide en móvil, qué tarjeta tiembla y cuál no—, y la IA aceleraba el código. Iteramos directamente sobre la web en el navegador, en escritorio y en móvil.
Todo el movimiento respeta la preferencia de movimiento reducido del sistema: con ella activada, la web muestra el contenido completo sin animaciones. La web está publicada en Vercel y, mientras la asociación revisa los textos, la protege un código de acceso.
La web está terminada y en revisión con la asociación. Los siguientes pasos son conectar el dominio propio, activar el formulario de contacto y llenar el blog, la agenda y la tienda con contenido real.