Intervento al CodeMaster - Tag Innovation School con indicazioni pratiche su come progettare un sito editoriale multi device per il target studenti in 10 step: dal concept alla definizione dell'architettura dell'informazione, dalla requisitazione di alto livello allo sviluppo di UX e UI fino alla messa in produzione

1. 10hack
perrealizzareunsito
editorialedisuccesso
interventoa codemastertaginnovationschool
18novembre2015
fabiobin

2. chisono
unosviluppatore?(purtroppo)no
eundesigner?nemmeno

3. chisono
unosviluppatore?(purtroppo)no
eundesigner?nemmeno
checifaccioqui?

4. all’universitàwebdesignerautodidatta
responsabilemarketingepubblicitàonlineingruppieditoriali
coordinatore delcomitatotecnicodiaudiweb
responsabileprodottodigitaleingruppieditoriali
pubblicitàeinnovazionedigitaleinOneDay
dicosamisonooccupato

5. dicosa
parliamo
oggi?

6. comesi
realizzaun
prodotto
editoriale
digital
dicosa
parliamo
oggi?

7. che
caratteristiche
haunprodotto
editoriale?

8. doppio
mercato

9. audience Credits: Shutterstock

10. audience
advertising
Credits: Shutterstock Credits: Kappuru / Life of Pix

11. offrirecontenuti
(diqualità)

12. attrarreaudience

13. manteneregliutentia
lungosulsito
Credits: Shutterstock

14. renderearmonicii
contenutiela
pubblicitàCredits: Shutterstock

15. misurarei
fenomeni
rilevanti
Credits: Shutterstock

16. rendere
l’advertising
performante Credits: Shutterstock

17. contenuti
audience
advertising
Credits: Shutterstock

18. ilnostro
caso
unsitoeditoriale
perstudenti.
dazero.

19. ilnostro
caso
unpiccolopasso
indietro

20. abbiamogià
unsitoeuna
community
leadersul
targetdegli
studentidelle
superiori…
Credits: ScuolaZoo

21. …manon
presentesul
targetdegli
universitari

22. unsegmento
presidiatoda
competitor
focusedsu
appuntie
didattica

23. sipotrebbefare…

24. studentiuniversitari,fuori
sedeegiovanilavoratori
rispondereaproblemi
praticidellavitadituttii
giorni
conuntonoleggeroe
pratico
perchi
perché?
come?

25. Essereillifehackerdegli
studentiedeigiovani
lavoratori
unbrand
statement,
una
mission
“
”

26. let’sdoit!

27. let’sdoit!

28. vediamo
questi
hack?

29. maprima…

30. adottiamo
un
approccio
full-stack

31. manon
solonello
sviluppo!
Fonte: Sitepoiint

32. full-stack
come
mindset

33. metterele
maniinpasta.
dappertuttoCredits: Life of Pix

34. hack#1
progetta
inbase
agli
obiettivi

35. realizzareunprodottoeditorialeonline
l’elenco
degli
obiettivi

36. realizzareunprodottoeditorialeonline
scalabilepervolumidicontenuti
scalabilepervolumiditraffico
l’elenco
degli
obiettivi

37. realizzareunprodottoeditorialeonline
scalabilepervolumidicontenuti
scalabilepervolumiditraffico
accessibiledacollaboratoriesterni
ottimizzatopertuttiidevice
l’elenco
degli
obiettivi

38. realizzareunprodottoeditorialeonline
scalabilepervolumidicontenuti
scalabilepervolumiditraffico
accessibiledacollaboratoriesterni
ottimizzatopertuttiidevice
conunafortebrandidentity
conunposizionamentochiaroedifferenziante
l’elenco
degli
obiettivi

39. realizzareunprodottoeditorialeonline
scalabilepervolumidicontenuti
scalabilepervolumiditraffico
accessibiledacollaboratoriesterni
ottimizzatopertuttiidevice
conunafortebrandidentity
conunposizionamentochiaroedifferenziante
ingradodiattirarenuoviutentidaSEO
e…dasocial
l’elenco
degli
obiettivi

40. realizzareunprodottoeditorialeonline
scalabilepervolumidicontenuti
scalabilepervolumiditraffico
accessibiledacollaboratoriesterni
ottimizzatopertuttiidevice
conunafortebrandidentity
conunposizionamentochiaroedifferenziante
ingradodiattirarenuoviutentidaSEO
e…dasocial
ingradodigenerareunelevatonumerodiPVs
chesupportiformatiadvertisingstandardecustom
l’elenco
degli
obiettivi

