{"id":7593,"date":"2019-12-26T11:54:48","date_gmt":"2019-12-26T10:54:48","guid":{"rendered":"https:\/\/www.addlance.com\/blog\/?p=7593"},"modified":"2021-02-17T23:32:26","modified_gmt":"2021-02-17T22:32:26","slug":"responsive-web-design","status":"publish","type":"post","link":"https:\/\/seven.addlance.com\/beta\/blog\/responsive-web-design\/","title":{"rendered":"Responsive Web Design trend per il 2020"},"content":{"rendered":"<p><img decoding=\"async\" class=\"alignright wp-image-7604 size-medium\" title=\"responsive web design trend 2020\" src=\"https:\/\/www.addlance.com\/wp-content\/uploads\/2019\/12\/Camden-Town-Brewery-su-pc-300x150.jpg\" alt=\"responsive web design trend 2020\" width=\"300\" height=\"150\" srcset=\"https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2019\/12\/Camden-Town-Brewery-su-pc-300x150.jpg 300w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2019\/12\/Camden-Town-Brewery-su-pc-1024x512.jpg 1024w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2019\/12\/Camden-Town-Brewery-su-pc-768x384.jpg 768w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2019\/12\/Camden-Town-Brewery-su-pc-610x305.jpg 610w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2019\/12\/Camden-Town-Brewery-su-pc-1080x540.jpg 1080w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2019\/12\/Camden-Town-Brewery-su-pc-1280x640.jpg 1280w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2019\/12\/Camden-Town-Brewery-su-pc.jpg 1315w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>Sei curioso di sapere quali saranno i <strong><a href=\"https:\/\/www.addlance.com\/s\/web-mobile\">responsive Web Design<\/a> trend per il 2020<\/strong>? Ecco una panoramica da tenere d&#8217;occhio: ti sar\u00e0 utile per aggiornarti e avere un sito web accattivante, che ottiene pi\u00f9 <em>engagement<\/em>. Oppure per raggiungere il successo come<em> freelance<\/em> di Graphic Web Design, nel prossimo anno.<\/p>\n<p><!--more--><\/p>\n<h2>Cos&#8217;\u00e8 il responsive Web Design e perch\u00e9 usarlo<\/h2>\n<p>Sei un <em>Graphic Designer<\/em> alle prime armi, oppure hai un sito web da valorizzare e in cui il traffico di visitatori non decolla? Il responsive Web Design pu\u00f2 aiutarti, ma prima scopri cos&#8217;\u00e8 e perch\u00e9 usarlo! La sigla breve <strong>RWD<\/strong> che lo indica, fu coniata da <strong>Ethan Marcotte<\/strong> nel 2011; \u00e8 una tecnica usata per costruire <strong>siti web che adattano automaticamente la propria grafica al dispositivo di visualizzazione.<\/strong> Il RWD parte dal concetto che gli stessi contenuti vengono visualizzati in modo diverso, per motivi di pixel e di dimensioni del display, su computer, tablet, <em>smartphone<\/em>, cellulari e <em>web tv.<\/em> Quindi il <em>responsive<\/em> rende automaticamente ottimale le visualizzazioni, <strong>evitandoti complicate manovre per ingrandire o rimpicciolire i contenuti.<\/strong> Ovvio che, a queste condizioni, gli utenti siano molto pi\u00f9 contenti di navigare. Quindi, il sito progettato applicando il RWD ha pi\u00f9 successo, sviluppa pi\u00f9 traffico e maggior <em>engagement<\/em>. Ma non basta: il responsive Web Design tiene conto anche del<em> target<\/em> dell&#8217;utente rispetto alle sue possibilit\u00e0 visive, cognitive e percettive. Un mondo in continua evoluzione, che costringe ad aggiornarsi. Ecco perch\u00e9 ti conviene leggere subito i trend per il 2020 che abbiamo cercato per te!<\/p>\n<h2>Responsive Web Design trend: cosa ha funzionato finora<\/h2>\n<p>Prima di scoprire i responsive Web Design trend per il 2020, facciamo il punto su cosa ha funzionato negli ultimi due anni in questo settore del Web Design:<\/p>\n<ul>\n<li><strong>I colori &#8220;immersivi&#8221;<\/strong>, cio\u00e8 brillanti e intensi. <strong>Ideali per attirare l&#8217;attenzione<\/strong>, simbolo di un atteggiamento progressista e coraggioso. Empatici, \u00a0esprimono una personalit\u00e0 eccentrica. Ottimi per comunicare ad un pubblico giovane e trasmettere valori legati all&#8217;amicizia, lealt\u00e0 e socialit\u00e0<\/li>\n<li><strong>Le animazioni<\/strong>. Hanno soppiantato i video sui <em>display<\/em>, possono essere di due tipi: transizioni a scorrimento e effetti al passaggio del mouse<\/li>\n<li><strong>Asimmetria di impaginazione<\/strong>. Originariamente ordinati ed astratti e poco personalizzati, negli ultimi anni i siti vengono costruiti con strutture asimmetriche. L&#8217;effetto \u00e8 &#8220;brutale&#8221;, pi\u00f9 divertente ed entusiasmante. In molti casi per\u00f2, si genera confusione nella navigazione, che non fa bene all&#8217;<em>engagement<\/em>.<\/li>\n<li><strong>Caratteri tipografici forti e chiari<\/strong>, grandi, in grassetto e personalizzati. Con la possibilit\u00e0 di modificarli per renderli unici e attirare di pi\u00f9 il lettore<\/li>\n<li><strong>Uso di griglie CSS<\/strong>: servono per capire se l&#8217;utente sta navigando nel sito da PC o da dispositivo mobile. I <em>Designer<\/em> infatti si sono posti il problema di rilevare quale dispositivo usi l&#8217;utente, in modo da reindirizzarlo alla versione del sito che pi\u00f9 si adatta alle sue necessit\u00e0. Cos\u00ec, i proprietari delle pagine web hanno organizzato i contenuti \u00a0che <em>reagiscono <\/em>alla dimensione dello schermo dell&#8217;utilizzatore. Il risultato \u00e8 un contenuto pi\u00f9 chiaro<\/li>\n<li><strong>Grafiche vettoriali scalabili,<\/strong> per dare priorit\u00e0 agli apparecchi mobili. Possibile grazie alle SVG, immagini vettoriali che si adattano alla dimensione dello schermo, mantenendo la qualit\u00e0 della grafica originale. Per gli utenti conquistati soprattutto dai contenuti multimediali, sullo <em>smartphone<\/em><\/li>\n<li><strong>I disegni fatti a mano<\/strong>. S\u00ec, hai letto bene, in un mondo multimediale ci\u00f2 che sfonda davvero sono loro, perch\u00e9 <strong>aggiungono fascino<\/strong> e carattere unico alla grafica. Negli ultimi anni si sono moltiplicati nei siti, facendo un&#8217;enorme differenza in rete<\/li>\n<li><strong>Il riconoscimento vocale<\/strong>, per indirizzare i lettori distratti. Sempre pi\u00f9 persone preferiscono la voce al testo, anche perch\u00e9 lo schermo \u00e8 sempre pi\u00f9 piccolo e affollato<\/li>\n<li><strong>La realt\u00e0 aumentata e l&#8217;intelligenza artificiale<\/strong> con l&#8217;apprendimento automatico. Hanno sostituito la classica <em>homepage<\/em> del sito con <em>landing page<\/em> pi\u00f9 mirate e personalizzate, adattate al contesto.<\/li>\n<\/ul>\n<p style=\"text-align: center;\">Leggi anche <a href=\"https:\/\/www.addlance.com\/blog\/cos-e-landing-page\/\" target=\"_blank\" rel=\"noopener noreferrer\">Perch\u00e9 la tua attivit\u00e0 pu\u00f2 aver bisogno di una landing page<\/a><\/p>\n<h2>Responsive Web Design, i 12 trend per il 2020<\/h2>\n<p>Le soluzioni di responsive Web Design di oggi sono<strong> destinate a cambiare velocemente nel prossimo anno<\/strong>. Niente come il gusto dei consumatori \u00e8 pi\u00f9 schiavo delle variazioni dei bisogni e delle mode. E uno &#8216;<em>smart web design<\/em>&#8216; deve adattarsi, interpretare e anticipare addirittura queste trasformazioni, per ottenere pi\u00f9 <em>engagement,<\/em> da tutti i dispositivi. Ecco una panoramica sulle responsive Web Design trend per il 2020:<\/p>\n<ul>\n<li><strong>Animazioni s\u00ec<\/strong>, ma rotanti. Suscitano maggiore curiosit\u00e0 nell&#8217;utente, perch\u00e9 ad ogni aggiornamento della <em>homepage<\/em> si vede un video diverso, che ha come soggetto il <em>brand<\/em>. Insomma, una specie di scena che cambia ruotando, con sorprese divertenti che spingono a navigare volentieri<\/li>\n<li><strong><em>Landing page<\/em><\/strong> dinamiche e reattive. Si \u00e8 scoperto che trattenere il visitatore del sito in una pagina statica \u00e8 difficile: ecco allora comparire una <strong>grafica reattiva<\/strong>, con elementi interattivi pi\u00f9 stuzzicanti<\/li>\n<li><strong>Cambio del verso di scorrimento delle immagini<\/strong>. Finora avveniva verticalmente, ma la tendenza del 2020 \u00e8 lo <strong>scorrimento orizzontale<\/strong> o comunque non tradizionale. Disturba positivamente l&#8217;utente e lo appassiona al sito<\/li>\n<li><strong>Sfumature e gradazioni di colore.<\/strong> Molti loghi famosi, primo fra tutti quello di <strong>Instagram<\/strong>, hanno scelto una grafica cromaticamente sfumata, che sar\u00e0 adottata nel futuro soprattutto per le scritte e le icone<\/li>\n<li>Si \u00e8 scoperto che i consumatori trascorrono pi\u00f9 tempo sui siti web che utilizzano funzionalit\u00e0 reattive. Vengono progettate col cosiddetto<strong> Web Design interattivo,<\/strong> all&#8217;interno di una storia, per incoraggiare l&#8217;utente a <strong>interagire con la grafica<\/strong>. L&#8217;unico dubbio \u00e8 il costo: al momento resta un&#8217;operazione per pochi, ma sar\u00e0 perfezionata<\/li>\n<li><strong>Le animazioni attivate dallo scorrimento dei contenuti<\/strong>. Questo tipo di web design valorizza il talento del <em>Visual Design<\/em> e le capacit\u00e0 di sviluppo front-end. Il tempo di permanenza dell&#8217;utente sulla pagina aumenta, come l&#8217;attenzione verso il contenuto<\/li>\n<\/ul>\n<p style=\"text-align: center;\">Leggi anche <a href=\"https:\/\/www.addlance.com\/blog\/visual-design-packaging\/\" target=\"_blank\" rel=\"noopener noreferrer\">Visual Design, le regole del packaging (e non solo)<\/a><\/p>\n<ul>\n<li><strong>Variazioni cromatiche del <em>brand<\/em>.<\/strong> In questa tendenza le pagine del sito web hanno un marchio di colore diverso in ogni pagina.<strong> Oppure il colore varia quando l&#8217;utente naviga<\/strong> e interagisce con gli elementi della pagina. Questo tipo di Web Design crea associazioni inconsce con prodotti o pagine di servizi, basate esclusivamente su segnali di colore<\/li>\n<li><strong>Profondit\u00e0 e ombre al disegno grafico<\/strong>. Visivamente pi\u00f9 accattivante, innescano velocemente il processo di vendita. Le tecniche pi\u00f9 usate saranno le ombreggiature, le sfumature o le combinazioni di colori a due tonalit\u00e0<\/li>\n<li><strong>Titoli giganti, frasi in grassetto, parole brevi<\/strong>. Perch\u00e9 \u00e8 sempre pi\u00f9 indispensabile urlare per farsi notare! Il Web Design seguir\u00e0 questa tendenza: i <em>tag<\/em> di intestazione pi\u00f9 grandi verranno associati a una copia del sotto testo molto pi\u00f9 piccola, magari per le info aggiuntive<\/li>\n<li>Il 2020 sar\u00e0 l&#8217;anno delle <strong>forme astratte<\/strong>: si useranno alla grande nei prossimi siti web, per rendere pi\u00f9 intriganti i contenuti<\/li>\n<li><strong>Linee diagonali.<\/strong> Basta con le linee rette, verticali e orizzontali, per separare le sezioni delle pagine web. L&#8217;uso di linee diagonali fornisce un percorso pi\u00f9 chiaro e interessante per gli occhi dell&#8217;utente che naviga nella pagina<\/li>\n<li><strong>Contenuti nel bordo pagina inferiore<\/strong>. Nei siti web finora sono stati sempre trascurati. Una tendenza di Web Design futura, che far\u00e0 sicuramente colpo, sar\u00e0 quella dei &#8220;<strong><em>footer boost<\/em><\/strong>&#8220;. Lo spazio sottostante, usato solo per fornire le informazioni di contatto o il modulo di iscrizione, includer\u00e0 elementi aggiuntivi della <em>homepage.<\/em><\/li>\n<\/ul>\n<h2>Conclusioni<\/h2>\n<p>Ricapitolando: il 2020 porter\u00e0 un mucchio di <strong>novit\u00e0 interessanti<\/strong> nel mondo del Web Design. Resta aggiornato seguendo queste dritte, e raggiungerai nuovi obbiettivi con i tuoi siti web!    \t<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Scopri i 12 responsive web design trend per il 2020, quello che ha funzionato finora nel web design e quello che funzioner\u00e0 a partire dalle prossime settimane<\/p>\n","protected":false},"author":6,"featured_media":7604,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":""},"categories":[16],"tags":[31],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/posts\/7593"}],"collection":[{"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/comments?post=7593"}],"version-history":[{"count":1,"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/posts\/7593\/revisions"}],"predecessor-version":[{"id":10690,"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/posts\/7593\/revisions\/10690"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/media\/7604"}],"wp:attachment":[{"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/media?parent=7593"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/categories?post=7593"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/tags?post=7593"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}