Grafica per il Web - Web Design Marketing Grafica Vettoriale

GRAFICA PER IL WEB
A cura di Massimiliano Camillucci

Massimiliano Camillucci - camilluccimultimedia.it
CHI SONO?
➤ Consulente Informatico e di
Innovazione Digitale.
➤ Libero professionista, lavoro
con Professionisti, Start-Up e
PMI.
➤ Mi occupo di Tecnologie
Interattive, Comunicazione
Web, Cloud e Digital
Marketing.
➤ Sono appassionato di Musica,
Videomaking e Gadget
Tecnologici.

1. CONTESTO: GRAFICA PER IL WEB
2. PROGETTARE GRAFICA PER PER IL WEB
3. STRUMENTI PER LA PROGETTAZIONE GRAFICA
4. PROGETTAZIONE IN TEAM
5. RISORSE UTILI E UX-CANVAS
A cura di Massimiliano Camillucci
GRAFICA PER IL WEB

COSA È “WEB"?
➤ Sito Web (WWW)
➤ Social Network (Instagram, Linkedin, Pinterest)
➤ App (Mobile, Web App)
➤ IoT (Internet of Things)

SITO WEB
➤ Il Sito Web è un insieme di una
o più pagine ipertestuali
➤ Il World Wide Web nasce al
CERN nel 1991
➤ Esistono circa 1.000.000.000 di
Siti Web
➤ Il Web è passato per diverse
rivoluzioni
➤ Il Sito Web oggi è un portale di
informazioni e servizi, e non
più solo una vetrina statica

SOCIAL
➤ I Social Network nascono come
“servizi web” (Siti Web)
➤ Oggi sono ecosistemi
informatici di Persone,
Informazioni, Computer, Siti
Web e Dispositivi
➤ I Social hanno rivoluzionato le
relazioni interpersonali e quelle
professionali
➤ I Social evolvono con una
velocità impressionante, e non
sempre è facile stare al passo

APP
➤ Le App sono Applicazioni Software
per dispositivi Mobili quali
Smartphone e Tablet
➤ Le App hanno rivoluzionato il
mondo del Software (e non solo), e
la modalità con cui gli utenti si
rapportano al concetto di Software
e Computer
➤ Le App hanno avuto una crescita
esponenziale e oggi sono più di 1,5
milioni
➤ Creare una App è sempre più
facile, ma allo stesso tempo il
mercato è sempre più competitivo
e dispersivo

IOT
➤ Il presente e il futuro di Internet
(e del Web) è nelle “cose”…
➤ IoT è l’acronimo di “Internet
delle cose” (Internet of Things),
filosofia informatica dove ogni
oggetto è collegato ad internet
➤ Oggi è sempre più realtà: ogni
elettrodomestico è connesso ad
internet, ed è possibile
controllarlo da remoto (da Web)
➤ Dove c’è “controllo”, c’è
interazione, dove c’è interazione
c’è bisogno di Grafica e
Comunicazione

COSA È’ LA GRAFICA PER IL WEB
➤ Web Design
➤ Graﬁca Vettoriale
➤ Composizione Fotograﬁca

WEB DESIGN
➤ “Grafica per il Web” è
sicuramente Web Design, ossia
la presentazione grafica di un
Sito Web e la costruzione di
tutti quegli elementi che
andranno a costituire il
“frontend”
➤ Immaginiamo ora di chiedere al
Web: “Cosa è la grafica per te?”
➤ … “Grafica” per il Web, è una
serie di oggetti informatici che
rappresentano immagini, linee,
forme e informazioni

GRAFICA VETTORIALE
➤ La Grafica Vettoriale è comune
al mondo Offline (serigrafia,
off-set) e al mondo Online
➤ È sinonimo di dettaglio,
definizione, precisione,
risoluzione
➤ Loghi, Font, Illustrazioni sono
spesso realizzati con questa
tecnica

COMPOSIZIONE FOTOGRAFICA
➤ È l’unione di fotoritocco,
fotomontaggio e graﬁca
vettoriale
➤ Anche questa attività
professionale vive sia nel
mondo Oﬄine che in quello
Online
➤ Poster, locandine, banner sono
spesso realizzati con questa
tecnica

