Memòria Ciao Mamma by EU ERAM

PROJECTE CIAO MAMMA (Estructura d’un projecte multimèdia)

Alumnes: Alex Casas Jordi Fornells Edgar Hugas Claudia Leria Xavier Masias Jordi Massó Maria Palacios Paulina Okunyte Data: 18 d’oct. de 13 Professor: Arnar Gifreu Assignatura: Comunicació multimèdia

1. INTRODUCCIÓ I CONTEXTUALITZACIÓ Aquest projecte és una renovació de la revista “Ciao Mamma”, que originalment era desenvolupada per els professors de l’ERAM. Era una revista amb números tancats que s’anaven actualitzant cada trimestre. La poca popularitat entre els estudiants de l’escola, ha fet necessària una renovació, que és la que hem portat a terme i la que s’explica detalladament en aquesta memòria. La primera gran novetat que presenta la renovació de la revista “Ciao Mamma” és el trasllat al format blog web. La clau d’aquesta decisió recau en gran part, que d’aquesta manera serà més dinàmica. Tant per a emissors com per a espectadors, deixant així de “limitar-‐la” a un període de temps i adaptant-‐la a les necessitats dels alumnes. D’aquesta manera mana el contingut, per damunt del temps. L’experiència de navegació, com és habitual, parteix de la pàgina “Home”. Un cop situats al punt de partida, l’usuari veurà les diferents seccions de contingut a traves de les quals podrà navegar i accedir als seus continguts pertinents. Visualment mantindrem un disseny vinculat a la imatge corporativa. Cal partir de la idea que, és una revista feta per i per als alumnes, per tant, sempre mantindrà un estil juvenil que inconscientment comparteix trets implícits amb la línia de la imatge corporativa de la universitat, és a dir; Juvenil, minimalista, icònic i creatiu. L’usuari podrà navegar fluidament per la web a través del seu menú on en cada secció hi haurà diferents tipus de contingut ordenats i classificats degudament. Facilitant, agilitzant i fent més agradable l’experiència de navegació. Tenint l’opció sempre en qualsevol moment de tornar a la pagina inicial “Home”. Si especifiquem i ens endinsem en els continguts, hem de diferenciar entre dos tipus; hi haurà una estructura sempre fixe de continguts, modificables únicament per l’administrador. I una part de contingut flexible i variable, que recau sobre els articles, noticies, treballs, entrevistes etc... aportada per als alumnes. La intenció és aconseguir animar i motivar a l’estudiant a participar aportant treballs de manera altruista amb ànim de compartir coneixements amb el seu propi entorn real, que al cap i a la fi és qui en gaudirà. Per tant, ara no només es destacarà certs alumnes per l’èxit. Si no que també, es reconeixerà la perseverança i la iniciativa dels que més aporten i ensenyen. L’idea és reduir els aspectes negatius de la competitivitat i fomentar aspectes positius del companyerisme.

Per al que fa aspectes de promoció i màrqueting comptem afortunadament amb el suport de l’ERAM. Que ens possibilita arribar de manera viral a tots els alumnes i/o ex-‐alumnes. La primera acció promocional serà un espot amb ànim de despertar la curiositat. L’ERAM Presenta, serà el lloc i moment ideal per a presentar la renovació públicament i donar a conèixer la nostre labor. Tot i això es farà un vídeo “Motion Graphic” on explicarà molt fàcilment com conèixer, entendre i aprendre a utilitzar l’eina. Per si algú menys familiaritzat amb la interacció ho pugui entendre perfectament. Tenim clar que per ajudar a promocionar podem elaborar pamflets que mitjançant codis QR poden apropar el “client potencial” als continguts del seu interès, i tot això de manera molt més sostenible que una revista convencional.

Figura 1 – Organigrama Ciao Mamma

1.1. IDEA ‘Ciao Mamma’ és una revista vinculada a l’escola universitària de realització d’audiovisuals i multimèdia (ERAM). Amb un contingut basat i dirigit als estudiants de la mateixa universitat i amb la finalitat de compartir experiències professionals, exposar treballs d’alumnes i oferir coneixements complementaris als estudis que es cursen a l’ERAM.. 1.2. DESCRIPCIÓ Ciao Mamma és una plataforma en forma de revista/blog online per la qual els estudiants de l’ERAM poden accedir a continguts de l’escola de manera fàcil i ràpida. Pretén posar a l’estudiant al dia amb dades tècniques; ajudar-‐lo a comprendre el món professional compartint experiències de professionals, professors, i exalumnes, explicades mitjançant entrevistes; exposar treballs per a que l’alumnat pugui prendre referències i estar actualitzat amb els treballs que sorgeixen de la escola. També s’oferiran tutorials creats pels estudiants i per als estudiants per a que ells puguin realitzar i desenvolupar fórmules de treball noves o que no sàpiguen i de la mateixa manera compartir-‐les amb tothom. Ciao Mamma és una eina de promoció dels estudiants, per a tal de donar reconeixement al seu treball. Al ser una revista també compleix amb el requisit essencial d’informar sobre novetats dins de tots els camps que inclouen els estudis del GAM i el món audiovisual i multimèdia. 1.3. OBJECTIUS a) Crear un lloc web que serveixi com a eina didàctica i lúdica a la vegada, la qual contingui informació i entretingui a través dels continguts. b) Informar a través de la secció notícies, de les novetats tant de l’ERAM com del món audiovisual i multimèdia. c)

Donar a conèixer les carreres professionals dels professors, exalumnes i professionals del sector.

d) Crear i oferir tutorials sobre programes o eines que en el Grau no s’ensenyen. e) Promocionar els treballs, projectes i premis dels estudiants. f)

Oferir un espai on l’estudiant pugui fer suggerències i donar la seva opinió de l’ERAM.

g) Apropar la revista, de manera que desperti un major interès per part dels alumnes de l’ERAM.

h) Donar un nou aire al concepte existent mitjançant una estètica i una filosofia més atractiva. 1.4. METODOLOGIA Per a complir els objectius proposats s’haurà d’actualitzar tant el contingut de la revista com la seva forma i estructura i d’aquesta manera aconseguirem crear el canvi cap a la revista que anhelem. El contingut de la revista ha de ser revisat i elaborat tenint en compte que pugui interessar a l’estudiant de manera que efectivament despertem interès per a que la revista sigui llegida. De la mateixa manera la forma en com es presenta la revista serà canviada per a tal de fer-‐ la més accessible per a l’alumnat, ja que la fórmula que segueix ara no atrau a l’alumne a llegir-‐la i a voler saber de què va, és per això que es canviarà el format de la web per un blog més interactiu i més accessible. El fet d’incorporar la possibilitat de pujar tutorials i continguts dinàmics, així com comentaris i integrar xarxes socials farà que millori la interacció amb la revista i conseqüentment s’incorpori un major grau d’interacció que el que presenta actualment. Aquests mètodes també ajudaran a incentivar la col·∙laboració entre els alumnes i els redactors, de manera que el contingut sigui molt més dinàmic i la revista Ciao Mamma sigui una eina de treball i no només una revista informativa. 1.5. DEFINICIÓ PÚBLIC OBJECTIU Ciao Mamma està destinada bàsicament a alumnes i exalumnes de l’Escola Universitària ERAM (Girona). Per tant, podríem dir que el nostre target es situa en una franja de públic d’entre 18 i 30 anys d’edat de la província de Girona. Aquesta franja ve donada pel sol fet de que el projecte va destinat majoritàriament a estudiants universitaris. 1.6. JUSTIFICACIÓ DEL TÍTOL Per motius jurídics de registre, l’inicial nom de la revista “Mare” va haver de canviar-‐se, ja que ja existia una web amb el mateix nom. Per tant, es va dir adéu (suprimir) a la revista “Mare”. Jugant amb aquest cas irònic, la revista va passar a anomenar-‐se “Ciao Mamma” = Adéu Mare.

En aquest cas no existeix cap justificació del títol del projecte. La revista Ciao Mamma ja existeix des de fa uns quants anys i, per tant, només hem de continuar seguint el seu trajecte. Així doncs, el títol ens l’han donat i nosaltres no hem intervingut en cap moment. 1.7. VALORS AFEGITS Els valors afegits del nostre projecte són: a) Possibilitat de veure/penjar tutorials fets per l’alumnat. b) Fomenta la interacció i l’intercanvi entre els usuaris (estudiants). c)

Eina complementària als estudis cursats a l’escola

1.8. PARAULES CLAU (5-‐10) Revista, Interactiva, Ciao, Mamma , Ciao Mamma, ERAM, Alumnes, Gam, Blog, Disseny, 3D, Fotografia, Vídeo, Cinema, Entrevistes, Professorat, Professionals, Tutorials, Suggerències 1.9. EQUIPS I ROLS •

