Se vuoi restare aggiornato e iniziare il prossimo anno con il piede giusto, in questo articolo analizziamo le tendenze del web design per il 2020: canvas, 3D, maxi font, contrasti, intelligenza artificiale, machine learning, riconoscimento vocale e molto altro.
[superfeatured]7076[/superfeatured]
Anche quest’anno siamo qui, pronti a guardare avanti. Siamo ormai a novembre e vogliamo arrivare preparati al nuovo anno, così come desideriamo che lo siano anche i nostri lettori. Come da tradizione, abbiamo realizzato un post dedicato a ciò che dominerà il panorama del web design nel 2020.
Seguiamo l’evoluzione → le tendenze del web design 2026 puntano su minimalismo, IA ed esperienze più umane.
Questo tipo di articolo è uno dei pilastri del nostro blog, tra i più letti e richiesti durante tutto l’anno da chi cerca ispirazione sulle ultime novità in ambito web, grafica e marketing. Per questo, ogni anno investiamo ancora più cura, attenzione e dedizione nella sua realizzazione. Il nostro obiettivo è offrire contenuti di qualità, sia a professionisti del settore che a potenziali clienti in cerca di idee per il loro nuovo sito. Inoltre, creare contenuti di valore ci aiuta a mantenere una buona posizione sui motori di ricerca. Lo sapete: Content is king!
WOW! È online il nuovo post sulle tendenze web design 2021!!!
Post degli anni precedenti che potrebbero interessarti: Tendenze web design 2019 – Tendenze web design 2018 – Tendenze web design 2016
Tendenze web design 2020, anticipa il futuro
Font ancora più grandi
Tra le tendenze web design 2020, spicca senza dubbio l’uso di caratteri di dimensioni extra large. Non solo nei titoli, ma anche nei testi principali.
Con la diffusione di schermi panoramici ad alta risoluzione e la riduzione dei prezzi di questi dispositivi, le dimensioni dei font per i testi sono ormai ben lontane dai 12 o 14 pixel degli anni 2010. Oggi si può tranquillamente partire da 20 pixel in su, a seconda del progetto e del sito.
Per i titoli, non esiste un limite massimo se non il buon gusto e il senso estetico: osa con dimensioni oversize per creare forti contrasti. Titoli grandi e ben studiati danno carattere a qualsiasi sito che voglia distinguersi, non solo nel 2020 ma anche negli anni a venire.
Quando e come usarlo
Questa tendenza è perfetta per siti che:
- Richiedono un design d’impatto e molto visivo
- Hanno poche immagini e necessitano di un elemento grafico forte: font grandi usati senza timore aggiungono il tocco visivo che serve
- Non si rivolgono a un pubblico troppo conservatore
- Puntano a utenti con dispositivi moderni, soprattutto con schermi ampi
Ricorda:
- Adatta le dimensioni dei font alle diverse risoluzioni. Prevedi eccezioni responsive, dai 2560px (monitor grandi) fino ai più comuni 1330px (notebook)
- Assicurati che le dimensioni siano coerenti anche su mobile, visto che la maggior parte degli utenti naviga da smartphone
Siti che adottano la tendenza
Rogue Studio
Qui il font non è solo grande… è ENORME. E il risultato è davvero d’effetto.
Sono certo che questo sito sarà tra i candidati del nostro post annuale sui migliori web design.
Granyon Summer Party
Un altro ottimo esempio di questa tendenza applicata alla perfezione: non solo i titoli, ma anche il testo principale è di dimensioni generose.
Team Elite Kickboxing
Chiudiamo con un altro esempio dove la tendenza è ben visibile. Inoltre, questo sito anticipa anche la prossima tendenza di cui parleremo.
Contrasti, colori invertiti e tinte accese
L’uso di forti contrasti e colori invertiti è sempre più diffuso nel web design e nello sviluppo. Anche nel 2020 vedremo siti d’impatto che sfruttano questa tecnica senza timori.
Libera la tua creatività con contrasti netti e colori vivaci. Applica filtri alle immagini, sia in fase di editing (Photoshop o simili) sia tramite strumenti web più moderni come i blending mode CSS o l’elemento canvas.
Quando e come usarlo
Questa tendenza è ideale per siti che:
- Richiedono un design molto visivo e d’impatto
- Non si rivolgono a un pubblico troppo conservatore
- Vogliono attirare l’attenzione e lasciare il segno
Ricorda:
- Per siti corporate rivolti a realtà più tradizionali, usa questa tecnica con molta moderazione
- Applica i contrasti in modo coerente con l’immagine e i colori del brand
- Anche se cerchi il contrasto, mantieni sempre una palette armoniosa
Siti che adottano la tendenza
Ninja guru
Qui i contrasti sono portati all’estremo: sia colori invertiti (bianco/nero) che accostamenti forti (blu/arancio).
Festa da Francofonia 2019
Colori vivaci, contrasti, elementi geometrici in movimento… Un sito che non passa inosservato e rappresenta al meglio una delle tendenze chiave del 2020.
Kombu
Qui il contrasto viene usato anche nel packaging delle bibite, per rappresentare i diversi gusti. L’effetto “wavy” delle linee diagonali, in perfetta sintonia con il packaging, è davvero geniale. Un ottimo esempio di uso intelligente sia dei contrasti che di effetti JS coerenti con il prodotto.
Esperienza mobile, ancora più centrale
Ormai tutti conoscono il responsive web design, ma non basta più. Nel 2020 non si tratta solo di adattare il sito: bisogna pensare a un’esperienza mobile su misura, progettata per il dispositivo e il modo in cui viene usato. Il responsive va portato a un nuovo livello.
Non è più sufficiente avere un sito adattabile. Bisogna ispirarsi alle app: se la navigazione del sito ricorda quella di un’app, saremo davvero in sintonia con le abitudini degli utenti.
Un altro aspetto fondamentale per chi naviga da mobile è la velocità di caricamento, che deve essere ottimizzata al massimo.
Consigli pratici
- Evita l’autoplay dei video: consuma dati e può essere fastidioso per chi non è in Wi-Fi
- Ottimizza le immagini, servendo versioni adatte alla larghezza del dispositivo per migliorare i tempi di caricamento
- Usa menu hamburger per rendere la navigazione più simile a quella di un’app
Siti che adottano la tendenza
Nicholas Munt
Questo sito, grazie al caricamento ajax delle pagine, offre un’esperienza mobile molto fluida, simile a quella delle app.
Salmoon & Sons
Nella versione mobile di questo sito spicca lo slider, che segue perfettamente il movimento del dito. Ottimo anche il menu hamburger, che si apre lateralmente.
Volia
Qui i font sono molto grandi, ma anche su mobile risultano ben gestiti. Il menu hamburger è ben realizzato e la transizione è davvero interessante.
WOW! È online il nuovo post sui migliori web design 2019-2020! Scoprilo ora!
Cursor e scroll personalizzati
Una delle tendenze in forte crescita è la personalizzazione del cursore, che sostituisce quello standard del browser.
Questi cursori spesso interagiscono con gli elementi della pagina, cambiando dimensione, colore, ecc. È una delle novità più fresche e sicuramente continuerà a diffondersi nel 2020.
Lo stesso vale per le scrollbar: sempre più spesso vengono personalizzate, abbandonando quelle di default del browser. Spesso sono abbinate a uno scrolling fluido.
Un’altra tendenza è l’eliminazione totale della scrollbar, anche se la pagina è lunga. Gli utenti sono ormai abituati a scorrere verso il basso, quindi si può puntare su interfacce ancora più minimal. Se eliminare la scrollbar ti sembra troppo, puoi optare per una soluzione intermedia e guidare l’utente con l’icona “scroll down”.
Quando e come usarlo
Questa tendenza è adatta a siti che:
- Vogliono distinguersi con una forte personalità
- Si rivolgono a utenti esperti e abituati al mondo digitale
Ricorda:
- Verifica sempre che lo scroll funzioni su tutti i browser
- Sui dispositivi mobili, lo scroll personalizzato può dare problemi: meglio nasconderlo del tutto
Siti che adottano la tendenza
Aluxion
Qui troviamo uno scroll personalizzato composto da due cerchi, uno grande e uno piccolo, che seguono il cursore con un leggero ritardo e un effetto hover molto accattivante. Anche la scrollbar è custom, per un design perfettamente integrato.
Joseph Berry
Questo cursore, simile al precedente, è originale per la circonferenza esterna realizzata in formato tipografico. Qui la scrollbar è stata eliminata del tutto: una scelta che sarà sempre più comune, dato che gli utenti sono ormai abituati allo scroll istintivo.
Matt VBRG
Qui il cursore interagisce con tutti gli elementi della pagina, cambiando colori e applicando effetti visivi spettacolari, come il cromato sulle immagini.
Canvas e 3D con Three.js
L’uso del canvas nel web design è cresciuto costantemente negli ultimi anni e nel 2020 sarà una delle tendenze chiave per realizzare siti di nuova generazione.
Con canvas possiamo sfruttare OpenGL per creare esperienze che vanno ben oltre l’HTML tradizionale. Il canvas offre totale libert