41. latecnologiaolasoluzioneche
voglioimplementaremiconsentedi
raggiungeregliobiettivi?
possoimmaginaresoluzionidiUXe
UIrealisticamenteapplicabilieche
miconsentanodiraggiungeregli
obiettivi?
le
domande
daporsi

42. hack#2
traducigli
obiettivi
inKPIs
rilevanti
periltuo
business

43. realizzareunprodottoeditorialeonline
scalabilepervolumidicontenuti
scalabilepervolumiditraffico
accessibiledacollaboratoriesterni
ottimizzatopertuttiidevice
conunafortebrandidentity
conunposizionamentochiaroedifferenziante
ingradodiattirarenuoviutentidaSEO
…edasocial
ingradodigenerareunelevatonumerodiPVs
chesupportiformatiadvertisingstandardecustom
torniamo
all’elenco
degli
obiettivi

44. realizzareunprodottoeditorialeonline
scalabilepervolumidicontenuti
scalabilepervolumiditraffico
accessibiledacollaboratoriesterni
ottimizzatopertuttiidevice
conunafortebrandidentity
conunposizionamentochiaroedifferenziante
ingradodiattirarenuoviutentidaSEO
…edasocial
ingradodigenerareunelevatonumerodiPVs
chesupportiformatiadvertisingstandardecustom
focuson

45. obiettiviKPIs
numerovisite
numeroutenti
numerodiPagineViste/Visita
tempodipermanenza
bouncerate
traffico
KPIsprimari

46. obiettiviKPIs
traffico
numerovisite
numeroutenti
numerodiPagineViste/Visita
tempodipermanenza
bouncerate
clicksuspecificibottoni
numerosharedallapagina
perfomanceperautore
performancepersezione
KPIssecondari

47. hack#3
organizzai
contenuti
(eicontenitori)

48. contentsufesteerasmus
dove
collocoil
contenuto
?
università studiall’estero divertimento cittàuniversitarie

49. quanti
contenitori
devo
prevedere
?
tesilaurea studiall’estero divertimento vacanze
matricole università studiare vitauniversitaria
alloggio coinquilini lavoro stage

50. devo
prevedere
deisotto-
contenitori
?
fuorisede
casealloggio coinquilini bolletteedeconomia
domestica
cittàuniversitarie

51. cherelazionideveprevederetral’articoloeilsuo
autore?
eancora
chiedersi

52. cherelazionideveprevederetral’articoloeilsuo
autore?
comeordinoladisponibilitàdiunarticolo
all’internoall’internodiunapaginacollettore?eancora
chiedersi

53. cherelazionideveprevederetral’articoloeilsuo
autore?
comeordinoladisponibilitàdiunarticolo
all’internoall’internodiunapaginacollettore?
ènecessariofaredellepaginecollettori?
eancora
chiedersi

54. cherelazionideveprevederetral’articoloeilsuo
autore?
comeordinoladisponibilitàdiunarticolo
all’internoall’internodiunapaginacollettore?
ènecessariofaredellepaginecollettori?
alivellodisingolapaginachetipodi
organizzazioneinternadevoavere?
eancora
chiedersi

55. cherelazionideveprevederetral’articoloeilsuo
autore?
comeordinoladisponibilitàdiunarticolo
all’internoall’internodiunapaginacollettore?
ènecessariofaredellepaginecollettori?
alivellodisingolapaginachetipodi
organizzazioneinternadevoavere?
devodareall’utentelapossibilitàdicercaretrai
contenuti?
eancora
chiedersi

56. la
risposta?

57. lasciamociguidaredallebest
practices
la
risposta?

58. lajourney
classicadi
unsitonon
brand
singlecontent

59. lajourney
classicadi
unsitonon
brand
singlecontent
single+paginecollegate

60. lajourney
classicadi
unsitonon
brand
singlecontent
single+paginecollegate
single+suggestedarticles

61. struttura
seoma
come?
partiamodaivolumidiricerca
peritopicprincipali

62. struttura
seoma
come?
…einbaseaquestacostruiamo
l’alberaturadelsitochevogliamo

63. struttura
seoma
come?
conslug“parlanti”e metaben
valorizzati