Directora del projecte: Claudia Leria

•

Direcció de Fotografia: Xavier Masias

•

Disseny Gràfic: Maria Palacios

•

Postproducció: Àlex Casas i Jordi Massó

•

Programació web: Edgar Hugas i Paulina Okunyte

•

So: Jordi Fornells

Figura 2 – Rols de l’equip

2. ESTAT DE DESENVOLUPAMENT 2.3. MARC TEÒRIC Una revista és una publicació periòdica que ofereix notícies d’actualitat ja sigui sobre temes d’interès general o bé sobre temes especialitzats. Es diferencia del diari per la seva estètica més cuidada en què es dona més pes a la part gràfica, i s’utilitza un paper i una enquadernació de major qualitat. Una de les primeres publicacions apareix entre els anys 1663 i 1668 a Alemanya amb el nom Erbauliche Marraths-‐Unterredungeri, (Discussions Mensuals Edificants) i tractava temes literaris i filosòfics. A la dècada del 1670 s’estén per Europa i apareixen les primeres revistes d’entreteniment amb contingut divertit, de les quals la més coneguda va ser Le Mercure Galant que va aparèixer al 1672 i que més tard es va anomenar Mercure de France. Durant el segle XVIII va començar a augmentar el nombre de publicacions de revistes, del 1709 al 1711 es va publicar The Tatler, definit per la Enciclopèdia Britànica com un conjunt de textos acompanyats d’il·∙lustracions que s’editava regularment tres cops per setmana. Al 1731 va aparèixer a Londres la revista The Gentleman’s Magazine, considerada la primera revista d’interès general. El seu editor, Edward Cave, va ser el primer en utilitzar la paraula magazine, derivant de la paraula àrab makhazin, que significa dipòsit. La publicació de revistes es va consolidar degut a que era una activitat que generava ingressos i així va evolucionar fins a tractar temes molt diversos tot i que inicialment va aparèixer com una publicació informativa. El naixement d’Internet i l’evolució de les noves tecnologies han permès passar la revista física al món web. Tot i que les edicions digitals acostumen a basar-‐se en les edicions impreses, les revistes digitals poden funcionar de manera autònoma i fins i tot no tenir edició impresa ja que la tecnologia actual permet actualitzacions diàries del contingut així com un nivell d’interacció amb l’usuari que fa que la revista evolucioni constantment. Aquesta evolució tecnològica permet una accessibilitat gairebé instantània a la informació des de qualsevol part del món i amb un cost mínim fent així que les revistes digitals siguin un gran canal de comunicació. Des de l’escola ERAM se’ns proposa renovar per complet la revista digital Ciao Mamma, una revista relacionada amb els cursos sobre audiovisuals i multimèdia que es realitzen a l’escola i que té els seus antecedents en l’anterior revista de l’ERAM anomenada Mare. La revista Mare va néixer l’any 2006 i durant tres anys van publicar deu números en què van tractar temes com el disseny gràfic, els audiovisuals, el multimèdia, així com també van entrevistar a professors i professionals del

sector i van realitzar diversos tutorials. Degut a problemes de drets amb el nom de la revista, Mare va haver de reestructurar-‐se donant lloc a Ciao Mamma la revista actual que fins a dia d’avui ha mantingut una estructura i uns continguts similars als del seu antecedent, Mare. 2.3. ESTUDI DE L’ESTAT DE LA COMPETÈNCIA (BENCHMARKETING) 2.2.1. CRITERIS DE RECERCA Per fer la recerca de les webs ens hem basat en dos ítems, el contingut de la web i el disseny de la web. Dins del contingut de la web ens hem centrat en buscar revistes digitals que tractessin temes com l’art, la fotografia, el disseny gràfic, artistes desconeguts i emergents, audiovisuals, entrevistes... I així fer-‐nos un idea de com són les revistes d’aquesta categoria, quins tipus de noticies publiquen o com fan les entrevistes per tenir uns referents clars. Tanmateix hem buscat webs que es dediquessin als tutorials per profunditzar en la nostra secció pròpia que tindrem d’ells. D’aquesta manera hem pogut veure diferents mètodes de com realitzar un tutorial, ja sigui de cara al guió (la persona que parlarà) o els aspectes tècnics (seguirem amb un punt de focus al cursor, apareixeran en pantalla les tecles utilitzades...). Per el que fa al disseny web hem buscat pàgines que tinguessin una certa semblança a com volem realitzar la nostra web, tan sigui per la cromàtica, l’organització del contingut, els gràfics, els Thumnails, els Sliders o els Hovers. Tenim diferents exemples que s’adeqüen molt al que volem fer i que ens poden ajudar alhora de realitzar-‐ho. A més a més hem tingut la casualitat de trobar pàgines que ens serveixin tan de contingut com de disseny. 2.2.2 TAULA DE WEBS PRESELECCIONADES AMB QUADRE DE DESCRIPCIÓ 1. Wacom Empresa dedicada a la venda de tauletes gràfiques i accessoris per aquestes. http://www.wacom.com/ 2. CFYE Revista artística amb l’objectiu de promoure artistes i donar a conèixer obres.

http://cfye.com/ 3. Soundmagazine Revista de música i so que dona a conèixer nous talents. http://www.soundmagazine.it/ 4. Wow Magazine Revista de l’empresa BRP dedicada a la fabricació de vaixells, motos de neu, motos aquàtiques etc. http://brp-‐wow.com/ 5. Codrops Notícies , recursos i tutorials sobre disseny i programació web. http://tympanus.net/codrops/ 6. Adaptable Agència creativa de disseny web, Branding i impressió. http://weareadaptable.com/ 7. Meristation Portal d’informació sobre consoles i videojocs. http://www.meristation.com/ 8. A magazine curated by Revista periòdica sobre disseny i moda. http://www.amagazinecuratedby.com/ 9. 3d Juegos Web sobre consoles i videojocs. http://www.3djuegos.com/ 10. Muy Interesante Revista sobre temes variats com innovació, tecnologia, historia, naturalesa, salut, cultura… http://www.muyinteresante.es/ 11. Awwwards Galeria de llocs web interessants pel seu disseny, programació, interactivitat… http://www.awwwards.com/

12. FIFA Portal d’informació de la FIFA (Federació Internacional de Futbol). http://es.fifa.com/ 13. UEFA Portal d’informació de la UEFA (Federació Europea de Futbol). http://es.uefa.com/ 14. Magazine Vilebrequin Revista on es parla de l’acció de la caritat, estil de vida i viatges i de l’alliberament de les tortugues. http://magazine.vilebrequin.com/en/ 15. W Magazine Revista de moda americana. http://www.wmagazine.com/ 16. Codetex Empresa que s’encarrega de teixits de revestiment, adhesius i accessoris. http://www.codetex.com/ 17. Tilde Empresa de disseny i desenvolupament web, cursos de formació i desenvolupament OpenSource. http://www.tilde.io/ 18. Fantassin Estudi de disseny interactiu. http://www.fantassin.fr/ 19. InkSide Revista d’art, disseny gràfic, música, cinema, fotografia i il·∙lustració. http://www.inksidesign.com/ 20. IdeaFixa Revista d’art i disseny brasiler. http://www.ideafixa.com 21. Doux Revista amb col·∙lecció d’imatges, fotografies i pintures.

http://www.douxmag.com/index.html 22. Abre El Ojo Revista del centre superior de disseny IED Madrid. http://abreelojo.com/ 23. Impracabeza Revista de fotografies i il·∙lustracions d’artistes desconeguts. http://www.impracabeza.org 24. Komma Revista de la Facultat de Disseny de Mannheim (Alemanya) http://komma-‐mannheim.de/ 25. Design & Life Revista que recopila informació de disseny, estil de vida, moda, tendències i noticies creatives. http://www.designandlife.com 26. Castle Magazine Revista de treballs d’il·∙lustradors, artistes i creatius. http://www.castlemagazine.de/ 27. Revolver Lover Revista amb l’objectiu de cercar, compartir i promoure noticies relacionades amb el disseny. http://www.revolverlover.net 28. Room Publicació independent que parla de disseny industrial, disseny gràfic, interiorisme, arquitectura, moda i art. http://www.room-‐digital.com 29. Aetuts+ Pàgina que alberga i mostra alguns dels millors tutorials d’After Effects. http://ae.tutsplus.com/ 30. Motion Graphics Pàgina que alberga tutorials d’After Effects i Cinema 4D. http://motiongraphics.nu/category/after-‐effects/

