Restyle di un sito web
Parallelamente al restyling del logo, ho lavorato sul rinnovamento dell’interfaccia utente (UI) e sulla definizione di un nuovo design system per il sito web di Acumen Academy.
L’obiettivo era migliorare la user experience, rendendo la navigazione più intuitiva e valorizzando i contenuti formativi.
Perché il sito andava riammodernato
Il sito precedente presentava alcune criticità:
- palette colori ampia ma poco coerente,
- tipografia non ottimizzata per gerarchie e leggibilità,
- navbar scarna e poco intuitiva,
- assenza di icone e micro-componenti di supporto,
- esperienza utente frammentata tra desktop e mobile.
Era quindi necessario un restyling completo dell’interfaccia, capace di unire usabilità, coerenza visiva e impatto comunicativo.
La nuova interfaccia
Un sito accademico come quello di Acumen ha un compito cruciale: trasmettere autorevolezza e accessibilità allo stesso tempo.
Deve riuscire a comunicare i valori di formazione e cambiamento sociale, offrendo al contempo strumenti chiari e immediati per orientarsi tra corsi, fellowship e risorse.
Il restyling proposto parte proprio da questa necessità: creare un’interfaccia pulita, moderna e funzionale, capace di supportare gli obiettivi formativi e di rafforzare l’identità del brand.
PALETTE E TIPOGRAFIA
Palette cromatica ottimizzata: blu e azzurro diventano i colori principali per trasmettere serietà e modernità, mentre l’arancione è utilizzato come colore di contrasto per pulsanti, call to action e dettagli interattivi. Il bianco e il grigio scuro fungono da elementi neutri per migliorare il bilanciamento.
Tipografia gerarchica: i titoli sono affidati al font Literata, che trasmette autorevolezza e continuità accademica, mentre i testi e le caption utilizzano Jost, più moderno e leggibile sul web. Questa combinazione assicura chiarezza e leggibilità su tutti i dispositivi.
BOTTONI E NAVBAR
Bottoni e componenti interattivi: sono stati definiti tre livelli di call to action – primario, secondario e terziario – ognuno con stili e hover differenti. Anche i link e i checkbox hanno comportamenti coerenti, creando un linguaggio visivo chiaro e prevedibile.
Navbar evoluta: è stata arricchita con due call to action ben visibili e con nuove icone (profilo, avvisi), migliorando l’accesso rapido alle funzioni principali. Nella versione mobile è stato introdotto un menù a comparsa con icone social integrate.
INTERAZIONE E GRIGLIA
Corsi interattivi: le schede dei corsi sono state riprogettate per mostrare informazioni aggiuntive all’hover, rendendo la navigazione più dinamica e immediata.
Griglia responsive: il layout è basato su una griglia a 12 colonne per desktop e a 4 colonne per mobile, garantendo scalabilità e coerenza nella distribuzione dei contenuti.
Punti focali della nuova interfaccia
Le diverse sezioni del sito sono state ripensate per valorizzare i contenuti e guidare l’utente.
Ora accoglie l’utente con una hero animata e pulsanti call to action ben visibili. Sono state introdotte sezioni come “Come funziona il sito” e caroselli per corsi, fellows e partner.
La homepage diventa quindi un hub di orientamento rapido.
Offre una barra di ricerca, filtri laterali con checkbox e schede interattive con preview in hover.
L’obiettivo è permettere agli utenti di trovare facilmente i corsi più adatti.
Integra un syllabus a schede, un video anteprima e elementi sticky che restano visibili durante lo scroll.
Sono presenti anche i feedback degli studenti e un restyling della sezione “Corsi suggeriti”.
È stata resa più coinvolgente con caroselli video, schede a scomparsa per le nazioni e mappe interattive.
Questa sezione rafforza la dimensione internazionale dell’accademia.
Riorganizzato in categorie (guide, articoli, corsi suggeriti) con anteprime dinamiche e call to action verso i contenuti più recenti.
Migliorata con una CTA che guida verso la dashboard utente e suggerimenti di corsi correlati, così da mantenere il coinvolgimento dopo l’iscrizione.
Tool utilizzati
Figma
Photoshop
Illustrator
Hai bisogno di un restyling della tua identità visiva?
Ogni progetto nasce da una buona conversazione.
Se hai bisogno di supporto su esperienza utente, identità visiva e siti web professionali, sono qui per aiutarti a dare forma alle tue idee.
Raccontami cosa hai in mente.
