5 - Francesco Zaccaria

Progetto di Castiglioni Elena Sophia e Nerazzini Maria Ilaria
Jpop vs. Kpop
libro-gioco interattivo
NABA - Master in Design della Comunicazione - a.a. 2014-2015 - Corso di Web Design - prof. Francesco Zaccaria
1 | scelta del tema
OBIETTIVO: creare un magazine online
che parli della MUSICA e dei suoi GENERI.
I GENERI SCELTI:
J pop
K pop
Il Jpop è il pop giapponese
che comprende in sé altri
generi: folk, rock, reggae, R&B,
Hip Hop e ovviamente il pop.
Il Kpop è il pop coreano
che è influenzato da altri
generi come dance, electronic,
electropop, hip hop e R&B.
2 | concept
Giappone e Corea: vicini, ma rivali!
Progettare un gioco
interattivo strutturato
come una sfida o lotta
che metta a confronto
diversi music video
dei due generi.
conoscere divertendo
confronto-scontro
somiglianze/differenze
approccio diretto
scoprire un altro “mondo”
3 | progettazione
video player
campo di battaglia
bottone preferenza
struttura delle pagine e ispirazione grafica
4 | struttura
Index
ROUND 1
<1>
LEGENDA
J
ROUND 2
K
<2>
<2>
J
ROUND 3
K
<3>
ROUND 4
ROUND 5
K
K
J
J
VINCE JPOP
J
J
<4>
K
<5>
K
K
<4>
K
<5>
J
K
K
J
confuso
Jpop
J
<5>
K
J
confuso
Kpop
= Jpop
K = Kpop
<3>
<4>
<5>
J
RISULTATI
K
<4>
J
J
<3>
J
J
K
<5>
K
J
K
VINCE KPOP
5 | grafica definitiva
colori primari e brillanti
#1F8AFF
#FF00FF
#FFDF00
#FF6700
#00DF00
PRESS START 2P
THE
LAZY
jumps
FOX
over
the
Google Font Play
THE LAZY FOX
jumps over the brown dog.
brown
dog.
5 | grafica definitiva
Titolo della sfida
Introduzione
bottone START
5 | grafica definitiva
15px
414px
960px
50px
50px
100px
115px
285px
285px
519px
574px
900px
5 | grafica definitiva
J-POP
Round 1 = scontro fra Boy Band
Round 2 = scontro fra Girl Band
Round 3= scontro fra solisti
K-POP
J-POP
K-POP
J-POP
K-POP
J-POP
K-POP
J-POP
K-POP
Round 4= scontro fra Rock band
Round 5= scontro fra weird video
5 | grafica definitiva
60 px
27px
169px
100px
100px
300px
300px
152px
625px
960px
50 px
645px
5 | grafica definitiva
playlist dedicata
articolo +link per
approfondimenti
5 | grafica definitiva
288px
52px
1454px
780px
50px
590px
250px
505px
468px
960px
5 | grafica definitiva
playlist mista*
severo giudizio
di Maestro Yoda
articolo +link per
approfondimenti
bottone RESTART
* Playlist mista: la playlist del risultato incerto è composta da brani
di artisti coreani creati in lingua giapponese e viceversa.
5 | grafica definitiva
18px
288px
60px
335px
50px
250px
590px
350px
505px
550px
960px
1068px
6 | il codice
20 pagine html
1 index
15 pagine-livello
4 pagine-risultato
4 pagine CSS
1 stile dell’index
1 stile dei livelli
1 stile dei vincitori
1 stile dei confusi
6 | il codice html
img di sfondo
titolo della sfida
il tag <iframe> crea il videoplayer
i due bottoni con i rispettivi link
6 | il codice css
‘@import’ importa i font dal web
proprietà del tag <a>
classe generale con i suoi attributi
id (e classi) specifici per ogni pagina
Progetto di Castiglioni Elena Sophia e Nerazzini Maria Ilaria
GRAZIE!
NABA - Master in Design della Comunicazione - a.a. 2014-2015 - Corso di Web Design - prof. Francesco Zaccaria