INFORMATICA VS. MARKETING
➤ Comunicazione e Marketing
➤ Informatica, SEO e Machine Learning
➤ Teoria vs. Pratica

COMUNICAZIONE E MARKETING
➤ Grafica, Web Design e creatività
sono spesso a servizio e
supporto del Marketing e della
Comunicazione Aziendale
➤ Messaggi, Immagini, Loghi,
Campagne pubblicitarie, hanno
specifici obiettivi di Marketing e
Comunicazione
➤ Il “Grafico per il Web” dovrà
costruire progetti ad hoc per le
esigenze specifiche…

SEO E MACHINE LEARNING
➤ … d’altra parte però il web
nasce come “oggetto
informatico”, e quindi dalla
mente di ingegneri e scienziati
➤ Il “Grafico per il Web” dovrà
costruire progetti secondo le
specifiche tecniche di
sviluppatori software e vincoli
tecnologici
➤ Non solo: il web ti osserva.
Google ti osserva e cerca di
“leggere e comprendere” il
contenuto della tua
comunicazione grafica

PROGETTARE COMUNICAZIONE PER IL WEB
➤ Velocità
➤ Mobile Friendly
➤ Leggibilità e Accessibilità

VELOCITÀ’
➤ Il Web è veloce. Cresce, muta,
evolve
➤ L’utente è veloce, frettoloso e
distratto
➤ La connessione ad internet non
è altrettanto veloce nei diversi
contesti geograﬁci: nelle città è
velocissimo, nelle zone rurali è
fermo al 2000
➤ Il Progetto graﬁco per il Web
dovrà essere veloce, snello e
performate, sia
tecnologicamente che
psicologicamente

MOBILE FRIENDLY
➤ Il Web è Mobile
➤ Il Web è Smartphone, è App, è
Facebook, è Google
➤ Il Progetto Graﬁco per il Web
dovrà essere:
➤ “mobile friendly”, cioè fruibile
da Smartphone,
➤ “SEO friendly”, cioè piacere a
Google,
➤ Soprattutto “user friendly”,
piacere all’utente!

LEGGIBILITÀ E ACCESSIBILITÀ
➤ Il Progetto graﬁco per il Web
dovrà essere accessibile a tutti:
sia a chi dispone di uno
Smartphone di ultima
generazione, che chi utilizza un
vecchio computer con
risoluzioni obsolete,
➤ Dovrà essere accessibile anche
ai diversamente abili,
➤ Dovrà essere accessibile anche
ai “non umani”, alle
intelligenze artiﬁciali che
“leggono” i contenuti del Web.

RISOLUZIONE
➤ Pixel e HDPI
➤ JPG, PNG, SVG

PIXEL E HDPI
➤ I Pixel cambiano: sono sempre
più numerosi ed eﬃcienti;
sempre più piccoli, sempre più
luminosi
➤ Ottimo!
➤ …ottimo?
➤ Non tutti i dispositivi (mobile,
tablet, computer) hanno la
stessa evoluzione tecnologica
➤ Più pixel = più qualità = più
informazioni = immagini più
pesanti = tempi di caricamento
più lunghi = criticità

JPG, PNG, SVG
➤ Il Progetto Grafico dovrà
avvalersi in modo strategico
delle diverse tecnologie
disponibili per rappresentare
graficamente oggetti, immagini,
fotografie e contenuti:
➤ JPG: immagini di grandi
dimensioni,
➤ PNG: immagini con accuratezza
cromatica,
➤ SVG: oggetti grafici vettoriali
indipendenti dalla risoluzione,
e leggerissimi!

RESPONSIVE DESIGN
➤ Frammentazione
➤ Responsive Web
➤ Progettare Responsive

FRAMMENTAZIONE
➤ Abbiamo già introdotto la
problematica della presenza di
“diversi dispositivi” ad uso dei
diversi utenti del Web
➤ Non solo divers per tipologia:
Computer, Tablet e Smartphone
➤ Ma anche diverse dimensioni
di schermo, densità di pixel,
velocità di connessione, di
input (mouse, touch,
touchless)
➤ Non dimentichiamo i Sistemi
Operativi (Win, Mac, Linux)