2.2.3 ANÀLISI EN PROFUNDITAT DE QUATRE WEBS Aquest anàlisi de cinc webs són de la nostra especialitat i tracten de promocionar el mateix producte que nosaltres, en resum són la competència directa. 1. KOMMA http://komma-‐mannheim.de/ Revista de la facultat de Disseny de la Universitat de Mannheim, Alemanya. La revista

mostra

obres

dels

diferents

departaments de la universitat així com entrevistes i reportatges relacionats amb l’escena. Es presenta com una sala d’exposició per als alumnes ja que se’ls permet publicar treballs amb l’objectiu d’establir nous contactes. Aquests treballs són enviats a més de 1200 empreses de la indústria de comunicacions com agències de publicitat, estudis de disseny, editorials... Figura 3 – Captura pàgina Komma L’estètica que segueix la web és d’estil minimalista però tot i tractar-‐se de la web d’una revista produïda per una universitat de disseny,

observem

una

interfície

poc

treballada a nivell gràfic que treballa únicament amb blanc i negre i en ocasions utilitza un vermell clar per destacar informació així com la línia per separar contingut. La disposició de les fotografies dins l’article no està editada amb marges pel costat fent que les fotografies quedin superposades. Així mateix, en certes ocasions com al menú o alguns articles, el text està mal

Figura 4 – Captura pàgina Komma

posicionat fent que quedi per sota algun altre objecte dificultant així la lectura. Per altra banda, la disposició dels vídeos en format llista, així com la pàgina de contacte, què és la que està més treballada a nivell gràfic estan dissenyades correctament. Per tant doncs, el disseny no s’adequa al objectiu comunicatiu ja que la pàgina no mostra una estètica atractiva que capti l’atenció de l’usuari amb certs coneixements gràfics que busca treballs de qualitat, tot i que en aquest cas els continguts sí que són de nivell. Figura 5 – Captura pàgina Komma Pel que fa a la usabilitat i la navegació, és senzilla i intuïtiva tot i que el menú té massa enllaços dels quals alguns no mostren informació d’un interès prou elevat com per ser destacat en la barra de menús. Els links són destacats amb un color vermell clar així com també s’utilitza aquest color per indicar a quina pàgina ens trobem. Per últim, caldria transcriure la web a altres idiomes com podria ser l’anglès. Tot el contingut gira entorn la revista, d’edició impresa tot i que també es pot

Figura 6 – Captura pàgina Komma

visualitzar en format digital des de la web. La revista conté treballs de disseny d’alta qualitat que aporten quelcom interessant a nivell artístic i creatiu així com també acadèmic donat que tot el contingut és generat per alumnes oferint-‐los així suport per entrar dins el món professional. Respecte la qualitat tècnica de la pàgina, tots els links funcionen correctament i el contingut es carrega ràpid. Els vídeos, linkats des de Vimeo, són entrevistes o reportatges

realitzats amb estil propi, cinematogràfic, així mateix, les fotografies tenen gran qualitat a nivell composició, llum, color... però la mida què es mostren és molt reduït. Ja per acabar, és una pàgina que requereix de les actualitzacions de la revista impresa per tal de poder seguir actualitzant-‐se i tenint sentit.

2. ABRE EL OJO http://abreelojo.com/ Revista de disseny, comunicació i moda creada des de l’IED (Institut Europeu de Disseny), de Madrid. L’objectiu de la revista és informar contínuament sobre el panorama cultural de Madrid i les últimes tendències relacionades amb el disseny. És una revista produïda únicament en format digital que publica els articles constantment en format blog oferint així una gran quantitat d’informació accessible de forma fàcil i gratuïta. t

Figura 7 – Captura pàgina Abre el Ojo

Pel que fa al disseny, trobem una interfície poc arriscada a nivell gràfic ja que treballa amb fons blanc i utilitzant el negre per als textos i les fines línies que separen el contingut, distribuint la informació en blocs rectangulars en els que habitualment destaca una imatge acompanyada de text. L’espai de la dreta s’ha reservat per mostrar contínuament accessos a les xarxes socials així com publicitat dels estudis que cursen al IED. El seu disseny senzill compleix amb els objectius comunicatius ja que els continguts són la part essencial de la pàgina, i la seva representació en l’espai separant-‐los per blocs i utilitzant la imatge per destacar fa que l’accés a la informació sigui fàcil i intuïtiu. Els menús amb desplegables separen el contingut en funció del gènere o la temàtica que tracten.

Figura 8 – Captura pàgina Abre el Ojo

Figura 9 – Captura pàgina Abre el Ojo

La pàgina web però, no mostra a l’usuari en quina secció es troba, ni ofereix l’opció de retrocedir des de la pròpia pàgina, fet que dificulta la navegació en una pàgina amb tant contingut sobre diferents temàtiques. Els continguts s’adeqüen als objectius de la revista ja que ofereix tot tipus d’informació relacionada amb el món del disseny, la comunicació i la moda a la ciutat de Madrid, fet que limita l’interès per la pàgina als habitats de la província de Madrid i rodalies, o a aquells professionals amb els recursos necessaris per viatjar-‐hi. Tècnicament, és ràpida en mostrar els continguts i tots els links funcionen correctament. A nivell visual, no conté vídeos i únicament utilitza la fotografia o il·∙lustració com a capçalera per als articles. Finalment, és una pàgina que requereix d’actualitzacions constants per tal de mantenir l’interès del públic, tot i així, al estar desenvolupades amb Wordpress es poden pujar nous articles fàcilment.

3. DIGITAL TUTORS http://www.digitaltutors.com/ Digital tutors és un portal d’educació que ofereix cursos sobre diferents softwares a mode de vídeo tutorials. És necessari registrar-‐se com a usuari obtenint així una sèrie de cursos, d’iniciació habitualment, de forma gratuïta. També hi ha disponibles una sèrie se subscripcions que donen accés a tots els cursos complerts. Figura 10 – Captura pàgina Digital Tutors El disseny de la interfície esta ben treballat gràficament d’acord al contingut que ofereix, que és formació en disseny. Treballa sobre fons clar i utilitza la imatge com a element expressiu per tal de destacar la informació que ofereix. L’ús del text és escàs i tant sols s’utilitza per posar títols o informar sobre el software i la durada del tutorial. Una vegada s’inicia sessió, la interfície canvia, passant a ser amb fons fosc i utilitzant el color taronja per destacar informació. La pàgina inicial mostra informació relacionada amb l’historial de l’usuari dins la pàgina, així com amb les seves preferències. També apareix un nou menú que permet accedir al contingut en funció del que ja ha visualitzat l’usuari, el que és nou, el software, la temàtica o diferents rutes d’aprenentatge.

Figura 11 – Captura pàgina Digital Tutors

En oferir tants tutorials, la navegació per la pàgina és complicada i lenta, i no mostra informació a l’usuari sobre la secció en la que es troba, ni permet tornar endarrere sense fer ús del navegador. Tot i així la pàgina facilita la navegació de forma intuïtiva utilitzant icones que permeten reconèixer la informació ràpidament. Els continguts s’ofereixen en format videogràfic ja que el producte que ven la pàgina són videotutorials i per tant el format va intrínsecament lligat al contingut. Els tutorials estan disponibles en HD i amb bona qualitat de so, tot i que són en anglès i sense subtitular. Al tenir més de 4000 tutorials disponibles en alta definició, és una pàgina que tarda en carregar tot i que un cop ho ha fet, els vídeos es poden visualitzar sense talls.

Figura 12 – Captura pàgina Digital Tutors

4. ROOM DIGITAL http://www.room-‐digital.com/

Figura 13 – Captura pàgina Room Digital

Room és una aplicació independent produïda a Madrid que parla de disseny industrial, gràfic, interiorisme, arquitectura, moda, art i altres formes de creació contemporània. L’estil de la pàgina és modern i minimalista amb una estètica cuidada treballant amb blancs i negre però utilitzant també tons grisos i ombres que creen profunditat. El menú és discret, enllaça amb els diferents tipus de contingut i té també un buscador que filtra el contingut. A la part superior, per sota del menú, destaca un Slideshow amb fotografies i animacions de text que enllacen amb els continguts més recents. Els articles es mostren en forma de blocs en que destaca una imatge i el requadre del text sembla sortir de la fotografia. La barra Figura 14 – Captura pàgina Room Digital

lateral, situada a la part dreta, permet subscriure’s al butlletí així com accedir als articles més apreciats pels usuaris.

A la pàgina de secció, la barra lateral mostra els diferents tipus de contingut de cada secció així com un llistat d’etiquetes. El disseny s’adequa a l’objectiu comunicatiu que pretén transmetre

informació

artística

contemporània. La navegació per la web és senzilla i intuïtiva, i tot i que no indica a l’usuari en quina secció es troba, tots els elements que es poden clicar estan animats per indicar que enllacen amb quelcom.

