Versie 2 07-12-2014 Opdracht deel B Inhoud Raoul Vos Hogeschool Leiden Studentnummer: 1088675
Inhoudsopgave: Inleiding:... 3 Opdracht deel A Analyse... 3 Opdracht deel B Inhoud... 3 Opdracht deel C Website... 4 Conclusie Deelopdracht A... 5 Conclusie doelgroep:... 5 Functionaliteiten:... 5 Conclusie concurrentie analyse... 6 Sitemap... 7 Wireframes... 8 Wireframes desktop... 8 Wireframe tablet... 10 Wireframe mobiel... 12 Bronnen... 15 2
Inleiding: Deze opdracht is deel twee van de drie, met als uiteindelijke doel om een website te creëren voor band, concert of film première. Ik heb besloten om als onderwerp de film première van Interstellar te kiezen. Uiteindelijk moet ik met dat als onderwerp drie opdrachten doen (Hogeschool Leiden, 2014): Opdracht deel A Analyse In de eerste deelopdracht heb ik drie analyses gedaan, namelijk: De opdracht analyse In de opdracht analyse keek ik naar wat de opdracht precies inhoud en de klant van mij verwacht. Tevens geef ik de functionaliteiten aan die ik van plan ben te implementeren. De doelgroep analyse In de doelgroep analyse, keek ik naar welke doelgroepen voor mijn opdracht interessant is. Voor wie maken we het? Hoe oud is merendeel van de doelgroep? Wat is het geslacht van merendeel van de doelgroep? Wat is het inkomen? En wat zijn de veel bezochte websites van de doelgroep? Deze analyse is gebaseerd op relevante statistieken en data. De concurrentie analyse In de concurrentie analyse, keek ik naar welke concurrentie we kunnen verwachten. Dit kan directe concurrentie zijn of indirecte concurrentie. Ik keek naar welke functies zij geïmplementeerd hebben en hoe groot de impact van hun concurrentie voor ons kan zijn. Ook worden de belangrijkste pluspunten en minpunten genoteerd per concurrent en hoe hierop geanticipeerd moet worden. Van deze analyses heb ik een verslag gemaakt (Vos, 2014). Opdracht deel B Inhoud In de tweede deelopdracht maak ik de inhoud van de website, dit doe ik door middel van een site map en wireframes. Dit proces wordt verwerkt in dit verslag. De volgende punten moeten zijn in dit verslag verwerkt: De uitkomsten van deelopdracht A zijn aantoonbaar verwerkt in het verslag. Er is een sitemap uitgewerkt met een duidelijke navigatiestructuur. Het verslag bevat een wireframe ontwerp voor drie verschillende schermformaten namelijk: o Desktop (resolutie van 1024x768 of hoger). o Tablet device (resolutie 800x600). o Mobile device (resolutie 340x480). Alle gevraagde functionaliteiten uit de sitemap zijn in de wireframes verwerkt. 3
Opdracht deel C Website De realisatie van de deelopdrachten, hier maak ik een responsieve website voor Interstellar, de vormgeving van de site is gebaseerd op de bijbehorende filmposter. De volgende punten moeten verwerkt zijn: De website is semantisch correct ingedeeld met behulp van de daar bij horende tags (kopjes, alinea s, secties, lijsten, etc.) De website is responsive en alle inhoud is goed leesbaar op zowel grote als kleine schermen. Het grafisch ontwerp sluit aan bij de filmposter. De filmposter is bijgesloten. Het ontwerp en de inhoud zijn aantoonbaar gebaseerd op twee deelopdrachten. Verslagen deelopdrachten zijn bijgesloten. De site bevat een pagina met mijn persoonlijke informatie (student nummer, naam, foto). De geschreven code (HTML en CSS) is foutloos en er worden geen tags gebruikt die niet meer zijn toegestaan in HTML5. Alle geschreven code is met de hand geschreven en komt van mijn hand. 4
Conclusie Deelopdracht A Conclusie doelgroep: De doelgroep van onze site bestaat uit voornamelijk mensen tussen de 12 en de 39 (Motion Picture Association Of America, 2012). Met een gemiddeld jaar inkomen van 14.700 (CBS, 2013). Naar sciencefiction films komen over het algemeen meer mannen dan vrouwen (Stichting Filmonderzoek, 2009). Dit is het soort publiek dat naar sciencefictionfilms in de bioscoop komen, en dit is ook het publiek wat wij voor onze film verwachten. Om deze doelgroep aan te spreken moeten we een aantrekkelijke website bouwen die de aandacht van de gebruiker trekt en die tevens deze gebruikers naar de bioscoop laat komen. Functionaliteiten: In de site moeten de volgende functionaliteiten verwerkt worden: Trailer: De trailer moet bovenaan de site gelijk in het oog vallen. Het is de bedoeling dat de gebruiker de trailer gelijk ziet en gelijk de interesses trekken voor de film. Verhaal: Het verhaal komt gelijk onder de trailer, zo kan de gebruiker zien waar de film precies over gaat en zien ze in één oogopslag of ze de film interessant vinden of niet. Credits: Op deze pagina vinden we alle credits van de film, alle informatie over de acteurs en alle informatie over de makers van deze films. Release dates: Op deze pagina vinden we alle première data van over de hele wereld. Afbeeldingen: Op deze pagina zijn verscheidene filmposters en foto s van het film materiaal te zien. Video galerij: Op deze pagina zijn verscheidene trailers en ander film materiaal te vinden. Over ons pagina: Op deze pagina is alle informatie over de producers en over de student Contact pagina: Op deze pagina vind je informatie over hoe je in contact komt met de producers. Het liefst moet de trailer gelijk afspelen en is de rest gemakkelijk te vinden op de site. Een aandacht trekkende, maar goed hanteerbare site is een must. 5
Conclusie concurrentie analyse Bij de concurrentie analyse keek ik naar twee directe concurrenten en één indirecte concurrent. Hieronder staat aangegeven wat ik goed en slecht vond van hun site en waar ik denk dat mijn site dat beter gaat doen (Vos, 2014). Interstellar (Warnerbros, 2014): Bij Interstellar vond ik het erg goed dat hun site goed in het oog viel, hij is erg mooi en opvallend. Alle informatie was goed te vinden, al was de informatie niet altijd even goed leesbaar. Bij bijvoorbeeld het verhaal is er meer gericht op het plaatje goed zichtbaar houden dan op het verhaal goed leesbaar maken. Tevens is de officiële site van Interstellar erg slecht te vinden via google. IMDB (IMDB, 2014): De site van IMDB is erg goed, goed leesbaar, overzichtelijk en heeft alle benodigde informatie. Het enige nadeel aan IMDB is dat het een grote site is die niet gericht is op één film waardoor het design niet overeenkomt met het thema van de film, waardoor IMDB je minder snel intrigeert om de film te gaan kijken. Een groot pluspunt is wel dat IMBD altijd een van de eerste hits is op Google.com. Gravity (Warnerbros, 2013): De site van Gravity was een site die erg druk was voor het oog, tekst over een bewegende afbeelding en tekst over elkaar. Hij is niet overzichtelijk, en de informatie is niet snel te bereiken. Het design van de site is leuk bedacht, alleen jammer dat ze afbeeldingen en film hebben gebruikt die niet scherp zijn, dit doet af aan de uitstraling. Eigen site: Voor mijn score wil ik me richten op alle punten die uit de concurrentie analyse naar voren komen, zoals vermeld in mijn vorig verslag: - Design. - Gebruiksvriendelijkheid. - Vindbaarheid informatie. - Leesbaarheid. Het meest voornaamste waar ik me op wil richten is design en gebruiksvriendelijkheid. Ik vind het belangrijk dat de site mooi eruitziet en dat de informatie gemakkelijk te vinden is. Ik wil de twee belangrijkste punten, in mijn ogen de trailer en de samenvatting van het verhaal, op de voorpagina hebben en een menu naar de rest van de informatie. Mijn succesfactoren zijn vindbaarheid van informatie en leesbaarheid. Dit onderscheid mij van de andere concurrenten, die zich voornamelijk gericht hebben op het design of op de vindbaarheid van informatie en leesbaarheid. 6
Sitemap De sitemap van een website is een boomstructuur die laat zien hoe de navigatie van een website is opgebouwd. Hieronder is de sitemap van de geplande website te zien. De structuur is als volgt opgebouwd: - Home: Op de homepage is een navigatie menu waar naar de volgende pagina s kunnen worden gegaan: o Credits Op deze zijn alle namen van mensen die meegewerkt hebben aan de film te vinden. o Release date Op deze pagina zijn alle Internationale release dates te zien per land. o Media center Het media center is een sub menu die verwijst naar Video s en waarin genavigeerd kan worden naar: Video s Hier zijn alle gepubliceerde video s van Interstellar te bekijken. Afbeeldingen Hier zijn alle foto s en ander beeldmateriaal van de film te bekijken. Downloads Hier zijn verscheidene Background afbeeldingen te downloaden in verschillende formaten. o About us Het About us tabje is een sub menu wat verwijst naar Warnerbros, tevens kan er in dit menu genavigeerd worden naar: Warnerbros Relevante informatie over Warnerbros. About the student Relevante informatie over de Student in kwestie. Contact us Contact gegevens van zowel Warnerbros als de student. 7
Wireframes Een wireframe van een site is eigenlijk een schets van hoe de site eruit komt te zien, deze wireframes zijn gemaakt met het modelleer programma Pencil. Deze wireframes zijn vervolgens uitgewerkt tot grafische designs met het programma Gimp. Wireframes desktop De wireframe van desktop formaat moet een resolutie van 1024x768 of hoger hebben. Helaas is het niet mogelijk de wireframe met dat formaat in dit verslag te implementeren. De gebruikte wireframes zijn dus kleiner dan het oorspronkelijke formaat waarop ze gemaakt zijn. Wireframe desktop schets 8
Wireframe desktop grafische design 9
Wireframe tablet De wireframe van tablet formaat moet een resolutie van 800x600 of hoger hebben. Helaas is het niet mogelijk de wireframe met dat formaat in dit verslag te implementeren. De gebruikte wireframes zijn dus kleiner dan het oorspronkelijke formaat waarop ze gemaakt zijn. Het grootste verschil tussen de desktop en tablet wireframe is dat de tablet wireframe wat compacter is gehouden, maar toch goed leesbaar. Wireframe tablet schets 10
Wireframe tablet grafisch design 11
Wireframe mobiel De wireframe van mobiel formaat moet een resolutie van 340x480 of hoger hebben. Het grootste verschil tussen de desktop, tablet en het mobiele wireframe is dat de mobiele wireframe erg compact is. De trailer is nog steeds bovenaan de pagina, maar er moet nu naar beneden gescrold worden om de synopsis volledig te kunnen lezen. Het menu is in plaats van languit geschreven een knop geworden, wanneer er op deze knop gedrukt wordt verschijnt er een globaal menu met vier knoppen, de knoppen Media center en About us hebben nog sub menu s onder zich zoals te zien in de onderstaande wireframes. Wireframe mobiel schets: Homepagina: Menu-pagina: 12
Media center menu-pagina: About us menu-pagina: 13
Wireframe mobiel grafisch design: Van het grafische design heb ik enkel de homepage gemaakt om een sfeer impressie te geven van het uiterlijk van de mobiele site. 14
Bronnen CBS. (2013, 24 10). Gemiddeld inkomen van personen naar kenmerken en naar regio. Opgeroepen op 25 11, 2014, van CBS.nl: http://statline.cbs.nl/statweb/publication/?dm=slnl&pa=80500ned&d1=2-3&d2=l&d3=0-38&d4=0-4&d5=l&hdr=g4,t,g1,g3&stb=g2&vw=t Hogeschool Leiden. (2014, September). hsleiden.nl. Opgeroepen op 25 11, 2014, van ELO.hsleiden.nl: https://elo.hsleiden.nl/bbcswebdav/pid-595458-dt-content-rid- 1341202_1/courses/tin1415imhtb/i_imthb_mh_v_3.0.pdf IMDB. (2014). Interstellar. Opgeroepen op 25 11, 2014, van IMDB: http://www.imdb.com/title/tt0816692 Motion Picture Association Of America. (2012). Theatrical statistics 2012. Opgeroepen op 25 11, 2014, van MPAA.org: http://www.mpaa.org/wp-content/uploads/2014/03/2012- Theatrical-Market-Statistics-Report.pdf Stichting Filmonderzoek. (2009, Oktober). Bioscoop monitor 2008. Opgeroepen op 25 11, 2014, van Filmonderzoek.nl: http://www.filmonderzoek.nl/wpcontent/uploads/2014/11/eindrapport-bioscoopmonitor-2008-2009-a4.pdf Vos, R. (2014). Opdracht deel A - "Analyse". Verslag, Hogeschool Leiden, Informatica, Leiden. Warnerbros. (2013). Gravity. Opgeroepen op 25 11, 2014, van http://gravitymovie.warnerbros.com Warnerbros. (2014). Interstellar. Opgeroepen op 25 11, 2014, van Interstellarmovie.net: http://www.interstellarmovie.net/ 15