Unione Italiana dei Ciechi e degli Ipovedenti di Macerata
uicmc.it (si apre in una nuova scheda)
L'Unione Italiana dei Ciechi e degli Ipovedenti di Macerata disponeva già di un sito, ma nel tempo era diventato difficile da navigare: struttura poco intuitiva, pagine difficili da raggiungere, contenuti non aggiornati e un'installazione WordPress lasciata a sé stessa. Il mandato era chiaro: ripartire da zero, con un'architettura più solida e un'attenzione reale all'accessibilità.
Il processo
Ho iniziato con un'analisi del sito esistente per capire cosa non funzionava: pagine orfane, sezioni inaccessibili, informazioni obsolete. Da lì ho costruito una mappa del sito per definire la nuova struttura, poi sono passato ai wireframe su Figma, dove ho progettato ogni pagina (Servizi, Articoli, Contatti, Diventa Socio, Servizio Civile…) prima di scrivere una riga di codice.
Lo sviluppo
Lo sviluppo è avvenuto su WordPress con il page builder Etch, una scelta che ha permesso di ottimizzare sia le performance, la versatilità e la scalabilità del sito. Ho lavorato con componenti riutilizzabili, un vantaggio sia in fase di sviluppo che per le future evoluzioni del sito, e con custom post type per gestire i servizi in modo strutturato.
Per il visual design ho usato una palette derivata dal logo dell'associazione e un font ad alta leggibilità. Accessibilità e contrasto cromatico non sono stati aggiunte in fase di revisione, ma vincoli di partenza: struttura HTML semantica e testi alternativi curati fin dall'inizio.
Il risultato
Il nuovo sito offre una navigazione lineare: casella di ricerca nel menù, banner per le donazioni, form di contatto con categorie di richiesta distinte, archivio documentale ordinato per anno, pagina con i riferimenti delle persone dell'associazione. Ogni sezione è raggiungibile con pochi clic, anche da chi non ha dimestichezza con la navigazione web.
La segreteria, non tecnica, può gestire e aggiornare i contenuti in autonomia, senza dipendere da un supporto esterno per le operazioni quotidiane.
Galleria immagini






Prima e dopo
Dettagli tecnici
- Piattaforma: WordPress con page builder Etch
- Design: Figma (mappa del sito, wireframe e UI)
- Architettura: Custom post type per i servizi, componenti riutilizzabili
- Accessibilità: Contrasto cromatico WCAG, HTML semantico, testi alternativi
- Strumenti: WordPress, Figma, Etch
Vorresti rifare il tuo sito web?
Sono disponibile per effettuare un restyling completo

