fbpx

L'importanza della grafica sul web

L'importanza-della-grafica-web-sul-web

Ciao sono Giada. Sono un web designer e grafico e mi occupo di siti web, grafica on line e off line.

Sarò sincera: ci ho messo un po’ per trovare la mia strada. Ho provato due differenti facoltà universitarie, prima di capire che era la creatività e le sue espressioni che mi interessavano. 

Sul web trovi centinaia di risorse, Tools, blog e video guide che spiegano cosa sia la grafica, come creare un banner pubblicitario, come creare le copertine per i tuoi social network o ancora come scontornare un’immagine. Lo svantaggio è che seguire tante video guide differenti, è più dispersivo. Organizzare tutte le risorse ed i metodi differenti che trovi online, ti lasciano sempre quel senso di mancanza e di carenza, generalmente definita lacuna costante. In questo mestiere, quello che conta è avere un tuo metodo o trovarne uno che vada bene per te.

Per questo, dopo diversi anni, ho trovato il mio modo di lavorare e progettare e ho capito quanto ad oggi mancasse un blog interamente dedicato alla progettazione delle immagini rivolte esclusivamente al web, che tramite articoli e video guide aiutasse, chi come te, ha un’attività e vuole curarne l’aspetto grafico e chi ha un progetto, come l’apertura di un blog personale o sito web, e non sa da dove iniziare per rendere accattivante e funzionale una pagina web.

Quando parliamo di grafica mi riferisco all’aspetto visivo della comunicazione. Quando parlo di comunicazione visiva mi riferisco alla trasmissione di un messaggio tramite un’immagine.

L’emozione che ci suscita un poster pubblicitario o le immagini presenti su un sito web con i suoi colori ed elementi grafici, non è mai casuale, ma sempre intenzionale e strategico il risultato che si vuole ottenere. Infatti, è scientificamente provato che noi ricordiamo molto di più quello che vediamo piuttosto che quello che leggiamo. Abbiamo detto che la cura dell’aspetto grafico non è mai casuale. Un’azienda, un Brand, grazie all’aiuto di un grafico ed esperto di comunicazione visiva,  traduce in immagine i suoi valori legati alla personalità e all’identità di quello di cui si occupa.  Prima di approfondire i concetti e gli elementi che caratterizzano la grafica, ti mostro alcuni esempi, i miei preferiti perché geniali, di campagne pubblicitarie veicolate tramite banner e poster, di tre colossi che fanno della comunicazione visiva la loro strategia di marketing più efficace per catturare l’attenzione:

Volkswagen pubblicizza la funzione di assistenza al parcheggio esaltandone la precisione e l’affidabilità che caratterizza le sue auto. L’immagine dell’istrice tra le delicate buste contenenti i pesci rossi è semplicemente geniale!

Quando parliamo di comunicazione visiva Ikea è sempre un passo davanti agli altri. Geniali i banner che l’azienda lancia sul web dentro il “manuale d’amore” per festeggiare San Valentino con una campagna che ha affrontato i problemi che si possono verificare in una relazione, suggerendo semplici ed efficaci soluzioni di coppia come le immagini che seguono:

E in ultimo un Brand italiano che ci fa sognare e che è entrato nelle nostre case come sinonimo di famiglia, tradizione d artigianalità. Questi sono i tratti distintivi su cui si fonda ogni aspetto visivo della Mulino Bianco.

Dal 1975  l’azienda in ogni canale in cui veicola i suoi valori, dagli spot tv alla grafica stampata, non racconta mai di un’azienda produttiva di biscotti o merendine, ma ci ha trasmesso un ideale che colpisce perfettamente il target: famiglie, adulti e bambini che ritrovano nel momento colazione e merenda il calore della famiglia e della tradizione della nostra terra.

Il ruolo del grafico che lavora sul web

In questo articolo non mi focalizzo sulla grafica dettagliando gli elementi che compongono l’immagine coordinata di un’azienda (brand identity, logo etc.) perchè ho deciso di focalizzarmi sul ruolo del grafico che lavora principalmente per il web, che conosce le regole della comunicazione visiva e riesce ad applicarle, ma progetta le immagini rivolte esclusivamente al web (sito, social network, blog, banner per adv online) partendo già da un lavoro commissionato da un cliente che ha già la sua identità aziendale, la sua immagine coordinata, il suo logo e dei valori da trasmettere. Risulta necessario che questa figura dovrà necessariamente avere una conoscenza delle tecniche di composizione e progettazione grafica, utilizzando software come Photoshop e/o Illustrator possedendo, infine, spiccate doti comunicative e creative.

I primi passi per una comunicazione visiva sul web

L’impatto visivo determina la prima impressione dell’utente. Ancor prima di leggere i contenuti presenti su un sito web, l’occhio scorre velocemente la pagina e viene colpito dai colori e dalle immagini. Inutile dire che se un sito web non cura l’aspetto grafico o se le immagini pubblicate sui social network aziendali, non sono di forte impatto visivo e creativo, il rischio che il visitatore ci abbandoni presto è molto alto.

