Lo sviluppo di Internet in un enorme apparato di informazione si può desumere dalle innovazioni del design, che negli anni hanno cambiato le sembianze del World Wide Web. Soprattutto la rivoluzione mobile ha costretto i web designer a stravolgere radicalmente le proprie concezioni. Oggi devono presentare contenuti che si adattano agli schermi più piccoli, senza per questo tralasciare informazioni preziose. Ma anche sul piano più specifico del web design si possono osservare continuamente nuovi trend, che ci informano oggi su quello che sarà l’Internet di domani. Vi presentiamo 8 di questi trend per affrontare ben equipaggiati il web design moderno del 2019.
Prima di tutto si possono osservare sviluppi che risalgono all’adattamento mobile degli ultimi anni. Le pagine web devono diventare ancora più efficienti e user-friendly, per poter concorrere nel difficile mercato online, indipendentemente che si visualizzino i contenuti da PC, tablet o smartphone. I design voluminosi e leggermente sovraccaricati degli anni 2000 sono ormai da tempo acqua passata; l’occhio umano ne ha avuto abbastanza. La nuova massima impone di concentrarsi sull’essenziale.
La nuova esigenza poggia le basi nella facilità d’uso, quindi nell’usabilità delle pagine web. Decisivo per questo trend è il responsive design, molto importante per il mercato mobile, che mette in evidenza la flessibilità tecnica in base al dispositivo in uso dall’utente. Un web design moderno significa quindi che una pagina Internet reagisce in modo efficiente al dispositivo dell’utente e si presenta in maniera appropriata. Il design responsive è creato consapevolmente in maniera previdente, di modo che le pagine web possano reagire abilmente a nuovi sistemi o a quelli finora meno usuali. Inoltre i web designer sviluppano non più solo per i browser, ma molti dei fornitori di pagine web più famosi consentono un utilizzo più semplice dai dispositivi mobili, mettendo a disposizione delle app proprie.
Alcune buzzwords ce le porteremo dietro nel 2019. Tra queste ci sono da una parte l’Internet of Things, che sta alimentando una crescente digitalizzazione della vita quotidiana e offre agli utenti maggiori possibilità di interazione. Dall’altra i progressi essenziali compiuti nella ricerca IA fanno in modo che i servizi web automatizzati migliorino sempre più; i web designer potrebbero tentare di sfruttare appieno anche questo settore.
Non in ultimo ciò significa anche una concentrazione crescente sullo snackable content, che presenta i progetti web nella maniera più semplice possibile e mette al primo posto l’usabilità. Allo stesso tempo questi snack digitali mostrano un ritorno alla tendenza degli anni 2000, che prevedeva un tipo di visualizzazione sgargiante e che cattura l’occhio. Se questi due trend, vale a dire priorità all’usabilità e allo snackable content, funzioneranno effettivamente in simbiosi e si affermeranno altre idee coraggiose e innovative, il 2019 potrebbe rivelarsi un anno appassionante per i web designer.
I trend nel web design non si muovono quasi mai nel nulla, ma oltre a richiamare tendenze simili, hanno anche degli antagonisti che portano un determinato elemento di design in un’altra direzione o persino in una completamente opposta. A volte si sviluppano dei contro trend, che derivano da una reazione a determinate tendenze, che si stagliano sempre più chiaramente nel panorama digitale. Spesso i web designer si basano su un contro trend per imporsi già oggi sulla scena web di domani. Di seguito vi presentiamo alcuni esempi di trend e dei contro trend corrispondenti, che si la cui interazione renderà l’anno che viene alquanto ricco di sorprese.
Trend | Contro trend |
Immagini stock, ovvero immagini professionali di agenzie che mettono a disposizione degli stock, integrabili nelle pagine web più diverse; una possibilità sicura per abbellire il proprio sito. | Immagini personalizzate o autentiche, che trasmettono vicinanza, mostrando persone e aziende come sono realmente, al fine di rivolgersi ai visitatori nel modo più personale possibile. |
Forme simmetriche, box, “Flat Grid“, ad esempio le pagine web con un design rigorosamente verticale-orizzontale, che sono molto facili da navigare e vengono utilizzate in maniera efficiente; queste pagine si orientano alla natura consolidata e affermata “a sezioni rettangolari” del linguaggio HTML e CSS. | Forme asimmetriche, design sperimentali, “Broken Grid”, cioè interfacce web progettate in modo innovativo, le quali rompono con le convenzioni correnti e risaltano così con un carattere individuale e giocoso. |
One Page Design, in cui tutte le informazioni importanti vengono presentate raggruppate in una pagina, risparmiando molti clic all’utente; si preferisce far scorrere l’utente (sempre più da dispositivo mobile) piuttosto che farlo cliccare. Qui si vanno affermando dei determinati layout standard, soprattutto per le aziende che operano nel settore digitale. | Trend di design web-nostalgici, che vogliono ritornare ai principi dell’interfaccia Internet degli anni 2000 (“brutalismo web”, minimalismo, interfaccia testuale) o presentano barre dei menu e pulsanti innovativi, che sono necessari ancora per la navigazione del sito, ma senza essere voluminosi per un uso dai dispositivi mobili (hamburger menu, micro interazioni). |
Set di colori vivaci, cioè colori complementari forti e sfumature che danno quel tocco in più alla pagina web; a questo si aggiunge un simbolismo o un’associazione di colori usata consapevolmente (blu per i prodotti digitali, verde per le aziende a scopi benefici, rosa per i cosmetici, ecc.), per comunicare in maniera subconscia agli utenti qual è il messaggio che la pagina vuole trasmettere. | Colori minimali e molto spazio bianco per far distrarre il meno possibile dalle informazioni comunicate. I siti rigorosamente a due colori (“duotone”) si basano sull’usabilità e rinunciano così a una progettazione più complessa dal punto di vista dei colori. Spesso, al contrario, si dà maggiore risalto ai marchi e ai simboli. |
In generale il web design si sviluppa sempre nella stessa direzione, prestabilita da anni: un’attenzione crescente per i dispositivi mobili (responsive design), contenuti facilmente fruibili, interfacce create in base agli scopi, e ancora interfacce reattive o interattive. Contemporaneamente gli sviluppi nell’ambito dell’Intelligenza Artificiale influenzano sempre più i web designer, di pari passo con l’accessibilità di nuove tecnologie. Ovviamente nel 2019 proseguono diversi trend del web design iniziati negli anni precedenti e il panorama digitale non cambierà radicalmente. Tuttavia alcuni trend alludono a un ulteriore miglioramento della user experience sulle piattaforme, con l’intenzione di riprogettare già il web di domani.
In realtà si tratta di un principio di base delle pagine web con un buon design più che di un trend: la velocità diventa sempre più importante. Da una parte i ringraziamenti vanno alla rivoluzione mobile; infatti i gestori delle pagine web vogliono che le loro pagine siano raggiungibili facilmente anche dai dispositivi mobili, risparmiando volume dati. Più le pagine Internet si caricano velocemente, migliore sarà la user experience, così come avviene ormai da 10 anni a questa parte. Tuttavia è un trend da tenere sotto osservazione, visto che i web designer rinunciano sempre più spesso a elementi che richiedono molta memoria e lunghi tempi di caricamento, per consentire un utilizzo più veloce del sito.
Molti altri trend del web design si basano su questo. Così il crescente minimalismo nella progettazione dei siti significa che si rinuncia ampiamente a contenuti multimediali che richiedono molto tempo e spazio per essere caricati e si preferisce scegliere dei formati più agevoli in termini di memoria. Le pagine web “long scrolling”, che posizionano tutte le informazioni necessarie su un’unica pagina “a scorrimento”, puntano al fatto che l’utente debba caricare solo questa pagina e non molte altre sottopagine. Anche il sempre più famoso “White Space” indica l’assenza di elementi, che potrebbero limitare la velocità di caricamento di una pagina web.
Internet è cresciuto molto velocemente in un tempo relativamente breve. C’è però chi lo ritiene ancora troppo lento. Soprattutto le reti di dati mobili in molte regioni non sarebbero ancora abbastanza potenti. I web designer possono però contrastare già da oggi mancanze di questo tipo, progettando le loro pagine web nella maniera più semplice possibile.
Altri trend di progettazione correnti del web design moderno, come animazioni interattive, effetti parallasse o uno sfondo dinamico, destano clamore e migliorano (se applicati correttamente) la raccolta di informazioni. Spesso però un design elaborato porta con sé degli effetti negativi, che si ripercuotono sulla performance generale del sito. I web designer devono quindi tenere attentamente in considerazione quali contenuti multimediali e interattivi offrano effettivamente un valore aggiunto per l'utente e quali, invece, rallentino inutilmente il sito web. In generale vale la regola che “less is more” (meno è di più), anche se con ciò non si intende per forza un ritorno al flat design.
È importante notare che la performance di un sito si ripercuote direttamente sulla user experience. In questo caso occorre distinguere tra il tempo di caricamento effettivo e quello percepito dall’utente. I ritardi sono problematici solo se l’utente li percepisce come tali. Perciò i web designer si basano sulle seguenti misure per compensare tempi di caricamento elevati:
Se il visitatore deve aspettare, almeno sarebbe meglio informarlo per quanto tempo. La barra di avanzamento non riduce i tempi di caricamento, ma perlomeno, se progettata in modo originale, riesce a rendere l’attesa divertente. Quantomeno l’utente non dovrebbe essere indotto a lasciare la pagina mentre aspetta. Infatti basti pensare che la pazienza dell’utente moderno diminuisce in maniera inversamente proporzionale alla velocità di connessione.
Una barra di avanzamento si può rappresentare in questo modo
I siti web dovrebbero essere programmati in modo tale da riprodurre per primi i contenuti “above the fold” e riprodurli sul browser. Si tratta di quei componenti del sito web visibili all’osservatore senza che sia necessario scorrere con il mouse. Se questi contenuti sono disponibili, per gli utenti il caricamento degli altri contenuti “below the fold” può avvenire successivamente.
Le immagini che vengono integrate con la tecnica del JPEG progressivo non vengono riprodotte dall’alto verso il basso nella risoluzione definitiva, ma si servono del processo di interlacciamento: all’osservatore viene provvisoriamente presentata un’immagine di anteprima in bassa qualità che diventa sempre più nitida fino a quando, terminato il caricamento completo dei dati, non si arriva alla qualità di immagine desiderata.
Trovate ulteriori trucchi su come migliorare la performance delle pagine nel nostro articolo sull’ottimizzazione dei siti web.
Riassumendo: per i video, le foto e quant’altro, vale la stessa regola che per il contenuto, ossia devono essere di alta qualità, unici e rilevanti per l’utente. Inoltre risulta sensato che questi contenuti vengano caricati solo quando il visitatore li visualizza. Proprio gli utenti dei dispositivi mobili o che dispongono di connessioni Internet lente beneficiano dai siti ben strutturati, privi di dati superflui.
Basta uno sguardo veloce in rete per capire che ci sono migliaia di foto stock. Negli ultimi anni i gestori di siti web si sono semplificati il lavoro: invece di creare le proprie immagini, oggi la procedura standard è quella di acquistare foto a un prezzo vantaggioso, provenienti da un database preesistente. Tuttavia si finisce per essere poco originali, senza contare che il valore aggiunto per l'utente si limita a essere un modo per far riposare gli occhi, quando motivi più o meno a scelta interrompono il flusso sconfinato del testo.
Ma lo svantaggio maggiore delle foto stock è la loro popolarità. È molto probabile, infatti, che gli utenti troveranno le stesse foto su un gran numero di pagine in rete. In questo modo si distinguono dalla massa quei siti web che offrono immagini e contenuti video unici e di alta qualità. Un trend essenziale per il web design nel 2019 è l'utilizzo come sfondo di immagini, grafiche e video dinamici.
Gli elementi di sfondo dinamici consentono ai gestori di siti web di comunicare le informazioni in modo più rapido e diretto rispetto agli elementi di testo statici. In aggiunta, servendosi di foto, grafiche e video, i visitatori possono essere coinvolti sul piano emotivo. Per questo motivo viene spesso utilizzato un design di sfondo dinamico con l'obiettivo di suscitare determinate sensazioni che provocano nel visitatore un preciso stato d'animo.
Con micro interazioni si intende un trend dello UX design, in cui determinate interazioni tra gli utenti vengono accompagnate da piccoli effetti animati. Può trattarsi, ad esempio, di un pulsante per il “Mi piace”, il quale ricompensa il clic dell’utente con un simpatico effetto in movimento oppure con una vibrazione dello smartphone. Per l’esperto di UX Dan Saffer sono proprio i dettagli che fanno la differenza in termini di esperienza d’uso.
Trovate esempi di animazioni riuscite con le quali realizzare micro interazioni su Awwwards.com o su Dribbble.
L’approccio “Mobile First” non si applica solo alle viewport (che corrispondono all’area di visualizzazione) e alla rappresentazione dei contenuti web senza perdita di qualità sui diversi dispositivi mobili. In futuro la tendenza dei dispositivi mobili avrà sempre più influenza sui contenuti web. In questo contesto uno degli sviluppi più importanti consiste nel passaggio dal cliccare allo scorrere. Essenzialmente il sito “a scorrimento” è un vecchio conoscente, ma i concetti di design come lo scorrimento infinito e l’effetto parallasse continuano a essere molto popolari e rimarranno in voga anche nel 2019.
Lo scorrimento infinito (in inglese: “infinite scrolling”) consente al visitatore di un sito di accedere a nuovi contenuti, scorrendo invece di cliccare. Quando si è raggiunta la fine di una parte informativa, segue immediatamente quella successiva. I social network come Facebook, Instagram, Reddit e Quora ricorrono già da tempo a questo metodo, per presentare agli utenti il contenuto in un feed continuo di notizie. Anche nei blog lo scorrimento infinito è di casa da molto tempo e giocherà un ruolo importante anche in futuro.
Lo scorrimento infinito è adatto per i siti con una vasta quantità di informazioni. Mentre un blog con 100-200 elementi può ancora essere impaginato facilmente, nei progetti web di grandi dimensioni in cui il numero delle informazioni è in continuo aumento, la suddivisione in pagine viene utilizzata sempre meno. Infatti è improbabile che un utente visualizzi volutamente la pagina 812 su un totale di 5.782 sottopagine. Al contrario, lo scorrimento infinito viene utilizzato solitamente con algoritmi sofisticati, che prefiltrano le informazioni e presentano per primi gli articoli più rilevanti agli utenti.
Tuttavia i gestori dei siti web che nel 2019 intendono seguire il trend dello scorrimento infinito dovrebbero prestare attenzione a un'implementazione che sia adatta per i motori di ricerca. All'inizio per Google era difficile scansionare i siti web che ricorrevano a questa tecnica, ma oggi, grazie alle direttive di progettazione dettagliate fornite dal leader del mercato dei motori di ricerca, si può optare per questa soluzione senza impedimenti. Tuttavia è bene prendere in considerazione i seguenti aspetti:
Google rimanda alla demo del sito web dell’analista di trend per webmaster John Mueller, dando così un esempio di un’applicazione dello scorrimento infinito adatto per i motori di ricerca.
Anche lo scorrimento parallasse non è una novità tra i trend del web design, ma continuerà a essere importante. L’effetto parallasse in movimento viene utilizzato già da alcuni anni come componente basilare dei siti moderni. Ne risulta un effetto di percezione della profondità, dato che i singoli livelli del sito si muovono diversamente. Nel migliore dei casi, oltre all’effetto di movimento, il sito presenta anche elementi che incitano i visitatori a compiere una determinata azione. Lo scorrimento parallasse si può quindi combinare in maniera ottimale con lo storytelling interattivo. Ad esempio la pagina “Every Last Drop” illustra questo trend molto chiaramente.
La presentazione dei contenuti web a seconda del target si annovera tra i principi di base del web design moderno. In particolar modo nell’e-commerce la selezione dei contenuti e la loro presentazione dovrebbe essere orientata alle esigenze dei potenziali clienti. Mentre finora l'attenzione era concentrata su gruppi astratti di persone, nel 2019 il focus continuerà a essere sull'esperienza d’uso del singolo individuo.
Mentre funzioni come "Potrebbe piacerti…" non dovrebbero mancare in nessun negozio online, fornitori come il servizio di streaming musicale Spotify e il portale video on demand Netflix fanno un ulteriore passo avanti e adattano la gamma di informazioni, prodotti e modalità di presentazione direttamente all'individuo. Così due utenti non vedono quasi mai la stessa selezione di prodotti personalizzati e ciò avviene persino sin dalla pagina iniziale del rispettivo portale.
Su Amazon.it si trovano nella pagina iniziale molti consigli personalizzati, quindi articoli che potrebbero piacere all’utente in questione
Un trend del web design nel 2019 sarà il sito web personalizzato, in cui i visitatori vedranno contenuti che corrispondono alle loro abitudini d'uso. La base di dati per un'interfaccia utente personalizzata è fornita da strumenti di analisi web come Google Analytics o Piwik, i quali forniscono ai fornitori di contenuti un quadro completo di come gli utenti della rete interagiscano con i contenuti web.
Le piccole immagini in movimento, che si ripetono in un loop, stanno vivendo dal 2018 una sorprendente rinascita. Tra queste hanno resistito dei formati nuovi ed essenzialmente più performanti come WebM, che si trovano soprattutto su molte piattaforme di comunicazione. I vantaggi sono a portata di mano: da una parte i file GIF sono relativamente piccoli e iniziano la riproduzione automaticamente, senza andare a intaccare la user experience. Dall’altra, al contrario dei video WebM e di molti altri formati di movimento, le GIF possono rinunciare ai suoni e risultare così meno invadenti.
Un grande contributo allo sviluppo delle GIF è dato da diverse librerie GIF come Giphy, grazie al quale le GIF si possono integrare dappertutto in maniera giocosa. Inoltre queste librerie offrono un’immensa selezione di immagini che permette a ogni utente di trovare la GIF giusta, proveniente da moltissime fonti. Quindi non c’è da meravigliarsi che la cultura dei meme continui a essere tenuta viva con queste GIF. Nel 2019 la comunicazione online si baserà di nuovo non solo sul testo e le emoji, ma anche su una grande varietà di GIF.
I programmi che svolgono compiti di comunicazione non sono certo una novità. I chatbot derivano dal settore di ricerca dell’Intelligenza Artificiale (IA) e già al giorno d’oggi se ne fa uso su siti web aziendali o su negozi online. Di norma si tratta di una piccola finestra di dialogo che accetta domande poste dagli utenti e che fornisce risposte generate automaticamente, personalizzabili grazie ad algoritmi di apprendimento automatico (machine learning). L’utente ha così l’impressione che il suo interlocutore sia umano. I chatbot sono utilizzati in veste di assistenti virtuali per lo shopping oppure come alternativa alle classiche FAQ.
Su g2crowd.com con un clic si attiva nella parte inferiore dello schermo un piccolo chatbot che vi aiuta a trovare i contenuti desiderati
I chatbot sono così raramente invadenti e si attivano spesso tramite piccoli elementi interattivi. L’utente ha così l’impressione che a rispondergli in tempo reale sia un dipendente del servizio web. Spesso ha la possibilità di rispondere alla richiesta senza abbandonare la pagina visualizzata. La diffidenza nei confronti di un interlocutore controllato tramite IA dovrebbe essersi affievolita da quando spopolano Siri, Alexa, Cortana e simili. Nella maggior parte dei casi i chatbot non sono però più delle barre di ricerca che reagiscono in maniera più dinamica ai termini di ricerca inseriti. Quindi resta da vedere fin dove i chatbot verranno sviluppati nel 2019.
Un aspetto che ricorre sempre tra i trend del web design è che un buon layout, organizzato in modo intelligente, viene spesso imitato. Le interfacce utente di molti siti e web app si orientano per la progettazione e l’organizzazione dei contenuti sempre più a pratiche consolidate, così il layout continua a influenzare l’usabilità di un sito web.
In genere se si sceglie una User Interface (UI) ordinata è difficile sbagliarsi. Allo stesso modo ci si può tranquillamente rifare al design di portali conosciuti da tempo, nel caso di siti più grandi, o a quello dei blog, nel caso di piccole pagine. Recentemente sono emersi due trend nel web design riferiti al layout, che si potranno riscontrare su molte interfacce grafiche anche nel 2019.
Questo fenomeno si è affermato in fretta, tanto da rappresentare già per molti utenti una certezza nella struttura dei menu: il piccolo menu a pulsante, che viene denominato in inglese anche “hamburger menu icon” (indicato in italiano anche come “icona ad hamburger”) o “hamburger button”. Inizialmente veniva usato soprattutto per i menu a discesa delle pagine e delle app mobili; ora questo simbolo, che ricorda gli strati di un hamburger e viene spesso rappresentato con il simbolo matematico “≡” (che starebbe in realtà per “uguale”), contrassegna anche per molte versioni desktop il pulsante del menu.
Il secondo trend del web design riguarda la presentazione grafica dei contenuti. I card layout (denominati anche “card-based design”, cioè “design basato su schede” in italiano) vengono utilizzati sempre più: in questo caso vengono presentati contenuti basati su testo e/o immagini o pulsanti di “Call to action” in diversi box, distribuiti su tutta l’interfaccia utente. I vantaggi sono molteplici: oltre alle molte possibilità di progettare un sito in maniera più chiara e otticamente più accattivante, il card layout nel web design ha anche dei benefici da un punto di vista pratico.
Infatti, poiché i singoli box o le singole schede fungono da contenitori per i contenuti web, si possono spostare facilmente le griglie all’interno del sito. In particolare, nel caso di un layout responsive, la ridistribuzione dei contenuti delle pagine avviene in maniera più semplice. La popolarità del card layout è da attribuire soprattutto a servizi web di immagini, come Pinterest, o a piattaforme di web design, come Dribbble.
Card layout su Pinterest: l’hamburger menu si trova in alto a destra, accanto alla barra di ricerca
I trend del web design nel 2019 si svilupperanno all’insegna dell’interattività. Inoltre in futuro i siti web dovrebbero essere progettati in modo sempre più user-friendly e permettere di accedere velocemente ai contenuti. Così i contenuti web non vengono adattati separatamente per i diversi dispositivi, ma vengono ottimizzati per essere rappresentati su tutti i tipi di dispositivi nell’ambito del design responsive.
L’effetto parallasse e lo scorrimento infinito sono strumenti stilistici amati, che hanno il compito di accompagnare i visitatori nella navigazione del sito web. Questa è anche la parola chiave per il trend dello storytelling interattivo: le informazioni fornite al cliente non sono presentate in maniera neutra, ma vengono confezionate in una breve storia. Illustrazioni disegnate a mano, elementi di sfondo di alta qualità e font personalizzati aggiungono un tocco personale al sito web.
Ora è più importante che mai rivolgersi personalmente ai visitatori del sito web e coinvolgerli sul piano emotivo. Il principio di base rimane sempre lo stesso: un sito web orientato all'utente che offre contenuti di alta qualità in modo accattivante è il primo passo sulla strada del successo nel World Wide Web.
Chi al momento sta progettando il proprio sito web oppure vorrebbe aggiornarne uno già esistente dovrebbe farsi ispirare da alcuni di questi trend del web design che domineranno nel 2019. Così oggi si allestisce un sito che sia già in grado di rispondere alle esigenze e aspettative di domani.
Per i web designer la tipografia è un argomento piuttosto interessante da molto tempo. Oggi però, grazie a tecnologie avanzate, le cose stanno un po’ diversamente: con font creativi date un tocco particolare al vostro sito senza che l’utente abbia installato i rispettivi caratteri sul suo apparecchio. Nella ricerca di font adatti è necessario tuttavia prestare attenzione ad alcune cose.
Utilizzate un icon font per inserire una funzionale icona vettoriale sul vostro sito web. Al contrario delle immagini pixel classiche, quelle vettoriali hanno il vantaggio di lasciarsi scalare a piacere senza alcuna perdita di qualità. Inoltre l’inserimento su CSS (Cascading Style Sheets) offre ulteriori possibilità di agire direttamente sul codice. Molti progetti open source mettono a...
Il Mobile web pone delle sfide ai web designer e offre anche molte opportunità di creare una user experience positiva. Se una pagina Mobile viene impostata in maniera errata o insufficiente, si ottiene ben presto l’opposto di quello che si considererebbe una buona esperienza d’uso. Per ottimizzare il vostro sito per i dispositivi mobili e soddisfare così le nuove richieste di un Mobile web in...
Per fare in modo che anche in futuro le vostre campagne di newsletter rimangano efficaci, non dovreste perdervi questi trend dell’E-Mail Marketing del 2019: maggiore automazione, nuove leggi per la protezione dei dati e lo sviluppo dell’intelligenza artificiale che diventa sempre più realtà. Nel nostro articolo sui trend delle newsletter del 2019 vi spieghiamo a cosa dovreste prestare attenzione...