RESPONSIVE WEB
➤ La soluzione corrente per
rispondere alla
frammentazione dei dispositivi
è nella parola “responsive”
➤ Responsive è il web “elastico” e
“plastico” che si adatta (quasi)
automaticamente alla
dimensione e risoluzione del
dispositivo da cui viene
visualizzato il contenuto.
➤ Ottimo… sì, ma non sempre è
semplice.

PROGETTARE RESPONSIVE
➤ Responsive è sinonimo di:
➤ Casistiche: è necessario scegliere
e deﬁnire i dispositivi target della
nostra comunicazione
➤ Griglie: i contenuti sono divisi in
griglie dinamiche che si
organizzano nello spazio a
disposizione
➤ Contenuti ad hoc: in alcuni casi
un contenuto mobile non è lo
stesso “servito” ad un desktop
➤ Manutenzione: le tecnologie
cambiano, gli utenti “evolvono”, i
target cambiano

OLTRE LA GRAFICA: USER EXPERIENCE (UX)
➤ Progettazione Lean
➤ Timeline e Funnel
➤ Coerenza Multi-Device

PROGETTAZIONE LEAN
➤ Marketing, Comunicazione,
Tecnologia, Frammentazione:
tanti, troppi vincoli e
condizionamenti
➤ Come realizzare progetti graﬁci
per il web senza impazzire?
➤ Approccio Lean: costruire in
funzione del “valore” per
l’utente ﬁnale
➤ Eliminare gli “sprechi”,
concentrarsi sul minimo
prodotto utile
➤ Aggiornare di continuo!

TIMELINE E FUNNEL
➤ È necessario progettare in
funzione del valore utile al
cliente ﬁnale, ma non solo:
➤ È necessario porsi la domanda:
➤ “Quando, in che momento
l’utente vedrà il contenuto?”
➤ E di seguito:
➤ “Cosa vorrà/potrà vedere
dopo?”
➤ Progettare in funzione della
Customer Journey e del Funnel
di Conversione

COERENZA MULTI-DEVICE
➤ Basta con i vincoli!
➤ No, purtroppo:
➤ L’utente premia la coerenza
Multi-Device nell’esperienza
d’utilizzo.
➤ Passando dal Computer, al
Tablet, alla App per
Smartphone, e addirittura
Smart-TV, l’utente vuole
sentirti “a casa”.
➤ Netﬂix è un esempio
eccellente di coerenza.

STRUMENTI PER LA PROGETTAZIONE GRAFICA
➤ Carta vs. Computer
➤ Tavoletta graﬁca
➤ Template e Canvas
➤ Illustrator
➤ Photoshop
➤ Canva.com
➤ Gimp
➤ Ispeziona Elemento

CARTA VS COMPUTER
➤ Come progettare i propri
contenuti per il Web?
➤ Contenuti per il Web = creare
contenuti sul computer? Non
sempre:
➤ Esistono diverse soluzioni e
strumenti per progettare,
testare e presentare i propri
contenuti per il web
➤ Wacom e Moleskine oﬀrono
soluzioni “crossover”.

TAVOLETTA GRAFICA
➤ Nota a tutti i professionisti di
Grafica e Video, la tavoletta
grafica è uno strumento
divertente e interattivo.
➤ Wacom è leader nella
produzione di hardware
dedicato, nonché di soluzioni
professionali per la firma
digitale grafometrica.
➤ Esistono soluzioni per tutte le
tasche.

TEMPLATE E CANVAS
➤ Template HTML e CSS, o
addirittura PSD per Photoshop
semplificano non poco la vita
del Grafico e del Web Designer
➤ Talvolta la semplificano fin
troppo, con il risultato che
molti siti web e contenuti web
si somigliano estremamente
➤ Quindi, un consiglio: partire da
un template è una scelta saggia
e furba… ma non abbiate paura
di “uscire dal seminato” e osare
qualcosa di originale

ILLUSTRATOR
➤ Un must per gli illustratori e i
grafici.
➤ È il software di grafica
vettoriale per antonomasia,
standard de facto
➤ Esistono alternative open-
source, come InkScape e altri
software più economici
➤ L’integrazione tra i vari prodotti
Adobe però è la vera “forza” che
fa la differenza nell’utilizzo dei
prodotti del marchio

