{"id":7808,"date":"2020-02-06T10:39:00","date_gmt":"2020-02-06T09:39:00","guid":{"rendered":"https:\/\/www.addlance.com\/blog\/?p=7808"},"modified":"2021-02-17T23:32:26","modified_gmt":"2021-02-17T22:32:26","slug":"grafica-web","status":"publish","type":"post","link":"https:\/\/seven.addlance.com\/beta\/blog\/grafica-web\/","title":{"rendered":"Grafica Web, scopri il Design interattivo su code cards"},"content":{"rendered":"\n<div class=\"wp-block-image is-style-default\"><figure class=\"alignright size-medium\"><img decoding=\"async\" width=\"300\" height=\"172\" src=\"https:\/\/www.addlance.com\/wp-content\/uploads\/2020\/01\/QR-code-300x172.jpg\" alt=\"grafica web\" class=\"wp-image-7814\" srcset=\"https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2020\/01\/QR-code-300x172.jpg 300w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2020\/01\/QR-code-1024x586.jpg 1024w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2020\/01\/QR-code-768x440.jpg 768w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2020\/01\/QR-code-1536x879.jpg 1536w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2020\/01\/QR-code-610x349.jpg 610w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2020\/01\/QR-code-1080x618.jpg 1080w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2020\/01\/QR-code.jpg 1920w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><figcaption>Grafica web, nuove frontiere: il web design interattivo su code cards<\/figcaption><\/figure><\/div>\n\n\n\n<p>Le <strong><em>code cards <\/em><\/strong>sono sempre pi\u00f9 utili per la navigazione che mira alla vendita. Si collegano subito ai siti, che <strong>trattengono il cliente con una grafica web dinamica ed interattiva.<\/strong> Scopri tutto quel che c&#8217;\u00e8 da sapere sul <em>design<\/em> interattivo, se vuoi diventare esperto di grafica per sito web.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\">Code cards, come sono fatte e perch\u00e9 usarle<\/h2>\n\n\n\n<p>Tutti ne maneggiamo una prima o poi. Le <em>code cards<\/em> sono tessere di plastica che ci vengono regalate come &#8220;chiave&#8221; per accedere digitalmente ad un prodotto o a un servizio. Questo avviene grazie al codice &#8220;QR&#8221; che \u00e8 stampato sopra e contiene <strong>informazioni crittografate<\/strong> a forma di quadrato.<strong> <\/strong>Il codice d\u00e0 una risposta rapida alle nostre ricerche in rete, collegandoci ai siti web. L&#8217;accesso online avviene tramite lo <em>smartphone<\/em>, che scannerizza il codice della carta con la fotocamera.&nbsp; Ma si pu\u00f2 usare anche una <em>App<\/em> specifica. I preziosi quadratini bianconeri che contengono i QR sono comparsi in Italia nel 2000, <strong>evoluzione dei codici a barre,<\/strong> che erano invece formati da strisce verticali numerate. <\/p>\n\n\n\n<p>I <strong>QR <em>code<\/em><\/strong> sfondarono subito nel <em>fashion<\/em> Made in Italy, catturando i lettori di riviste <em>glamour,<\/em> assaliti dalla voglia di saperne di pi\u00f9 sui <em>brand<\/em>. A quei tempi venivano stampati negli angoli delle pagine pubblicitarie del prodotto o dei manifesti ed erano statici. Includevano una sola <strong>short URL<\/strong>, che indirizzava velocemente l&#8217;utente nel web, su siti  graficamente intriganti. <\/p>\n\n\n\n<p>Presto, tra le maglie della grafica web, nacque una grafica di sito web dedicata proprio agli utenti di QR code. Che finirono poi stampati su speciali cards e\/o regalate ai clienti per gli usi pi\u00f9 diversi. Per esempio:<\/p>\n\n\n\n<ul><li><em>Badge<\/em> aziendali collegati a servizi per i dipendenti <\/li><li>Tessere associative collegate agli eventi<\/li><li><em>Fidelity cards<\/em> di attivit\u00e0 commerciali per info sui&nbsp; prodotti e <em>news<\/em> sugli sconti<\/li><li><em>Gift<\/em> per regalare pacchetti vacanze, prodotti di bellezza, servizi<\/li><li><em>Key cards<\/em> di Musei e Hotel, che rimandano ad info sui servizi turistici.<\/li><\/ul>\n\n\n\n<p>Poi \u00e8 entrato in scena il <strong>codice QR dinamico<\/strong>. E&#8217; bidimensionale e &#8220;quick response&#8221;, pi\u00f9 facile da gestire, sia dal pubblico, sia dalle aziende. La code card con codice QR dinamico \u00e8 diventata, cos\u00ec, uno <strong>strumento unico<\/strong> e personale. Si associa anche ad un unico prodotto, costruendo le info sui <strong>gusti del cliente<\/strong>, sempre in evoluzione. <strong>Contiene molte pi\u00f9 informazioni<\/strong>, ed \u00e8 scaricabile in versione vettoriale o <em>bitmap.<\/em> <\/p>\n\n\n\n<p class=\"has-text-align-center\">Leggi anche <a href=\"https:\/\/www.addlance.com\/blog\/aumentare-il-tasso-di-conversione\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"5 Consigli di Visual Marketing per aumentare il tasso di conversione (apre in una nuova scheda)\">5 Consigli di Visual Marketing per aumentare il tasso di conversione<\/a><\/p>\n\n\n\n<p>La <em>code card<\/em> oggi \u00e8 diventata anche <strong>strumento di marketing<\/strong>: consente infatti di controllare le prestazioni del codice sull&#8217;utente e l&#8217;impatto dei siti web collegati. Raccogliendo i dati si costruiscono <strong>campagne pubblicitarie  mirate<\/strong>, migliorando la grafica web. Leggi di seguito quel che c&#8217;\u00e8 da sapere sul <em>Web Design<\/em> interattivo su <em>code cards<\/em>!<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"842\" src=\"https:\/\/www.addlance.com\/wp-content\/uploads\/2020\/01\/QR-code-app-1024x842.jpg\" alt=\"grafica web QR code\" class=\"wp-image-7815\" srcset=\"https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2020\/01\/QR-code-app-1024x842.jpg 1024w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2020\/01\/QR-code-app-300x247.jpg 300w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2020\/01\/QR-code-app-768x631.jpg 768w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2020\/01\/QR-code-app-610x501.jpg 610w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2020\/01\/QR-code-app.jpg 1050w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>grafica sito web e code cards<\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Il web design interattivo su code cards, come crearlo<\/h2>\n\n\n\n<p>Grafica web e <em>code cards:<\/em> sei interessato e vuoi sapere di pi\u00f9 sul <em>design<\/em> interattivo?. Ecco alcune dritte per crearlo:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Decidi il codice in base alla funzione del sito web che sar\u00e0 collegato<\/h3>\n\n\n\n<p>Per esempio se \u00e8 un:<\/p>\n\n\n\n<ul><li><strong>sito aziendale<\/strong>, dove i clienti possono trovare informazioni utili, risorse gratuite, <em>coupon<\/em> o una pagina di destinazione di servizi. Ideale per promuovere l&#8217;<em>e-commerce<\/em> o un servizio professionale. Oppure per aumentare il numero di abbonati email, se gestisci un <em>magazine<\/em>. Gli utenti accedono ad una <em>landing page<\/em> con informazioni e risorse gratuite in cambio del loro indirizzo email<\/li><\/ul>\n\n\n\n<ul><li> <strong>una pagina di archiviazione o di &#8220;atterraggio<\/strong>&#8220;,  in cui gestisci contenuti messi a disposizione dell&#8217;utente, come FAQ, immagini <em>gif<\/em>, video di Youtube,&nbsp; profili <em>social.<\/em> Adatto per le Associazioni<\/li><\/ul>\n\n\n\n<ul><li><strong>Google Maps<\/strong>. Il codice QR rimanda il cliente che ha scansionato il codice al luogo che gli proponi, connettendolo al relativo sito per le info. Utile per il <em>travel<\/em> e il turismo eno-gastronomico, se gestisci un bed&amp;breakfast<\/li><\/ul>\n\n\n\n<p class=\"has-text-align-center\">Leggi anche<a href=\"https:\/\/www.addlance.com\/blog\/geomarketing\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" Aumentare i clienti usando il Geomarketing  (apre in una nuova scheda)\"> Aumentare i clienti usando il Geomarketing <\/a><\/p>\n\n\n\n<ul><li>Caso di  <strong>vCard personale,<\/strong> che ha soppiantato il vecchio biglietto da visita. Si tratta di una <em>business card<\/em> online e rimanda ai siti web con tutte le informazioni professionali che ti riguardano: portfolio lavori, <em>storytelling<\/em> sul <em>brand<\/em>, blog che gestisci, pagine <em>social<\/em><\/li><\/ul>\n\n\n\n<ul><li><strong>Negozio online<\/strong> da cui scaricare le <em>App <\/em>che hai inventato. <\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.addlance.com\/wp-content\/uploads\/2020\/01\/giftcards-1024x576.jpg\" alt=\"grafica web \" class=\"wp-image-7819\" srcset=\"https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2020\/01\/giftcards-1024x576.jpg 1024w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2020\/01\/giftcards-300x169.jpg 300w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2020\/01\/giftcards-768x432.jpg 768w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2020\/01\/giftcards-610x343.jpg 610w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2020\/01\/giftcards-1080x608.jpg 1080w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2020\/01\/giftcards.jpg 1280w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>code cards e gift cards per gli acquisti nel web<\/figcaption><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">2. Costruisci il codice QR da collegare ai siti web<\/h3>\n\n\n\n<p>Col <strong>generatore di codici <\/strong>costruisci il tuo codice QR, incorporando le URL dei siti web in cui vuoi portare i clienti. Piattaforme come <strong>uQR<\/strong> ti possono aiutare. Scaricalo poi come <em>file<\/em> di immagine <em>raster <\/em>e scansionalo con i lettori <strong>Android<\/strong> e <strong>iPhone<\/strong>, per assicurarti che reindirizzi effettivamente ai siti scelti. Tieni presente che anche la grafica del codice si pu\u00f2 personalizzare: per esempio con l&#8217;aggiunta di un logo al centro o con la modifica del colore. Questo rafforza l&#8217;identit\u00e0 del <em>brand<\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Progetta la <a href=\"http:\/\/www.addlance.com\/s\/grafica-sito-web\">grafica interattiva<\/a> del sito web da collegare alla code card<\/h3>\n\n\n\n<p>Sei pronto per progettare la grafica  dinamica per i siti web collegati alla tua <em>code card<\/em>. Secondo Viget:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p><em>La grafica interattiva aumenta la comprensione del prodotto nel pubblico<\/em><\/p><\/blockquote>\n\n\n\n<p>Questo perch\u00e9 fornisce <strong>molte informazioni in un breve lasso di tempo<\/strong>: un risultato notevole per le forniture online! Ecco qualche esempio di sito web che sfrutta con successo il <em>design<\/em> interattivo connesso alla <em>code card<\/em>:<\/p>\n\n\n\n<ul><li><strong>Species in Pieces<\/strong>, contiene carte dinamiche raffiguranti 30 specie di animali in via di estinzione. Il <em>Web Design <\/em>interattivo su&nbsp;<em>code cards<\/em> offre ai visitatori un&#8217;anteprima dei prodotti facendo lampeggiare le risposte alle domande di codifica.&nbsp;Catturati dall&#8217;animazione, i navigatori sono incoraggiati a scorrere le pagine ed esplorare l&#8217;intero sito<\/li><\/ul>\n\n\n\n<ul><li><strong>One Design Company<\/strong>,  per attirare subito l&#8217;attenzione dell\u2019utente sceglie direzioni diagonali di scorrimento e animazioni giocose. Offre servizi di progettazione ai visitatori che hanno usato il <em>code<\/em><\/li><\/ul>\n\n\n\n<ul><li><strong>MailChimp<\/strong>, usa la grafica web interattiva per congratularsi con i clienti che hanno programmato una campagna promozionale di e-mail <\/li><\/ul>\n\n\n\n<ul><li>La<em>&nbsp;landing page<\/em> &#8220;<strong>Your Plan, Your Placet<\/strong>&#8221; di Google,&nbsp;offre info agli utenti sui modi pi\u00f9 semplici per risparmiare energia. Le sezioni hanno piccoli pulsanti animati. Passando con il mouse su ciascun pulsante, si ingrandiscono per enfatizzare il contenuto.&nbsp;In questo modo si riducono i tempi di caricamento e l&#8217;utente non sente il bisogno di abbandonare subito la ricerca<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"980\" height=\"730\" src=\"https:\/\/www.addlance.com\/wp-content\/uploads\/2020\/01\/species-in-pieces.png\" alt=\"\" class=\"wp-image-7816\" srcset=\"https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2020\/01\/species-in-pieces.png 980w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2020\/01\/species-in-pieces-300x223.png 300w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2020\/01\/species-in-pieces-768x572.png 768w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2020\/01\/species-in-pieces-610x454.png 610w\" sizes=\"(max-width: 980px) 100vw, 980px\" \/><figcaption>il web design interattivo di Species in Pieces<\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Il web design interattivo su code cards, ultimi consigli<\/h2>\n\n\n\n<p>Sei deciso a progettare il sito web interattivo seguendo le nuove tendenze del design UX. Segui gli ultimi consigli da seguire per un sito efficace:<\/p>\n\n\n\n<ul><li>assicurati di <strong>non distogliere i visitatori dal loro scopo.<\/strong> La maggioranza delle aziende vuole che gli utenti vadano nel <em>form<\/em> dei contatti per inviare il modulo con i propri dati. Oppure, invitandoli all&#8217;azione, che riempiano il carrello e procedano agli acquisti. Se la grafica di animazione \u00e8 troppo spinta, distoglie dagli obbiettivi. Non progettare elementi interattivi che impediscano di completare queste azioni<\/li><\/ul>\n\n\n\n<ul><li><strong>Integra Google Analytics<\/strong> nella costruzione del codice, per avere una migliore esperienza di monitoraggio del traffico nel sito. I dati raccolti saranno utili per programmare le campagne di marketing e aumentare le vendite<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.addlance.com\/wp-content\/uploads\/2020\/01\/MailChimp.jpg\" alt=\"\" class=\"wp-image-7817\" srcset=\"https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2020\/01\/MailChimp.jpg 1024w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2020\/01\/MailChimp-300x150.jpg 300w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2020\/01\/MailChimp-768x384.jpg 768w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2020\/01\/MailChimp-610x305.jpg 610w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>il web design interattivo di MailChimp<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusioni<\/h2>\n\n\n\n<p>Hai scoperto di pi\u00f9 sul <em>Web Design<\/em> interattivo su <em>code cards<\/em>. Se hai voglia di offrire un&#8217;esperienza di navigazione avanzata per far crescere un <em>business<\/em>, fatti subito avanti. Il mondo della grafica web ti aspetta!<\/p>\n    \t","protected":false},"excerpt":{"rendered":"<p>Le nuove frontiere della grafica web a portata di ogni business? Il QR Code che ti aiuta nella strategia di marketing a catturare il cliente. Scopri come fare <\/p>\n","protected":false},"author":6,"featured_media":7815,"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":[20,16],"tags":[46,31],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/posts\/7808"}],"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=7808"}],"version-history":[{"count":1,"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/posts\/7808\/revisions"}],"predecessor-version":[{"id":10679,"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/posts\/7808\/revisions\/10679"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/media\/7815"}],"wp:attachment":[{"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/media?parent=7808"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/categories?post=7808"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/tags?post=7808"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}