2021. (Non è bello aggiungere quel "1?!")

Mentre il mondo si adatta a un nuovo anno, anche i designer stanno abbracciando un nuovo anno di design. Dopo un anno di così tante incognite, stiamo iniziando a vedere tendenze che ci riportano a un passato confortevole mentre enfatizzano l'esperienza utente incentrata sul futuro.

Dal lavoro online all'acquisto online fino alla socializzazione online, le persone interagiscono con Internet più che mai e i designer stanno adottando design audaci per spingere i confini di ciò che possiamo sperimentare insieme.

Anche se questo non è affatto esaustivo, ecco 11 delle principali tendenze di web design che stiamo vedendo per il 2021:

1. Layout di pagina con scorrimento orizzontale
2. Cursori personalizzati
3. oggetti 3d
4. Eccellenti esperienze di eCommerce
5. Linee della griglia visibili con spessori di linea spessi
6. Opzioni delle preferenze dell'utente sui siti (non solo sulle app)
7. Un passaggio dalla creazione di siti Web alla creazione di soluzioni
8. Illustrazioni giocose
9. La tipografia come design, non solo parole
10. Forme geometriche come elementi di sfondo
11. WordPress come CMS

1. Layout di pagina con scorrimento orizzontale

I siti Web a scorrimento lungo e i design di parallasse sono popolari ormai da diversi anni. Mentre ci avviciniamo al 2021, stiamo iniziando a vedere un cambiamento di orientamento dei designer che utilizzano il movimento orizzontale per "diminuire" la lunghezza della pagina.

Sebbene l'esperienza fisica non sia diversa per l'utente (di solito fai ancora scorrere il mouse su e giù), l'esperienza visiva offre qualcosa di inaspettato e interessante. Crea un viaggio attraverso il sito Web in cui l'utente non sa bene dove lo porterà, il che è raro ora che abbiamo sviluppato schemi così normali per i siti Web.

Questo sito Web di Jony Guedj, una regista freelance, utilizza uno scorrimento orizzontale per la sezione principale del suo sito per mostrare il suo lavoro. La barra colorata in basso si muove insieme al tuo mouse, come un modo utile per orientare "dove" ti trovi sulla pagina.

LinkSture, un'agenzia focalizzata su soluzioni di design e eCommerce, utilizza uno scorrimento orizzontale per visualizzare il proprio portfolio anche sulla propria home page. È più in basso nella pagina, tuttavia, utilizzando una combinazione di movimenti sia verticali che orizzontali durante lo scorrimento.

We Virtually Are, uno studio di realtà virtuale, utilizza il movimento orizzontale per farti sentire come se fossi nello stesso posto sul loro sito, mentre tutti i contenuti cambiano. È completamente diverso da quello che ti aspetti dalla maggior parte dei siti Web, un'esperienza adatta per un'azienda di realtà virtuale specializzata nella creazione di nuove realtà.

2. Cursori personalizzati

Amo particolarmente questa tendenza perché sembra sia familiare che nuova. Un cenno ai cursori personalizzati della metà degli anni 2000 (ammettilo, ne hai usato uno sul tuo profilo Myspace!), i cursori personalizzati stanno tornando elegantemente.

Dalle forme geometriche minime alle esperienze di pagine Web completamente interattive, la personalizzazione del cursore del mouse sta diventando un piccolo modo per aggiungere ripetizioni al tuo marchio. Molte agenzie lo utilizzano per ripetere forme o colori dai loro loghi o come modo per coinvolgere gli utenti con il sito.

In questo esempio di Rox Studios, un'agenzia di design boutique, il mouse è quel cerchio giallo. Cambia in base al contenuto in background su cui sei passato, trasformandosi in un pulsante CTA stesso per "Visualizza" un progetto.

Vedi quel faccino divertente nella prima immagine? Quello il tuo mouse quando atterri sul sito web di Concept Studio. Vedrai alcune creature simili in tutto il sito e vedrai anche il cambio del cursore per diverse sezioni.

Nella seconda schermata, il mouse si trasforma in una bacchetta che lascia cadere anche piccole particelle mentre ti muovi. Non interrompe mai il contenuto e invece aggiunge solo un elemento di fantasia e interattività mentre sperimenti il ​​loro sito.

Vedi quel cerchietto bianco? Questo è il tuo mouse sul sito Web di Etienne Pharabot, uno sviluppatore front-end con sede in Francia. C'è di più di quanto sembri, tuttavia. Consiglio vivamente di scorrere le varie frasi in tutto il sito. (Alcune sorprese emoji ti aspettano!)

