{"id":2632,"date":"2018-02-12T21:09:21","date_gmt":"2018-02-12T20:09:21","guid":{"rendered":"https:\/\/www.addlance.com\/blog\/?p=2632"},"modified":"2022-04-07T10:18:18","modified_gmt":"2022-04-07T08:18:18","slug":"web-design-2018","status":"publish","type":"post","link":"https:\/\/seven.addlance.com\/beta\/blog\/web-design-2018\/","title":{"rendered":"12 Tendenze del Web Design &#8211; 2018 &#8211; Secondo AddLance"},"content":{"rendered":"<p><img decoding=\"async\" class=\"alignright size-medium wp-image-2740\" src=\"https:\/\/www.addlance.com\/wp-content\/uploads\/2018\/02\/web-design-2018-300x185.jpg\" alt=\"\" width=\"300\" height=\"185\" srcset=\"https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/web-design-2018-300x185.jpg 300w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/web-design-2018-1024x630.jpg 1024w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/web-design-2018-768x473.jpg 768w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/web-design-2018-610x375.jpg 610w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/web-design-2018-1080x665.jpg 1080w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/web-design-2018.jpg 1300w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>Quali saranno le tendenze del <a href=\"https:\/\/www.addlance.com\/s\/web-design\">Web Design<\/a> in questo 2018?<\/p>\n<p>Zero chiacchiere! Scopriamo insieme verso quali direzioni si muoveranno i creativi digitali quest&#8217;anno.<br \/>\nEcco le <strong>12 tendenze<\/strong> &#8220;annusate&#8221; da AddLance.<\/p>\n<p><!--more--><\/p>\n<p><strong>MENU VELOCE<\/strong><\/p>\n<ol>\n<li><span style=\"color: #3366ff;\"><a href=\"#Colori-Vibranti\">Colori Vibranti<\/a><\/span><\/li>\n<li><span style=\"color: #3366ff;\"><a style=\"color: #3366ff;\" href=\"#Sfondi-Particles\">Sfondi Particles<\/a><\/span><\/li>\n<li><span style=\"color: #3366ff;\"><a style=\"color: #3366ff;\" href=\"#Illustrazioni\">Illustrazioni<\/a><\/span><\/li>\n<li><span style=\"color: #3366ff;\"><a style=\"color: #3366ff;\" href=\"#Caratteri-grandi\">Caratteri grandi<\/a><\/span><\/li>\n<li><span style=\"color: #3366ff;\"><a style=\"color: #3366ff;\" href=\"#Animazioni-HTML5\">Animazioni HTML5<\/a><\/span><\/li>\n<li><span style=\"color: #3366ff;\"><a style=\"color: #3366ff;\" href=\"#Interazione\">Interazione<\/a><\/span><\/li>\n<li><span style=\"color: #3366ff;\"><a style=\"color: #3366ff;\" href=\"#Immagini-vettoriali-SVG\">Immagini vettoriali SVG<\/a><\/span><\/li>\n<li><span style=\"color: #3366ff;\"><a style=\"color: #3366ff;\" href=\"#Internet-delle-Cose\">Internet delle Cose<\/a><\/span><\/li>\n<li><span style=\"color: #3366ff;\"><a style=\"color: #3366ff;\" href=\"#Grottesco\">Grottesco<\/a><\/span><\/li>\n<li><span style=\"color: #3366ff;\"><a style=\"color: #3366ff;\" href=\"#Forme-organiche-diagonali\">Forme organiche e diagonali<\/a><\/span><\/li>\n<li><span style=\"color: #3366ff;\"><a style=\"color: #3366ff;\" href=\"#Missione-Visione-Promessa\">Missione, Visione, Promessa<\/a><\/span><\/li>\n<li><span style=\"color: #3366ff;\"><a style=\"color: #3366ff;\" href=\"#A-B-test\">A\/B test<\/a><\/span><\/li>\n<\/ol>\n<h3 id=\"Colori-Vibranti\">1) Colori Vibranti<\/h3>\n<div id=\"attachment_2635\" style=\"width: 940px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" aria-describedby=\"caption-attachment-2635\" class=\"wp-image-2635 size-full\" title=\"trends web design 2018 colori vibranti\" src=\"https:\/\/www.addlance.com\/wp-content\/uploads\/2018\/02\/trends-web-design-2018-colori-vibranti.png\" alt=\"trends web design 2018 colori vibranti\" width=\"930\" height=\"823\" srcset=\"https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/trends-web-design-2018-colori-vibranti.png 930w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/trends-web-design-2018-colori-vibranti-300x265.png 300w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/trends-web-design-2018-colori-vibranti-768x680.png 768w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/trends-web-design-2018-colori-vibranti-610x540.png 610w\" sizes=\"(max-width: 930px) 100vw, 930px\" \/><p id=\"caption-attachment-2635\" class=\"wp-caption-text\">Colorful landing page design by Adam Bagus for Arielle Careers<\/p><\/div>\n<p>Tonalit\u00e0 vibranti, super saturazione dello schermo, intestazioni reiventate con tagli e angolazioni che abbandonano la classica linea orizzontale. Queste sono le tendenze 2018 per il Web Design per quanto riguarda i colori. Ma come mai sempre pi\u00f9 creativi (e brand) stanno abbandonando quelli che erano i <strong>tradizionali colori del web<\/strong>? In parte questo \u00e8 favorito dai progressi tecnologici nei monitor e nei dispositivi: gli schermi attuali supportano bene la riproduzione di colori pi\u00f9 ricchi. In parte si tratta di una vera e propria tendenza messa in atto per distinguersi. L\u2019uso di colori sgargianti e persino contrastanti tra loro hanno lo scopo di attirare i visitatori e di catturare la loro attenzione, in un mondo che \u00e8 costantemente saturo di stimoli visivi.<\/p>\n<h3 id=\"Sfondi-Particles\">2) Sfondi Particles<\/h3>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-2636 size-full\" src=\"https:\/\/www.addlance.com\/blog\/wp-content\/uploads\/2018\/02\/heco.gif\" alt=\"web design trends 2018\" width=\"900\" height=\"471\" \/><\/p>\n<p>Un altro tra i trend del web design 2018 sono gli fondi di particelle ovvero <strong><em>particles backbrounds<\/em><\/strong>. Si tratta di uno stratagemma utile per i siti con problemi di prestazioni che devono avere uno sfondo video per esigenze aziendali o richieste specifiche della committenza. Queste animazioni sono <em>javascript<\/em> leggeri che consentono di creare movimenti come parte naturale dello sfondo, il tutto senza richiedere troppo tempo per essere caricato. Questi sfondi hanno la \u201cbenedizione\u201d di attirare immediatamente l&#8217;attenzione dell&#8217;utente, quindi i marchi possono creare un&#8217;impressione memorabile in appena pochi secondi.<\/p>\n<h3 id=\"Illustrazioni\">3) Illustrazioni<\/h3>\n<div id=\"attachment_2637\" style=\"width: 1034px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" aria-describedby=\"caption-attachment-2637\" class=\"wp-image-2637 size-large\" title=\"trens web design 2018 illustrazioni personalizzate\" src=\"https:\/\/www.addlance.com\/wp-content\/uploads\/2018\/02\/09-yep-1024x581.jpg\" alt=\"trens web design 2018 illustrazioni personalizzate\" width=\"1024\" height=\"581\" srcset=\"https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/09-yep-1024x581.jpg 1024w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/09-yep-300x170.jpg 300w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/09-yep-768x436.jpg 768w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/09-yep-1536x872.jpg 1536w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/09-yep-610x346.jpg 610w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/09-yep-1080x613.jpg 1080w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/09-yep.jpg 1902w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><p id=\"caption-attachment-2637\" class=\"wp-caption-text\">Yep &#8211; Custom illustration site<\/p><\/div>\n<p>Insieme ai <em>particles backbrounds<\/em>, il 2018 \u00e8 indubbiamente anche l&#8217;anno delle <a href=\"https:\/\/www.addlance.com\/blog\/illustrazione-commerciale-vincente\/\" target=\"_blank\" rel=\"noopener\">illustrazioni personalizzate<\/a>. Personalizzare \u00e8 oggi pi\u00f9 che mai la parola d\u2019ordine per distinguersi. Qualunque brand cerca la personalizzazione perch\u00e9 questo permette di distinguersi in mercati che diventano ogni anno pi\u00f9 affollati. Qualunque sia la tua identit\u00e0 di marca, c&#8217;\u00e8 probabilmente uno stile di illustrazione da abbinarle. Le illustrazioni possono essere usate con successo anche da marchi che hanno una <em>brand image<\/em> molto seria, per essere percepiti come pi\u00f9 accessibili dai propri clienti.<\/p>\n<h3 id=\"Caratteri-grandi\">4) Caratteri grandi (e grossi)<\/h3>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-2735 size-full\" src=\"https:\/\/www.addlance.com\/wp-content\/uploads\/2018\/02\/caratteri-grandi-web-design.jpg\" alt=\"\" width=\"1000\" height=\"494\" srcset=\"https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/caratteri-grandi-web-design.jpg 1000w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/caratteri-grandi-web-design-300x148.jpg 300w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/caratteri-grandi-web-design-768x379.jpg 768w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/caratteri-grandi-web-design-610x301.jpg 610w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/>Spazio anche alla \u201crivoluzione\u201d tipografica del momento. La tipografia \u00e8 sempre stata:<\/p>\n<ul>\n<li>un potente strumento visivo<\/li>\n<li>un modo per creare personalit\u00e0 ed evocare emozioni<\/li>\n<li>in grado di impostare <em>il tono<\/em> sul quale un sito trasmette informazioni<\/li>\n<\/ul>\n<p>Ancor pi\u00f9 oggi ci sar\u00e0 un aumento (esponenziale) nell&#8217;uso di <strong>caratteri tipografici personalizzati<\/strong>. La risoluzione sempre pi\u00f9 nitida dei dispositivi attualmente in commercio aiuta lo sviluppo di questo trend. Ormai quasi tutti i\u00a0<em>browser<\/em> possono supportare caratteri tipografici originali e non di sistema e utilizzarli \u00e8 sempre pi\u00f9 semplice. Il Web Designer \u00e8 sempre pi\u00f9 libero di utilizzare forme espressive creative e fuori dalla norma. La tendenza a usare caratteri particolari e grandi, grandissimi, sar\u00e0\u00a0senz&#8217;altro d\u2019aiuto nel migliorare la User Experience (UX) e, soprattutto, creando interesse e coinvolgimento, nel prolungare le sessioni del visitatore sul sito web.<\/p>\n<h3 id=\"Animazioni-HTML5\">5) Animazioni HTML5<\/h3>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-2639 size-full\" src=\"https:\/\/www.addlance.com\/blog\/wp-content\/uploads\/2018\/02\/InTurn-animazioni-integrate.gif\" alt=\"inTurn animazioni integrate web design 2018\" width=\"900\" height=\"450\" \/><\/p>\n<p>Accenniamo anche alle <strong>animazioni HTML5,<\/strong> che\u00a0sono indubbiamente tra le tendenze del Web Design nel 2018. Con l&#8217;avanzare della tecnologia dei browser, sempre pi\u00f9 siti web si stanno spostando da immagini statiche alle animazioni per coinvolgere gli utenti nel loro approccio comunicativo. A differenza delle animazioni particellari menzionate in precedenza (che sono generalmente grandi sfondi), animazioni pi\u00f9 piccole sono utili per coinvolgere il visitatore durante tutta la sua esperienza sulla pagina. Ad esempio, la grafica pu\u00f2:<\/p>\n<ul>\n<li>animare la pagina mentre si sta caricando<\/li>\n<li>funzionare come punto focale dell&#8217;intero sito<\/li>\n<li>creare interazioni significative con e per i visitatori<\/li>\n<li>consentire ai visitatori di vedere se stessi (e il proprio potenziale futuro come clienti) nei personaggi animati<\/li>\n<\/ul>\n<h3 id=\"Interazione\">6) Interazione<\/h3>\n<div id=\"attachment_2640\" style=\"width: 1034px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" aria-describedby=\"caption-attachment-2640\" class=\"wp-image-2640 size-large\" title=\"Apple MacPro esempio micro interazioni \" src=\"https:\/\/www.addlance.com\/wp-content\/uploads\/2018\/02\/Apple-esempio-micro-interazioni-1024x583.png\" alt=\"Apple MacPro esempio micro interazioni \" width=\"1024\" height=\"583\" srcset=\"https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/Apple-esempio-micro-interazioni-1024x583.png 1024w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/Apple-esempio-micro-interazioni-300x171.png 300w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/Apple-esempio-micro-interazioni-768x437.png 768w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/Apple-esempio-micro-interazioni-610x347.png 610w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/Apple-esempio-micro-interazioni-1080x615.png 1080w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/Apple-esempio-micro-interazioni.png 1131w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><p id=\"caption-attachment-2640\" class=\"wp-caption-text\">Apple MacPro esempio micro interazioni<\/p><\/div>\n<p>Facebook e altri social network hanno reso le <strong>micro-interazioni<\/strong> estremamente popolari. Gli utenti adorano la capacit\u00e0 di contribuire con una variet\u00e0 di reazioni a post e messaggi privati, dal tradizionale <em>Like<\/em> dei post, fino a una serie di cuori animati. Queste micro interazioni consentono all&#8217;utente di interagire con gli altri senza <em>ricaricare <\/em>la pagina. Le micro interazioni aiutano ad arginare di inconvenienti come la perdita di potenziali conversioni e forniscono agli utenti esperienze interattive pi\u00f9 ricche. Utilizzarle sul proprio sito nel 2018 permette agli utenti di comunicare in tempo reale e di aumentare la velocit\u00e0 e la connettivit\u00e0 che si aspettano.<\/p>\n<p>Rivisitate e reimpiegate in modo minimalista con scopi educativi, strategici e di aumento delle conversioni sono anche le <strong>animazioni a scorrimento<\/strong>. Queste animazioni sostituiscono \u201cvecchi\u201d pulsanti e menu e incoraggiano l\u2019utente a continuare a scorrere (<em>scrollare<\/em>) le pagine, con il risultato di:<\/p>\n<ul>\n<li>ripulire l\u2019aspetto grafico\/estetico del sito<\/li>\n<li>fornire all\u2019utenza una esperienza reale e interattiva<\/li>\n<\/ul>\n<p>Vedi un esempio qui, sul sito <a href=\"https:\/\/www.apple.com\/mac-pro\/\">Apple<\/a> per la presentazione del <strong>Mac Pro.<\/strong><\/p>\n<h3 id=\"Immagini-vettoriali-SVG\">7) Immagini vettoriali SVG<\/h3>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-2732\" src=\"https:\/\/www.addlance.com\/wp-content\/uploads\/2018\/02\/svg-immagini-vettoriali-300x124.jpg\" alt=\"\" width=\"850\" height=\"352\" srcset=\"https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/svg-immagini-vettoriali-300x124.jpg 300w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/svg-immagini-vettoriali-1024x425.jpg 1024w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/svg-immagini-vettoriali-768x318.jpg 768w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/svg-immagini-vettoriali-610x253.jpg 610w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/svg-immagini-vettoriali-1080x448.jpg 1080w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/svg-immagini-vettoriali.jpg 1300w\" sizes=\"(max-width: 850px) 100vw, 850px\" \/>Il 2018 \u00e8 anche il grande anno della <strong>grafica vettoriale scalabile<\/strong> (SVGs) sul Web e ci si pu\u00f2 aspettare che questo formato grafico superi i formati di file tradizionali PNG, GIF per le icone e comunque le immagini semplici, con pochi colori e zero sfumature. Gli SVG sono immagini vettoriali, non pixel, che offrono molti vantaggi. Sono scalabili (si possono ingrandire all&#8217;infinito mantenendo la loro qualit\u00e0), il che significa possono essere decisamente pi\u00f9 leggeri da caricare.<\/p>\n<h3 id=\"Internet-delle-Cose\">8) Internet delle Cose<\/h3>\n<p>La connettivit\u00e0 tra dispositivi \u00e8 stata un&#8217;enorme tendenza nel 2017 e proseguir\u00e0 su questa strada anche quest\u2019anno. Detta su due piedi la <strong>Internet of Things<\/strong> \u00e8 la comunicazione macchina-macchina, anche se \u00e8 molto di pi\u00f9 di semplici dispositivi connessi tra loro. I dispositivi <em>IoT<\/em> possono essere un semplice frigorifero o una turbina complessa e, una volta programmati, ricevono informazioni e agiscono sui propri ambienti. Le API che consentono agli sviluppatori Web di connettersi e comunicare con questi dispositivi sono attualmente in fase di creazione, portando a una maggiore interconnessione.<\/p>\n<h3 id=\"Grottesco\">9) Grottesco<\/h3>\n<div id=\"attachment_2633\" style=\"width: 1034px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" aria-describedby=\"caption-attachment-2633\" class=\"wp-image-2633 size-large\" title=\"trends del web design 2018 esempio di Gucci\" src=\"https:\/\/www.addlance.com\/wp-content\/uploads\/2018\/02\/gucci-1024x519.png\" alt=\"trends del web design 2018 esempio di Gucci\" width=\"1024\" height=\"519\" srcset=\"https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/gucci-1024x519.png 1024w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/gucci-300x152.png 300w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/gucci-768x390.png 768w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/gucci-1536x779.png 1536w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/gucci-610x309.png 610w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/gucci-1080x548.png 1080w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/gucci.png 1999w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><p id=\"caption-attachment-2633\" class=\"wp-caption-text\">Sito di Gucci &#8211; esempio di grafica che vira al grottesco<\/p><\/div>\n<p>Il grottesco. Uno stile senza dubbio emergente gi\u00e0 agli albori del 2017, un anno fa. Oggi il grottesco sembra aver contagiato, nello stile e nella grafica, anche brand importanti come Gucci. I lavori creati nello stile grottesco sembrano rifuggire tutti i consigli di ottimizzazione e le liste delle <em>best practices<\/em> a favore di sguardi ed effetti quasi surreali, regalando ai designer la possibilit\u00e0 di fare quel che vogliono piuttosto che quel che devono.<\/p>\n<h3 id=\"Forme-organiche-diagonali\">10) Forme organiche e diagonali<\/h3>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-2736 size-large\" src=\"https:\/\/www.addlance.com\/wp-content\/uploads\/2018\/02\/forme-organiche-oblique-1024x351.jpg\" alt=\"\" width=\"1024\" height=\"351\" srcset=\"https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/forme-organiche-oblique-1024x351.jpg 1024w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/forme-organiche-oblique-300x103.jpg 300w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/forme-organiche-oblique-768x263.jpg 768w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/forme-organiche-oblique-1536x526.jpg 1536w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/forme-organiche-oblique-610x209.jpg 610w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/forme-organiche-oblique-1080x370.jpg 1080w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/forme-organiche-oblique.jpg 1776w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>Forme pi\u00f9 organiche e pi\u00f9 oblique, quasi in omaggio al famoso architetto Hundertwasser, che dichiar\u00f2 guerra alla linea retta. Angoli arrotondati, forme tondeggianti, spirali, negli elementi di interfaccia, nei menu, negli sfondi, nelle illustrazioni. Caselle di input, profili, avatar\u2026 tutto stondato. Ma anche menu che si sviluppano in diagonale, separatori e sezioni fuori dall&#8217;ordine della perpendicolarit\u00e0.<\/p>\n<h3 id=\"Missione-Visione-Promessa\">11) Missione, Visione, Promessa<\/h3>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-2733 size-full\" src=\"https:\/\/www.addlance.com\/wp-content\/uploads\/2018\/02\/valori-promessa-missione.jpg\" alt=\"\" width=\"1066\" height=\"440\" srcset=\"https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/valori-promessa-missione.jpg 1066w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/valori-promessa-missione-300x124.jpg 300w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/valori-promessa-missione-1024x423.jpg 1024w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/valori-promessa-missione-768x317.jpg 768w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/valori-promessa-missione-610x252.jpg 610w\" sizes=\"(max-width: 1066px) 100vw, 1066px\" \/><\/p>\n<p>Prima il <strong>contenuto<\/strong> o prima il <strong>design<\/strong>? Il mondo dei creativi, non solo del Web, \u00e8 stato per lungo tempo ossessionato da questo dilemma. Per risolvere l&#8217;annosa questione, ci viene in soccorso lo studio dei principi del marketing: partire dalla Visione dell&#8217;azienda, dai suoi Valori, la Missione, la Promessa Offerta, inquadrare il tutto in una Proposta di Valore (Value Proposition) aiuta il Web Designer a scegliere quali soluzioni adottare.<\/p>\n<p>I princ\u00ecpi del marketing, infatti, forniscono un quadro per tutti gli altri processi decisionali e, dopotutto, anche i marchi sono fondati su princ\u00ecpi: c&#8217;\u00e8 sempre sotto una visione, una missione, una promessa. Ognuna di queste cose richiede credenze sottostanti per animarle, per renderle pertinenti per gli altri In altre parole: <strong>i princ\u00ecpi forniscono il perch\u00e9.<\/strong><\/p>\n<h3 id=\"A-B-test\">12) A\/B test<\/h3>\n<p><strong><img decoding=\"async\" class=\"alignright wp-image-2731 size-full\" src=\"https:\/\/www.addlance.com\/wp-content\/uploads\/2018\/02\/split-test-schema-conversion-rate-it.png\" alt=\"\" width=\"520\" height=\"650\" srcset=\"https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/split-test-schema-conversion-rate-it.png 520w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/02\/split-test-schema-conversion-rate-it-240x300.png 240w\" sizes=\"(max-width: 520px) 100vw, 520px\" \/><\/strong><\/p>\n<p>Invece di rimanere in \u201cbalia\u201d dei gusti estetici del proprio pubblico, i designer possono testare versioni diverse di un progetto, per vedere quale funziona meglio, quale converte di pi\u00f9.<\/p>\n<p>La tecnica di testare diverse versioni di una pagina Web su campioni di pubblico reale, si chiama test A\/B, anche detto Split Test.<\/p>\n<p><strong>Per un A\/B test che si rispetti comincia da questi principi:<\/strong><\/p>\n<ul>\n<li>Importanza: testa prima di tutto le cose pi\u00f9 importanti (ad esempio la headline in testa alla pagina)<\/li>\n<li>Granularit\u00e0: non fare troppe modifiche. La modifica di pi\u00f9 elementi render\u00e0 quasi impossibile definire quale variabile sta ottenendo risultati positivi o negativi<\/li>\n<li>Sovrapposizione: mantieni la semplicit\u00e0, esegui un test alla volta per non inquinare i risultati<\/li>\n<li>Rilevanza: spesso \u00e8 bene cominciare a testare la pagina con pi\u00f9 traffico, un risultato statisticamente rilevante arriver\u00e0 prima<\/li>\n<\/ul>\n<p>Non vedere un\u00a0 test A\/B come una difficolt\u00e0 insormontabile. Pu\u00f2 essere una esperienza molto gratificante dato che alla fine, stai soddisfacendo il cliente guidando il suo traffico e incoraggiando le conversioni. In questa ottica, anche dal punto di vista del Web Design <strong><em>l\u2019A\/B testing<\/em><\/strong>\u00a0sar\u00e0 una tendenza in ascesa nel 2018.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Trends del web design 2018: ecco cosa andr\u00e0 di moda quest&#8217;anno e dove si sta spostando la richiesta del mercato. Excursus tra linee curve, animazioni, grottesco<\/p>\n","protected":false},"author":6,"featured_media":2740,"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,11],"tags":[31],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/posts\/2632"}],"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=2632"}],"version-history":[{"count":2,"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/posts\/2632\/revisions"}],"predecessor-version":[{"id":14014,"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/posts\/2632\/revisions\/14014"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/media\/2740"}],"wp:attachment":[{"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/media?parent=2632"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/categories?post=2632"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/tags?post=2632"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}