Mentre si avvicina il 2019, siamo tutti pieni di aspettative sui progetti del sito web, che vedremo l'anno prossimo.
In questo articolo, esplorerò le tendenze creative, che sono state amate l'anno scorso. Cercherò anche di fare le previsioni su come queste tendenze si evolveranno o cambieranno nel 2019.
Per illustrare i miei punti, mi riferirò ai siti più di tendenza dell'ultima collezione AWWWARDS. Saluto a questa incredibile risorsa! Credo che i siti web indicati di seguito siano stati citati per creare il web nel 2019!
Ma prima di immergerci, parliamo di tre tendenze, che penso, rimarranno invariate nel 2019.
1. CHE COSA NON CAMBIERÀ
1.1 Mobile-first
Ora è ufficiale: ci sono più persone che navigano sui siti web da dispositivi mobili rispetto ai computer desktop. Nel 2018, abbiamo assistito all'aumento delle micro-interazioni, dei menu a comparsa e delle icone personalizzate. Questa tendenza non cambierà, ma solo avrà uno slancio. Nel 2019, non avrai più bisogno di un sito web che sia solo reattivo; ma ne avrai bisogno d'uno che sia mobile first.
1.2 Tempo di caricamento
Questo è un pò controverso. Nel 2018, molti esperti ritenevano che i siti web minimalisti e puliti avrebbero preso il controllo di Internet a causa della loro rapida velocità di caricamento. Ma non è successo.
Invece, vediamo come le nuove tecnologie stanno adattando i contenuti video e fotografici alle esigenze dell'era mobile-first. Nel 2019, i designer e gli sviluppatori continueranno a cercare un compromesso tra i design Java creativi, contenuti originali a larghezza intera e tempi di caricamento ridotti.
1.3 Chatbots
I siti web di e-commerce dovranno comunque essere convertiti nel 2019 e i chatbot si sono rivelati un modo efficace per farlo. Nel 2019, l'esperienza dell’acquisto online continuerà a perseguire una maggiore personalizzazione e tecnologie la più sofisticate. Quindi, nel 2019, vedremo chat più intelligenti e più interattivi sui migliori siti di e-commerce.
2. Cosa aspettarsi nel 2019
Passiamo ora alle principali tendenze del web design, che ci aspettiamo di vedere nel 2019.
2.1 PIATTI E NON COSI PIATTI
Il design piatto, come un'estetica del sito web, è stato con noi dal 2017 ed è qui per rimanerci. I proprietari dei siti web amano il design piatto per un'esperienza mobile migliore e un posizionamento SEO più elevato. I progettisti e gli utenti godono di layout uniformi, immagini belle e luminose e molti spazi bianchi.
La filosofia del web design piatto postula, che un sito con un minor numero di immagini può essere impressionante quanto il suo analogo con le immagini pesanti e lente degli anni 2000.
Guardando gli esempi di seguito, chi non sarebbe d'accordo?
SNOWWHITE.IO
Ecco un esempio di un sito web di design piatto ben fatto. Ci sono poche illustrazioni, ma tutte sono molto accattivanti. Quando viaggi attraverso il sito web, vedi che ogni nuova pagina presenta un'illustrazione diversa. Tradizionalmente per il design piatto, c'è un ampio spazio bianco e una facile navigazione.
DESIGN IN SILICON VALLEY
Questo sito web dimostra quale design piatto può offrire se aggiungi un'animazione e un'interattività pesanti. Le pagine presentano molte texture e bellissime transizioni. Gli spettatori potrebbero anche sentirsi un pò sopraffatti da ciò che accade sul sito web. Sembra, tuttavia, che questo è esattamente ciò che i designer sono stati.
L'approccio semi-piatto consente di aggiungere una profondità e un movimento ai tuoi design minimalisti e di avere tutti i vantaggi di un piatto con te. Nel 2019, vedremo ancora più varianti di questo.
LO PESCE
Questo design presenta fantastiche composizioni fotografiche di prodotti con le illustrazioni personalizzate, parallasse e bellissimi elementi interattivi. Mi è piaciuta anche l'animazione che rende la pagina pesante e profonda sotto la pergamena. Qui possiamo anche vedere fino a che punto il web design semi-piatto arriverà nel 2019.
2.2 ELEMENTI FLOTTANTI
Nel 2019, i design dei siti web sfideranno la gravità. Questa tendenza non è completamente nuova: tutti ricordiamo che i layout caotici erano già in trend nel 2018. L'anno prossimo vedremo molti elementi interattivi spuntare qua e là, cambiando le forme e aspettando che il cursore si posizioni sopra di loro.
Le composizioni aperte saranno anche la corrente principale del web design nel 2019. Quindi, preparati a vedere i designer abbandonare i confini e lasciare, che gli elementi 3D interattivi galleggiano sulle pagine.
GRETA MADLINE
Qui vediamo come un oggetto 3D interattivo può dare un tono all'intero sito web e aggiungere un tocco giocoso ad esso. Quando passi ad altre pagine del sito web, vedrai molti altri elementi del design creativo. È dotato di animazione carina, gli effetti di scorrimento,le illustrazioni fatte a mano e le combinazioni di colori in grassetto.
1948
Questo sito web ti invita a usare la tastiera per produrre gli effetti sonori e vedere gli oggetti 3D danzare nell'aria. Il design è al contempo minimalista e molto coinvolgente. Combina diversi tipi di comunicazione con i visitatori, quindi non puoi fermarti finché non hai visto tutto. Nel 2019, i siti web che offrono esperienze così uniche faranno il giro del web.
2.3 GEOMETRIA
Proprio come i colori, le forme possono essere utilizzate per creare gli accenti e comunicare le idee. La geometria funge da compromesso tra il minimalismo armonioso e l’esperienza asimmetrica spezzata. Entrambi saranno popolari nel 2019.
Le forme possono aggiungere un equilibrio ai disegn web più pazzi. La geometria è presente in diversi elementi: pulsanti, cornici o illustrazioni. Ogni forma genera associazioni specifiche e ha il suo significato. Se utilizzate con saggezza, le forme possono diventare gli elementi chiave del design di un sito web.
Diamo un'occhiata ad alcuni esempi sorprendenti.
TEDxBETHESDA
Pieno di consistenza e colore, queste forme al centro incollano gli occhi degli spettatori alla pagina. Qui la geometria viene utilizzata per fare accentuare e alludere alla grande croce rossa allo stadio TEDx. È combinato con le griglie asimmetriche e gli sfondi di belle particelle.
CWORKS
In questo esempio, le forme interattive vengono utilizzate per crearegli sfondi e le cornici di immagini. Combinati con i colori brillanti e la tipografia diffusa, questi elementi dimostrano le tendenze chiave del 2018-2019. Nota come vengono utilizzate le linee per evidenziare le schede del menu.
Qui vediamo una bella forma animata che risponde al movimento del cursore. Come elemento chiave, questa forma interattiva dà il tono all'intero sito web. Mi piacciono anche le icone ispirate alla geometria e la nitidezza di questo design.
2.4 SFONDI VIDEO
Gli sfondi video sono ora meno popolari di quanto non fossero nel 2016 a causa della maggiore importanza della velocità di caricamento. Tuttavia, nel 2019, vedremo l'evoluzione dell'integrazione video nel web design. Questo perché gli sfondi video hanno dimostrato di aumentare le conversioni del sito web. Gli spettatori resteranno incollati per guardare il video se ha catturato la loro attenzione. Puoi anche raccontare un'intera storia del brand con un video senza usare alcuna parola.
Diamo un'occhiata a come lo fanno questi siti.
LIVING MEMORIES
Questo sito web integra un'introduzione video, musica di sottofondo e foto widescreen. I ritratti sono mozzafiato e ad alta risoluzione. Le foto cliccabili della vecchia scuola, utilizzate come icone delle schede dei menu completano il design. Detto questo, è il video che riunisce tutti gli elementi del design e racconta una storia unica.
DESCENTE FUSIONKNIT
Il video sulla homepage di questo sito web dà il tono e induce una reazione emotiva da parte del pubblico. Semplicemente non puoi smettere di guardare questi tessuti lavorati a maglia e pezzi cuciti insieme. Ecco come si sviluppa la narrazione visiva del prodotto. Il sito web presenta anche le griglie irregolari e layout stratificati complessi.
2.5 GRIGLIE ROTTE
L'amore per l'asimmetria è iniziato nel 2018 e rimarrà con noi nel 2019. Le griglie, alle qualli eravamo abituate, contribuiranno ad aggiungere i contenuti a un sito web in modo allineato e coerente. I layout realizzati con le griglie sembrano simmetrici e strutturati. C'è un modo in cui tale prevedibilità rende più facile consumare le informazioni.
Tuttavia, la nuova tendenza di utilizzare le griglie asimmetriche e creare un'esperienza "spezzata" per lo spettatore è al suo apice ora. I progettisti mettono a disposizione i moduli di contenuto, colori e trame per ottenere un effetto di profondità. Questo dinamismo aiuta a coinvolgere gli spettatori e enfatizzare le sezioni più orientate alle conversioni del sito web.
A proposito, avere una griglia rotta non è identico a non avere alcuna struttura. I siti web sciatti sono ancora fuori moda.
MATHIEU LEVESQUE
Mentre scorri verso il basso di questo sito web, vedrai i moduli asimmetrici che si muovono a velocità diverse e didascalie che si avvicinano e scompaiono dalla vista. Quando la foto incontra il testo, il tipo cambia come se si nascondesse dietro la foto.
Questi effetti rendono il sito web sia asimmetrico che armonioso. Lo spettatore ha l'impressione che il caos percepito di questo layout sia attentamente studiato.
FEMME AND FIERCE
Questo design combina il brutalismo, l'asimmetria e lo scorrimento animato. Di conseguenza, vediamo un sito web molto equilibrato e minimalista con un aspetto giovanile.
I tipi di carattere della vecchia scuola e la tavolozza rosata bilanciano il design, rendendolo più chic. Quando si passa con il mouse su ogni foto di un prodotto, viene visualizzata un'animazione che include le icone create su misura. Il sito web sembra una classica rivista di moda che è stata rifatta per il pubblico giovane e feroce.
2.6 TIPI ESPRESSIVI
I caratteri grassetto hanno fatto da battistrada sul design del sito web già da un pò di tempo. Inoltre, vediamo molti tipi rovinati, disordinati, pieni di 3D o ritagliati. Più grande del testo di vita e caratteri in grassetto impostano l'atmosfera del sito web e creano gli accenti dove ne hai bisogno.
I tipi geometrici aggiungono un tocco all'avanguardia al design. Chiari e minimalisti, possono compensare la complessità dei layout e delle animazioni utilizzate nello stesso design.
I tipi scritti a mano, a loro volta, aggiungono un'atmosfera accogliente e affascinante al sito web. Sono usati in combinazione con gli elementi di schizzo, illustrazioni a forma di fumetto o da soli. Nel 2019 li vedremo audaci, espressivi e asimmetrici.
LA ROULOTTE
Qui vediamo una fantastica combinazione di layout animati irregolari, forme geometriche, brutalismo e, naturalmente i tipi di istruzioni. Il design crea un'impressionante esperienza spezzata. Nota come le lettere sono ritagliate e sparse tra i layout.
Il colore rosso rende questo tipo ancora più espressivo. Inoltre, nota come il logo combini in modo bello una forma geometrica con lettere ritagliate.
MOUNTAIN MAN BAND
Questa homepage presenta le grandi lettere scritte a mano fatte in modo irregolare e sciatto. Quando scorri verso il basso, vedi il testo animato reso in tipi geometrici e le immagini di sfondo sbiancate. La tavolozza dei colori è incredibilmente silenziosa. Il design sembra caldo e accogliente, invitando il visitatore a rimanere più a lungo e divertirsi.
2.7 IMMAGINI DANNEGGIATE E STRATIFICATI
La tendenza generale di distruggere tutto, dagli sfondi alla tipografia, include la rottura e la sperimentazione di foto. Ciò che sarebbe stato impensabile qualche anno fa, come una foto di un personaggio danneggiato nella home page, verrà visto su molti siti web nel 2019.
Non solo i web designer danneggiano e difettano le immagini, ma scrivono anche su di loro e mettono tutti i tipi di elementi sulle foto per aggiungere la complessità. Gli elementi sovrapposti, a due tonalità e il disordine saranno ancora in trend nel 2019.
KYOTO-OKAZAKI MEIJI SAKABA
Il complesso design di questa homepage presenta le immagini asimmetriche che condividono la palette di colori rossi e si sovrappongono a forme a scatti. Il designer utilizza sia i colori vivaci rosso e beige e i tipi di grassetto in pianura.
Se scorri verso il basso, ci saranno più font geometrici, a scatti ed espressivi scritti a mano. Nel complesso, il sito web è affascinante.
ADIDAS WOMEN
La grande spaccatura nell'immagine sembra uno specchio rotto e ci fa vedere le immagini in doppio. Il resto del design sembra molto minimalista - con molti spazi bianchi e tipografia più tradizionale. Di conseguenza, tutte le visualizzazioni vengono incollate al video come se fossero visualizzate su un monitor rotto.
2.8 TEXTURE INTERATTIVE CHAOTICHE
Quando si tratta di sfondi e trame, la stessa tendenza alla "rottura" si applicherà senza dubbio. Nel 2019, vedremo ancora molti sfondi seppia e micro-danneggiati o sbiancati.
I designer usano sia texture dall'aspetto consumato che i modelli animati futuristici. Non ci sono fondamentalmente le regole. Ultimamente, mentre la tendenza dell'interattività del sito web sta prendendo il piede, vediamo sempre più trame animate interattive. Vedremo anche molti video incorporati, che fungono da sfondi testurizzati piuttosto che un elemento di narrazione tradizionale.
HUMAN ALWAYS
Con una bella tavolozza di colori tenui e micro modelli, che sembrano texture danneggiate, questo design sembra profondo e stimolante. C'è anche molta geometria nel design: i rettangoli taglienti sono combinati con le forme arrotondate fluide per creare la complessità.
C'è un menu della barra laterale dall'aspetto minimalista e un cursore lungo la pagina. A causa di questa combinazione di elementi, il sito web sembra sia sperimentale che radicato nella tradizione.
DRIP POP
Questo sito sembra gustoso e vivace. I progettisti hanno utilizzato modelli animati caotici come texture di sfondo nella home page. Prima di scorrere verso il basso del sito, ti fermi per vedere più di queste gocce di colori fantastici.
In fondo alla pagina, ci sono foto animate realistiche. Contro il design di ispirazione piatta della pagina, sembrano enormi e deliziosi. La combinazione di design del materiale, cursori orizzontali e animazione complessa cattura l'attenzione e non lascerà andare.
DISTINCTION AGENCY
I progetti interattivi saranno ovunque nel 2019. In questo sito web, vediamo un sorprendente esempio di una trama animata che cambia colore e rivela le foto. Integrato con una tipografia neutra e un pannello di menu minimalista, questa texture in scala sembra incredibile.
Quando si preme su una delle parole evidenziate nella didascalia, viene rivelato un nuovo layout piatto e minimalista. Qui vediamo forme animate tradizionali su uno sfondo chiaro.
2.9 COLORE DA SOGNO
Nel 2018, abbiamo visto un sacco di colori nel web design, e la tendenza è qui per rimanere. I colori vivaci vengono utilizzati in progetti piatti tradizionali o in layout semi-piatti più profondi. Le tavolozze arcobaleno e pastelli smorzati e profondi saranno ugualmente popolari.
L'anno prossimo, le combinazioni di colori assomigliano ad arcobaleni e sfumature che erano così popolari nel 2018. Ogni volta che possono, i designer si spostano dai colori tradizionali ai loro equivalenti più luminosi o più profondi.
Allo stesso tempo, ci aspettiamo un aumento delle palette beige utilizzate in combinazione con i colori più vivaci e gli elementi animati.
LE PETIT NANTAIS
Un sorprendente esempio di un design piatto interattivo, che combina molte delle tendenze che vedremo nel 2019. L'immagine del personaggio è resa in vivaci colori contrastanti; ci sono le icone luminose e lo scorrimento animato.
Quando fai clic su una scheda del menu, una transizione colorata e animata ti porterà in un'altra pagina. Gli elementi che galleggiano lentamente creano una sensazione profonda, che bilancia le illustrazioni dall'aspetto piatto.
SLOW BANANA
Qui abbiamo un'altra combinazione di colori vivaci e un'immagine di un personaggio appassionato nella pagina principale. Di seguito, ci sono diversi layout di design piatti, ciascuno con uno sfondo vivido monocromatico e una tipografia audace. La semplicità di questo sito lo rende ancora più fantastico.
2.10 BRUTALISMO
Nel 2019, saremo sempre più ricordati all'alba di Internet attraverso il brutalismo nel web design. Coloro che si sono stancati di layout piatti e puliti godranno di layout brutali fin dagli anni '90.
Questi siti Web presentano solo troppi effetti hover, animazioni, micro interazioni, tipi grandi, immagini massive e colori sicuri per il web. Non sono pensati per essere al massimo funzionali; scelgono di travolgere e impressionare. Tutto sarà solo un po 'esagerato: i colori si scontreranno, le parole saranno difficili da leggere e i contenuti saranno organizzati in modo caotico. E, naturalmente, ci sarà molto bianco e nero.
ERIK BERNACCI
Riesci a sentire il suono della connessione Internet? Mi sono sentito molto nostalgico (e vecchio) mentre guardavo questo sito. Il designer combina i colori sicuri della vecchia scuola con un'animazione ingenua e le icone fantastiche.
Questo design sembra brutale e sentimentale allo stesso tempo. Ogni elemento è stato accuratamente realizzato per adattarsi all'intero quadro di un vecchio sito web con un tocco ironico.
ROMAIN GRANAI
Questa è un'altra variante del brutalismo con una svolta speciale. Vediamo un sacco di elementi difettosi, dato che era alla moda per tutto il 2018. Sono supportati da una grande tipografia e dagli effetti di pergamena piuttosto viziosi. Questo design travolge e lascia un'impressione duratura. C'è anche una versione mobile, assicurati di dargli un'occhiata!
2.11 ILLUSTRAZIONI DISEGNATE A MANO
Le illustrazioni ad acquerello, i pastelli e gli schizzi non sono una novità nel web design. Nel 2019 ne vedremo ancora di più. I disegni unici diventeranno ancora più complessi, dinamici e interattivi. Se, nel 2017, è stato sufficiente creare un disegno originale disegnato a mano per il tuo sito web, ora le illustrazioni dovrebbero coinvolgere gli spettatori e rispondere alle loro azioni.
L'uso delle illustrazioni in tutto il sito web dovrebbe essere coerente. Non è possibile inserire un bel disegno qua e là e chiamarlo un giorno: tutta la tipografia, la micro-animazione e gli sfondi devono essere inseriti in un'unica esperienza.
A+SMITH CREATIONS
Questo bellissimo sito nero presenta un'elegante illustrazione sulla homepage. Mentre scorri verso il basso, un elemento di questo viene in primo piano e viene circondato dal testo.
Questo sito ha un aspetto artistico e minimalista. Gli elementi CTA sono evidenziati con il rosso e le altre linee rimangono chiare e sottili. Il logo aziendale presenta le linee ondulate simili e funge dall'accento in questo design.
STORIA DELLA MUSICA AMERICANA
Ecco un sito completamente diverso, che utilizza le illustrazioni disegnate a mano sia come gli elementi del design che di narrazione di storie. Scorrendo verso il basso si rivela la cronologia della musica americana resa in fantastiche illustrazioni interattive. È inoltre possibile avviare una playlist jazz direttamente sul sito web per ottenere un'impressione completa.
2.12 INTERATTIVITÀ'
Come probabilmente avrai notato dagli esempi che ho fornito sopra, i web design prevedono la creazione di esperienze più complesse e dinamiche per gli utenti. Vedremo un sacco di video integrati, micro-interazioni, animati, ecc. Nuove tecnologie di animazione come SVG significano che non ci sarà alcuna perdita di qualità nelle tue animazioni se visualizzate su uno schermo mobile.
GARBAGE 31
Questo fantastico sito web di un team creativo ucraino porta l'interattività al livello successivo. Sei immerso nell'esperienza fin dai primi secondi. Per accedere al sito web, è necessario svuotare un sacchetto di spazzatura con un coltello. Quindi, il sito web ti invita a trovare un posto dove riciclare diversi tipi di rifiuti.
Il design è molto minimalista; l'accento principale è sulla parte interattiva e funzionale. Nulla distoglie l'attenzione dal compito principale: trovare la giusta posizione di riciclaggio.
COCOON
L'esperienza su questo sito inizia con un'interazione semplice ma piacevole in cui scegli la sezione che vuoi inserire. Questo design presenta anche bellissime transizioni animate. Variano da una pagina all'altra e rendono ancora più coinvolgente il tempo che trascorri sul sito web.
Ci sono anche griglie dinamiche, icone personalizzate e un sacco di buoni contenuti fotografici per amplificare l'impressione. Il sito web è elegante e tecnologico.
2.13 VECCHIA SCUOLA E GIOCO
La tendenza al brutalismo va di pari passo con la tendenza a fare i progetti che ricordano i vecchi videogiochi. Anche i non giocatori si sentiranno sentimentali quando vedranno gli elementi simili a Nintendo su un sito web. Questa estetica abbraccia generazioni e dà un tocco giocoso a qualsiasi design.
Quando sono animati e interattivi,gli elementi di gioco immergono gli spettatori in un'esperienza Nintendo. In tal modo, si può facilmente aumentare il tempo che i visitatori trascorrono su un sito web.
TUTTI
Questo sito web offre tutte le principali tendenze del 2018-2019 in un unico pacchetto. Incoraggia l'utente a interagire e costruire una sfida creativa. Quindi, l'utente viene invitato a un sito Web di una sola pagina con un aspetto brutalista e simile a Nintendo.
Il design presenta molte micro-interazioni, lettere animate in grassetto, icone e pop-up di fumetti e una bella tipografia scritta a mano qua e là. L'enorme logo sulla home page interagisce con te mentre ti passi sopra il mouse.
PRAZE OR HAZE TRUMP
Sebbene piuttosto controverso, questo design offre un'opportunità di giocare con un personaggio che assomiglia a un politico famoso. Questo divertente sito web sembra mirare a ridurre la pressione ideologica e politica attraverso l'imitazione di un videogioco. Tuttavia, questo design è molto in linea con le tendenze che vedremo nel 2019.
2.14 OGGETTI 3D
Negli ultimi due anni, l'utilizzo degli elementi 3D nel web design è diventato una pratica comune. Nel 2019, i progettisti integreranno gli oggetti 3D in complessi layout a più livelli e li renderanno interattivi.
La linea tra oggetti reali e i loro analoghi 3D è più sfocata che mai. Inoltre, gli elementi 3D dinamici si muoveranno sempre più naturalmente per creare un'esperienza organica fluida. I materiali naturali e le forme rotonde ispireranno sempre più i designer 3D nel 2019.
POOR FOLK KABAKOVS
Qui abbiamo un design della homepage meravigliosamente stratificato con piccoli oggetti 3D che fungono da texture. Sotto il modello 3D, c'è una grande didascalia che scorre in vista e uno sfondo video. Tali esperienze complesse sono ciò che ci aspettiamo da un sito web nel 2019.
Il sito web ha un aspetto in qualche modo caotico. Ci sono le immagini che saltano fuori irregolarmente e il testo le sovrasta in alcuni punti, ma l'impressione generale è di un capolavoro del web design moderno.
ESPN NBA's SIGNATURE MOVES
In questo esempio, vediamo la storia del basket raccontata usando le figure eleganti in 3D dei giocatori NBA. Questo design presenta tutte le tendenze importanti del 2019: colori vividi, tipi grandi, interattività e integrazione video.
Bene, immagino sia tutto. Spero ti sia piaciuto leggere e vederti nel 2019!
***
Questo articolo è stato tradotto da inglese. L’originale puoi trovare qui: Web Design Trends in 2019: What’s Next?