Figura 15 – Captura pàgina Room Digital

El contingut va d’acord al públic a qui va dirigit , professionals del món artístic que busquen treballs de diferents vessants que aportin quelcom creatiu i innovador així com noticies relacionades amb art, disseny, arquitectura... També permet visualitzar la revista d’edició impresa que mostra notícies i treballs amb un disseny editorial modern d’acord amb l’estètica de la web. Tècnicament està molt ben realitzada, s’han cuidat els detalls i la disposició de la informació i tot funciona correctament amb una carrega ràpida. Les imatges i els vídeos tenen qualitat tant a nivell compositiu com de color tot i que les fotografies tant sols es poden visualitzar a mida petita. Finalment, és una pàgina que s’ha d’actualitzar constantment per tal d’oferir continguts contemporanis tal com pretén.

CONCLUSIONS Les webs analitzades s’han d’escollit per ser considerades competència directa, a nivell internacionals. Dos d’elles són revistes d’escoles de disseny i un altre és una escola online que utilitza els tutorials com a mitja educatiu, així que els contingut que ofereixen són similars als nostres. L’altre pàgina no es considera competència directa ja que els seus continguts són més generals però s’ha tingut en compte per seu tractament estètic així com per la disposició de la informació. Deixant de banda la pàgina de digital tutors, que és diferència de la resta pel seu contingut únicament videogràfic, les altres pàgines son bastant similars en tots els aspectes; treballen amb blancs i negres, utilitzen la imatge per destacar contingut i el separen per blocs rectangulars. Tot i així, la pàgina “ROOM Digital” destaca sobre la resta del seu tractament gràfic. Un altre aspecte, negatiu en aquest cas, que comparteixen totes les pàgines és que no indiquen a l’usuari en quina secció es troba i dificultant així la navegació, sobretot en el cas de “Digital Tutors” i “Abre el Ojo” ja que són pàgines amb molt de contingut i sobre temàtiques diverses. Un altre aspecte que destaca en les pàgines “Abre el Ojo” i “ROOM digital” és la Sidebar, essent la última la que considerem més útil ja que mostra etiquetes i enllaços als articles destacats. Pel que fa a la imatge i el vídeo, totes les pàgines tenen contingut molt bo tècnicament tot i que considerem que amb el pes que té la part visual en aquests tipus de projectes les fotografies s’haurien de mostrar amb mides més grans. Com a conclusió, creiem que tot i que el contingut és l’important en una revista digital, el disseny gràfic de la interfície no es pot deixar de banda i per això hem considerat adient donar al projecte una estètica il·∙lustrativa i plena de color, amb un to alegre, d’acord amb la imatge de l’ERAM, que és qui desenvolupa el projecte.

2.2.3 WEBS SELECCIONADES AMB CAPTURA DE PANTALLA

Pàgina 1 – Aetuts+ http://ae.tutsplus.com/ Aetuts+ és una pàgina que alberga i mostra alguns dels millors tutorials d’After Effects. Publiquen tutorials amb grans efectes explicats d’una manera accessible per l’usuari. A més a més, podem trobar articles, Presets i Plugins per ajudar a treure el màxim profit. Els usuaris, que conten amb un apartat d’ajuda des de la mateixa web sobre com fer un tutorial, també poden enviar-‐los per a que siguin penjats a la pàgina.

Pros: Menú superior, buscador, imatge de referència i títol en Thumnails, submenú amb categories. Contres: Disposició de la informació en format blog, Scroll vertical molt llarg.

Figura 16 – Captura pàgina Aetuts+

Pàgina 2 – Magazine Curated By http://www.amagazinecuratedby.com Una revista de moda que explora l’univers d’un dissenyador elegit en cada número. Desenvolupen contingut personalitzat per expressar els seus valors estètics i culturals de manera innovadora. És concebuda com la primera revista de moda de Bèlgica. Pros: menú senzill, Hover. Contres: Menú petit, logotip petit, imatges sense separació.

Figura 17 – Captura pàgina Magazine Curated By

Figura 18 – Captura pàgina Magazine Curated By

Pàgina 3 -‐ CFYE http://cfye.com CFYE és una revista dirigida a la exploració dels pensaments i obres d’aquelles persones més apassionades en el seu ofici. A traves dels seus articles volen presentar a les persones i les històries que els inspiren tant. Pros: Hover imatges, articles ben diferenciats, pàgina About Us. Contres: menú lateral, espai articles excessivament gran, mostra pocs articles per pantalla, menú amagat.

Figura 19 – Captura pàgina CFYE

Figura 20 – Captura pàgina CFYE

Pàgina 4 -‐ Codetex http://blog.codetex.com/ Empresa que s’encarrega de teixits de revestiment, adhesius i accessoris. Les principals marques de la moda també els hi confien la gestió logística dels seus magatzems de primeres matèries. Acumulen més de 40 anys d’experiència al servei de les grans marques mundials de teles i peces de vestir. Pros: Contres:

Figura 21 – Captura pàgina Codetex

Pàgina 5 – Codrops http://tympanus.net/codrops/ Codrops és una pàgina de disseny web i de desenvolupament que publica articles i tutorials sobre les últimes tendències web, tècniques i noves possibilitats. Innoven cada dia empenyent els límits de com els llocs web es construeixen a partir de l’estructura fonamental dels efectes d’interacció més delicades. Pros: Thumnails destacats, menú superior. Contres: Imatges molt grans, no mostren titular, poca informació per pantalla.

Figura 22 – Captura pàgina Codrops

Figura 23 – Captura pàgina Codrops

Pàgina 6 -‐ Room

http://www.room-‐digital.com

Room és una publicació independent que parla de disseny industrial, disseny gràfic, interiorisme, arquitectura, moda, art i altres formes de creació contemporània. La revista es caracteritza per la qualitat dels seus continguts, la maquetació i el seu disseny. Pros: Logotip destacat, xarxes socials a la part superior, Slider horitzontal amb fotografia, menú superior, Thumnails amb Hover. Contres: Thumnails rectangulars en vertical, menú extens, poques columnes (només dues).

Figura 24 – Captura pàgina Room Digital

Figura 25 – Captura pàgina Room Digital

Pàgina 7 – Sound Magazine http://www.soundmagazine.it/ Soundmagazine és una pàgina de música amb la intenció de promocionar artistes emergents. Tenen diferents seccions en les quals podem trobar l’Àlbum del Mes, l’Àlbum de la setmana, el Single de la Setmana.... D’aquesta manera s’asseguren de posicionar a la web els millors artistes durant una temporada per tal de donar-‐los a conèixer de millor manera. Pros: Menú superior, Thumnails amb imatge i titular, color per diferenciar contingut, el Hover dels Thumnails. Contres: Molts apartats en el menú, tipografia menú petita, poc color per diferenciar els continguts, nombre elevat de columnes.

Figura 26 – Sound Magazine

Pàgina 8 – Vilebrequin http://magazine.vilebrequin.com/en/ Vilebrequin és una firma Italiana dedicada única i exclusivament al disseny de banyadors. Nascuda als anys 70, la marca sempre aposta per estampats divertits i coloristes. La marca ha creat una revista digital on parlen de l’acció de la caritat, estil de vida i viatges i de la l’alliberament de les tortugues. Pros: Logotip destacat, menú superior discret, pes fotografia, titulars destacats. Contres: Pàgina inicial mostra els enllaços del menú en gran, molts nivells per accedir a les notícies.

Figura 27 – Captura pàgina Vilebrequin

Pàgina 9 -‐ Wacom http://www.wacom.com/es/en/our-‐business Principal fabricant del món de dispositius interactius i solucions d’interfície digital. Desenvolupen les seves pròpies aplicacions així com el treball amb les empreses de programari líders en el món per assegurar-‐se que els seus dispositius (telèfons intel·∙ligents, tauletes, i PC) s’integren amb elegància. Pros: Thumnails quadrats i rectangulars amb Hover, fons canvia color amb Scroll, pes fotografia, animacions Hover. Contres: Barra menú lateral, submenús extensos.

Figura 28 – Captura pàgina Wacom

Figura 29 – Captura pàgina Wacom

Pàgina 10 – W Magazine http://www.wmagazine.com/ W és una revista de moda americana mensual publicada per Condé Nast Publications i creada al 1972. Al 2013 la revista combina els números de desembre/gener i juny/juliol amb la finalitat d’alliberar els diners per invertir amb la marca digital de la revista. Pros: Menú superior, menú fixe. Contres: Menú extens, Thumnails sense Hover, poc espai entre Thumnails, diverses mides dels Thumnails.

