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 fijé 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.
Partí 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—.
Llevé 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 manual de ASTRAS define el logotipo, los colores, las tipografías y un repertorio de formas. Lo que había que decidir era cómo se usa todo eso en una pantalla: qué color manda, qué se escribe grande y cuánto espacio se deja al texto.
#FF0090Protagonista: fondos de impacto, titulares clave y botones#3E3737Texto, bordes de 3 px y sombras duras#FFFFFFAire: el texto explicativo va siempre sobre claro#FF00FF#BA55D3#FFF0F5#40E0D0#00FF00Los cinco secundarios son chispas: estrellas pequeñas, etiquetas y acentos. El magenta sigue mandando.
NADIE
NOS DIO
EL MANUAL
Titulares: solo frases cortas y con intención.
Somos 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.
Explicación e información: tamaño de lectura, nunca en grande.
Un sistema visual no es solo lo que se usa: también lo que se renuncia a usar. Estas fueron las decisiones que más pesaron.
Un bloque, una idea.
1 2 3Con el mismo borde, la misma sombra y las mismas formas salen tarjetas, listas, formularios y productos que se reconocen como de la misma familia. Estos son los componentes de la web, tal como se ven en ella.
El nombre de la asociación nace de la propia palabra: madrastras. Es la idea central de la web, y la convertí 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».
Dura poco más de dos segundos y no va ligada al scroll, sino al tiempo: en cuanto la buceadora llega al centro, se dispara sola. Aquí está desmenuzada en ocho fotogramas.
1La buceadora llega al centro del titular.
2La explosión nace a la altura de su corazón.
3Crece, arrancando el titular de cuajo.
4Y llena la pantalla de magenta.
5Las formas de la marca saltan por el aire.
6«Así que decidimos…»
7«…crearlo.», con un último golpe.
8Y entra la respuesta: investigación propia.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, ordené 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.
Construí la web en HTML, CSS y JavaScript, con GSAP y ScrollTrigger para las animaciones y Lenis para el scroll suave. Trabajé con Claude Code como copiloto de desarrollo: yo marcaba 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 ya es pública, con dominio propio, en asociacionastras.org.
La web ya está publicada en asociacionastras.org. Los siguientes pasos son seguir llenando el blog y abrir la agenda y la tienda con contenido real.
Cuéntame qué necesitas y lo vemos juntos.