Impero, un'agenzia creativa, utilizza un grande cerchio giallo come cursore che si adatta perfettamente a qualsiasi testo su cui passi il mouse. Lo usano anche come un'opportunità per aiutare gli utenti a navigare nel sito, ad esempio visualizzando il "trascinamento" su una sezione a scorrimento orizzontale. (Un bel modo per combinare alcune di queste tendenze!)

3. Oggetti 3d

Mentre il design piatto ha dominato per un po' di tempo, stiamo iniziando a vedere un cambiamento tridimensionale negli elementi sui progetti web. Questo potrebbe essere ispirato dall'ascesa della realtà virtuale e aumentata, che sanguina nelle nostre esperienze di navigazione bidimensionali.

Questo colorato esempio di Chip&Byte, un'agenzia con sede in Italia, aggiunge un elemento giocoso al loro sito. Mentre muovi il cursore (il cerchietto grigio!) anche le forme si muovono, aumentando il senso della dimensione.

Sembra giusto che una società chiamata "Yellow Telescope" abbia un telescopio 3D giallo mostrato con orgoglio sulla sua homepage! Quando atterri per la prima volta sul sito, lo vedrai "costruire da solo" mentre ogni pezzo va a posto, che forse è sinonimo di come aiutano i loro clienti a costruire pratiche affidabili.

Beans Agency utilizza la tendenza 3D per dare vita ai propri fagioli, visualizzandoli in diverse scene del sito. Questa tendenza è un ottimo modo per dare movimento a un personaggio o dare una sensazione "realistica" solo su un'illustrazione astratta e piatta.

Non del tutto venduto sul trend 3d? Potresti sempre adottare un approccio sottile, come C-HM Conseil. L'elegante smussatura e bagliore su uno sfondo monocromatico si appoggia all'aspetto materico senza essere prepotente.

4. Eccellenti esperienze di eCommerce

Non sorprende che la vendita al dettaglio online sia aumentata notevolmente nell'ultimo anno, il che ha anche portato a esperienze di acquisto migliori e più intenzionali. Dopotutto, con un numero sempre maggiore di concorrenti che si affrettano a portare i loro siti Web online, non è più accettabile che un negozio esista solo su Internet; deve essere ottimizzato e dare priorità all'esperienza dell'utente per impedire agli acquirenti di rimbalzare.

Minsom, un negozio di animali, semplifica l'acquisto di articoli e servizi direttamente dalla loro home page. Con pulsanti grandi e categorie semplici, è facile navigare in modo da poter controllare rapidamente, invece di perdere troppo tempo a cercare nel sito.

Questa enoteca, Molly Dooker, non è solo un'esperienza del sito bella e artistica, ma anche un'esperienza di shopping piacevole. È facile sfogliare i vini, visualizzare in anteprima cosa c'è nel carrello e quindi acquistare, il tutto godendo di un delizioso design del sito.

Zoya's Pantry, un negozio di alimenti sani e biologici, ottimizza l'esperienza di acquisto aggiungendo più articoli al carrello. Quando fai clic su "Aggiungi alla borsa", la tua finestra non cambia, quindi puoi semplicemente continuare a navigare senza perdere il tuo posto nella pagina. Quindi, per visualizzare il carrello, tutto ciò che devi fare è passare con il mouse sull'icona nella barra di navigazione in alto (invece di fare clic su una pagina separata).

Noterai alcune tendenze di design del 2021 sul sito di The Cool Club. Da una semplice esperienza di eCommerce a una visualizzazione 3D di uno dei loro prodotti (un gioco di carte!), è facile vedere esattamente cosa stai acquistando e poi inserirlo nel carrello. (Anche proprio above the fold sulla home page!)

5. Linee della griglia visibili con spessori di linea spessi

Le griglie sono state utili nel web design per molto tempo, ma stiamo iniziando a vedere una tendenza a dare loro un tocco di colore o uno spessore di linea spesso. Invece di mantenerli minimi, i designer si appoggiano alle forme naturali che costruiscono sulla pagina e fanno risaltare le linee della griglia per ottenere un aspetto audace e geometrico.

Eat Sleep Work utilizza linee colorate per dare vita al proprio desktop simile a Windows. Sebbene non siano troppo spessi, il blu audace fa il trucco per far risaltare la griglia e creare una struttura intenzionale attraverso il sito.

Questo studio di sviluppo software, OSM, utilizza le linee della griglia in alcuni modi interessanti in tutto il sito. Come puoi vedere dallo sfondo, si appoggiano a uno spessore della linea spessa e allo stile geometrico con il loro marchio e lo ripetono in molti modi diversi, anche con i layout della griglia.