Figura 30 – Captura pàgina W Magazine

Pàgina 11 – Wow http://brp-‐wow.com/es

Figura 31 – Captura pàgina Wow

Figura 32 – Captura pàgina Wow

Pàgina 12 – Revolver Lover http://www.revolverlover.net Revista fundada a Itàlia l’any 2003 per Nazario Graziano amb un objectiu de cercar, compartir i promoure tot l’interessant del disseny. Estan en la recerca de noves tendències, idees de joves, fotògrafs de moda, estil de vida, publicitat, inspiracions arquitectòniques, vídeo i relacionats amb el disseny.

Figura 33 – Captura pàgina Revolver Lover

Figura 34 – Captura pàgina Revolver Lover

Pàgina 13 – Castle Magazine http://www.castlemagazine.de/ Castle Magazine és una revista online amb números regularment. Es tracta de treballs d’il·∙lustradors lliures, artistes i creatius. Cada número ve de forma gratuïta i esta plena d’alta qualitat de material artístic.

Figura 35 – Captura pàgina Castle Magazine

Figura 36 – Captura pàgina Castle Magazine

Pàgina 14 – Design & Life http://www.designandlife.com És una revista publicada per PH design consultant. Recopila informació de disseny, estil de vida, moda, tendències i notícies creatives de tot el món. Fins i tot porten les receptes casolanes més fàcils i saludables.

Figura 37 – Captura pàgina Design & Life

Figura 38 – Captura pàgina Design & Life

Pàgina 15 -‐ Komma http://komma-‐mannheim.de/ La revista de la Facultat de Disseny de la Universitat de Mannheim presenta obres seleccionades dels diferents apartaments, juntament amb entrevistes i reportatges de l’escena. Es considera una sala d’exposició per als estudiants.

Figura 39 – Captura pàgina Komma

Figura 40 – Captura pàgina Komma

Pàgina 16 -‐ Impracabeza http://www.impracabeza.org Impracabeza neix com espai permanent de periodicitat inconstant. Una porta sempre oberta amb avenços de pròxims números, noticies i col·∙laboracions inèdites.

Figura 41 – Captura pàgina Impracabeza

Figura 42 – Captura pàgina Impracabeza

Pàgina 17 – Abre El Ojo http://abreelojo.com/ Abrir El Ojo té com objectiu estar al dia de tot el que passa per estar ben informats. La revista projecta el panorama cultural que lliga el IED Madrid (centre superior de disseny) amb la ciutat que l’alberga, sent un punt de retrobament per els alumnes que estudien en ell i una font de coneixement atenta a un món de canvi continu i progressivament més complex.

Figura 43 – Captura pàgina Abre el Ojo

Figura 44 – Captura pàgina Abre el Ojo

Pàgina 18 -‐ Doux http://www.douxmag.com/index.html Doux no és només una revista online, és majoritàriament una col·∙lecció d’imatges que considerem necessàries per veure. Es focalitza majoritàriament en fotografies i pintures, deixant quelcom d’espai a paraules que els artistes desitgin expressar en petites entrevistes.

Figura 45 – Captura pàgina Doux

Pàgina 19 -‐ IdeaFixa http://www.ideafixa.com La revista IdeaFixa va ser la primera publicació online d’art brasiler. La seva primera edició va néixer al juliol del 2006 i en l’actualitat s’ha considerat com un referent en el disseny, la il·∙lustració i el treball dels professionals participants. Es publica trimestralment i cada número té un tema específic.

Figura 46 – Captura pàgina IdeaFixa

Figura 47 – Captura pàgina IdeaFixa

Pàgina 20 -‐ Inkside http://www.inksidesign.com/ Inkside és una revista bimestral que avarca temàtiques sobre l’art, disseny gràfic, música, cine, fotografia i il·∙lustració. És un projecte que té com objectiu donar espai a les persones interessades en expressar i compartir les seves inquietuds artístiques. És una pauta per apropar-‐nos a l’art i tendències actuals, a talents amagats i trobats.

Figura 48 – Captura pàgina Inkside

Figura 49 – Captura pàgina Inkside

3. ARQUITECTURA DE LA INFORMACIÓ 3.1. USABILITAT Els continguts de la pàgina web estan identificats per colors per tal d’informar a l’usuari quin tipus d’article està visualitzant. Així mateix, al menú també es senyala amb el color vermell Ciao Mamma la pàgina en què ens trobem, al igual que amb els títols dels articles, que canvien de color amb l efecte Hover per tal d’indicar a l’usuari que és clicable. El logotip de la capçalera s’ha enllaçat amb la pàgina inicial per facilitar el recorregut per la pàgina. Dins la pàgina d’article s’ha afegit una Sidebar amb un buscador i un llistat dels continguts recents per permetre a l’usuari filtrar els articles i accedir ràpidament al que està buscant. Actualment la pàgina està disponible únicament en català però en un futur es traduirà al castellà i l’anglès per ampliar el públic objectiu i facilitar l’ús de la pàgina a tots aquells alumnes estrangers que es matriculin a l’ERAM

3.2. CAPÇALERA

A la capçalera de la pàgina trobem únicament el logotip de Ciao Mamma que enllaça amb la pàgina inicial de la web.

3.3. MENÚ PRINCIPAL

•

Inici o

•

Botó que s’utilitzarà senzillament per facilitar el retorn a la portada .

Noticies o

Apartat on hi apareixeran nous articles relacionats amb les noves tecnologies, amb obres o artistes distingits i representatius, etc. que puguin aportar informació d’interès per als usuaris.

•

Entrevistes o

Apartat on hi apareixeran entrevistes gravades o transcrites de persones vinculades al món de l’art, als audiovisuals, al disseny gràfic o antics alumnes de l’ERAM, professors, etc. que puguin aportar informació d’interès per als usuaris.

•

Alumnes o

•

Apartat on els alumnes podran mostrar els seus millors treballs.

Suggerències o

Apartat on els alumnes o usuaris podran penjar suggerències relacionades amb l’escola o la web.

•

Tutorials

Apartat on els alumnes podran penjar tutorials interessants que ajudaran als usuaris a aprendre qualsevol cosa amb facilitat.

3.4. BLOC DE CONTIGUTS

En aquest bloc s’hi aniran actualitzant els nous articles que vagin sorgint amb el temps. Tots els Thumbnails tindran forma rectangular i estaran disposats en quatre columnes i ordenats per ordre de data descendent. Composats d’una imatge que ocuparà la meitat del bloc, seguits del contingut i el títol de l’article.

3.5. SIDEBAR La Sidebar tan sols apareix a la pàgina d’article. En ella trobem un enllaç amb informació referent al Facebook de Ciao Mamma, així com un cercador i un llistat dels continguts més recents pujats a la web. 3.6. PEU Al Footer de la pàgina trobarem els enllaços a les pàgines de l’ERAM, i al Facebook, Youtube i Vimeo de Ciao Mamma. També hi ha la direcció de l’ERAM així com l’enllaç a la pàgina d’About Us.

3.7. ESTRUCTURACIÓ PER NIVELLS Els continguts informatius de la pàgina web estaran disposats en 3 nivells diferents: •

El primer nivell és la portada de la pàgina web. On tots els nous articles que apareixeran mesclats en el bloc de continguts de l’índex per ordre de data descendent.

•

El segon nivell serà les llistes de continguts classificades per categories que apareixeran al fer clic sobre els botons del menú principal. I estaran ordenades per ordre de data descendent també.

•

El tercer nivell seran els articles de contingut als quals s’accedirà fent clic a sobre de qualsevol Thumnail de la portada o en qualsevol dels articles de les llistes de continguts classificats per categories. En aquest nivell apareixerà una Sidebar mitjançant la qual podrem accedir al contingut més recent i al Facebook de Ciao Mamma.

3.7. EXPERIÈNCIA DE L’USUARI

Els factors i elements que intervenen en el camí que l’usuari recorre a traves de la revista han d’estar disposats i determinats per maximitzar l’experiència que la persona obté de la nostra pàgina web aportant així tot un seguit de sensacions positives per a l’usuari.

3.8. ARBRE DE NAVEGACIÓ

Figura 50 – Arbre de Navegació

3.9. DIAGRAMA DE FLUX Figura 51 – Diagrama de Flux

4. DISSENY DE LA INTERFÍCIE 4.1. IDENTITAT CORPORATIVA

