Grafica per il Web - Web Design Marketing Grafica Vettoriale

Una panoramica sulla progettazione grafica per il Web: tra marketing e informatica, dove si posizione il ruolo del Grafico per il Web? Come si interfaccia il settore Marketing con quello della Comunicazione Visiva?

1. GRAFICA PER IL WEB
A cura di Massimiliano Camillucci

2. 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.

3. 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

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

5. Massimiliano Camillucci - camilluccimultimedia.it
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

6. Massimiliano Camillucci - camilluccimultimedia.it
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

7. Massimiliano Camillucci - camilluccimultimedia.it
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

8. Massimiliano Camillucci - camilluccimultimedia.it
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

9. COSA È’ LA GRAFICA PER IL WEB
➤Web Design
➤Grafica Vettoriale
➤Composizione Fotografica

10. Massimiliano Camillucci - camilluccimultimedia.it
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

11. Massimiliano Camillucci - camilluccimultimedia.it
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

12. Massimiliano Camillucci - camilluccimultimedia.it
COMPOSIZIONE FOTOGRAFICA
➤È l’unione di fotoritocco,
fotomontaggio e grafica
vettoriale
➤Anche questa attività
professionale vive sia nel
mondo Offline che in quello
Online
➤Poster, locandine, banner sono
spesso realizzati con questa
tecnica

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

14. Massimiliano Camillucci - camilluccimultimedia.it
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…

15. Massimiliano Camillucci - camilluccimultimedia.it
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

16. 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

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

18. Massimiliano Camillucci - camilluccimultimedia.it
VELOCITÀ’
➤Il Web è veloce. Cresce, muta,
evolve
➤L’utente è veloce, frettoloso e
distratto
➤La connessione ad internet non
è altrettanto veloce nei diversi
contesti geografici: nelle città è
velocissimo, nelle zone rurali è
fermo al 2000
➤Il Progetto grafico per il Web
dovrà essere veloce, snello e
performate, sia
tecnologicamente che
psicologicamente

19. Massimiliano Camillucci - camilluccimultimedia.it
MOBILE FRIENDLY
➤Il Web è Mobile
➤Il Web è Smartphone, è App, è
Facebook, è Google
➤Il Progetto Grafico per il Web
dovrà essere:
➤ “mobile friendly”, cioè fruibile
da Smartphone,
➤“SEO friendly”, cioè piacere a
Google,
➤Soprattutto “user friendly”,
piacere all’utente!

20. Massimiliano Camillucci - camilluccimultimedia.it
LEGGIBILITÀ E ACCESSIBILITÀ
➤Il Progetto grafico 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 artificiali che
“leggono” i contenuti del Web.

21. RISOLUZIONE
➤Pixel e HDPI
➤JPG, PNG, SVG

22. Massimiliano Camillucci - camilluccimultimedia.it
PIXEL E HDPI
➤I Pixel cambiano: sono sempre
più numerosi ed efficienti;
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à

23. Massimiliano Camillucci - camilluccimultimedia.it
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!

24. RESPONSIVE DESIGN
➤Frammentazione
➤Responsive Web
➤Progettare Responsive

25. Massimiliano Camillucci - camilluccimultimedia.it
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)

26. Massimiliano Camillucci - camilluccimultimedia.it
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.

27. Massimiliano Camillucci - camilluccimultimedia.it
PROGETTARE RESPONSIVE
➤Responsive è sinonimo di:
➤Casistiche: è necessario scegliere
e definire 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

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

29. Massimiliano Camillucci - camilluccimultimedia.it
PROGETTAZIONE LEAN
➤Marketing, Comunicazione,
Tecnologia, Frammentazione:
tanti, troppi vincoli e
condizionamenti
➤Come realizzare progetti grafici
per il web senza impazzire?
➤Approccio Lean: costruire in
funzione del “valore” per
l’utente finale
➤Eliminare gli “sprechi”,
concentrarsi sul minimo
prodotto utile
➤Aggiornare di continuo!

30. Massimiliano Camillucci - camilluccimultimedia.it
TIMELINE E FUNNEL
➤È necessario progettare in
funzione del valore utile al
cliente finale, 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

31. Massimiliano Camillucci - camilluccimultimedia.it
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”.
➤Netflix è un esempio
eccellente di coerenza.

32. 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

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