Non sei sicuro che le linee della griglia in grassetto siano adatte al tuo sito? Potresti provare un approccio da “spazio negativo” come Rui Ma, designer e art director. È più sottile che enfatizzare la griglia con un colore contrastante, ma l'ampia spaziatura consente comunque a quella sensazione geometrica di trasparire.

6. Opzioni delle preferenze dell'utente sui siti (non solo sulle app)

La creazione di esperienze uniche e personalizzate sta diventando sempre più popolare e un modo in cui i web designer lo fanno è creare opzioni nel design del sito. Dalle preferenze come la modalità chiara rispetto alla modalità scura alle opzioni di accessibilità come la lingua da utilizzare, questa tendenza consiste nel dare maggiore controllo all'utente sull'esperienza del proprio sito.

Immediatamente quando carichi il sito Web di Hoang Nguyen, vedrai un'opzione per l'audio. L'impostazione predefinita è "off", quindi anche se il sito viene caricato prima di fare una scelta, non ti sorprenderà (sebbene anche se fosse impostato su "on", non lo farebbe; è una musica molto rilassante!) . Questo ti dà il potere di personalizzare la tua esperienza immediatamente e, se cambi idea in seguito, c'è un'opzione per il suono proprio accanto al suo logo nella parte superiore del sito.

Il sito di Sofia Papadopoulou è simile in quanto offre impostazioni per l'audio, ma sono bloccate nell'angolo in basso a destra (dove tradizionalmente potresti trovare un pulsante appiccicoso per tornare in alto). L'impostazione predefinita è di nuovo "disattivata", nonostante il suono che contiene solo strumentali calmanti (niente di pazzesco).

Questo esempio di Studio OUAM, un'agenzia creativa in Francia, semplifica la scelta della lingua che desideri utilizzare durante la navigazione nel loro sito. Elencati proprio nella parte superiore del menu, offrono l'opzione per il francese o l'inglese, adattando il loro sito Web ai due segmenti di pubblico principali.

7. Un passaggio dalla creazione di siti Web alla creazione di soluzioni