Ricorda che la grafica influisce sulla percezione del tuo utente. Non è un compito facile quello di trasmettere dei valori aziendali già consolidati sotto forma di immagini.

  1. Studiare quale è il target di riferimento del nostro cliente o quello al quale ti rivolgi se stai per lanciare un business online
  2. Definire i colori principali da utilizzare quando definiamo il layout per un sito web o progettiamo di creare una serie di post per Facebook o Instagram. Solitamente i colori sono sempre quelli già presenti nel logo con l’aggiunta di un terzo colore in contrasto con gli altri. I colori, infatti generano una risposta psicologica, hanno un significato nella varie culture e rappresentano un messaggio.
  3. Definire i caratteri tipografici per il nostro progetto web. Ti consiglio di studiare le famiglie di font. I font non sono tutti uguali e, anche se spesso non ce ne accorgiamo, riescono a trasmetterci emozioni distinte. Anche in questo caso la scelta potrà basarsi sul font già scelto dal cliente per il suo logo, se leggibile, o si caratterizza per un studio legato alla leggibilità e riconoscibilità. Sul web vengono usati principalmente font senza grazie, quindi senza ornamentali alle estremità delle lettere (tipiche del famoso Times New Roman), perchè più leggibili. Potrei dirti di usare i caratteri con le grazie per i titoli dei tuoi testi, sia per banner o testi per sito web, perché sono brevi e generalmente stanno in un’unica riga e font senza grazie per il restante testo.

Definiti questi primi passi fondamentali, puoi focalizzare la tua attenzione sui successivi.

Formati grafici di salvataggio immagini per il web

Facciamo subito una distinzione tra immagini Bitmap e vettoriali, così da comprendere perché scelgo un formato piuttosto che un altro.

Le immagini Bitmap, come le nostre fotografie, sono immagini descritte al computer punto per punto, i pixel. Non si possono scalare senza perdita di qualità: se ingrandite oltre la loro dimensione originale ti accorgi che sgranano. 

Immagini vettoriali. Queste immagini sono descritte secondo punti matematici. Sono scalabili a piacimento senza perdita di qualità. Sono adatte per disegni tecnici o loghi.

Formato .Jpg: Formato bitmap, compresso e che viene usato principalmente per il salvataggio di immagini fotografiche. La compressione è la perdita di qualità  progressiva.

Formato .Png: Formato bitmap, che gestisce una gamma di colori fino a 24 bit (quindi maggiore profondità e resa), canali di trasparenza, livelli e molto altro. Non è un formato compresso, non perde qualità e viene usato se l’immagine che stai creando contiene principalmente forme, loghi, parti vettoriali ed icone, perchè ne esalta la qualità.

Come salvare i tuoi lavori per il web?

Ti ho descritto i formati grafici per farti capire che se stai progettando delle immagini per Facebook in Photoshop, ogni post creato avrà sicuramente una parte di immagine fotografica ed una testuale. Risulta consigliabile salvare la tua immagine, se presente molto testo e parti vettoriali, in formato .Png per ottenere una maggiore resa e qualità. Se stai, invece, realizzando una galleria immagini per un sito web, dopo avere ricercato immagini Creative Commons o avere pagato per scaricarle (hai un account a pagamento), ogni foto andrà salvata in formato .Jpg ottimizzato. Parleremo successivamente di ottimizzazione immagini per il web.

Scaricare immagini per il tuo progetto web

Non esistono immagini perfette da scaricare ma solo immagini giuste per il target al quale ti rivolgi. Ricercare le giuste immagini contribuisce a rafforzare l’identità aziendale ed il messaggio da trasmettere. Se stai per lanciare uno shop online risulta preferibile scattare tramite una macchina fotografica professionale le foto dei tuoi prodotti, utilizzando uno sfondo bianco che ne risalta le qualità. Se stai progettando, invece, un sito web per te stesso o un cliente e hai necessità di inserire dei banner con foto a grandezza fissa o delle gallerie foto generiche da alternare (utilizzate moltissimo per chi si occupa di fitness, beauty, food, sport, medical, glamour), nasce l’esigenza di scaricare immagini Creative Commons (libere da attribuzione d’autore) ad alta risoluzione o affidarsi alle banche fotografiche gratuite da cui scaricare foto di alta qualità per i vostri materiali. Ti consiglio di seguito quelle che uso io:

  • Freepik: banca fotografica molto utile soprattutto per immagini vettoriali, che ti consente di avere a disposizione un’ampia scelta di immagini gratuite con il solo obbligo di dover accreditare l’autore della illustrazioni.
  • Pixabay: Centinaia di migliaia di foto, immagini vettoriali e illustrazioni gratuite. Si tratta di una risorsa ottima per chi desidera ricercare immagini da riutilizzare gratuitamente, senza citare l’autore.

Ricorda di leggere attentamente prima di scaricare un’immagine tramite queste banche digitali, se la foto è libera da attribuzione d’autore. Non vale la pena di correre il rischio di dover rimuovere le immagini dal sito e pagare una multa per aver usato foto senza averne il diritto.

Personalizzare e manipolare le immagini scaricate

