I migliori trend UX-UI del 2021: Freehand, Glassmorphism, Brutalism

User Experience e User Interface sono sempre in costante evoluzione, scopriamo insieme i migliori trend UX/UI del 2021: Freehand, Glassmorphism, Brutalism.

I migliori trend UX-UI del 2021: Freehand, Glassmorphism, Brutalism

Una guida per scoprire i nuovi UI/UX trends

Il tanto atteso 2021 è ormai arrivato, e per iniziarlo al meglio abbiamo deciso di analizzare i trend UX/UI più interessanti che il nostro team di Design ha individuato.
Partiamo da un presupposto: bisogna pensare ai trend come allo sviluppo di un ecosistema, in cui si assiste a un processo di selezione naturale dove alcune caratteristiche si affermano perché più “vincenti” di altre.
Affinché però risultino vincenti anche sul lungo periodo, e non costituiscano solo un vantaggio competitivo momentaneo, bisogna tenere sempre presente i “design foundamentals” (come l’usabilità e l’accessibilità), senza i quali si corre il rischio di costruire prodotti in grado di emergere oggi, ma risultare deboli domani.
In questo articolo analizzeremo quindi le nuove tendenze e le innovazioni di questo settore, mantenendo uno sguardo critico e attento al contesto in cui si stanno sviluppando.

1. Illustrazione: dal Freehand al 3D

Bold colors e gradienti

In questo periodo stiamo assistendo alla tendenza verso l’utilizzo di colori audaci, come ad esempio in Tia e Sage Therapeutics  dove vengono utilizzati primari molto carichi e con forti contrasti, pur trattandosi di siti che trattano argomenti delicati come la salute mentale.
In altri casi, vengono impiegate palette più tenui e tendenti al pastello, con effetti vibranti ed eterei: è il caso di Design + Code , in cui sono presenti anche elementi di Glassmorfismo (che tratteremo più avanti) e Stripe.
Insomma, possiamo affermare il ritorno di moda dei gradienti, come testimonia anche il logo di Instagram. 

Freehand

Promosso a pieni voti già dallo scorso anno è il Freehand, utilizzato per dare ai prodotti un tono meno serioso e molto più giovanile. Hanno sposato questo stile non solo siti come Brewwlab e Slite, tool che ricreano esperienze normalmente svolte su carta e post it, ma anche Cash App, applicazione per transazioni monetarie, e Alto, che rinforza così il suo obiettivo di rendere meno stressante l’acquisto di prodotti farmaceutici.

Questo stile di illustrazioni si sposa bene anche con interfacce molto minimali, come nel caso di AirBnB, che sceglie disegni di panorama anziché una qualsiasi fotografia con effetto “wow” dal web, per affiancarlo alla sua UI chiara e lineare che da sempre apprezziamo.

Esempio di tecnica Freehand
Esempio di uso della tecnica Freehand tratto da Brewwlab

Pattern work

Si affermano anche i Pattern work, illustrazioni geometriche e astratte, che come in Mileway Algo vengono associate ad animazioni leggere e sempre veicolo di significato.
Questi elementi, mai fini a se stessi, non tolgono l'attenzione dal contenuto  ma, invece, aggiungono valore comunicativo.

Esempio di animazioni
Esempio di animazione tratto da algo.tv

3D renders and depth

Dopo un lungo periodo di tendenza verso il minimalismo e il look “flat”, assistiamo a un altro trend che torna a far parlare di sé: il disegno 3D, complici sicuramente il gaming e e lo sviluppo di tool (come Spline) che hanno semplificato in modo significativo la costruzione di immagini tridimensionali.
L’utilizzo di questi elementi è utile su molti fronti: invogliano l’utente a esplorare e continuare la navigazione sul sito (come qui), a comprendere in maniera estremamente comunicativa ciò che è in grado di fare un prodotto ( qua e qui) e a esplorare un prodotto prima di acquistarlo online proprio come si farebbe di persona (www.jordanbrandlive.com). Inutile sottolineare l’importanza di quest’ultimo elemento nell’era Covid-19.

3 d renders and depth per aiutare la navigazione
Esempio tratto dal sito "Pitch"

2. Glassmorphism e Brutalism

Glassmorphism

Siamo ancora freschi dalla moda del Neumorphic design, aspramente criticato e nemmeno così utilizzato nella realtà dei fatti, e già ci troviamo di fronte a un nuovo “morphism”. Ma vediamo meglio  di cosa si tratta.
Il Neumorphic design ha preso piede tra il 2019 e il 2020, ed è uno stile visivo che prevede, a partire da un design “flat”, l’inserimento di ombre, luci e gradienti volti ad aggiungere profondità agli elementi, rendendoli più simili a quelli reali. Il problema di questa corrente grafica è che risponde a un obiettivo puramente estetico, con esiti spesso contrari all’usabilità dei prodotti, rendendo i contrasti non sufficienti e alcuni elementi scarsamente visibili dalle persone con disabilità visiva.
Il Neumorfismo origina a sua volta dallo Skeuomorfismo che riproduce in maniera ancora più fedele gli oggetti del mondo fisico. Caratteristico in questo senso è il design dei prodotti Apple, dove assistiamo negli ultimi anni a un riaffermarsi di questa tendenza.
Analogamente anche il Glassmorphism introduce un elemento del mondo reale in quello digitale: come esplicita la parola stessa, il vetro. Si tratta di un effetto di background blur, che crea un “look and feel” simile appunto a quello che potremmo percepire guardando attraverso un vetro. Glassmorphism  è un tool che permette di giocare con questi effetti.
Ma come per i suoi antenati, la domanda si ripete: questo design è accessibile? Il suo valore è solamente quello puramente estetico?

Brutalism

Potremmo collocarlo all’estremo opposto: il Brutalism è una tendenza anti-estetica, in cui predominano contrasti violenti e disarmonici, con esplicito intento decostruttivo esplicito e richiamo al look del web anni ’90.
 Anche in questo caso però, come i suoi “cugini”, il rischio è di incorrere in problemi di usabilità, giustificabili solo se l’intento del prodotto è marcatamente ironico e dissacrante.

3. STORYTELLING, TIPOGRAFIA E UX WRITING

Storytelling

Anche lo storytelling non è un concetto nuovo  e anzi, spesso anche abusato. Ma ciò che è nuovo è l’impiego che se ne fa online.
A partire da questo articolo del New York Times, è evidente come alcuni elementi di UI possano essere utilizzati per rafforzare una narrazione, spingendo veramente al limite anche il concetto stesso di “articolo”.
Altri esempi spettacolari sono Webflow che paragona l’attività dei designers a quella degli artisti dalla preistoria ad oggi mentre, sul versante commerciale, si distingue nuovamente Apple, con la sua pagina dedicata agli AirPods Pro, in cui combina animazioni, immagini ad alta definizione e un testo con un flow accattivante.

Esempio di storytelling realizzato da webflow
Esempio di storytelling molto efficace realizzato da webflow

Tipografia

In alcuni casi, la tipografia diventa protagonista: grande e sofisticata, come in Dovetail  e Synchronized talvolta diventando irriverente e essa stessa motivo di design ( es. Whirly Birdie ).

UX writing e microcopy

Così come in tanti altri settori, anche nel design dei prodotti digitali la scrittura inclusiva sta diventando un tema (giustamente) molto frequentato, come testimonia Atlassian Design System.

Ti piacerebbe applicare questi trend al tuo sito web?

Con questo articolo hai potuto scoprire i migliori trend UX/UI del 2021.
Il team UX/UI Hinto® non ha resistito, li ha già sperimentati tutti!