Tendenze del web design per il 2022

Se abbiamo imparato qualcosa negli ultimi due anni, è che dovremo sempre continuare ad adattarci a qualcosa di nuovo. Questo è vero sia nella vita che nel design e, mentre ci avviciniamo al 2022, i designer stanno iniziando ad abbracciare il caos della vita e ad esprimerlo attraverso i loro progetti.

Le tendenze per il 2022 si stanno spostando verso design più audaci, più creativi e più interattivi. I creatori si stanno appoggiando a un po' più di interruzione e stanno spingendo i confini di ciò che è considerato un "buono" web design.

Aumenta la tua creatività nel nuovo anno implementando alcune delle tendenze che ci aspettiamo di vedere di più nel 2022:

• Mini siti interattivi
• Disegni di ispirazione retrò
• Progetti concettuali aperti
• Più personalizzazione
• Oggetti 3D, scorrimento 2D
• Brutalismo leggero
• Morfismo vetroso
• Effetti di scorrimento creativi
• Tipografia di grandi dimensioni
• Confini visibili
• Componenti collage con elementi visivi astratti

Mini siti interattivi

Sei bravissimo in quello che fai, mostralo! Presentare le tue abilità è un ambiente più piccolo e più controllato con contenuti altamente specializzati e interazioni è un modo in cui i designer attirano nuovi clienti. Mostra ai potenziali clienti che puoi creare esperienze davvero uniche creando qualcosa semplicemente per il bene della creazione.

Lo sviluppatore sudcoreano Jungik Lee ha creato questo mini-sito che consente agli utenti di completare una delle tre semplici attività. Utilizza molti colori e semplici indicazioni per creare o spostare oggetti diversi e riempire una pagina con cerchi colorati è in realtà piuttosto divertente.

La web designer Victoire Douy, con sede ad Amsterdam, usa l'interattività sul suo piccolo sito portfolio per catturare la tua attenzione. Semplicemente spostando il cursore, puoi interrompere i colori, tirare fili, spostare oggetti e altro ancora.

Disegni di ispirazione retrò

L'età media di un web designer negli Stati Uniti è di 37 anni, collocandosi saldamente nella generazione dei Millennial. Poiché i millennial sono stati la prima generazione ad adottare veramente Internet come utenti quotidiani, non sorprende che molti designer siano ispirati dall'arte, dalla tipografia e dai colori che erano popolari durante gli albori del web.

Wild Souls ha un sito di eCommerce che abbina forme colorate a uno stile sovrapposto per creare un'estetica divertente e vibrante che si addice all'azienda alimentare. Sono un rivenditore specializzato in noci, burri di noci, mieli e marmellate e gli effetti al passaggio del mouse sui loro prodotti aggiungono nuove trame e forme che si basano con gusto sui temi visivi ispirati agli anni '90.

Cartoon Network stesso è un marchio amato da gran parte delle generazioni Y e Z. Il sito Web dello studio utilizza una base in bianco e nero abbinata a colori audaci e deliziose animazioni per un sito che sembra allo stesso tempo retrò e molto alla moda.

Progetti concettuali aperti

Forse la pandemia sta influenzando le nostre preferenze di progettazione così come il nostro comportamento di persona, perché c'è una tendenza emergente di lasciare molto spazio aperto nei progetti. Potrebbe non essere sei piedi, ma i designer stanno lasciando una quantità crescente di spazio tra le sezioni, concentrandosi sui titoli e talvolta eliminando completamente le immagini degli eroi, dando agli utenti molto spazio per respirare.

Gli alcolici di qualsiasi tipo sono nitidi e croccanti e anche il sito Web della Bear Creek Distillery a Denver, CO, è privo di additivi extra. Il concetto di design del loro sito Web è pulito come la vodka, il bourbon, il rum e il whisky che raffinano.

Atalson è un'azienda di progettazione di prodotti e imballaggi, approvvigionamento di materiali e produzione con sede a New York City. La sostenibilità è al centro del loro processo e l'idea di una produzione pulita si riflette visivamente sul loro sito attraverso l'uso dello spazio bianco. Questo spazio aperto consente ai prodotti che hanno progettato di tenere i riflettori, mentre gli effetti al passaggio del mouse sulle immagini esprimono una panoramica di un prodotto o una spiegazione dei loro valori aziendali.

Più personalizzazione

Poiché gli utenti trascorrono più tempo e denaro online, i provider stanno trovando nuovi modi per attirare sottoinsiemi più ampi del loro pubblico. Per fare ciò, molti stanno aumentando il livello di personalizzazione disponibile sui propri siti e app, compresi ampi miglioramenti alle funzionalità di inclusione che vanno oltre le migliori pratiche standard di accessibilità che tutti i siti dovrebbero seguire.