La marca Ciao Mamma es configura com un logotip basat en la tipografia Brannboll Fet, una tipografia lligada que potencia el treball en equip, un dels punts claus per desenvolupar la revista. El traçat lligat, d’estil painting, denota una relació amb el món de les arts visuals. Quan nosaltres vam començar en aquest projecte, el nom ja estava decidit així que vam haver d’adaptar-‐nos a ell. En el moment de començar a pensar un logotip, el poc lligam del naming amb l’escola ens va dificultar molt el procés. Ciao Mamma fa referència al nom original de la revista, anomenada “Mare”. Per motius legals, el nom es va haver de canviar i va acabar convertint-‐se en l’actual: “Ciao Mamma”. Aquest traduït al català, significa “Adéu Mare”. Al final d’un procés molt llarg, vam acabar decantant-‐nos per el logotip actual, format per una màquina d’escriure, el nom de la revista i un descriptor, “La revista de l’ERAM”, dins d’un bookmark. El conjunt del isotip i el nom de la marca fa una referència al passat. Totes dues són una metàfora a quelcom que va existir antigament i que a evolucionat fins a convertir-‐se amb el que ara podem anomenar, revista digital. Per una banda tenim la màquina d’escriure, que fa referència a l’origen de les revistes quan antigament s’utilitzava aquest mitjà per escriure-‐les. Així doncs, és una metàfora als principis de la història i a com ha evolucionat fins a convertir-‐se en un mitja digital. I per altra banda tenim el nom, el qual fa referència al nom original de la revista, anomenada “Mare” (que és ERAM al revés). Al voltant d’aquest logotip, vam anar creant una hipòtesis de la història que podria tenir, que és la següent: “L’adolescent es fa gran, comença una nova etapa que consisteix en començar la universitat, així que marxa de casa la mama. La màquina d’escriure serà el mitja per explicar-‐li les coses des de la distancia i ho farà a partir de la revista, el diari personal dels estudiants de l’ERAM”.

4.1.1 LOGOTIP Aquí podem veure un resum del procés fins al logotip final que ara representa la revista.

Figura 52 – Progrés del logotip

4.1.2. COLORS COPORATIUS El color és un component fonamental de la identitat visual de Ciao Mamma i contribueix de manera essencial a sistematitzar les comunicacions. Per tal de garantir la correcta reproducció de la marca en diferents suports, recollim en aquesta pàgina els diferents valors en RGB, CMYK i PANTONE.

Figura 53 – Cromatisme

4.1.3. TIPOGRAFIA La tipografia que forma part del logotip és la Brannboll Fet i l’Amatic SC Regular. Cal dir, que la Brannboll Fet ha sigut retocada a la nostra manera per tal de desenvolupar el logotip.

Figura 54 – Tipografia logotip

Per altra banda, proposem dues tipografies, semblants en estil a les del logotip i que es complementen molt bé entre elles, per a desenvolupar material gràfic relacionat amb la revista. Justament són aquestes les que formen part de cada baner de promoció dins de la web de la revista.

Figura 55 – Tipografia secundaria

4.2. DISSENY DE LA INTERFÍCIE La web de Ciao Mamma esta formada per nou dissenys de pàgines diferents que explicarem a continuació. Els mockups de les pantalles estan a l’Annex 1. 1. Pàgina Home: aquesta és la pàgina principal de la web. En ella trobem un Slider, el qual anirà passant diferents imatges de promoció de les seccions. Seguidament trobem els articles que formen la web dins d’uns rectangles. Aquests estan composats per una imatge que serà la corresponent a la notícia, entrevista, tutorial... un text separat per colors corresponents a la seva secció, i amb una etiqueta per a poder diferenciar-‐les bé. Figura 56 – Pàgina Home

2. Secció Notícies: A la secció de notícies trobarem articles relacionats amb l’ERAM i els audiovisuals i multimèdia. El bàner que encapçala la pàgina explica els tipus de contingut de la secció amb la frase “Ets curiós? Assabenta’t de l’actualitat amb les notícies!” i reforça el missatge amb il·∙lustracions del món i diversos mitjans de comunicació, des del diari, la televisió i el mòbil. El color associat a aquesta secció és el blau.

Figura 57 – Secció Notícies

3. Secció Entrevistes: Les entrevistes estan associades al color taronja. La frase del bàner, “Coneix la carrera de professors, exalumnes i professionals”, defineix el tipus d’entrevistes que es podran trobar a la pàgina. Les il·∙lustracions que l’acompanyen són els elements mínims per realitzar una entrevista; una càmera, el micròfon i uns focus. Al mig trobem la icona d’home i dona representant al col·∙lectiu entrevistat. Figura 58 – Secció Entrevistes

4. Secció Tutorials: L’apartat de tutorials és un punt de trobada en el que els estudiants puguin compartir els seus coneixements i aprendre d’altres. La frase del bàner és “Ensenya i aprèn dels teus companys amb els tutorials”

trobem

il·∙lustracions

d’un

ordinador, unes ulleres modernes com a metàfora de “l’empollon” actual i altres com un cafè o una poma en referència a Apple. El color que defineix aquesta secció és el lila.

Figura 59 – Secció Tutorials

5. Secció Alumnes: En aquesta secció els alumnes són els protagonistes, i serà la manera que puguin exposar els seus treballs, ja siguin de l’ERAM o de fora. El color associat a aquesta secció és el verd. La frase “La galeria de treballs, projectes i premis de l’alumne” ho deixa ben clar, i és que la seva funció serà la de fer de galeria.

D’aquesta

manera

s’ha

volgut

representar al col·∙lectiu freak amb el fantasma del famós joc del ComeCocos, així com diversos objectes per a realitzar un treball o guanyar un premi.

Figura 60 – Secció Alumnes

6. Secció Suggerències: Per finalitzar la web, hem incorporat un espai on l’alumne, professor o exalumne, pugui fer les seves opinions, suggerències i crear així un espai on poder expressar les idees de cadascú. La frase que encapçala el bàner és “Tens alguna suggerència? Aquest és el teu espai!” per incitar a l’espectador a donar la seva opinió. Al voltant d’ella trobem un camí des d’un ocell (que simbolitza l’opinió d’algú) a un avió (l’opinió transformada en una suggerència). Una bústia, segells i sobres completen la composició. El color que representa a aquesta secció és el color vermell.

Figura 61 – Secció Suggerències

7. Pàgina Article: A dins de cada notícia, entrevista, tutorial... trobarem aquest disseny. Tenim el títol seguit d’informació com la data de publicació, l’autor, el tipus de contingut i categories que defineixen a aquell article. Al costat lateral de la dreta, hem inclòs un enllaç directe al Facebook i les últimes entrades d’articles fetes a la web. Això últim pretén millorar l’experiència de l’usuari alhora de navegar, fent que no hagi de tornar endarrere contínuament per trobar contingut i pugui anar movent-‐se per les últimes novetats més Figura 62 – Pàgina Article

fàcilment.

8. Pàgina Sobre Nosaltres: Aquesta pàgina que la trobarem a dins del Footer, explica què és aquest projecte i quins són els seus integrants. Hem volgut que d’una manera clara però alhora resumida, la persona que no sàpiga de què va el nostre projecte, es posi una mica en situació i posi nom a cada departament de la revista. Les cares representen mínimament a la persona que correspon el nom.

Figura 63 – Pàgina About Us

9. Pàgina Error 404: Aquest ha sigut l’últim espai que hem dissenyat i en el que hem volgut posar un toc d’humor per a la persona que s’ho trobi. D’aquesta manera volem fer somriure a aquell, que buscant quelcom s’equivoqui en la direcció URL o que el contingut que busca ja no estigui disponible a la web.

Figura 64 – Pàgina Error 404

4.2.1 DISSENY DE LA INTERFÍCIE: PÀGINA INICIAL (ESBOSSOS INICIALS) En aquestes dues imatges podem observar els dos primers esbossos que es van proposar al dissenyar la web. Primer de tot trobem un estil més tecnològic i fred, a la vegada que també esta pensada per ser una web interactiva, que al passar per sobre dels requadres de les imatges, el text explicatiu aparegui per sota. El segon s’assembla molt més al que és ara la web, amb aquest estil que té que és el que ha representat tota la imatge corporativa de Ciao Mamma. Els canvis que apreciem al disseny actual de la web, són el menú que no esta separat ni incorpora les icones, els colors de cada apartat que en aquest cas, són més vius i el Footer, que esta amb una tonalitat diferent.

Figura 65 – Primera proposta web

Figura 66 – Segona proposta web

4.2.2

DESCOMPOSICIÓ

ESQUEMÀTICA

DELS

DIFERENTS NIVELLS I SUBNIVELLS (WIREFRAMES) Els wireframes de cada nivell els hem fet en base a les nostres primeres idees per començar a dissenyar la web. Aquests han sigut els primers esbossos per començar a materialitzar la web en un full en base a inspiracions extretes d’altres webs. Tenim el primer nivell, que és la pàgina home, el segon, que és el llistar d’articles, i el tercer, que és la pàgina de cada article.