Mentre il web design è più importante che mai (se non ancora più critico nell'era del coronavirus), le agenzie stanno iniziando a spostare la loro attenzione sulla vendita di soluzioni complete, anziché sui singoli risultati. Ad esempio, invece di definirsi un'agenzia di web design, uno studio creativo potrebbe riferirsi a se stesso come un "partner di esperienza del marchio" o qualcos'altro che si riferisce al pieno valore di ciò che fornisce (non solo alle parti tangibili).

Questo è Soda Studios, un "partner di innovazione, studio di design e laboratorio". Non si preoccupano troppo di elencare ogni singolo servizio che forniscono, ma piuttosto di concentrarsi su soluzioni olistiche per i loro clienti.

BORN Group è un'"agenzia digitale globale guidata da esperienze incentrate sull'uomo". Hanno una pagina dei servizi per approfondire ciò che offrono, ma anche quella si concentra sul quadro più ampio con servizi come l'esperienza del marchio, il design dei servizi e l'innovazione.

Kappow è un'agenzia digitale che si concentra sul web design, ma non lo sapresti necessariamente dalla loro home page. Al contrario, condividono il valore di ciò che il loro lavoro offre realmente ai clienti: crescita aziendale, lanci di prodotti di successo e un vantaggio rispetto alla concorrenza. (Chi non vuole tutto questo?!)

8. Illustrazioni giocose

L'aumento delle illustrazioni è in aumento da alcuni anni e non vediamo ancora che vada da nessuna parte. È un ottimo modo per aggiungere un elemento "umano" al tuo sito, soprattutto se non hai accesso a un grande fotografo e vuoi evitare le foto d'archivio. Oppure, se tu o la tua agenzia siete specializzati in illustrazione, è il modo perfetto per mettere in mostra il vostro lavoro!

Che mondo meraviglioso da esplorare sul sito di RUYA, un'agenzia di branding e digitale. Hanno dato alla loro illustrazione l'intera larghezza della loro home page, rendendola piuttosto spettacolare non appena carichi la pagina. Ancora meglio: quando passi il mouse su parti dell'immagine, scoprirai che funge da elemento di navigazione, aiutandoti a saperne di più sulla loro agenzia, servizi e lavoro.

Queste bizzarre illustrazioni di UPQODE, ​​un'agenzia di web design, sono abbinate all'animazione per dar loro vita. Puoi guardarli cambiare colore, dimensioni e interagire tra loro, il che rende l'esperienza della home page divertente.

Se le illustrazioni complete non sono adatte al tuo marchio, c'è sempre la possibilità di usarle come accenti, come fa No Clima. Troverai "scarabocchi" sopra le foto in tutto il loro sito, conferendogli una sensazione artistica e artigianale. Questo è anche un ottimo modo per combinare illustrazione e fotografia, se sei interessato a usarle entrambe!

9. La tipografia come design, non solo parole

A volte le parole vogliono essere pratiche, altre volte vogliono essere arte. E i web designer di oggi non hanno paura di usarli per il secondo scopo, più come un elemento di design che come un paragrafo o un corpo di testo.

Sebbene sia ancora leggibile, il testo sulla home page di Dystopian Creatives offusca i confini tra pratico e visivo in modo convincente. Sembra più un motivo di sfondo che un paragrafo e interagisce con le altre immagini sulla pagina in modi interessanti.

Loop, un'agenzia creativa a servizio completo, utilizza il testo come elemento di sfondo sulla propria home page insieme a un paragrafo più facile da leggere in alto. Poiché la dimensione del carattere dello sfondo è così grande (e una bella sfumatura di giallo), i tuoi occhi possono leggere entrambi i set di testo senza confondersi. Mi piace anche il modo in cui richiede agli utenti di scorrere, per rispondere alla domanda "Progettare per... cosa?"

Mentre scorri verso il basso questo sito per Stone & Style, vedrai ogni titolo come un normale blocco di testo, ma anche echeggiato in un grande carattere serif sullo sfondo che sanguina dalla pagina. È un ottimo modo per ripetere il messaggio senza sembrare ripetitivo e aggiunge un tocco di elegante mistero al sito mentre provi a leggere ciò che dice il testo di sfondo (prima di scoprire lo schema).

10. Forme geometriche come elementi di sfondo

Quando si tratta del design del tuo sito, non pensarci troppo. Sebbene le forme geometriche possano sembrare troppo "semplici", sono familiari e semplici (entrambe qualità che sono buone per l'esperienza dell'utente!). E con elementi costitutivi così forti, c'è molto che puoi fare per mettere il marchio della tua agenzia su di essi, in modo che sembrino tutt'altro che semplici.

Questo esempio di fourpillars utilizza forme semplici (essenzialmente solo blocchi e punti!) abbinate a movimenti basati sulla pergamena dell'utente per creare un'esperienza dinamica e geometrica. Mentre scorri la pagina, vedrai i blocchi costruirsi e rompersi, cambiando continuamente per continuare a raccontare la storia. (Potrebbe esserci anche un easter egg di gioco "Pong", se stai cercando una piccola pausa!)

Sebbene le forme colorate e ovali di Oh Happy Dani potrebbero non essere tecnicamente geometriche, ottengono sicuramente lo stesso effetto giocoso. Abbinati ai colori del suo marchio, creano un'ottima cornice dietro la sua immagine di eroe e li vedrai ripetuti in nuovi modi nel sito.

Blab, uno studio di comunicazione, utilizza anche forme quasi geometriche sulla propria homepage. Questi motivi a cerchio/ovale/a forma di uovo crescono e si restringono mentre riposi sulla pagina, quindi si spostano da parte mentre inizi a scorrere. Mi ricordano il suono che esce da un altoparlante, che si accoppia perfettamente con la copia nella pagina "La tua voce più forte".

Questo colorato studio, illo, utilizza forme geometriche proprio dietro il loro messaggio principale sulla home page. Passando il mouse sulle frasi sottolineate, una delle forme si sposterà per rivelare un'immagine all'interno, un modo intelligente per mostrare il loro primo obiettivo: il design del movimento.

11. WordPress come CMS

Ultimo, ma certamente non meno importante, è come sono costruiti questi siti. (Dopotutto, se il back-end non serve allo scopo per cui hai bisogno, non importa quanto sia bello il front-end!)

WordPress ora alimenta oltre il 40% di Internet. Questa è quasi la metà di tutti i siti Web (compresi quelli non basati su un CMS), ed è probabilmente dovuto alla flessibilità con cui il CMS è diventato davvero nel corso degli anni.

Non venduto su di esso? Tutti i siti Web in questa carrellata sono alimentati da WordPress, per darti un ottimo esempio di tutto ciò che puoi creare con esso! Da bellissimi temi che ti aiutano a iniziare rapidamente a più di 55.000 plugin gratuiti che ti aiutano a estendere le funzionalità, WordPress può fare qualsiasi cosa.

Cosa ne pensi di queste tendenze del web design per il 2021? Sei d'accordo con l'ascesa dei cursori personalizzati o pensi che i design 3D siano solo una moda passeggera? Facci sapere nei commenti qui sotto quali tendenze ami o quali pensi manchino in questa lista!