COMUNICACIÓ MULTIMÈDIA Arnau Gifreu Castells 25/10/2013 Mariona Boada Àlex Boix Raquel Bosch Francesc Rosado Marc Surià Oriol Valentí
ÍNDEX 1 INTRODUCCIÓ I CONCEPTUALITZACIÓ 1.1 Introducció 3 1.2 La idea 4 1.3 Descripció 4 1.4 Objectius 4 1.5 Metodologia 5 1.6 El target 6
2 ESTAT DE DESENVOLUPAMENT 2.1
Estudi de la competència (Benchmarking)
7
3 ARQUITECTURA DE LA INFORMACIÓ 3.1 Arbre de navegació 11 3.2
Diagrama de flux
12
ANNEX 13
2
DIRTY DISHES
1 INTRODUCCIÓ I CONCEPTUALITZACIÓ 1.1 INTRODUCCIÓ “La Carol fa tres dies que hauria d’haver tornat a casa seva. Després d’intentar comunicar-se amb ella i donar-la per desapareguda, el seu pare decideix sortir a buscar-la per ajudar a la policia. “
Dirty Dishes és un thriller que es desenvolupa gairebé enmig del no res. Una carretera perduda
i una masia abandonada és gairebé tot el món que embolcalla la història d’aquest pare que, frustrat per la desaparició de la seva filla Carol, decideix sortir a buscar-la.
El curtmetratge, produït per 6 alumnes de quart curs del Grau en Audiovisual i Multimèdia,
és el resultat de la suma de tota la sèrie d’assignatures que s’imparteixen durant un semestre amb la finalitat d’obtenir un producte de qualitat professional.
Com a element diferencial del curtmetratge, i per tal de que no es quedi només amb la idea
de treballar el camp audiovisual, hem decidit desenvolupar dos conceptes multimèdia: Per una banda tenim la creació d’una pàgina web i, per l’altra, la creació d’un paisatge sonor que complementi una part de la història un cop ja s’hagi efectuat la visualització del curtmetratge.
La pàgina web de Dirty Dishes contindrà tot allò que tingui relació tan amb el curtmetratge com
amb l’univers que s’haurà creat al seu voltant. Tenint en compte que aquesta pàgina ha de ser una eina per a crear expectatives sense aprofundir del tot en la història, els continguts aniran sempre regulats per aquesta mesura incitant a l’usuari a visualitzar el curtmetratge.
Per altra banda, trobem que un element que també ens pot diferenciar i que podem incloure a la mateixa pàgina web és la de realitzar tot un paisatge sonor que acabi de complementar el
curtmetratge un cop aquest ja s’hagi visualitzat. Aquesta informació aniria en un dels apartats de la pàgina al que s’hi accediria mitjançant una clau d’accés. Aquest paisatge sonor ens mostraria un altre punt de vista del curtmetratge, aportant contingut i volum tan a la història com als personatges.
3
DIRTY DISHES
1.2 LA IDEA La idea principal de l’àrea multimèdia del nostre projecte és, mitjançant la pàgina web,
proporcionar tant a l’espectador com a qualsevol interessat en el nostre curtmetratge un suport des d’on poder accedir al material digital i informatiu del que disposarem.
1.3 DESCRIPCIÓ La pàgina web de Dirty Dishes es composarà a partir de la idea d’una “landing page” on,
mitjançant un “scroll” automàtic, es podrà accedir a tots els continguts desitjats. La senzillesa i elegància del disseny predominarà per sobre de la quantitat d’informació que s’hi proporcionarà,
ja que la nostre intenció no és la d’aprofundir en el curt sinó de generar prou interès com per fer moure a l’espectador cap al nostre producte.
Tenint en compte tots els aspectes que hem anomenat anteriorment, crearem material extra únicament accessible a partir del visionat previ del curtmetratge, com ara fotografies del rodatge, vídeos de contingut extra, informació complementaria...
Tota aquesta informació anirà conduïda mitjançant la tecnologia “parallax”, per així generar
un efecte trencador i dinàmic al conjunt de la web que serà la imatge del nostre curtmetratge. La pàgina contindrà diferents apartats pels continguts que necessitem a l’hora de cobrir
la informació que volem exposar. Hi haurà pàgines dedicades a temes més especialitzats
relacionats amb el curt, com ara la sinopsis, algun tràiler o les fitxes dels personatges entre d’altres. També s’introduirà en apartats diferents la informació sobre l’equip de treball, les
persones que han dut a terme el projecte o els agraïments i, per acabar de complir amb tots els apartats, una secció d’extres on hi haurà material inèdit tant del curtmetratge com del making of.
1.4 OBJECTIUS Els objectius principals que Dirty Dishes tindrà en compte a l’hora de la realització de la pàgina web es poden englobar en 3 punts diferents: informació, distribució i contingut extra.
4
DIRTY DISHES
Informació -
Informar sobre el curtmetratge a l’espectador.
-
Informar de com es desenvolupa el micromecenatge (recompenses).
- - -
Informar respecte el desenvolupament del curt. Informar del “merchandising”.
Informar del seguiment posterior a l’estrena del curt.
Distribució -
Ser el punt de partida des d’on oferir tractes amb diverses empreses.
micromecenatge.
-
Ser l’impàs des d’on interconnectar les xarxes socials amb els processos de
Contingut Extra -
Ser el mitjà per a proporcionar a l’usuari tota la sèrie de material gràfic que
making of. Aquests serà tan fotogràfic com videogràfic.
-
s’hagi creat durant la preproducció, producció i postproducció en forma de
Ser el mitjà a través del qual podem aportar una dimensió diferent al curtmetratge mitjançant un imaginari sonor al que s’hi accedirà amb una clau.
1.5 METODOLOGIA La metodologia que emprarem per tal de generar la pàgina web del nostre curtmetratge es centrarà en els diferents apartats que estan descrits a continuació:
Landing page La composició de la web es configurarà a partir d’un seguit de pàgines unides verticalment
segons els diferents apartats d’informació i d’accés mitjançant la tècnica de “scroll” del ratolí. La navegació es podrà dur a terme tant amb el menú principal que sempre serà present, com per mitjà botons d’ “auto-scroll” que reproduiran l’animació i el moviment automàticament.
5
DIRTY DISHES
Javascipt/jquery Es pot arribar a programar diferents accions per a la web amb aquest tipus de codi. Un dels exemples que tenim pensats és la modificació de la imatge de presentació o banner principal segons la franja horària en que s’accedeixi a la pàgina del curtmetratge. Parallax Aquesta tecnologia de superposició de capes serà emprada per tal proporcionar a la pàgina
un toc dinàmic i sofisticat. A més del contingut sobre el curtmetratge, volem generar un interés pel disseny programat a la web. CSS Per acabar de polir la pàgina utilitzarem els CSS’s per tal de retocar el disseny en tots els seus aspectes: el color, les animacions, les imatges, les tipografies, etc. Tot això s’haurà de fer quan ja tinguem tota l’estructura de la web organitzada i programada. Responsive Creiem convenient que la pàgina web funcioni tant bé per ordinador com per dispositius mòbils, així que intentarem desenvolupar-la de manera que pugui ser visualitzada en ambdós tipus d’aparells de manera òptima.
1.6 EL TARGET Dirty Dishes és un curtmetratge dirigit a tot aquell públic interessat en el cinema de thriller i
suspens. La tensió, l’angoixa i el missatge que vol transmetre el curt són factors que ajuden a que el target es redueixi, no només a les persones interessades en el gènere sinó també per edats. Així doncs, el públic objectiu de Dirty Dishes seria: - -
Persones majors de 13 anys.
Persones interessades en el gènere del thriller.
El target web serien totes aquelles persones que han vist el curtmetratge i s’han interessat per buscar informació. 6
DIRTY DISHES
2 ESTAT DE DESENVOLUPAMENT 2.1 ESTUDI DE LA COMPETÈNCIA (BENCHMARKING) Des de Dirty Dishes creiem que és important que, a l’hora que creem el que volem que sigui
la nostra pàgina web i, al cap i a la fi, la nostra imatge, tinguem en compte diferents dissenys de pàgines web.
Aquesta recerca ens ajudarà a fixar-nos ja sigui en els aspectes més tecnològics que la creació d’una pàgina comporta, com pel disseny i pel missatge que ens fa arribar a l’usuari.
Així doncs, hem realitzat la recerca d’una sèrie de pàgines web que tindríem en compte a l’hora de crear la pròpia pàgina de Dirty Dishes.
7
DIRTY DISHES
CLOUDS OVER CUBA www.cloudsovercuba.com
fig. 1 Captura Clouds Over Cuba
Pàgina sobre un documental interactiu. Amb un disseny molt elegant, et permet guardar
informació sobre el documental al llarg que aquest es reprodueix. També fa un molt bon ús dels botons.
+
-
Menú sempre present.
Alguns elements fallen si no és en pantalla completa.
Animacions per desplegar cada apartat del menú.
No és una pàgina web responsive.
Canvi de fons amb interacció central i bona transició.
No es pot canviar la qualitat del vídeo per a connexions més lentes.
Animacions de les interaccions amb els capítols ben treballades. Implementació de la línia del temps al vídeo amb la introducció de capítols, imatges i altra informació. 8
DIRTY DISHES
KILL YOUR DARLINGS www.sonyclassics.com/killyourdarlings
fig. 2 Captura Kill Your Darlings
Interessant pàgina sobre un curtmetratge anglès que s’estructura també en format landing
page i proporciona moltes idees sobre el posicionament i composició de les imatges. També en permet veure un bon exemple d’arquitectura de la informació en aquests tipus de web i sobre aquest tipus de temàtica.
+
-
Bona implementació de GIF’S
Texts illegibles degut a imatges.
Moviment automàtic de l’SCROLL.
Desplegables mal programats.
Bona utilització del color.
Botons on només funcionen les lletres.
Menú sempre present i amb bona integració.
Barra d’SCROLL present.
Pop-up’s d’informació.
Massa informació.
9
DIRTY DISHES
LIFE OF PI www.lifeofpimovie.com
fig. 3 Captura Life Of Pi
Pàgina web sobre la pel·lícula de Life of Pi. Fa un molt bon ús de l’scroll horitzontal per tal de poder entrar els continguts. Juga amb imatges de la pel·lícula per animar el fons de la web.
10
+
-
Segon menú de navegació àgil i estèticament original.
Mala programació en l’apartat de cast&crew. Quan hi entres no pots sortir.
Informació de crèdits poc visible, però fàcilment accessible.
Per veure les fotos i vídeos et porta a flickr o youtube. No estan integrades.
Petits fragments de vídeo de background amb possibilitat de pantalla completa.
No és una pàgina web responsive.
Integració de les xarxes socials per compartir les imatges.
En pantalles més petites de 960px els botons de xarxes socials se solapen.
Interaccions amb elements i transicions entre pàgines treballades.
El domini no es pot dir lifeofpi.
DIRTY DISHES
3 ARQUITECTURA DE LA INFORMACIÓ 3.1 ARBRE DE NAVEGACIÓ
Slideshow fotos
HOME
Qué es DD
Equipo
Prensa
Sinopsis - ficha tècnica
Casting
Fotos
Tráiler
Equipo técnico
Notícias
Cortometraje
Agradecimientos
Premios
Contacto
fig. 4 Arbre de navegació
11
DIRTY DISHES
3.2 DIAGRAMA DE FLUX
WEB
ERROR
NAVEGA
CARGA WEB
PORTADA
NAVEGA
HOME
NAVEGA
CONTACTO
PRENSA
EQUIPO
QUÉ ES DD
NAVEGA
NAVEGA
NAVEGA
NAVEGA
CONTACTAR
PREMIOS
NOTICIAS
FOTOGRAFIAS
CASTING
CIERRA PÁGINA
fig. 5 Diagrama de flux
12
DIRTY DISHES
EQUIPO TECNICO
AGRADECIMIENTOS
SINOPSIS
TRAILER
CORTO
ANNEX
13
DIRTY DISHES
2.1 ESTUDI DE LA COMPETÈNCIA (BENCHMARKING) SPEED MOTION www.speed-motion.com.ua
fig. 6 Captura Speed Motion
14
+
-
Bona implementació de GIF’S
Botons inaccessibles degut a imatges.
Moviment automàtic de l’SCROLL.
Moviments molt lents.
Composició en moviment.
Falla la composició a mesura que es crea.
Menú sempre present i fàcil.
Barra d’SCROLL present.
Footer amb informació al final.
Separacions llargues.
DIRTY DISHES
VOICE OVER www.voice-over.com
fig. 7 Voice Over
+
-
Plana, estàtica, informació ben condensada.
Footer només accessible amb scroll.
Opció d’escollir idioma.
Botons de xarxes socials i informació complementària amagada.
Menú al centre de la pàgina web.
No és una pàgina web responsive.
Navegació intuïtiva.
15
DIRTY DISHES
FK AGENCY www.fk-agency.com
fig. 8 Captura FK Agency
16
+
-
Bona implementació de GIF’S
Massa informació.
Moviment automàtic de l’SCROLL.
Canvis de ratolí.
Programació d’SCROLL lateral i utilització d’aquest per mostrar informació.
Algun moviment pot comportar una selecció de contingut involuntària.
Menú sempre present.
Pot induir al desconcert.
Botó d’UP.
Les pàgines amb SCROLL lateral queden en la posició en què s’han deixat abans.
DIRTY DISHES
BLACK NEGATIVE www.blacknegative.com
fig. 9 Captura Black Negative
+
-
Instruccions d’ús a l’inici i icones de cursor molt explícites.
No funciona el “mute”.
Doble manera de navegar.
Falta aprofundir més en els projectes.
Menú visible.
Falta interacció.
Segon menú de navegació estèticament innovador. Animacions GIF molt ben integrades.
17
DIRTY DISHES
RUSH www.rushmovie.com
fig. 10 Captura Rush
+
-
Es posa mute si visites una altra pàgina.
El mute no es manté si vas a visitar una altra pàgina i tornes a Rushmovie.
Animació amb diferents crítiques de la pel·lícula.
A vegades es confon el text amb el fons.
Integració de facebook i twitter.
Si no és una pantalla de 1080px d’alçada el menú tapa la venda de tiquets i la xarxa social tumblr. També es solapen els crèdits amb els dos botons.
Senzillesa del disseny.
El muntatge tan frenètic del fons pot molestar. El domini no es pot dir rush.
18
DIRTY DISHES
PIKABOO www.pikaboo.be
fig. 11 Captura Pikaboo
+
-
Disseny minimalista.
No és una web responsive.
Animació de fons senzilla.
En el mode overview les descripcions del treball es solapen amb els altres treballs.
Navegació entre els treballs amb scroll sense que estigui col·locat a l’esquerra de pantalla. També es pot navegar amb els botos de navegació de dalt i baix. Bona integració de la pàgina del treball a sobre la web, així com a les diferents pàgines del menú. Menú sempre visible i navegació intuïtiva amb els botons del teclat. 19
DIRTY DISHES
GRAVITY www.gravitymovie.warnerbros.com
fig. 12 Captura Gravity
+
-
Menú ajustable a mides petites i grans.
No és una pàgina web responsive.
Integració total dels vídeos de youtube.
En connexions lentes, el contingut triga a carregar-se i no hi ha opció per a canviar la qualitat.
Animacions de transició treballades.
A la galeria fotogràfica no hi ha cap indicador visible per saber com navegar entre les fotografies.
Amb pantalla completa tot està visible, sense necessitat d’scroll.
20
DIRTY DISHES
LIFE ACCORDING TO SAM www.lifeaccordingtosam.com
fig. 13 Captura Life According To Sam
+
-
És una pàgina web responsive.
Navegació confusa. No és lineal ni estpa estructurada per contingut.
Menú de navegació sempre visible.
S’accedeix a la informació de les pàgines amb una icona d’una creu.
Navegació amb les tecles de direcció del teclat i del mouse. Vídeo del fons treballat perquè sempre es pugui veure el text de sobre. Es pot amagar la informació de les pàgines i només deixar visible el fons.
21
DIRTY DISHES
TRASK INDUSTRIES www.trask-industries.com
fig. 14 Captura Trask Industries
+
-
És una pàgina web responsive.
Amb una pantalla de 1200px d’amplada a l’inici apareixen dos scrolls.
Menú de navegació a l’esquerra sempre visible. En el cas que la pantalla sigui petita s’amaga però apareix un botó per a fer-lo aparèixer.
Els crèdits estan amagats i no hi ha cap indicador que et porti a buscar-los.
Animacions del menú treballades.
El vídeo o fotos no s’integren a la web, simplement apareixen amb una opacitat.
A l’apartat de genètics, la informació que apareix en scroll es va animant a mesura que vas baixant.
22
DIRTY DISHES
JULIANA BICYCLES www.julianabicycles.com
fig. 15 Captura Juliana Bicycles
+
-
És una pàgina web responsive.
Interacció amb les bicicletes molt simple i innecessària per l’aportació que realment fa.
Landing page.
Les animacions de les interaccions amb botons son simples.
Sempre hi ha un botó de menú present que et permet navegar entre totes les seccions. Es pot accedir al contingut de tres maneres: Scroll vertical, botó de menú i a través de dos botons que es troben a la pàgina principal i que et permeten canviar de secció.
23
DIRTY DISHES
ALT GRAPHIC www.alt-graphic.com
fig. 16 Captura Alt Graphic
+
-
Tecnologia parallax.
En pantalles petites els botons d’about i work s’amaguen.
És una pàgina web responsive.
Quan es passa per sobre un treball canvia el fons. Això pot molestar visualment.
Scroll dels works treballat. Navegació intuïtiva.
24
DIRTY DISHES
T.S. SPIVET www.spivet.gaumont.fr
fig. 17 Captura T.S. Spivet
+
-
Immersiva.
Requereix una connexió ràpida per oferir una experiència satisfactòria.
Menú vertival, guardant relació amb la història.
Disposició original però poc convencional.
Menú sempre present i fàcil d’usar.
Moviment del menú en fer scroll.
Scroll automàtic.
Moviment lent.
Composició amb moviment.
Poca accessibilitat.
25
DIRTY DISHES
THE MOST www.the-most.com
fig. 18 Captura The Most
26
+
-
Pantalla completa.
No és una pàgina web responsive.
Minimalista.
Mala accessibilitat.
Menú sempre present.
Només es poden llegir els apartats posant el cursor a sobre de cada botó.
Desplaçament d’esquerra a dreta.
Desconcert.
DIRTY DISHES
JOBS IS FREE www.jobsisfree.com
fig. 19 Captura Jobs Is Free
+
-
Pantalla completa.
No és una pàgina web responsive.
Scroll vertical.
Botó d’scroll només a la primera pàgina.
Poc immersiva.
Dificultat per trobar continguts.
Footer fix.
Informació repetida.
Bona implementació de GIF’s.
Requereix una connexió ràpida per oferir una experiència satisfactòria.
27
DIRTY DISHES
INSIDE FILMS www.insidefilms.com
fig. 20 Captura Inside films
28
+
-
Menú a la part inferior.
Al baixar, queda fiz a la part de dalt i pot crear confusió.
Scroll vertical.
No funciona bé la rodeta, et deixa a la meitat del contingut.
Footer fix.
Si no baixes fins a baix, no trobes la possibilitat de canviar d’idioma.
Bona implementació de GIF’s.
Requereix d’una connexió ràpida per a oferir una experiència satisfactòria.
DIRTY DISHES
FUNDIDO A NEGRO www.miquelcasals.es/fundidoanegro
fig. 21 Captura Fundido a Negro
+
-
Plana, estàtica, informació ben condensada.
Logotip de premis a festivals poc visible en algunes seccions de la pàgina.
Bona usabilitat.
Menú molt bàsic estèticament.
Footer en moviment.
Domini no particular per a la pel·lícula.
Botons de xarxes socials sempre accessibles i visibles al footer.
29
DIRTY DISHES