Ogni progetto web che si differenzia da un altro, non può prescindere dalla personalizzazione grafica dei propri contenuti. Mi riferisco alle immagini scaricate per essere usate come sfondo del proprio sito web o a quelle che usiamo come sfondo per creare post per i social network ed ancora a quelle usate come anteprima di un video Youtube etc. La personalizzazione di una immagine scaricata si esegue con le apposite applicazioni di trattamento fotografico come Photoshop, oppure con app grafiche online gratuite come Canva, PicMonkey etc.

Da buon grafico  (chiara deformazione professionale!) sconsiglio di utilizzare le piattaforme gratuite messe a disposizione dal web sopra citate perché seppur consentono di creare grafiche strabilianti e se usate bene di forte impatto, non rendono originale e del tutto personale l’immagine realizzata e rischia di essere tutto frutto di un template predefinito.

Ti consiglio, piuttosto, di approfondire l’uso di Photoshop per la creazione di immagini per il web, perché ti dà una maggiore gratificazione in termini di originalità e creatività del risultato ottenuto, ma soprattutto perché chi vuole intraprendere un percorso di studio verso la progettazione autonoma di grafiche per il web non può escludere lo studio di questo software (diventerà il tuo pane quotidiano!)

Se avete qualcosa di fresco da condividere e originale, non bisogna farlo in modo identico su tutte le piattaforme. Ricorda di personalizzare le immagini per il sito web, ma di creare una strategia di condivisioni di immagini differenti sui social network. Approfondirò nei successivi video articoli, tutte le tipologie di immagini e i loro canali di utilizzo.

Nasce la mia Community digitale

L’idea nasce dall’esigenza attuale di poter mettere a disposizione di quante più persone possibili determinate conoscenze, nello specifico quelle che riguardano la grafica web con Photoshop. Non m i riferisco a tutorial su Photoshop, ne esistono una marea su YouTube, ma mi riferisco alla creazione di immagini di impatto per il web con Photoshop, per i social network o per un sito web.

Perché nasce adesso?

Molte persone non si rendono conto di ciò che stiamo vivendo o magari hanno paura di trasferire quella che ritengono una passione in un’attività online a tutti gli effetti. Pensaci! Tira fuori le tue attitudini, lanciati ma studia come fare. 

Siamo nell’epoca del digitale e più che mai è importante farsi largo su internet, lo abbiamo visto con tutte le attività che non avendo uno sbocco sul web, ahimè sono state colte di sorpresa, durante il lockdown, e hanno dovuto chiudere. 

Chi di voi ha una passione, un’attività lavorativa o si appresta a lanciare un business personale sul web e non ha minimamente idea e competenze per curare l’aspetto visivo quindi grafico dei propri canali social, del proprio blog o sito web?

E’ vero! Non tutte le attività si possono portare sul web, ma tutti, o quasi usiamo i social come privati, perché non dovremmo portarci anche la nostra attività? Avere un sito internet performante è buon inizio, ma la folla, come sappiamo, sta sui social. Avere un elemento grafico di qualità che possa attirare l’attenzione degli utenti, non di tutti ma di quelli disposti a seguirti e che appartengono al tuo target, ti farà già essere un passo avanti alla concorrenza.  

A chi si rivolge?

Bene, questa community è per tutti coloro che hanno una vocazione digital, che hanno un’attività o stanno pensando di lanciarne una e vogliono pubblicizzarla al meglio sul web, imparando i trucchi necessari per realizzare grafiche ad hoc per i social o per i siti web, o per coloro che, come me 10 anni fa, avrebbero voluto una guida, un punto di riferimento, con pregi, difetti ed una vita incasinata, come posso averla io!

Perché seguire la Community?

Ti consiglio di seguire la community perché andrò periodicamente a postare video guide e spunti sulla grafica web, inizieremo a parlare della cura dell’aspetto visivo su YouTube o Facebook, delle immagini per un sito web e per i più esperti, un argomento molto richiesto, “come si progetta un layout grafico per un sito web” da proporre ai nostri clienti, partendo da zero e con Photoshop.

Iscriviti qui

 

Conclusioni

Hai capito che la scelta delle giuste immagini e grafiche per un uso destinato al web può influenzare direttamente il grado di attenzione o permanenza del tuo potenziale utente su un sito o sul canale social e, di riflesso, risulta chiaro che le immagini aiutano a far crescere il traffico, i click e la conversione.

Una delle maggiori difficoltà che riscontro nel nostro lavoro è quello di far comprendere al mio cliente quanto sia importante utilizzare immagini di qualità in ogni progetto di comunicazione. Le immagini personalizzate e manipolate in genere le preferisco a quelle di archivio perché più autentiche, ma solo se sono di ottima qualità.

L’uso consapevole ed originale di immagini e contenuti visivi migliora la presenza online, favorisce l’interazione con il proprio target e aumenta la riconoscibilità.

Scarica l'eBook gratuito "Introduzione alla grafica web con Photoshop" e inizia la lettura!

Ruoli, strumenti e risorse per il tuo progetto online

Condividi con i tuoi amici

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on google
Google+

Iscriviti alla Community Facebook

Consigli, risorse e aggiornamenti utili!