Projectes · Cas

AFA Baix Llobregat

Un web que cuida i que a més ret comptes.

Disseny webIdentitat digitalTercer sectorTransparència 2021
La portada d'afabaix.org en un portàtil, amb la foto de dues dones rient al pati d'un centre i el rètol taronja Des de 1994, i la mateixa portada en un mòbil
afabaix.org · des del 1994 · 15 delegacions · català i castellà

L’encàrrec

L’AFA Baix Llobregat va néixer el 1994 com a delegació de l’AFA Barcelona i el 1997 se’n va separar per anar pel seu compte. Avui és una entitat d’utilitat pública que acompanya famílies de persones amb alzheimer en una comarca de més de 800.000 habitants: tres Centres Aloïs, quinze delegacions municipals, tallers, grups de suport i una agenda que es mou cada setmana.

La seva web era una pàgina estàtica dels anys dos mil. Havia de servir alhora per a tres coses que no s’assemblen: que una família acabada de diagnosticar trobi a qui trucar, que qui ja hi ve sàpiga què hi ha aquesta setmana, i que qui hi dona o hi subvenciona pugui llegir-se els estatuts i els comptes sense demanar-los per correu.

Què vam fer

La fotografia de l’entitat al davant i la marca a sobre. Res de banc d’imatges: les cares de la portada són les usuàries, les voluntàries i els professionals de la casa, a sang i amb llum natural. El nom de cada secció va en un rètol taronja sobre la foto, i el verd oliva es reserva per al que es prem.

Vam dibuixar un joc d’icones propi. Traç taronja, un per servei i un per tipus de centre. És el que permet que la franja de xifres de la portada i la pàgina de serveis es llegeixin d’un cop d’ull, sense llegir-les, i és la part de la identitat digital que més es veu i més es reutilitza.

Vam muntar l’agenda com una eina, no com un llistat. Vista de llista, de mes i de dia, cercador d’actes i fitxa per activitat amb el seu mapa. És l’únic de la web que es toca cada setmana, així que ho havia de poder portar l’entitat sense trucar-nos.

La transparència, a la mateixa casa i no en un calaix. Estatuts, comptes anuals, altes en registres i memòries, aquestes últimes en un visor que es passa com un llibre. Set seccions, català i castellà, i formularis de soci, voluntariat i donatiu. Disseny, web i programació des de zero.

La decisió de disseny

Orientació a famílies, agenda i transparència.

Una entitat del tercer sector té dos públics que no s’assemblen gens: la família que acaba de rebre un diagnòstic i qui decideix si li dona diners. En comptes de triar-ne un, vam posar l’acompanyament i la rendició de comptes a la mateixa web, amb la fotografia pròpia fent de pont. El taronja anomena, el verd actua, i no hi ha un tercer color.

El projecte en xifres

1994
l’any en què va néixer l’associació
3
Centres Aloïs al Baix Llobregat
15
delegacions municipals amb persona de contacte
10
serveis amb pàgina pròpia
+500
usuaris dels serveis de l’entitat
+200
voluntaris i amics

Com està fet

El sistema tipogràfic reparteix tres famílies per funció i no per caprici: Montserrat per a titulars i botons (38/45 amb un punt d’interlletratge negatiu), Roboto per al menú i el cos a 16/28, i Lato per als destacats que van sobre fotografia. És més del que demana un manual, i aquí se sosté perquè cada família apareix sempre al mateix lloc.

El color va per rols estrictes. El verd oliva #68922E actua —menú actiu, botons, franges— i apareix cent quaranta-una vegades; el taronja #F19103 només anomena: rètols sobre foto i icones il·lustrades. El gris #77797D és el color més freqüent del document, amb gairebé mil usos, perquè és el text. Els radis es queden en 3 i 4 px expressament: la web no competeix amb la imatge.

A sota, la web és més aplicació del que sembla. Calendari d’actes amb tres vistes i cercador, visor de PDF paginat per a les memòries anuals, formularis d’alta de soci, voluntariat i donatiu, murs d’Instagram i Facebook, memòria cau de pàgina i WPML amb català i castellà declarats a l’hreflang. Cinc anys després, l’estructura de set seccions continua sent la mateixa.

Com va anar

01El punt de partidaUna pàgina estàtica i trenta anys de feina sense explicar
02La decisióFotografia pròpia al davant; taronja per anomenar, verd per actuar
03La identitatJuny del 2021: el joc d’icones il·lustrades de la marca
04La webSet seccions, agenda, transparència i dos idiomes

Galeria · el projecte en imatges (clica per ampliar)

Capçalera blanca amb el logotip de l'AFA i el menú Inici · Afabaix · Agenda · Serveis · Centres · Col·labora · Contacte; a sota, dues dones rient sota un arbre i el rètol taronja Des de 1994 vetllant per les persones amb alzheimer i les seves famílies
Una entitat que es presenta amb la cara de la seva gent.
Capçalera amb la foto d'una marxa reivindicativa amb la pancarta Ajuda'ns a ajudar i el rètol taronja Serveis; a sota, nou icones il·lustrades en taronja amb els seus noms: Fes-te soci/a, Ajuts tècnics, Acollida, Actes de difusió, Assessorament jurídic, Atenció psicològica, Atenció SAD, Cursos i Tallers
Nou serveis, cadascun amb la seva icona pròpia.
Capçalera amb la fotografia de la terrassa coberta d'un centre de dia plena d'usuàries i monitores conversant, amb el rètol taronja Centres Alois, i el text que explica que són espais cardioprotegits amb teràpia amb animals, realitat virtual i sales snoezelen
Tres centres de dia a Cornellà, Molins de Rei i el Prat.
Tres mòbils seguits: la portada amb el rètol Des de 1994, la pàgina de Serveis amb les icones apilades en dues columnes i l'agenda d'actes en llista
Icones, serveis i agenda, reordenats per al mòbil.
Capçalera amb el primer pla de dues mans grans entrellaçades i el rètol taronja Presentació; a sota, cinc accessos amb icona a Butlletí, Memòries anuals, Transparència, Estructura i Delegacions, i el text que explica que l'associació va néixer el 1994
La història de l'entitat i la seva porta a la transparència.
Cercador d'esdeveniments amb el botó blau Troba Esdeveniments i les vistes Llista, Mes i Dia; a sota, l'acte del 14 de setembre Dia Mundial de l'Alzheimer 2026 #EncaraHiSom amb el seu cartell
Tot el que passa a la comarca, en un sol calendari.
Franja amb cinc icones taronges i les seves xifres: 3 centres Aloïs al Baix Llobregat, 1 espai Fem Memòria, +500 usuaris dels nostres serveis, +200 voluntaris i amics i +30 anys de lluita contra l'Alzheimer; a sota, els dos blocs fotogràfics Serveis i Centres Alois
Tres centres, cinc-cents usuaris, trenta anys.
Mòbil amb la pàgina Centres Alois: la foto de la terrassa del centre amb el rètol taronja i el text sobre l'atenció centrada en la persona
La pàgina més consultada, a la pantalla més usada.
"Des de 1994 vetllant per les persones amb alzheimer i les seves famílies."afabaix.org

Vols un resultat així per al teu projecte?

Següent projecte

Barcelona Horse Tours, una web trilingüe que ven la ciutat vista des d’un cavall →