Figura 67 – Wireframe pàgina Home

Figura 68 – Wireframe de cada secció

Figura 69 – Wireframe pàgina Article

4.3 REQUESITS TECNOLÒGICS 4.3.1. SOFTWARE UTILITZAT El software que s’ha utilitzat per dissenyar la pàgina web ha sigut, l’Adobe Illustrator, que és un editor de gràfics vectorials. Actualment és un programa que forma part de la família Adobe Creative Suite i té com funció i única primordial la creació de material gràfic-‐il·∙lustratiu altament professional, basant-‐se en la producció d’objectes denominats vectors.

5. DEFINICIÓ DE CONTINGUT 5.1. CONTINGUTS TEXTUALS Els textos que integren la pàgina web es poden diferenciar entre dos grups principalment, els textos pertanyents a articles, els quals són variables i van afegint-‐se a mesura que actualitzem la pàgina, i els textos que pròpiament integren components de la pàgina web, com ara descripcions, explicacions, menús i d’altres. 5.1.1. TEXTOS QUE FORMEN PART DE LA PÀGINA Aquests textos solen ser indicadors dels apartats en els quals ens trobem. A la pàgina inicial trobaríem per sota el logotip de la revista, la barra de navegació amb els seu corresponent apartat. La seva nomenclatura ha estat determinada per els continguts els quals volem dividir. Aquestes són: Inici, Notícies, Entrevistes, Tutorials, Alumnes i Suggerències. Si seguim amb els textos que ens trobem a la pàgina Home, podem observar que els següents ja formen part dels articles. A part del títol, la seva funció és resumir en poques paraules l’article o enllaç al que ens porta el link. Aquestes paraules són agafades directament del contingut de l’article i són conformades per els primers caràcters del text. També trobem a mode de distinció els noms de les seccions per sobre de les imatges de cada article, per determinar de manera ràpida cada entrada a quin contingut pertany. Més avall, trobem el text d’informació de la pàgina, ja dins el Footer. Aquest ens indica la direcció i el correu de l’ERAM amb el telèfon. També hi figura un text a mode de link el qual ens portarà a la pàgina About Us si el cliquem. Pel que fa a les pàgines interiors, o el segon nivell, podem trobar pràcticament la mateixa estructura de textos però disposats d’una manera diferent, i aquest cop fent referència exclusivament al contingut del qual en som a la secció. Per exemple, si ens trobem dins de tutorials, els textos tan sols seran tutorials i el que els representi, i així amb totes les seccions. També podem trobar dins de les pàgines on hi ha contingut d’articles, al tercer nivell, un Sidebar on hi figurarà de manera textual el contingut més recent que hagi entrat. El seu aspecte serà de menú lateral, amb links.

També inclourem textos com ara els que surten quan un usuari no està registrat, els quals informaran que per fer algunes de les accions han d’estar registrats (“inicieu sessió o registreu-‐ vos per a enviar comentaris”). Per acabar, dins de la pàgina About Us, hi trobem uns textos explicatius que ens informen de què és Ciao Mamma, de què tracta la pàgina web i sobre qui som. Els textos són els següents: “Què és? Ciao Mamma és una plataforma en forma de revista dirigida especialment als alumnes de l’ERAM” “De què tracta? En ella podràs trobar cinc apartats diferents que tenen l’objectiu d’incloure tots els possibles interessos de l’alumne.” “Qui som? Aquest projecte però, no seria possible sense la feina que alumnes de 4t estan realitzant i aquí us presentem l’equip actual de Ciao Mamma.” 5.1.2. TEXTOS DELS ARTICLES En quant a aquests textos cal dir que no són textos previsibles ja que depenen del contingut que s’estigui incloent, van intrínsecament relacionats. Són textos descriptius els quals seguiran, això si, unes regles per a que siguin òptims per a penjar-‐los a la web. Cal que aquests textos ens expliquin de què es tracta el contingut, utilitzant una narració o una descripció depenent de si es tracta d’articles o qualsevol dels altres continguts respectivament. També cal que esmentin qui els ha creat o editat. També ens han de puntualitzar la data en la que han estat escrits o editats. El seu contingut variarà en funció de si són notícies, entrevistes, tutorials, treballs d’alumnes o suggerències.

Figura 70 – Captura Pàgina Article

•

Notícies: En aquests casos els textos seran pròpiament els articles que siguin editats per la revista, el seu contingut dependrà del tema en el que es centri la notícia. Al principi de l’article hi constarà quin tipus de contingut és, l’autor i les categories a les quals pertany. També hi figurarà la data en que ha estat editat o escrit i pujat.

•

Entrevistes: En aquest cas hi podrem trobar els mateixos camps de text que amb les notícies, però en comptes de trobar-‐hi l’article més avall, hi figurarà una breu sinopsis o resum de la entrevista que s’hagi realitzat i una descripció i informació sobre l’entrevistat.

•

Tutorials: Com en els casos anteriors hi trobarem els mateixos camps informatius, però en aquest cas a sota hi haurà la descripció de la utilitat d’aquest tutorial i els objectius que es poden aconseguir al realitzar-‐lo.

•

Alumnes: Hi tornem a trobar els camps de text esmentats abans i aquest cop trobarem a sota una descripció de les motivacions de l’estudiant respecte el seu treball i un comentari explicatiu sobre els treballs que ens presenta.

•

Suggerències: En aquest cas tots els camps de text seran els mateixos, però el contingut que hi haurà serà pròpiament les suggerències dels alumnes respecte a les

seves inquietuds. De nou és un tipus de contingut que es podrà moderar i que es podrà decidir si mostrar-‐lo o no. A continuació hi figura la fotografia d’un article i la seva posterior transcripció per a ser llegit (Annex 2). Forma part de l’article redactat per la nostra redacció sobre el material que ens proposa Autodesk, i és un clar exemple d’alguns dels continguts amb els que ens trobaríem si llegíssim la revista.

Figura 71 – Captura Pàgina Article

5.2. CONTINGUTS AUDIOVISUALS 5.2.1. FOTOGRAFIES Pel que fa a les fotografies que figuraran al lloc web hem de tornar a discernir entre les que en efecte formen part de la estructura de la web i les que són variables, esdevingudes a partir dels continguts que es generin.

5.2.2. FOTOGRAFIES FIXES Pel que fa a aquestes fotografies, seguiran un codi de composició i disseny establert per el dissenyador gràfic del projecte. El seu to reflectirà els aspectes que es volen destacar de la revista i potenciarà la imatge gràfica de la composició.

El primer que es troba al lloc web i que és fix en totes les pàgines del Site serà el logotip de la revista, prèviament dissenyat per l’encarregat de l’apartat gràfic del projecte. Aquest serà fet servir a mode d’encapçalament dins de la pàgina. Figura 72 – Logotip

següent estructura que trobarem serà la del passi d’imatges, composat per cinc imatges La relacionades amb els continguts, pertanyents cada una a un d’aquests. Les cinc imatges doncs estaran relacionades amb notícies, entrevistes, tutorials, alumnes i suggerències. La primera de les fotografies que citarem, en ordre d’introducció a la web és:

Figura 73 – Bàner Notícies

Figura 74 – Bàner Entrevista

Figura 75 – Bàner Tutorials

Figura 76 – Bàner Alumnes

Figura 77 – Bàner Alumnes

Aquestes imatges s’aniran passant al Slider de la pàgina inicial, però si entrem en algun dels apartats als que fan referència quedarà fixada la imatge pertanyent. Si seguim amb l’esquema de la web, podem trobar al final de tot, en el Footer, el logo de l’ERAM, juntament amb les icones de les xarxes socials Facebook, Vimeo i Youtube. És important la seva aparició ja que són importants per al desenvolupament de la web i el seu funcionament. Cal dir que hi ha altres elements a citar en referència al que venen a ser imatges que composen la web, com per exemple la imatge d’avís que surt quan a un contingut no li han pujat cap tipus d’imatge, de manera que surti una imatge en la qual ens avisi de que no hi ha cap imatge pujada. També les imatges de Backgroud, en aquest cas els Patterns escollits, tant el que conforma el fons de la web com el que conforma el Footer.

Figura 78 – Backgrounds Web

Per últim els detalls en forma de fotografia, empleats a mode de Background per als Divs, com poden ser els Bookmarks que hi ha al voltant dels noms en les pàgines interiors sobre els articles, o al nombrar el tipus d’article dins de la pàgina home. També els noms dins de la pàgina About Us estan implementats així.

Figura 79 – Bookmark

5.2.3. FOTOGRAFIES VARIABLES