PHOTOSHOP
➤ Il secondo standard de facto per
la grafica, nonché primo per la
composizione, fotoritocco e
fotomontaggio.
➤ Funzionalità sempre più
aggiornate lo rendono il
software ideale per la
progettazione grafica di
template web
➤ Offre anche soluzioni “Copia e
Incolla” per stili CSS partendo
dagli oggetti modellati
nitidamente sul software

CANVA.COM
➤ Applicazione Web molto
popolare, ricca di template e
modelli preconfezionati
➤ Pratica e veloce, molto utile per
prototipale e realizzare le
grafiche dell’ “ultimo
momento”
➤ Offre una buona esperienza via
sia Browser, che via App per
Smartphone
➤ Utile per avvicinarsi alla grafica,
ma non abusatene!

GIMP
➤ Soluzione Open-Source e Free
alternativa a Photoshop
➤ Molto poco pratico, ma ottimo
per gli entusiasti dell’Open-
Source
➤ Apre ﬁle PSD (Photoshop)
mantenendo una buona
compatibilità e possibilità di
modiﬁcarne elementi e
proprietà

ISPEZIONA ELEMENTO
➤ Strumento “nascosto” nei
Browser che utilizziamo tutti i
gironi
➤ Chrome oﬀre uno dei migliori
pannelli per Sviluppatori, molto
utile anche ai graﬁci e Web
Designer
➤ È uno strumento da “nerd” ma
una volta comprese le
funzionalità base è di una
comodità estrema
➤ Non solo per Web Designer, ma
in generale per “professionisti”
del Web.

GRAFICA E ANIMAZIONE: GIF E SVG
➤ Graﬁca Vettoriale e CSS
➤ GIF e Mobile

GRAFICA VETTORIALE E CSS
➤ “Eppur si muove”. Le animazioni,
se ben posizionate possono
arricchire notevolmente la User
Experience e il coinvolgimento
degli utenti.
➤ La graﬁca Vettoriale si presta per
questo scopo, grazie al CSS 3.0 e al
Javascript.
➤ SVGator è un ottima piattaforma
Web per creare piccole animazioni
➤ N.B. Il Web dinamico è il web della
pagine generate “on-demand”, da
non confondere con il Web
interattivo ed animato appena
citato.

GIF E MOBILE
➤ Gli anni ’80 sono tornati, e il
formato GIF è uno degli ultimi
regali di quel decennio ritrovato
➤ Sono tornate in scena come
“feticcio” digitale ma hanno
veramente spopolato nel mondo
della comunicazione informale (e
talvolta demenziale) dei Social
(fenomeno meme)
➤ Numerose App permettono di
realizzare brevi video e convertirli
in GIF
➤ Anche Photoshop e altri software
permettono facilmente la creazione
di GIF.

GRAFICA E WEB DESIGN: HTML E CSS
➤ HTML e CSS
➤ jQuery, Angular
➤ Template HTML/CSS
➤ Web dinamico vs. Statico

HTML E CSS
➤ Come anticipato, il Web nasce
come prodotto informatico e
scientifico
➤ Diventerà solo in seguito uno
dei più grandi e potenti
strumenti di Marketing
➤ HTML è il linguaggio di markup
che costituisce lo scheletro dei
contenuti di ogni pagina web
➤ Il CSS è il linguaggio che ne
definisce la formattazione, e
negli anni è diventato uno
strumento sempre più affine ai
grafici che agli informatici.

JQUERY, ANGULAR
➤ Sono due framework (librerie di
codice) Javascript che si
occupano:
➤ Della parte dinamica del Web,
ossia delle pagine con contenuti
costruiti on demand
➤ Della parte animata del Web,
con elementi che interagiscono
con l’utente nella dimensione
temporale
➤ Sono strumenti molto potenti,
ma allo stesso tempo molto
“tecnici” (linguaggi di
programmazione)

