C'è un nuovo design trend che sta velocemente guadagnando popolarità: il Glassmorphism!

Cos'è il Glassmorphism?

Sfondi dai colori vivaci, effetti di vetro smerigliato e oggetti apparentemente traslucidi che fluttuano nello spazio, la tendenza dell'interfaccia utente, opportunamente soprannominata Glassmorphism, spinge e piega i confini. E non vediamo l'ora di esplorarla con te!

Glassmorphism è un termine usato per descrivere il design dell'interfaccia utente che enfatizza oggetti chiari o scuri, posti su sfondi colorati. Sugli oggetti viene applicata una sfocatura dello sfondo che lascia trasparire lo sfondo, dandogli l'impressione di un vetro smerigliato.

Perché il Glassmorphism è popolare?

Glassmorphism è una tendenza moderna che è costantemente cresciuta in popolarità nel corso dell'ultimo anno. Comunemente utilizzato nella progettazione di web e app, sta rapidamente diventando mainstream. Ma non è necessariamente un'idea nuova di zecca. 

Lo stile è fortemente influenzato da concetti simili che sono stati introdotti per la prima volta da Apple nel 2013 con iOS 7. È riemerso quando Apple ha riportato l'effetto con il suo ultimo aggiornamento, Mac OS Big Sur nel novembre 2020.

Lo stile è sopravvissuto e si è sviluppato negli anni. Si è reinventato con caratteri, colori e forme moderni per mantenere le cose fresche e nuove. 

Come utilizzarlo

Sebbene questo effetto non sia così difficile da ottenere, ci sono alcune cose da considerare. Il glassmorphism dovrebbe essere incorporato al miglior giudizio del designer. È molto importante non abusarne. Questo stile brilla di più quando viene utilizzato su un solo elemento o due. Per tutti gli altri è necessario utilizzare un contrasto regolare, incorporando le migliori pratiche di progettazione dell'interfaccia utente.

Scegliere gli strati giusti

Esamina il modello del tuo sito Web o app e seleziona il miglior punto di osservazione per questo stile visivo, ma ricorda:

• non usarlo eccessivamente
• ha un aspetto migliore su sfondi chiari e colorati. 

Fallo sembrare simile al vetro

Glassmorphism mira a creare l'illusione di un pannello simile al vetro che galleggia su uno sfondo. 

Impostare il giusto grado di trasparenza è relativamente facile con strumenti di progettazione comuni come Figma. Ricorda solo di non rendere trasparente l'intero oggetto, ma solo il suo background.

Usarlo all'interno di Oxygen

Per utilizzarlo all'interno di Oxygen, abbiamo preparato una guida dettagliata che puoi seguire in questo video:

Per darti un'anticipazione, nel CSS dovrai usare questa proprietà:

backdrop-filter: blur(10px);

In questo modo otterrai l'effetto vetro smerigliato tipico del glassmorphism.
Inoltre, in questo tutorial abbiamo aggiunto un particolare effetto di prospettiva che si attiva al mousemove. Ecco il codice qui di seguito:

jQuery(document).ready(function() {
   jQuery('body').mousemove(function(e) {
      var halfScreen = jQuery(window).width() / 2;
      var degrees = (e.screenX - halfScreen) / 30;
      jQuery('#id').css('transform', 'perspective(1000px) rotateY(' + degrees + 'deg)');
   });
});

Sfide di accessibilità

Nonostante il suo aspetto accattivante e minimalista, questo stile presenta alcuni svantaggi in termini di leggibilità. La mancanza di contrasto può essere estremamente scomoda per gli utenti ipovedenti e daltonici. Gli effetti di trasparenza, prima di tutto, servono a scopi decorativi. Tendono a far sembrare tutto un pulsante di azione. 

Gli oggetti devono avere un contrasto sufficiente e la giusta spaziatura per definire quella gerarchia e aiutare a organizzare visivamente gli oggetti correlati. 

Conclusione

Non ci sono regole rigide da seguire quando si tratta di progettazione dell'interfaccia utente e alcuni dei siti Web migliori e più intuitivi sono sviluppati da creativi che giocano con i loro progetti. 

Ricorda che questa è una tendenza e, molto probabilmente, anche questa passerà. 

Ora vai e divertiti a sperimentare ciò che hai imparato! 😉