Pel que fa a aquestes fotografies, hem de dir que no podem establir un esquema, ja que el seu contingut anirà relacionat amb l’article o contingut al qual acompanyi. Es demanarà un mínim de coherència entre el seu significat gràfic i el contingut de l’article, per així generar concordança i no confondre. En quant a la tècnica, aspecte o externalització de la idea, serà d’elecció lliure, és a dir, tant pot ser fotografia en blanc i negre, com il·∙lustració, com modelatge 3D. Tot i això es podria mantenir una concordança entre elles de manera que el contingut agafi forma i no sembli molt estrany mentre estigui rodejat d’altres fotografies.

Cal establir que la fotografia que es mostri dins de la pantalla inicial a mode de Thumbnail, serà de la mateixa manera la fotografia que es mostri com a Header dins de l’article, és a dir la fotografia pròpiament pertanyent a l’article figurarà en dues pàgines diferents. Això es deu a que es vol crear concordança i no complicar l’experiència de l’usuari canviant contingut. De la mateixa manera, ens haurem d’assegurar que la imatge tingui les mides establertes dins de la imatge gran i que per tant no sigui massa petita, ja que la programació permetrà la conversió

Figura 80 – Thumnail

Figura 81 – Pàgina Article

de la fotografia automàticament de gran a petita, però no ho podria fer a la inversa. Les següents fotografies que cal esmentar dins del nostre lloc web són les de la pàgina About Us, en les que s’hi ha integrat una fotografia a mode de diagrama per il·∙lustrar de manera més didàctica les facetes i les identitats dels components de l’equip. Figura 82 – Rols d’Equip

Per últim apareixen fotografies i apartats gràfics en el que vindrà a ser el Widget de Facebook que hem integrat a les pàgines on hi ha els articles explicats, en el tercer nivell. Aquestes imatges són generades per el Plug-‐in de manera que no les podem controlar.

Figura 83 – Plug-‐in Facebook

5.2.4. VÍDEO En quant als vídeos, cal destacar que no hi hauran vídeos pròpiament pertanyents a la pàgina web, però si que hi figuraran vídeos dins dels articles, entrevistes o tutorials, com també dins de la categoria alumnes, i suggerències en menor grau. Respecte a les tres primeres citades, aquest contingut serà realment l’important, predominant per sobre del text que hi pugui haver. Tot i així cal dir que el funcionament dels vídeos dins de la pàgina web serà sempre el mateix. Serà provinent d’un Plug-‐in relacionat amb les plataformes Youtube o Vimeo. És per això que la manera en la que es procedirà a integrar els continguts audiovisuals dintre de la pàgina web serà pujant-‐los en algun compte de les anteriorment citades xarxes socials i utilitzant el link generat per integrar-‐los dins del Site. La raó per la qual s’ha escollit aquest mètode és per agilitzar el procés d’interacció i pujada de vídeos, ja que si la plataforma fos de càrrega dins de la mateixa web no aniria tant ràpida com amb els servidors de Youtube o Vimeo.

Figura 84 – Captura de tutorial

6. CONCLUSIONS 6.1. GENERALS I ESPECIFIQUES Ciao Mamma és un projecte molt ambiciós. Ens van donar un producte per remodelar-‐lo ja que no funcionava del tot, i li hem fet un gir de 360 graus. Un projecte que fins ara duia i dirigia la direcció de l’ERAM ha passat a ser propietat dels alumnes, perquè Ciao Mamma serà una revista feta i per els alumnes. D’aquesta manera busquem un espai d’autoaprenentatge entre els alumnes, un lloc on puguin aprendre i alhora compartir els seus coneixements. Busquem amb això, un cercle més proper i íntim de l’estudiant, deixant de banda les influencies exteriors. Això ho duem a terme a partir dels diferents apartats: •

NOTÍCIES. Un espai on trobar curiositats, actualitats, on penjar articles que hem llegit i hem trobat interessants i poden servir a altres alumnes, de la mateixa manera de la possibilitat de fer articles propis, òbviament amb un caràcter rigorós cap a la veritat.

•

ENTREVISTES. Un lloc on agafar exemple de gent que es dedica a la mateixa industria, de professors de la mateixa escola, ex-‐alumnes i professionals.

•

TUTORIALS. Petits vídeos ensenyant el funcionament d’un programa tan introductori com específic, sobre coneixements que creiem que a l’ERAM no ens han ensenyat i que trobem útils per a la resta d’estudiants.

•

ALUMNES. Un lloc on mostrar els treballs dels quals l’alumne es senti més orgullós perquè els altres estudiants els puguin observar, i alhora pretén ser una plataforma de promoció dels estudiants.

•

SUGERÈNCIESS. Un lloc on posar queixes en comú. La revista al ser feta pels alumnes és converteix en un lloc recíproc on ensenyes el que saps i aprens el que sap altres alumnes.

La revista ha deixat de ser revista per convertir-‐se en un blog, molt més usable i dinàmic, on el contingut pot ser actualitzat contínuament sense necessitat de dates d’entrega de números i sense necessitat d’uns paràmetres preestablerts de contingut. En un mateix mes pot haver-‐hi més de tres entrevistes, o més suggerències, o més tutorials, etc. dels que podria haver-‐hi en un sol número de la revista. Això també implica la part negativa que al no haver-‐hi un mínim establert es corre el perill de que s’estanqui per falta de renovació de contingut o es deixin oblidats alguns departaments més laboriosos com poden ser els tutorials i les entrevistes, monopolitzant-‐se tot en notícies i treballs. Per aquest motiu s’han de deixar establerts uns mínims continguts que s’han de

fer al mes per a que la pròxima generació d’alumnes els segueixi i continuï la idea d’una web dinàmica amb molt contingut. En general Ciao Mamma acaba de néixer ara, tenint en compte els seus precedents però d’una manera única, i només el temps i l’esforç dels estudiants del ERAM establirà si el projecte funciona o no. Futures implementacions Actualment el projecte consisteix d’una pagina web, dos espots (un atractiu i l’altre informatiu) i continguts, però evidentment hi ha un camp obert de possibilitats cap a la millora del projecte com podrien ser totes les variacions de la web que nosaltres per temps o per falta de coneixements no hem sigut capaços de fer. Primer de tot s’hauria d’aplicar la web per a dispositius mòbils, adaptant-‐ la correctament per tal de facilitar l’accés a la web. Més endavant, si aquest projecte realment fos rentable i els estudiants utilitzessin la web, es podria fer una aplicació pròpia tan per tant per dispositius mòbils com per tauletes. Creiem que l’amplificació de la web i de les seves possibilitats també obrirà el projecte més al públic, que en aquest cas és l’ERAM, per alumnes que estudien audiovisuals i multimèdia. Valoració del resultat en funció dels objectius El projecte Ciao Mamma ha sigut un projecte difícil per nosaltres, tot i les hores d’esforç i dedicació també reconeixem que ens hem vist entrebancats en diverses ocasions. Hem obtingut un producte sòlid, més que un producte hem creat una base solida, una base pensada amb deteniment no només pel nostre projecte si no pensant en la seva continuïtat. Tot i que la base està feta, en el camí ens hem trobat objectius que no hem pogut complir moltes vegades per desconeixements tècnics, com pot ser en tema pàgina web, el Sidebar de l'Instagram, o l’assoliment d’una web més interactiva per l’usuari; també objectius que per tema temps no hem pogut complir com podria ser la entrevista a un professional, i objectius que ens han tret més temps del que teníem pensat dedicar-‐hi com podria ser la repetició de l’espot que vam gravar-‐lo un cop però ni tècnicament ni conceptualment complia els objectius marcats tan per direcció com per nosaltres els estudiants i futurs professionals, així que vam ocupar moltes hores de feina extres per tornar a crear l’espot i no només van ser de rodatge, si no també de part conceptual i creativa.

L’haver de repetir una feina que donàvem per feta implica hores extres que no teníem si volíem complir tots els objectius marcats des del principi i això ens va suposar un cansament mental que desprès de dedicar moltes hores has d’acceptar que falla i que no assoleix el requeriment mínim de professionalitat. Despendre’ns d’aquesta negativitat i començar de nou deixant lo primer en algun lloc del passat va ser difícil però al final ho vam aconseguir. Perspectiva de futur Com hem explicat des del grup de treball encarregat del projecte Ciao Mamma hem creat una base solida per que els futurs estudiants que agafin la revista tinguin un camí clar cap on anar. Hi ha moltes coses que es podrien millorar, serà una web en constant evolució cap endavant, té les possibilitats i els recursos per què sigui així. Tot i això, la revista morirà sense implicació del alumnat, per tal de crear un espai de reciprocitat de l’aprenentatge.

Figura 85 – Foto d’equip del dia del rodatge