Tra le tendenze più popolari del web design dell’ultimo anno nessuna più del Glassmorphism ha fatto discutere gli esperti di usabilità e grafica.
Accattivante e colorata, questa tendenza privilegia la trasparenza e gli approcci multistrato. Progettato per assomigliare a superfici di vetro lattiginoso, ha attirato molta attenzione sia per la gradevolezza e ricercatezza grafica sia per la presunta scomodità a cui costringe l’utente.
Cos’è il Glassmorphism?
Il Glassmorphism è una diretta evoluzione del Neumorphism design del quale mantiene alcune impostazioni di fondo condividendone sia l’approccio che alcuni limiti circa la UX.
La somiglianza nasce dalla stessa tendenza a disegnare gli oggetti di interfaccia come se copiassero le loro controparti del mondo reale. Esempi di neumorfismo in azione sono pulsanti o immagini e grafici dall’aspetto realistico. Questi elementi di design realistici sembrano quasi “tangibili”.
Potrebbe essere associato allo stile pittorico del trompe l’oeil.
All’interno di questa tendenza generale all’illusionismo 3D, Il Glassmorphism si specifica per un uso ricercato delle trasparenze e delle sfocature.
La premessa non è nuova in sé. È stato utilizzato in Windows VISTA, iOS 7 e molti altri stili. Fa anche parte del Fluent Design System di Microsoft: lo chiamano acrilico. Più tardi quest’anno Mac OS Big Sur è uscito con un’implementazione di questo effetto, rendendolo ancora più mainstream. Come si vede si tratta di usi preferibilmente Desktop o su device che garantiscono dimensioni in cui uno stile fortemente visivo può meglio essere apprezzato.
Quali sono le caratteristiche del Glassmorphism?
Trasparenza
L’effetto vetro smerigliato si ottiene utilizzando la sfocatura dello sfondo. Questo aggiunge profondità al design e stabilisce la verticalità. La sfocatura degli oggetti conferisce al layout un senso di prospettiva, quasi come se fluttuassero nello spazio 3D.
Approccio a più livelli
Con gli oggetti che fluttuano nello spazio, l’interfaccia a strati mantiene un aspetto pulito e gradevole alla vista. Questo stile funziona meglio con uno o più livelli trasparenti su uno sfondo luminoso e colorato.
Colori vividi
Il colore di sfondo gioca un ruolo essenziale. Per evidenziare la trasparenza sfocata dovrebbe essere colorato ma sottile. Ciò è necessario affinché l’effetto sia correttamente visibile. Gli sfondi opachi e a basso contrasto svanirebbero semplicemente sotto gli oggetti e l’effetto andrebbe perso. Inoltre, non possono essere troppo disordinati o dettagliati.
Bordi sottili e leggeri su oggetti traslucidi
I bordi bianchi semitrasparenti simulano il bordo del vetro e possono far risaltare gli oggetti dallo sfondo.
Il problema dell’accessibilità.
Proprio come con Neumorphism, questo stile soffre di problemi riguardandi l’accessibilità. La regola principale di Neumorphism si traduce anche qui: se hai una buona gerarchia funzionale, i tuoi elementi sullo schermo dovrebbero essere in grado di funzionare senza gli sfondi. Ciò garantirà che le persone con problemi di vista siano ancora in grado di comprendere l’interfaccia utente.
Per questo gli effetti di trasparenza dovrebbero essere puramente decorativi e non far parte integrante dell’esperienza dell’utente. Dovrebbe essere evitato di usarli per pulsanti o interruttori (questi oggetti importanti dovrebbero sempre avere più contrasto).
Risorse online
Di seguito potete trovare alcune risorse con le quali iniziare a sperimentare per lavoro o semplice divertimento.
https://dribbble.com/shots/14651655-Glassmorphism/attachments/6346970?mode=media