Memoria dirty dishes

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