64. scendere
adun
livellodi
maggior
dettaglio

65. vediamoi
template
fondamentali:
content pages

66. pagine
contenuto
“single”

67. pagine
contenuto
“gallery”

68. pagine
contenuto
“slide”

69. paginedi
raccordo,
aggregatori,
homepage

70. versioniper
mobile

71. hack#4
pensada
subito
alla
pubblicità

72. devmostly
frequent
ouch
Mi passi il tag?
“ ”Ma dov’è che va?
“ ”
Azz! ci siamo dimenticati l’adv!
“ ”Ma su mobile non funziona!
Rovina tutto il layout
“
“
”
”

73. devmostly
frequent
ouch
tanto io ho l’adblocker
“ ”

74. ripartiamo l’avddeveessereperformante
(eperesserlodeveesserevisibile)

75. visibilenonvuol
dire
necessariamente
“inalto”
inaltosudesktop
(mainfondosumobile)

76. prevederetuttele
casistiche
(eprepariamoci
anche
all’evoluzione)
Skin
Intro Header
Una nuova tipologia di intro al sito che
consente di precaricare una creatività a
schermo pieno prima del contenuto
Mega Wall
Un nuovo formato ad alto impatto
posizionato al termine del contenuto
Masthead Video
Medium Rectangle Video
X-Video
(Med. Rec. Exp. Video) In article Video
Mediun Rectangle
con posizionamento in sidebar o in-article
Masthed
Leaderboard
Medium Rectangle
Posizionamento in article per garantire
l’esposizione del banner mentre gli utenti
fruiscono del contenuto
Floor Ad
Formato sticky persistente allo scroll
disponibile su tutte le pagine

77. integrarenativee
customcontent
nelCMS

78. integrare
sponsored
teaser
e
sponsored
content
nelCMS

79. rendere
sponsorizzabili
tuttiiteaser

80. integrareilCMS
consistemidi
trackingadv
terzeparti!

81. hack#5
razionalizza
quellodicui
haibisogno
periniziare

82. facciamo
una
checklist
cosaciserve?

83. facciamo
una
checklist
unpianoeditoriale
macronecessitàalivellodifunzionalitàCMS
ladefinizionedell’architetturadell’informazione
l’elencodeisingolitemplatedipagina
lenecessitàperciascuntemplatedipagina
leguidelineseirequisitiSEO
leguidelinesadvertising

84. facciamo
una
checklist
unpianoeditoriale
macronecessitàalivellodifunzionalitàCMS
ladefinizionedell’architetturadell’informazione
l’elencodeisingolitemplatedipagina
lenecessitàperciascuntemplatedipagina
leguidelineseirequisitiSEO
leguidelinesadvertising

85. facciamo
una
checklist
unpianoeditoriale
macronecessitàalivellodifunzionalitàCMS
ladefinizionedell’architetturadell’informazione
l’elencodeisingolitemplatedipagina
lenecessitàperciascuntemplatedipagina
leguidelineseirequisitiSEO
leguidelinesadvertising

86. facciamo
una
checklist
unpianoeditoriale
macronecessitàalivellodifunzionalitàCMS
ladefinizionedell’architetturadell’informazione
l’elencodeisingolitemplatedipagina
lenecessitàperciascuntemplatedipagina
leguidelineseirequisitiSEO
leguidelinesadvertising

87. facciamo
una
checklist
unpianoeditoriale
macronecessitàalivellodifunzionalitàCMS
ladefinizionedell’architetturadell’informazione
l’elencodeisingolitemplatedipagina
lenecessitàperciascuntemplatedipagina
leguidelineseirequisitiSEO
leguidelinesadvertising

88. facciamo
una
checklist
unpianoeditoriale
macronecessitàalivellodifunzionalitàCMS
ladefinizionedell’architetturadell’informazione
l’elencodeisingolitemplatedipagina
lenecessitàperciascuntemplatedipagina
leguidelineseirequisitiSEO
leguidelinesadvertising

89. facciamo
una
checklist
unpianoeditoriale
macronecessitàalivellodifunzionalitàCMS
ladefinizionedell’architetturadell’informazione
l’elencodeisingolitemplatedipagina
lenecessitàperciascuntemplatedipagina
leguidelineseirequisitiSEO
leguidelinesadvertising

90. e
finalmente

91. hack#6
snellisciil
processoe
itera.