TEMPLATE HTML/CSS
➤ Già presentati nella sezione
“Software” per la progettazione
Grafica, ricordiamo ora la
possibilità di scaricare (o
acquistare) Templare grafici, e
quindi modelli, realizzati
direttamente in linguaggio
informatico:
➤ Html, CSS, Javascript
➤ Questi modelli pratici da
modificare per ottenere il
risoluto desiderato (spesso
progetto prima su Photoshop)

WEB DINAMICO VS. STATICO
➤ Come già anticipato, il Web
dinamico ha rivoluzionato il mondo
di Internet, creando siti Web che si
modellano in base alle necessità
dell’utente.
➤ Wordpress e il suo modello a Blog
ne è un esempio:
➤ Filtri su Categorie, Contenuti e Tag
permettono all’utente di trovare i
contenuti desiderati all’interno di
un Sito/Blog.
➤ Il Web statico sembrava sorpassato,
ma la richiesta di maggiore velocità
della pagine, lo ha riportato alla
luce.

PROGETTARE GRAFICA PER FACEBOOK
➤ Linee Guida:
https://www.facebook.com/business/learn/facebook-
page-basics

LINEE GUIDA: FACEBOOK
➤ Tutti i Social mettono a
disposizione una serie di “spazi”
per personalizzare le proprie pagine
Aziendali con immagini e grafiche
➤ Ogni social ha specifiche in pixel
che definiscono le dimensioni
ottimali per personalizzare tali
spazi
➤ Software come Photoshop
permettono di creare immagini e
grafiche con dimensioni specifiche
➤ Piattaforme come canva.com
mettono a disposizione modelli
pre-impostati alle dimensioni
ottimali

PROGETTARE GRAFICA PER UN VIDEO
➤ Margini e Risoluzione
➤ Animazione

MARGINI E RISOLUZIONE
➤ Il Web è Graﬁca, è dinamica, è
interazione ed è sempre più
VIDEO
➤ Il Video e il Web hanno una
relazione sempre meno complicata,
complici le connessioni internet
sempre più veloci e performanti
➤ Similmente ai requisiti di
Facebook, anche il Video ha i suoi
vincoli in Pixel
➤ Non solo: tenete sempre conto
degli ingombri di sottotitoli,
controlli di avanzamento e
risoluzione di visualizzazione

ANIMAZIONE
➤ L’animazione di elementi grafici
può essere delegata a diversi
strumenti:
➤ Una pagina web può essere
animata tramite CSS e
Javascript,
➤ In alternativa si può realizzare
un video con grafiche animate
da riprodurre nel nostro sito o
da caricare sui nostri Social
➤ After Effect è il software per
eccellenza per realizzare
“Motion Graphics”, ma molto
complesso e professionale

PROGETTAZIONE IN TEAM
➤ Contaminazione e Collaborazione
➤ Chi è "il Graﬁco”?
➤ Team Agile vs. Freelance

CONTAMINAZIONE, COLLABORAZIONE
➤ Abbiamo accennato alla
filosofia Lean (snello/magro)
➤ Un passaggio essenziale è il
Test ed il confronto con
l’Utente finale (Cliente) per
realizzare il “minimo prodotto
utile”
➤ Un Team con competenze ed
esperienze diversificate è il
contesto perfetto dove
proporre, creare, affinare ed
alleggerire un progetto
(software, grafico, sociale, etc).

CHI È "IL GRAFICO"?
Il “Graﬁco” nel mondo Web è:
➤ Web Designer (progettista)
➤ Social Media Expert
➤ Visual Designer
➤ Artista
➤ Marketing Operativo
➤ Copywriter
➤ Fotografo
➤ Videomaker
➤ …poi? Chirurgo?

TEAM AGILE VS. FREELANCE
➤ Il “Grafico” freelance non può e
non deve essere tutte le
competenze prima elencate.
➤ Il “Grafico” freelance deve
lavorare in Team,
➤ I Team devono essere Lean,
Agili e sapersi generare “on-
demand”,
➤ Coworking, Creative Hub e
Università sono alcuni contesti
dove è possibile lavorare con
questa filosofia modulare,
collaborativa fondata sulle
contaminazioni.