34. Massimiliano Camillucci - camilluccimultimedia.it
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 offrono
soluzioni “crossover”.

35. Massimiliano Camillucci - camilluccimultimedia.it
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.

36. Massimiliano Camillucci - camilluccimultimedia.it
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

37. Massimiliano Camillucci - camilluccimultimedia.it
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

38. Massimiliano Camillucci - camilluccimultimedia.it
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

39. Massimiliano Camillucci - camilluccimultimedia.it
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!

40. Massimiliano Camillucci - camilluccimultimedia.it
GIMP
➤Soluzione Open-Source e Free
alternativa a Photoshop
➤Molto poco pratico, ma ottimo
per gli entusiasti dell’Open-
Source
➤Apre file PSD (Photoshop)
mantenendo una buona
compatibilità e possibilità di
modificarne elementi e
proprietà

41. Massimiliano Camillucci - camilluccimultimedia.it
ISPEZIONA ELEMENTO
➤Strumento “nascosto” nei
Browser che utilizziamo tutti i
gironi
➤Chrome offre uno dei migliori
pannelli per Sviluppatori, molto
utile anche ai grafici 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.

42. GRAFICA E ANIMAZIONE: GIF E SVG
➤Grafica Vettoriale e CSS
➤GIF e Mobile

43. Massimiliano Camillucci - camilluccimultimedia.it
GRAFICA VETTORIALE E CSS
➤“Eppur si muove”. Le animazioni,
se ben posizionate possono
arricchire notevolmente la User
Experience e il coinvolgimento
degli utenti.
➤La grafica 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.

44. Massimiliano Camillucci - camilluccimultimedia.it
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.

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

46. Massimiliano Camillucci - camilluccimultimedia.it
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.

47. Massimiliano Camillucci - camilluccimultimedia.it
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)

48. Massimiliano Camillucci - camilluccimultimedia.it
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)

49. Massimiliano Camillucci - camilluccimultimedia.it
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.

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

51. Massimiliano Camillucci - camilluccimultimedia.it
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

52. PROGETTARE GRAFICA PER UN VIDEO
➤Margini e Risoluzione
➤Animazione

53. Massimiliano Camillucci - camilluccimultimedia.it
MARGINI E RISOLUZIONE
➤Il Web è Grafica, è 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

54. Massimiliano Camillucci - camilluccimultimedia.it
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

55. 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

56. PROGETTAZIONE IN TEAM
➤Contaminazione e Collaborazione
➤Chi è "il Grafico”?
➤Team Agile vs. Freelance

57. Massimiliano Camillucci - camilluccimultimedia.it
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).

58. Massimiliano Camillucci - camilluccimultimedia.it
CHI È "IL GRAFICO"?
Il “Grafico” nel mondo Web è:
➤Web Designer (progettista)
➤Social Media Expert
➤Visual Designer
➤Artista
➤Marketing Operativo
➤Copywriter
➤Fotografo
➤Videomaker
➤…poi? Chirurgo?

59. Massimiliano Camillucci - camilluccimultimedia.it
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.

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

61. Massimiliano Camillucci - camilluccimultimedia.it
“GRAFICA WEB”=F(MARKETING)
➤Un approccio alla progettazione
grafica 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

62. Massimiliano Camillucci - camilluccimultimedia.it
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.

63. Massimiliano Camillucci - camilluccimultimedia.it
PERSONA CANVAS
➤Per ottenere conversioni e
misurare l’efficacia 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 Grafica sul
Web deve essere progettata in
funzione delle “Personas” di
riferimento

64. Massimiliano Camillucci - camilluccimultimedia.it
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

65. Massimiliano Camillucci - camilluccimultimedia.it
MOBILE VS. DESKTOP
➤Nella definizione 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 Grafica e la UX
dovranno essere costruite ad
hoc per i dispositivi Target

66. Massimiliano Camillucci - camilluccimultimedia.it
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.

67. 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

68. Massimiliano Camillucci - camilluccimultimedia.it
RISORSE UTILI
➤Foto Gratuite CC0: pixabay.com
➤Icone CSS per il Web: fontawesome.com
➤Icone vettoriali CC0: flatIcon.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/Grafica: html.it
➤Migliori Siti Web al mondo: awwwards.com

73. GRAZIE DELL’ATTENZIONE
Massimiliano Camillucci