La categoria "bellezza" di Pinterest è una delle più cercate sul sito e l'azienda ha riconosciuto la necessità di essere più inclusiva per tutti i suoi utenti. Pinterest ora crea esperienze più rapide e personalizzate in quella categoria offrendo una funzione "gamma di tonalità della pelle". Per molti utenti, questa è una risposta alla saturazione eccessiva delle tonalità della pelle più chiare sull'app, quindi tutti gli utenti di Pinterest possono trovare look che funzionano per loro più rapidamente e facilmente.

Mastercard ha trovato un modo per consentire a più titolari di carte di esprimere la propria vera identità durante le transazioni creando il sistema "True Name". Ciò consente ai titolari di Mastercard trans e non binari di avere i loro veri nomi elencati sulla loro carta invece del loro nome morto, indipendentemente dal fatto che il loro nome sia stato legalmente modificato o meno.

Oggetti 3D, scorrimento 2D

I progetti con modelli 3D e una presentazione di contenuti 2D piatta sembrano avvincenti e totalmente coerenti. Presentare contenuti facilmente digeribili in modo prevedibile con un elemento 3D interattivo in background è particolarmente utile quando aiuti i tuoi utenti a comprendere meglio un concetto fisico.

Il sito web che promuove questo nuovo quartiere degli affari vicino al cuore di Mosca, in Russia, è un ottimo esempio di focalizzazione su un centrotavola 3D accompagnato da contenuti semplici e piatti. La homepage mostra un modello mobile di Skolkovo Park, ma non mette in ombra il contenuto in evidenza.

One Ocean Science è un vertice di condivisione delle conoscenze che mira a collegare i leader globali nella conservazione e nella ricerca degli oceani da una prospettiva multidisciplinare. La homepage del loro sito Web ti dà il benvenuto con uno scorrimento 2D su un modello 3D del globo, che si muove mentre scorri, evidenziando diverse aree e la ricerca condotta lì.

Brutalismo leggero

Il brutalismo si riferisce a uno stile artistico e architettonico molto a blocchi, geometrico e duro. Nel web design, questo stile sfacciato ma semplice si distingue perché tende a evitare alcune delle regole tradizionali seguite dai siti Web a favore del minimalismo. Spesso realizzati in bianco e nero, i siti in questo stile presentano pochi o nessun fronzolo e testo in grassetto per una finitura netta.

L'agenzia creativa italiana Caroselling ha un'identità di marca che si basa sull'essere onesti e diretti. Credono nella definizione di aspettative realistiche, nel pensare alle ramificazioni della loro strategia e nel rispettare i vincoli di tempo e di budget dei loro clienti. Un sito brutalista li aiuta a illustrare la loro storia di partner di agenzia senza fronzoli e senza fronzoli.

Il designer parigino e nato in California Rick Owens una volta ha descritto la sua filosofia sul design dei mobili come "una pelliccia brutalista su una roccia brutalista accanto a un fuoco brutalista in una grotta brutalista". Sul sito web delle sue linee di abbigliamento e accessori, non troverai mobili, ma troverai una chiara ispirazione brutalista nelle immagini e nel layout.

Morfismo vetroso

Esattamente come suggerisce il nome, Glassmorphism è l'arte di far sembrare uno schermo come se fosse fatto o coperto da vetro, tipicamente usato per sfocare uno sfondo su un'interfaccia utente. Nel 2022, questa tendenza dovrebbe continuare a crescere in popolarità poiché i designer spingono i confini del front-end creando oggetti e testo animati simili al vetro.

L'agenzia di prodotti digitali Dovetail Studios ha animato questo set Glassmorphic di anelli di nidificazione che ruotano ad angoli diversi. Attira l'attenzione e mostra l'abilità di modellazione 3D del loro team. Anche altre icone nel sito rispecchiano questo effetto.

Anche un'altra agenzia creativa digitale, Lo and Behold Studios, utilizza oggetti Glassmorphic animati sulla loro homepage. Il tema generale più leggero, tuttavia, conferisce al loro sito un effetto completamente diverso da quello che un utente avrebbe visualizzando Dovetail.

Effetti di scorrimento creativi

Molti designer stanno ampliando la tendenza dello scorrimento orizzontale dell'anno scorso e stanno sperimentando ulteriormente gli effetti di scorrimento. Che sia orizzontale, affiancato o multidirezionale, cambiare la direzione del percorso dell'utente attraverso un sito è un modo semplice per offrire loro un'esperienza complessivamente più dinamica.

L'azienda di mobili olandese Moooi sposta gli utenti sempre più in profondità nelle loro collezioni mentre scorrono. Il loro sito offre tre esperienze: Beauty Blooms, Defy Gravity e Paper Play. In ciascuno, lo schermo si apre per rivelare una collezione dopo l'altra e ti immergerai in nuovi modelli e vignette mentre scorri.

