AFA Baix Llobregat
Una web que cuida y además rinde cuentas.
El encargo
La AFA Baix Llobregat nació en 1994 como delegación de la AFA Barcelona y en 1997 se separó para ir por su cuenta. Hoy es una entidad de utilidad pública que acompaña a familias de personas con alzhéimer en una comarca de más de 800.000 habitantes: tres Centres Aloïs, quince delegaciones municipales, talleres, grupos de apoyo y una agenda que se mueve cada semana.
Su web era una página estática de los años dos mil. Tenía que servir a la vez para tres cosas que no se parecen: que una familia recién diagnosticada encuentre a quién llamar, que quien ya viene sepa qué hay esta semana, y que quien dona o subvenciona pueda leerse los estatutos y las cuentas sin pedirlos por correo.
Qué hicimos
La fotografía de la entidad delante y la marca encima. Nada de banco de imágenes: las caras de la portada son las usuarias, las voluntarias y los profesionales de la casa, a sangre y con luz natural. El nombre de cada sección va en un rótulo naranja sobre la foto, y el verde oliva se reserva para lo que se pulsa.
Dibujamos un juego de iconos propio. Trazo naranja, uno por servicio y por tipo de centro. Es lo que permite que la franja de cifras de la portada y la página de servicios se lean de un vistazo, sin leerlas, y es la parte de la identidad digital que más se ve y más se reutiliza.
Montamos la agenda como una herramienta, no como un listado. Vista de lista, de mes y de día, buscador de actos y ficha por actividad con su mapa. Es lo único de la web que se toca cada semana, así que tenía que poder llevarlo la entidad sin llamarnos.
La transparencia, en la misma casa y no en un cajón. Estatutos, cuentas anuales, altas en registros y memorias, estas últimas en un visor que se pasa como un libro. Siete secciones, catalán y castellano, y formularios de socio, voluntariado y donativo. Diseño, web y programación desde cero.
Orientación a familias, agenda y transparencia.
Una entidad del tercer sector tiene dos públicos que no se parecen en nada: la familia que acaba de recibir un diagnóstico y quien decide si le da dinero. En vez de elegir uno, pusimos el acompañamiento y la rendición de cuentas en la misma web, con la fotografía propia haciendo de puente. El naranja nombra, el verde actúa, y no hay un tercer color.
El proyecto en cifras
Cómo está hecho
El sistema tipográfico reparte tres familias por función y no por capricho: Montserrat para titulares y botones (38/45 con un punto de interletraje negativo), Roboto para el menú y el cuerpo a 16/28, y Lato para los destacados que van sobre fotografía. Es más de lo que pide un manual, y aquí se sostiene porque cada familia aparece siempre en el mismo sitio.
El color va por roles estrictos. El verde oliva #68922E actúa —menú activo, botones, franjas— y aparece ciento cuarenta y una veces; el naranja #F19103 solo nombra: rótulos sobre foto e iconos ilustrados. El gris #77797D es el color más frecuente del documento, con casi mil usos, porque es el texto. Los radios se quedan en 3 y 4 px a propósito: la web no compite con la imagen.
Debajo, la web es más aplicación de lo que parece. Calendario de actos con tres vistas y buscador, visor de PDF paginado para las memorias anuales, formularios de alta de socio, voluntariado y donativo, muros de Instagram y Facebook, caché de página y WPML con catalán y castellano declarados en hreflang. Cinco años después, la estructura de siete secciones sigue siendo la misma.
Cómo fue
Galería · el proyecto en imágenes (clica para ampliar)
"Des de 1994 vetllant per les persones amb alzheimer i les seves famílies."afabaix.org
¿Quieres un resultado así para tu proyecto?