OBIETTIVI, CONTESTO, TARGET
➤ Progettazione in funzione del Marketing
➤ Il Web e la Conversione
➤ Personas
➤ Online vs. Oﬄine
➤ Mobile vs. Desktop
➤ Omnicanalità

“GRAFICA WEB”=F(MARKETING)
➤ Un approccio alla progettazione
graﬁca per il Web è:
➤ Progettare in funzione del
Marketing
➤ Non “alle dipendenze” del
settore Marketing, ma in
funzione agli obiettivi di
Marketing
➤ È necessario collaborare
attivamente con il responsabile
Marketing e costruire una
strategie di Comunicazione,
Contenuti e UX

IL WEB E LA CONVERSIONE
➤ Il Web Marketing e gli strumenti
di Web Marketing (Adwords,
Facebook Business, MailChimp,
etc) operano in funzione di
“obiettivi di conversione”
➤ L’acquisto su un E-Ecommerce,
l’iscrizione alla Newsletter, la
compilazione di un Form di
contatto, l’invio di una Mail, una
telefonata… sono tutti esempi di
Conversioni
➤ L’obiettivo del Marketing è
ottenere conversioni, ma
soprattutto misurare e
ottimizzare.

PERSONA CANVAS
➤ Per ottenere conversioni e
misurare l’eﬃcacia di una
strategia è necessario
individuare uno o più Target
➤ Per coinvolgere il proprio
pubblico è necessario sapere
con “Chi” stiamo parlando
➤ Diversi tipi di persone
rispondono a diversi linguaggi,
interessi, stimoli e bisogni
➤ La progettazione Graﬁca sul
Web deve essere progettata in
funzione delle “Personas” di
riferimento

ONLINE VS. OFFLINE
➤ Le “Personas” sono anche
persone in carne ed ossa.
➤ Le persone vivono (anche) nel
mondo “Offline” (per fortuna!!)
➤ La Grafica per il Web non si
esaurisce nel mondo Online,
ma continua in modo coerente
nel mondo Offline, per poi
tornare Online.
➤ Il tutto seguendo e proponendo
la Customer Journey

MOBILE VS. DESKTOP
➤ Nella deﬁnizione delle nostre
“Persona”, è indispensabile
scoprire quale sia il loro
dispositivo preferito
➤ Circa il 60% degli accessi al
Web sono da Smartphone
(http://gs.statcounter.com)
➤ Ma il nostro Target potrebbe
comunque essere il 10% che
accede da Tablet
➤ Quindi, la Graﬁca e la UX
dovranno essere costruite ad
hoc per i dispositivi Target

OMNICANALITÀ’
➤ Mobile vs. Desktop
➤ Online vs. Offline
➤ Customer Journey…
➤ Sono tutti termini che
definiscono diversi contesti,
dispositivi, linguaggi e modalità
di accesso alle informazioni
➤ Il marketing, la comunicazione
e quindi anche la Grafica
(inclusa quella per il Web)
devono avere una progettazione
e una predisposizione
Omnicanale, come gli Utenti.

RISORSE UTILI
➤ Foto Gratuite CC0: pixabay.com
➤ Icone CSS per il Web: fontawesome.com
➤ Icone vettoriali CC0: ﬂatIcon.com
➤ “Photoshop” per il Web: canva.com
➤ “Photoshop” Open Source: gimp.org
➤ Programmare Web online: https://
codepen.io
➤ Tutorial di CSS: css-tricks.com
➤ Business Model Canvas:
businessmodelcanvas.it/
➤ Pinterest: idee da copiare “a più non posso”
➤ Linee guida Facebook: www.facebook.com/
business/learn/facebook-page-basics
➤ Corsi di Informatica/Graﬁca: html.it
➤ Migliori Siti Web al mondo: awwwards.com

GRAZIE DELL’ATTENZIONE
Massimiliano Camillucci

Grafica per il Web - Web Design Marketing Grafica Vettoriale

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Grafica per il Web - Web Design Marketing Grafica Vettoriale

Similar to Grafica per il Web - Web Design Marketing Grafica Vettoriale (20)

More from Massimiliano Camillucci

More from Massimiliano Camillucci (9)

Grafica per il Web - Web Design Marketing Grafica Vettoriale