Kayla Fisher, una fotografa del cui sito abbiamo parlato in precedenza, utilizza uno scorrimento affiancato, mantenendo il menu appiccicoso sul lato sinistro dello schermo. Ciò ti consente di visualizzare il suo lavoro in modo visivamente accattivante senza perdere di vista i grandi pulsanti che costringono gli utenti a immergersi più a fondo.

Tipografia di grandi dimensioni

Il tuo sito web dovrebbe fare una dichiarazione audace su chi sei come azienda. Molte aziende stanno prendendo sul serio questa idea utilizzando una tipografia di grandi dimensioni per i titoli o addirittura al posto dell'immagine di un eroe.

Il collettivo di ricerca tecnologica HUMAIN sta lavorando per colmare il divario tra le esperienze umane e l'innovazione tecnica. Sostenuto dal Gruppo Cronos, il loro obiettivo è trovare nuovi modi per utilizzare le tecnologie emergenti per migliorare le esperienze umane sia online che nella vita. Usando il testo al posto dell'immagine di un eroe, questa azienda con una storia complicata grida la sua missione dal momento in cui accedi al loro sito.

Quando pensi alle cuffie, le idee che ti vengono in mente sono tanto uditive quanto visive. Il nome dell'azienda di cuffie AIAIAI è tanto un'esclamazione quanto un nome e urla una dichiarazione audace agli utenti che visitano il loro sito. Il testo di grandi dimensioni introduce l'azienda, seguito da un video più piccolo, adiacente all'eroe, appena sotto la piega, interrompendo lo schema tradizionale dell'immagine dell'eroe e poi del testo.

Confini visibili

I bordi visibili danno struttura al tuo design e attirano l'attenzione degli utenti attraverso i tuoi contenuti. Utilizzando solo linee semplici, i bordi possono aiutarti durante la progettazione per i clienti che hanno bisogno di un sito pulito e ordinato. D'altra parte, un bordo divertente, originale e interattivo può creare ulteriore interesse visivo per i tuoi visitatori online utilizzando colori audaci o effetti interattivi.

L'agenzia indipendente Bonjour Paris accoppia i bordi visibili con uno scorrimento orizzontale, quindi il sito è minimalista ma ha ancora molti intrighi. I bordi del disegno al tratto continuano attraverso il sito fino alla sezione del progetto, dove assumono una nuova forma senza sembrare ambigui o occupati.

Il ristorante australiano Curry Cafe ha due sedi e il bordo scorrevole del loro sito fornisce una solida struttura attraverso la quale gli utenti possono consumare il resto dei loro contenuti altamente colorati e accattivanti.

Componenti collage con elementi visivi astratti

Abbiamo fatto molta strada dall'inizio del web. Laddove alcuni designer stanno abbracciando un'estetica strutturata, altri si stanno muovendo nella direzione opposta. Colori audaci, immagini sovrapposte e trame multiple possono unirsi perfettamente quando ciascuno degli elementi è progettato con cura.

Illuminating Radioactivity è un sito web educativo creato in collaborazione dallo Stimson Center, dal progetto Reinventing Civil Defense e dal Bombshelltoe Policy x Arts Collective. Racconta la storia e il significato della parola "radioattività" e le nostre associazioni con essa, nonché i modi in cui ha avuto un ruolo nella scienza, nell'intrattenimento, nella medicina e altro ancora. Mentre scorri, sei inondato di vecchie immagini che aiutano a raccontare la storia abbinate a forme luminose e astratte.

L'azienda australiana The Loved Up Co aiuta a ravvivare le serate con appuntamenti con pratici kit che forniscono tutto ciò di cui hai bisogno per una serata con il tuo partner. La loro homepage presenta persone in stile collage in cui i corpi sono presi da foto in bianco e nero e le teste sono sovrapposte a bocche sorridenti, fiori e cocktail! Forme astratte, cerchi e scarabocchi appaiono in tutto il design per continuare a muovere l'occhio attraverso il loro contenuto.

Progettare il futuro del web

Tieni d'occhio queste tendenze e prova alcuni concetti che catturano la tua attenzione. Se il tuo occhio per il monitoraggio delle tendenze è attento, potresti anche aver notato che alcune delle tendenze del web design nel 2022 sono estensioni o permutazioni delle tendenze dell'anno scorso.

Vedi qualcuno che ami? Qualcosa che abbiamo tralasciato? Facci sapere nei commenti qui sotto e ricorda: gli stili che sono qui per restare e quelli che stanno passando le mode passeggere dipendono tutti da ciò che designer come te decidono di creare con i tuoi clienti quest'anno!