92. ilflusso
tradizionale
strategia UX wireframe UI/visual front-end

93. ilflusso
tradizionale
strategia UX wireframe UI/visual front-end

94. ilflusso
tradizionale
strategia UX wireframe UI/visual front-end

95. snellire.
sipuò.
strategia UX UI/Visual
Front-end
UX
strategia UX wireframe UI/visual front-end

96. alivello
macro
980px 1140px
darequisiti rework

97. alivellodi
dettaglio

98. alivellodi
dettaglio

99. elavorare
direttamente
sufront-end
eliminareancheireworksuvisual

100. hack#7
progettain
mododa
manteneregli
utentiilpiù a
lungopossibile
sulsito

101. offrireall’utenteilmaggiornumero
possibiledioccasionidiconsumare
ulteroricontenuti
strategia#1
incentivare
l’utentea
consumare
piùcontenuti

102. strategia#1
incentivare
l’utentea
consumare
piùcontenuti
servizidicontentdiscovery
plug-inwordpress custom

103. strategia#1
incentivare
l’utentea
consumare
piùcontenuti
posizionamentointelligentedeiwidget

104. strategia#1
incentivare
l’utentea
consumare
piùcontenuti
integrazionelook&feeldeiwidget

105. strategia#1
incentivare
l’utentea
consumare
piùcontenuti
ridondanzadinuovicontenuti/link

106. creareun’esperienzadi
paginationfluidae“sensata”,
chenondeveesserepercepita
comeforzata
strategia#2
“trascinare”
l’utentesupiù
paginenell’ambito
dellostesso
contenuto

107. strategia#2
“trascinare”
l’utentesupiù
paginenell’ambito
dellostesso
contenuto

108. strategia#2
“trascinare”
l’utentesupiù
paginenell’ambito
dellostesso
contenuto

109. strategia#2
“trascinare”
l’utentesupiù
paginenell’ambito
dellostesso
contenuto

110. strategia#2
“trascinare”
l’utentesupiù
paginenell’ambito
dellostesso
contenuto

111. strategia#2
“trascinare”
l’utentesupiù
paginenell’ambito
dellostesso
contenuto

112. hack#8
progettaper
massimizzare
lecondivisioni

113. tastidi
share.
preminenti

114. tastidi
share.
…econtestuali

115. tastidi
share.
device-based

116. tastidi
share.
facebooksempreprotagonista

117. enondimenticarei
metaOGele
immaginiperlo
share!
FAIL! THISISBAD

118. bastapoco!
ITWORKS!

119. hack#9 curaidettagli

120. The details are not details.
They make the product.
“
”CHARLES EAMES

121. Calltoaction
suteaser
customizzabile
dall’editor
calltoactioncustom

122. elementidi
microUI:
numerazione
bulletpointse
progressbar
slide
bulletcustom
progressbarpaginationslide

123. breadcrumb
mascherateda
“etichette”
Home > Vita universitaria > Buzz

124. breadcrumb
mascherateda
“etichette”
breadcrumb

125. call-outall’over
suelementidi
UIproprietari
call-out

126. pagineautore
concover
personalizzata,
socialprofiles
edatidiattività

127. spazioautore
customsu
ogni
contenuto
schedaautore

128. coversezioni
personalizzabili
defaultcover

129. coversezioni
personalizzabili
customcover

130. coversezioni
personalizzabili
customcover

131. schedeautore
supagina
redazione
customizzabili
perciascun
autore

132. tastoarticolo
successivo
conetichetta
dicontenuto
labeltasto

133. hack#10
steallikean
artist

134. The only art I’ll
ever study is
stuff that
I can steal from
“
”DAVID BOWIE

135. studiare
per
copiare
soluzionidiUX/UI

136. studiare
per
copiare
soluzionidiUX/UI

137. studiare
per
copiare
soluzionidiUX/UI

138. studiare
per
copiare
soluzionidiUX/UI

139. studiare
per
copiare
soluzionidiUX/UI

140. studiare
per
copiare
soluzionidiUX/UI

141. studiare
per
copiare
soluzionidiUX/UI

142. cosa
“copiare”
?
formatdicontenuto
snippetdicodice
ideecreative
tuttoquellochetiserve

143. rubare
“bene”
Fonte:AustinKleon

144. grazie!
fabiobin@zoocom.it
https://it.linkedin.com/in/fabiobin