Sim project
ONTWERPDOCUMENT
JASPER BODE - 570772 MENNO DEKKER - 563342 ROMY ALBERS - 569747 STEIJN LEIJZER - 525461 DOCENT: URSULA DRIESSEN GER DE VRIES ROBERT LARICCIA
JANUARI 2017
1
ONTWERPDOCUMENT | SIM
2
INHOUDSOPGAVE 04
Inleiding
05
Research highlights
08
Research vormgeving & stijlen
10
Inspiratie
12
Look & Feel moodboard
14
Schetsen
22
Conclusie designstudie
23
Flowchart
24
Lay-out
26
Definitieve schermontwerpen // Logo
40
Definitieve schermontwerpen // Applicatie
42
Definitieve schermontwerpen // Trailer
44
Definitieve schermontwerpen // Informatie video
46
Conclusie
48
Bronnenlijst
50
Bijlage
3
ONTWERPDOCUMENT | SIM
INLEIDING
In dit ontwerpdocument worden concepten voor GelreQuest verder uitgewerkt. Er worden toelichtingen gegeven van het ontwerpproces, de verantwoording en onderbouwing van ontwerpkeuzes. Daarnaast zullen ook schetsen en prototypes worden opgenomen in dit document. Dit document moet ervoor zorgen dat de gebruiker zoveel mogelijk wordt betrokken bij het ontwerpproces. Dit is vooral belangrijk voor de opdrachtgever om te laten zien waar er allemaal mee bezig is geweest gedurende het proces.
4
SIM groep GelreQuest
RESEARCH HIGHLIGHTS Opdrachtgever/onderwerp Onze opdrachtgever is Erfgoed Gelderland. De coöperatie bestaat uit 140 erfgoed organisaties. Ze werken samen om het erfgoed in Gelderland beter te kunnen beheren en presenteren aan breed publiek. Ze verbinden al het erfgoed met elkaar. Dit zorgt voor onderlinge solidariteit. Erfgoed Gelderland richt zich vooral op een doelgroep van mensen die ouder zijn dan 60 jaar. Deze doelgroep is namelijk nog wel erg geïnteresseerd in erfgoed en geschiedenis. Erfgoed Gelderland wilt wel graag hun publiek vergroten. Ze richten zich op mensen onder de 40 jaar. Daarvoor zijn wij gevraagd om dit als opdracht aan te nemen. Opdracht debrief De opdracht luidt als volgt: “Bedenk een manier om met behulp van de beschikbare informatie de diverse kerken voor een breder publiek toegankelijk te maken.” We moeten dus een manier bedenken om de 15 gelderse kerken van stichting Oude Gelderse Kerken toegankelijker te maken. Alle kerken worden nu gerund door vrijwilligers en stichting Oude Gelderse Kerken kan er niet vanuit gaan dat deze vrijwilligers de kerken elke dag opent. Aan ons dus onder andere de taak om de kerken “open” te houden als ze dicht zijn. We hebben van alle kerken ook een 360 graden foto gekregen en de opdrachtgever wil graag dat wij daar ook gebruik van maken in het concept. Kijkende naar de opdracht, wordt er dus alleen om een idee gevraagd. Zelf willen we ons idee ook uitwerken tot een prototype. Zo krijgt de opdrachtgever een nog beter inzicht in datgene dat wij willen gaan maken en wat dus het “idee” is.
Plan van aanpak met doelstellingen Voor dit project maken we een applicatie die mensen onder de 40 jaar zal aantrekken om meer erfgoed en kerken te bezoeken. De doelstelling van de opdracht die we hebben gekozen ‘Gelders Geloof’ is: Zichzelf beter profileren. De tijd die we daarvoor krijgen is 8 weken. In die periode leveren we verschillende producten af. Dit is de PSU, PvA, Omgevingsanalyse, PvE, Ontwerpdocument, het prototype, de concepten, de presentatie, het Testrapport en het Logboek. Voor de verslagen en presentaties zijn richtlijnen gemaakt, deze staan in de projecthandleiding van ICA. De opdrachtgever wilt dat wij een manier bedenken om met de beschikbare informatie de kerken in Gelderland aantrekkelijker te maken voor jongeren. Om in deze 8 weken het project een succes te maken hebben we een aantal randvoorwaarden voor onszelf opgezet. Dit is om regels goed af te spreken zodat we vlot door het project heen kunnen. Een van die regels zijn om op tijd op school te komen. We spreken alle werkdagen behalve vrijdag af om samen aan het project te werken. Dit gebeurt vanaf 10 uur ‘s ochtends. Wanneer er een afspraak tussendoor is of iemand te laat is, wordt dit duidelijk gemeld. In dit project gaan we veel onderzoek doen naar hoe we het beste de applicatie op de markt kunnen zetten. Om dit zo juist mogelijk te doen, hebben we een onderzoeksvraag opgesteld: Op welke manier motiveren we onze doelgroep om de Gelderse kerken op te zoeken?
5
ONTWERPDOCUMENT | SIM
RESEARCH HIGHLIGHTS Doelgroep De doelgroep is 10 tot 15 jarige kinderen. Deze kinderen zitten of in hun laatste twee jaren op de basisschool of in de onderbouw van de middelbare school. Indirect letten we ook op de doelgroep van 30 tot 40 jaar oud. Dit kunnen hun docenten of ouders zijn die de kinderen naar de kerken brengen en hen motiveren om geĂŻnteresseerd te zijn in geschiedenis.
6
De kinderen van die leeftijd komen net in de puberteit en zijn dus vaak opstandig tegenover de ouderen. Ze willen vaak niet mee met uitjes naar musea en monumenten, zijn niet geĂŻnteresseerd in geschiedenis en snappen niet waarom het verleden er nog zo toe doet. Het is wel erg belangrijk om het verleden te herdenken en niet te vergeten. De kinderen van die leeftijden zijn de generatie die de geschiedenis zometeen doorvertellen. Het is belangrijk dat ze het leuk gaan vinden. Dit willen we mede door onze applicatie bereiken. Concurrentie Er zijn weinig directe concurrenten die zich volledig op kerken richten, maar er zijn wel veel musea die soortgelijke applicaties hebben. Denk daarbij aan de wonderkamers in het Haagse gemeentemuseum en Museumkids Conclusie Door middel van de bovenstaande informatie hebben we een beter inzicht kunnen krijgen van onze doelgroep, concurrentie en doelstellingen. Voor de opdracht maken we een prototype voor de opdrachtgever zodat ze een goed idee krijgen over datgene wat we willen maken. Dit prototype is gericht op de doelgroep van kinderen tussen de 10 en 15 jaar. Het gehele project duurt 8 weken en hiervoor hebben we enkele randvoorwaarden opgesteld om het project tussen de groep maar ook de opdrachtgever zo voorspoedig te laten verlopen.
7
ONTWERPDOCUMENT | SIM
RESEARCH VORMGEVING EN STIJLEN Scenario’s van interactie en dynamische onderdelen Kaart Wij gaan de kaart van Gelderland op een dynamische manier aan de gebruiker presenteren door de kaart groter te maken dan het scherm. De gebruiker kan de kaart dan bekijken door het scherm te verplaatsen naar links- en naar rechts. Hierdoor hebben wij interactie gecreÍerd tussen de gebruiker en de applicatie. Ook kan de kaart nu op een groter vlak worden afgebeeld op het scherm; details van de kaart vallen minder snel weg en het is makkelijker voor de gebruiker om op de kaart te navigeren.
8
Menu We hebben ervoor gekozen om de menupagina niet vast bovenaan de pagina te plaatsen. Hierdoor werden wij namelijk verplicht om op iedere pagina een menubalk te maken wat ten koste ging van de uitstraling. Om dit op te lossen hebben wij ervoor gekozen om het menu te verplaatsen naar de rechterkant. Wanneer er op de button geklikt wordt schuift het menu naar binnen vanaf de rechterkant. De gebruiker heeft altijd de optie om te navigeren naar het menu omdat de button altijd aanwezig is aan de rechterkant.
Figuur 2.
Figuur 1. Schets van de homepage met de slide-in menubutton aan de rechterkant
Figuur 1.
Figuur 3. Scenario’s van interactie en dynamische onderdelen Pop-up Op het scherm van de Gelderse kaart verschijnt er per kerk een popup scherm waar er in een korte tekst wordt uitgelegd waarom de kerk interessant voor de gebruiker is. De pop-up wordt op een dynamische manier gepresenteerd; wanneer de gebruiker op een kerk klikt wordt de pop-up uit de kerk gezogen. 360 graden foto Wanneer de gebruiker op de CTA-button heeft geklikt wordt hij doorverwezen naar de 360 graden foto van de kerk. Hierin pop eerst een korte video op over de kerk waarin een korte introductie wordt gegeven over de kerk. Hierna kan de gebruiker de 360 graden foto zien, om deze geheel te bekijken moet de gebruiker met het scherm bewegen van links naar rechts om de totale afbeelding te zien. Quiz De quiz willen wij op een hele interactieve manier presenteren. De gebruiker heeft 7 vragen die hij/zij vanuit de 360 graden foto kan aanklikken. Na het beantwoorden van iedere vraag wordt de gebruiker doorgestuurd naar een kleine interactieve game waarbij er geblazen, geswiped of bewogen moet worden op en met de smartphone. Hierdoor is het geen standaard quiz die beantwoord moet worden, maar wordt het echt een quiz waarin de gebruiker gefocused en snel moet handelen.
9
Figuur 3. Schets van de kaart met het pop-up venster.
ONTWERPDOCUMENT | SIM
INSPIRATIE EN TRENDS Voor inspiratie en trends hebben we vooral gekeken naar design trends van het moment. Wat we daar uit halen is dat er tegenwoordig meer een mix wordt gemaakt tussen flat design met skeuomorphism. Skeuomorphism is een realistische manier van designen. Door een goede mix tussen de genoemde twee designstijlen blijven designs sneller tijdloos. Bij een keuze tussen één van de twee heb je door wisseling in trends dat je ontwerp sneller ‘oud’ wordt.
In onze eigen kaart hebben we een aantal punten verwerkt die ook voorkomen in de Middle Earth Map. De oude bruingele kleur komt overeen in onze kaart, dit hebben we gecombineerd met de kleuren van ons huisstijl door de achtergrond blauw te maken. De illustraties op onze kaart zijn in dezelfde stijl getekend als die van ‘Lord of the Rings’. We hebben met geschetste bomen en bergen de Veluwe aangegeven. Dit geldt ook voor de rivieren zoals de Rijn en de Waal. Om je goed te kunnen lokaliseren hebben we de belangrijkste steden van Gelderland aangetoont met de cartografie kaart van die stad. Met ons lettertype, Baron Regular, hebben we de steden een naam gegeven. De witte punten op de kaart zijn alle kerken en monumenten in Gelderland die samenwerken met Erfgoed Gelderland. Op deze vijftien kerken en monumenten focussen we ons.
10
Figuur 4. De inspiratie voor de kaart in applicatie hebben we van de kaart van Middle Earth. Deze kaart komt voort uit de film ‘Lord of the Rings’. Dit is een fictieve kaart van een fictieve wereld die ontworpen is door de designer in ‘Lord of the Rings’. In deze kaart zijn verschillende dorpen en steden te vinden. Rivieren, bergen en bossen zijn getekend in de kaart om een realistisch beeld te schetsen.
11
Inspiratie voor kleurgebruik hebben we van de bovenstaande illustraties. Hier zie je ook goed hoe ze doormiddel van verschil in contrast de kijker door de afbeelding leid. Wij vinden de kleur blauw die ze hier gebruiken ook erg mooi dus we hebben dit later in onze huisstijl toegepast.
ONTWERPDOCUMENT | SIM
LOOK AND FEEL MOODBOARD Look Wij willen de doelgroep bij het gebruik van onze applicatie de perfecte beleving meegeven. De leeftijd 10 tot 15 jaar hebben over het algemeen weinig interesse in kerken en erfgoed. Ons idee was om de ‘looks’ van de applicatie op een moderne manier weer te geven zodat het snel duidelijk is voor de doelgroep wat er gedaan kan worden en hoe zij dit kunnen aanpakken. Omdat we in deze applicatie veel bezig zijn met de historie van Gelderland willen we de kaart in de applicatie wel op een antieke manier weergeven.
12
Feel Omdat de doelgroep weinig interesse heeft in kerken willen we de informatie op een hele andere manier neerzetten dan normaal wordt gedaan. De doelgroep wordt telkens gemotiveerd om meer te ontdekken van de kerken door spannende en mysterieuze gebeurtenissen/mythes uit het verleden te vertellen. Ook gaan we de vragen in de quiz niet op een standaard manier door de gebruiker laten beantwoorden; ze moeten echt in de kerk of op het beeldscherm elementen uitvoeren om achter het antwoord te komen.
13
ONTWERPDOCUMENT | SIM
SCHETSEN Storyboard trailer
14
15
Opbouw van de applicatie opgesteld in week 5.
ONTWERPDOCUMENT | SIM
SCHETSEN Figuur 5. Homepage schets
Figuur 6. Login schets
Figuur 7. Homepage schets
16
Figuur 6. Hier links is de login pagina afgebeeld die uitschuift vanuit de rechterkant van de homepage. Zo zie je dat wanneer de login is uitgeschoven de lijnen golvend doorlopen.
Figuur 7. Hier rechts zie je de gehele schets van de homepage. Ons idee komt hierin terug van de 2 lagen. Wanneer de applicatie zou worden opgestart vliegen de 3 vlakken uit elkaar om zodoende de onderlaag
Figuur 9. GerleShop productbeschrijving schets Figuur 8. GerleShop schets
17
Figuur 10. GerleShop feedback schets
ONTWERPDOCUMENT | SIM
SCHETSEN Figuur 11. Gelrequiz schets
18
Figuur 12. Informatiepagina
19
ONTWERPDOCUMENT | SIM
SCHETSEN Figuur 13. Schetsen quizgames // kaars
20
Figuur 14. Schetsen quizgames // kaars
Figuur 15. Schetsen quizgames // kerk
Figuur 16. Schetsen quizgames // bijbel
21
ONTWERPDOCUMENT | SIM
CONCLUSIE DESIGNSTUDIE
22
Interactie, navigatie, interactie gui De navigatie is overzichtelijk ingedeeld in een hamburger menu waar je altijd bij kan. In dit menu staat alles wat je nodig hebt en je kunt overal komen. Om het makkelijker en overzichtelijker te maken voor de gebruiker hebben we een kaart van gelderland gemaakt als landingpage van waar je eigenlijk alles “bestuurd”. Op deze kaart staan alle kerken. Deze kerken kun je aanklikken om er informatie over te krijgen en door te gaan naar de quiz. Ook kun je op de kaart zien welke kerken je al hebt voltooid. Het design is Mobile-first. Dit houd in dat de applicatie in eerste instantie voor mobiel ontworpen wordt. Je moet dan ook met je mobiel naar de kerken, want met een laptop gaat dat een beetje lastig. Voor de interactie maken we gebruik van mooie animaties die je als het ware meenemen door de applicatie en het geheel levendiger moet maken. Daarnaast maken we ook gebruik van fysieke interactie tussen de vragen door, waarbij de gebruiker bijvoorbeeld op het scherm moet blazen, of heel snel moet tikken (zie “Concept”). Flowchart Om de basisstructuur van de applicatie vast te leggen hebben we een flowchart opgesteld. Hierin is te zien welke verschillende tabbladen de applicatie bevat en naar welke pagina’s je kunt navigeren. De kaart van Gelderland en de pop ups van de kerken zijn gevat in één tabblad. Dit komt omdat de pop ups van de kerken plaatsvinden op hetzelfde tabblad van de kaart. Verder valt het op dat de vrijwilligers een apart inlogscherm krijgen, de reden hiervoor is zodat zij zelf de openingstijden kunnen invullen en aanpassen.
FLOWCHART
GEBRUIKERS HOOFDSCHERM
GROEP 7A
LOGIN VRIJWILLIGERS KAART + POPUPS VAN KERKEN
KAART
<<
KERK 1
KERK 2
POPUP << ALLE KERKEN >>
NA ‘CLICK’ OP KERK GEBRUIKERS
KERK 3
KERK 4
>>
Homepage elke kerk bevat:
FOTO KERK LOGIN
HOMEPAGE KERK
VRIJWILLIGERS
NAAM KERK Scroll naar beneden. Zo kom je bij het volgende menu terecht.
INFORMATIE
GESCHIEDENIS
OPENINGSTIJDEN
INFO/FEITEN QUIZ
QUIZ
5 VRAGEN
CONTACT
2 VERBORGEN
STUK VAN BEHEERDER
CTA NAAR QR SCAN
KORTE BESCHRIJVING 23
OPENINGSTIJDEN
VIDEO
FOTO’S
EMBEDDED VIDEO
360 GRADEN FOTO FOTO’S VAN BUITENAANZICHT
EVENEMENTEN
VOORDELEN ACCOUNT QUIZPUNTEN RANGLIJST (VRIENDEN) MENSEN TOEVOEGEN OM TE VERGELIJKEN
ONTWERPDOCUMENT | SIM
LAY-OUT
24
Kleurpalet-schema De kleuren die we hebben gekozen zijn tot stand gekomen uit onderzoek en research. We hebben gekozen voor donkere en zachtere neutrale kleuren. Bij kerken en geloof denk je aan de heilige lichte kant maar ook aan de donkere en enge kant zoals kerken. We willen de donkere tinten gebruiken om rust te creĂŤren in ons ontwerp en daarbij de lichtere zachte kleuren gebruiken om de aandacht te trekken op een vriendelijke manier. De goude kleur wordt in verschillende tonen en tinten gebruikt door het ontwerp heen omdat het rijkdom en geschiedenis uitstraalt. We hebben als basiskleuren gekozen voor tegengestelde kleuren geel/ oranje en blauw/violet. Daarin hebben we verschillende tinten/tonen gekozen die we graag willen gebruiken. We hebben gekozen voor tegengestelde/complementaire kleuren omdat het veel contrast creĂŤert in je ontwerp. Hiermee willen we de app interessanter maken en dit gebruiken om de aandacht van de gebruikers te sturen. Typografie In de applicatie gebruiken we Baron Neue voor de titels. De titels introduceren je steeds aan een nieuw stuk tekst over bijvoorbeeld de gebruiksaanwijzing van de applicatie of als een stukje intro voor de quiz. Wij vonden het erg belangrijk om de gebruiker te laten ervaren dat hij met geschiedenis te maken heeft. Baron neue deed ons denken aan oude lettertypes door de aparte opmaak van de letters, toch blijft deze duidelijk leesbaar doordat het een schreefloos lettertype is.
Glober Regular hebben we in de applicatie gebruikt voor de teksten. Dit is een lettertype die goed leesbaar is. Dit is erg handig zodat je snel de tekst kunt lezen. Voor de quote en belangrijke zinnen hebben we een Bold versie gebruikt van Glober. Dit is de Glober SemiBold Regular.
C: M: Y: K:
16 24 44 0
C: M: Y: K:
0 22 77 0
C: M: Y: K:
0 25 87 29
C: M: Y: K:
100 73 0 59
C: M: Y: K:
58 42 0 29
25
ONTWERPDOCUMENT | SIM
DEFINITIEVE SCHERMONTWERPEN // LOGO
Logo GelreQuest Hieronder zijn de fases geplaatst waarin wij tot ons logo zijn gekomen. We hebben erg lang vastgehouden aan de kerk in het logo omdat deze centraal stonden in de ontdekking van onze applicatie. Maar omdat wij bang waren dat dit voor de doelgroep niet motiverend werkte hebben we later losgelaten. Ook zie je hier nog de naam ‘National History’ die we als eerste applicatienaam hadden, echter wilden we duidelijker hebben voor de doelgroep dat ze echt op een zoektoch gingen waardoor we de naam later hebben gewijzigd.
NATIONAL HISTORY
26
ATIONAL
HISTORY
GELRE
GELRE
UEST
GELRE
UEST
GELRE
UEST 27
GELRE
HOP HOP Definitief Hierboven is het definitieve logo afgebeeld wat is opgevuld met kleuren die een antieke indruk moeten geven en niet te opvallend zijn. We hebben veel elementen zoals de schreefletters en de kerk weggelaten omdat dit uiteindelijk niet de juiste feeling gaf aan de applicatie of het voor het logo zelf te druk werd. De sublogoâ&#x20AC;&#x2122;s geven op een leuke manier aan wat de aftakkingen zijn van de applicatie. Ook is het voor de gebruiker telkens duidelijk in de applicatie waar zij zich bevinden.
ONTWERPDOCUMENT | SIM
DEFINITIEVE SCHERMONTWERPEN // APPLICATIE HOMEPAGE Lagen Voor de homepage hebben we het scherm diepte gegeven door te werken met twee lagen. De donkergrijze vlakken hebben we als main-kleur in de achtergrond geplaatst en hier overheen zijn de drie vlakken gelegd. Deze creĂŤren diepte door de schaduw die wordt uitgestraald op het donkergrijze ondervlak. 28
Gebogen lijnen Ons de applicatie een originele uitstraling te geven hebben we in plaats van strakke rechte lijnen gekozen voor gebogen lijnen. De applicatie krijgt hierdoor echt een eigen uitstraling. Ook vallen de drie bovenop liggende vlakken perfect in elkaar; bij het openen van de app wilden we eerst dat deze vlakken dan in elkaar zaten en uitschoven bij openen waardoor de grijze vlakken in beeld kwamen. Echter door tijdgebrek hebben we dit later weggelaten.
Slide-in menu Omdat wij de bezoekers van de applicatie geen scherminhoud wilde ontnemen hebben we gekozen om geen menubalk te maken. In plaats daarvan hebben we een klein slide-in menu geplaats aan de rechterkant van het scherm. Door een simpele klik kan de gebruiker deze openen en verder navigeren naar de andere tabbladen. De menubutton is aan de rechterkant geplaatst zodat het gemakkelijk bereikbaar is met de hand.
Figuur 17.
Slide-in menu In het slide in menu kan de gebruiker een account aanmaken, inloggen en uiteindelijk zijn/haar ranglijst bekijken ten opzichte van vrienden. Punten worden verdient door de vragen van de kerken goed te beantwoorden. Ook kan de gebruiker de waardebonnen bekijken die hij/zij heeft aangeschaft met de verdiende punten. Figuur 18.
Figuur 19.
Figuur 20.
29
Log In
Account aanmaken
Persoonlijke account
ONTWERPDOCUMENT | SIM
DEFINITIEVE SCHERMONTWERPEN // APPLICATIE KAART
30
Gelderland Figuur 21. De kaart van Gelderland hebben we buiten het scherm geplaatst zodat de buttons van de kerk niet te klein werden. De gebruiker zou in de werkelijke applicatie de gehele kaart kunnen bekijken door het scherm naar links en rechts te verplaatsen. Echter door gebruik aan tijd hebben we dit niet in het prototype kunnen realiseren.
Figuur 21.
KAART Pop-up Figuur 22. Wanneer de gebruiker op een button klikt popt het rechts afgebeelde scherm op. Hier staat de naam van de kerk en de plaats waar deze is gevestigd. Om de gebruiker te motiveren om dieper in het verhaal van de kerk te gaan staat er een korte spannende tekst over de kerk
Figuur 22. Figuur 24.Onderstaand ontwerp was de eerste versie van de popup openingstijden. We wilden dat de tekst goed te lezen was waardoor we de afbeelding weglieten. Uiteindelijk hebben we dit toch losgelaten omdat het teveel afweek van de originele pop-up.
Openingstijden Figuur 23. De kerken van Erfgoed Gelderland zijn niet dagelijks geopend omdat er gewoonweg niet genoeg vrijwilligers zijn die dit kunnen runnen. Hierdoor hebben we de openingstijden van iedere kerk toegevoegd aan het pop-up screen. De gebruiker kan dan in ĂŠĂŠn oogopslag zien of de kerk op het huidige moment open is en wanneer de kerk de rest van de week geopend is.
Figuur 23.
Figuur 24.
31
ONTWERPDOCUMENT | SIM
DEFINITIEVE SCHERMONTWERPEN START GELREQUIZ
Informatie Wanneer de gebruiker weet hoe de quiz in zijn werk gaat krijgt hij eerst een video te zien waarop de kerk geintroduceerd wordt. De gebruiker moet goed opletten omdat hier al enkele antwoorden in verstopt zitten voor de quiz. Hierna gaat het beeld automatisch door naar het informatiescherm van de kerk. Hier is alle informatie te vinden die de gebruiker nodig heeft om de quiz te voltooien. Wanneer de gebruiker klaar denkt te zijn voor de quiz kan hij met één klik door naar de quiz! Figuur 25.
Figuur 28.
EUSEBIUSKERK
Welkom Na het klikken op de te onderzoeken kerk komt de gebruiker terecht op de GelreQuiz pagina. Hier wordt de gebruiker nog geinformeerd over de werking van de quiz. Wat direct opvalt is de achtergrond die gewijzigd is naar een krijtbord. Omdat een quiz een onderwijzende factor heeft vonden wij het ook belangrijk om dit terug te laten komen in het design. Door het krijtbord koppelen we terug naar de onderwijsfactor van school. Wel hebben we de gebogen lijnen in een donkergrijs achtergrondvlak terug laten komen.
32
Figuur 27.
ZUTPHEN
INFORMATIE
GESCHIEDENIS
Figuur 26.
FOTO’S
VIDEO’S
quiz
Figuur 28. Het ontwerp hier rechts afgebeeld was onze eerste opzet voor de informatiepagina van de kerken. Echter waren we bang dat de gebruikers snel afgeleid werden door de vele menu knoppen en zodoende niet zouden weten waar ze precies op moesten klikken.
33
ONTWERPDOCUMENT | SIM
DEFINITIEVE SCHERMONTWERPEN // APPLICATIE GERLESHOP WINKEL We hebben de winkel van onze applicatie de GelreShop genoemd. De gebruiker kan ik overzichtelijk zien wat zijnhaar huidige saldo is. Ook kunnen hier tegen betaling extra punten worden gekocht. De producten die al eerder zijn aangeschaft staan onder het kopje historie, zo kan de gebruiker altijd zien waar zijn punten aan zijn uitgegeven. Bij het uitrolmenu â&#x20AC;&#x2DC;Alle productenâ&#x20AC;&#x2122; kan de de gebruiker kiezen om de catalogus filteren zodat alleen de evenementen te zien zijn, of alleen de waardebonnen voor eten/drinken. 34
De catalogus wordt opgebouwd door een kleine afbeelding dat het product beschrijft en daarbij een korte tekst. Ook is aangegeven hoeveel het product gaat kosten. Figuur 30. De rechts afgebeelde versie van de winkel is het uiteindelijk net niet geworden doordat het lettertype van de producten in de catalogus niet goed leesbaar was. Op deze pagina is het niet direct goed te zien maar op de mobiel was het niet goed leesbaar.
Figuur 29.
Figuur 30.
PRODUCT // FEEDBACK Wanneer de gebruiker op het product klikt krijgt hij de afbeelding vergroot te zien. Ook wordt de voorraad van het evenement getoont. Na de bestelling krijgt de gebruiker feedback op het bestelproces zodat hij/zij weet of de bestelling geslaagd is. Figuur 31.
Figuur 32.
35
ONTWERPDOCUMENT | SIM
DEFINITIEVE SCHERMONTWERPEN // APPLICATIE 360 GRADEN FOTO Steenderen Hieronder is de 360 graden foto vande kerk van Steenderen afgebeeld. Deze foto hebben we toegevoegd aan onze applicatie zodat de gebruikers ook thuis een indruk kunnen krijgen van de kerk. De slotjes op de foto staan elk voor verschillende vragen die de gebruiker moet beantwoorden om genoeg punten te verdienen voor evenementen en waardebonnen. Er zijn 5 vragen met open slotjes die op elke locatie kunenn worden beantwoord, zo kan de gebruiker thuis ĂŠn in de kerk de vragen beantwoorden. De 2 gesloten vragen kunnen alleen in de kerk beantwoord worden door de twee QRcodes te scannen die in de kerk aanwezig zijn. De bordjes met de codes staan bij elementen in de kerk die met de vragen te maken hebben.
36
Figuur 33.
37
ONTWERPDOCUMENT | SIM
DEFINITIEVE SCHERMONTWERPEN // APPLICATIE Figuur 35.
QUIZ
38
Vraag Wanneer de gebruiker vanuit de 360 graden foto navigeert naar de verschillende quiz vragen komt hij weer terecht in de stijl van de quizintroductie. Het krijtbord staat weer centraal om de onderwijzende factor door te laten schemeren. Bovenaan het vraagnummer genoteerd en daarbij ook de tijd die de gebruiker nog over heeft om de vraag te beantwoorden.
Animatie Na het beantwoorden van de vraag wordt de gebruiker doorgeschoven naar de animatie die hij moet voltooien. Door snel op de het scherm te klikken wordt de kerk langzaam opgebouwd. Hierdoor houden wij de aandacht van de gebruiker bij de quiz.
Hierboven zijn de overige vragen afgebeeld die we in de 360 graden foto hebben verwerkt.
Figuur 34.
OVERIGE ANIMATIES Naast de kerk die de gebruiker moet opbouw (links afgebeeld) hebben we ook 2 andere animaties gemaakt. De linker is het doorbladeren van een oude bijbel. De gebruiker moet snel op het scherm klikken om door het boek te bladeren en zo snel door te gaan naar de volgende vraag. De rechter afbeelding is een kaars die de gebruiker moet uitblazen om verder te gaan naar de volgende vraag. Figuur 36.
Figuur 37.
39
ONTWERPDOCUMENT | SIM
DEFINITIEVE SCHERMONTWERPEN // TRAILER Walktrough video Vraag Doel: App promoten/ laten zien wat je kan doen in de applicatie - App schermen moeten duidelijk zichtbaar zijn (40/50% mobieltje in beeld) - Het moet duidelijk zijn dat je de app zowel thuis als in de kerk kan gebruiken - Het moet duidelijk zijn dat er meerdere kerken zijn - Het moet duidelijk zijn dat er 360 foto’s in de app zitten - Het moet duidelijk zijn dat er een quiz in de app zit - Het moet duidelijk zijn dat er beloningen te verdienen zijn - Er moeten shots gemaakt worden waarbij de kadering goed is voor tekst (animaties van USPs) 40
Splitscreen shots: Met de splitscreenshots willen we laten zien hoe het gebruik van applicatie thuis en in de kerk verschilt. Dit doen we doormiddel van dezelfde taken in splitscreen laten zien. - - - -
App downloaden (2 verschillende scenario’s) Cardboardbox 360 kijken en rondkijken in de echte kerk Quiz doen Kortingsbon gebruiken
Kort script in taken: - - - -
Downloaden app Welkomsscherm laten zien en inloggen via fb Doorzoeken van kaarten Aanklikken kerk
Animaties met tekst (usp’s): - 00:09 Kies locatie - 00:14 Check openingstijden - 00:19 Ontdek de kerk op locatie - 00:27 En thuis - 00:31 Speel de quiz - 00:42 Met interactieve animaties - 01:01 Scoor zo veel mogelijk punten - 01:06 Check de GelreShop - 01:25 En ruil ze in voor kortingsbonnen - 01:36 Logo animatie met call to action (available now in the appstore) Stijlkeuze: We hebben ervoor gekozen om de video op een stilistische soepele manier te filmen. We hebben hiervoor met een glide-cam gefilmd die ervoor zorgt de shots smooth zijn. Dit hebben we gedaan om te zorgen dat de aandacht blijft op het voorwerp waarop we willen dat de aandacht valt. Ook hebben we een aantal beelden in slow motion gezet om een cinematisch effect te krijgen. Het effect hiervan is dat je geboeid blijft kijken en rustig de handelingen kan analyseren. De kijker kan hierdoor rustig kijken wat er gebeurt zonder er al te veel bij na te denken. Ter ondersteuning van de look and feel van de video hebben we de video gegrade (kleurcorrectie) met donkerblauwe en lichtoranje tinten die we ook in onze applicatie gebruiken. Dit hebben we gedaan om consistent te blijven in de huisstijl. Het effect hiervan is een herkenning die ten goede komt van de samenhang van al onze producten. De muziek bouwt op naar een climax waarin de applicatie wordt gebruikt en bouwt weer af zodra de kortingsbon is ingeleverd. Op de muziek hebben we de shots getimed zodat je als kijker het ritme aanvoelt en bijna weet wanneer de volgende knip is. Dit zorgt voor een prettige kijkbeleving waarin de kijken zijn volle aandacht op de beelden/ animaties kan houden.
Figuur 38.
41
ONTWERPDOCUMENT | SIM
DEFINITIEVE SCHERMONTWERPEN // INFORMATIE VIDEO Informatie video Vraag Doel: Tipje van de sluier over de kerk onthullen door een aantal feitjes te vertellen met een voice over. Voice over: Welkom bij de Remigiuskerk in Steenderen. De kerk is gebouwd in de 12e eeuw, dat houdt in dat hij in de laatgotische tijd gebouwd is. Dat zie je goed terug in de architectuur van de kerk. De kerk staat onder anderen bekend om zijn prachtige houten plafond en mooie akoestiek. Veel plezier met ontdekken.
42
Stijlkeuze: We hebben ervoor gekozen om de video op een stilistische soepele manier te filmen. We hebben hiervoor met een glide-cam gefilmd die ervoor zorgt de shots smooth zijn. Dit hebben we gedaan om te zorgen dat de aandacht blijft op het voorwerp waarop we willen dat de aandacht valt. Ook hebben we een aantal beelden in slow motion gezet om een cinematisch effect te krijgen. Het effect hiervan is dat je geboeid blijft kijken en rustig de handelingen kan analyseren. De kijker kan hierdoor rustig kijken wat er gebeurt zonder er al te veel bij na te denken. Ook hebben we ervoor gekozen om de beelden in portrait te filmen in plaats van landscape omdat onze applicatie altijd staand is. Dit komt de usability ten goede omdat de gebruiker hierdoor een actie minder hoeft te doen om de video te bekijken.
Ter ondersteuning van de look and feel van de video hebben we de video gegrade (kleurcorrectie) met donkerblauwe en lichtoranje tinten die we ook in onze applicatie gebruiken. Dit hebben we gedaan om consistent te blijven in de huisstijl. Het effect hiervan is een herkenning die ten goede komt van de samenhang van al onze producten. Voor de muziek hebben we een modern nummer met veel beats en drops gekozen. Hier kunnen we snel op monteren om zo in korte tijd veel van de kerk te laten zien. Deze snelle shots en onrustige beat hebben we gecompenseerd met een rustige voice over zodat. Het effect hiervan is dat je alle informatie van de voice over mee krijgt die nodig is voor een aantal vragen in de quiz.
Figuur 39.
43
ONTWERPDOCUMENT | SIM
CONCLUSIE
44
In dit ontwerpdocument hebben we gekeken naar alle aspecten voor het uiteindelijke prototype. Aspecten zoals de doelgroep, quiz, concept en typografie. Na het lezen van dit document is het duidelijk geworden wat voor een applicatie er gemaakt is en hoe deze eruit gaat zien. GelreQuest is een online applicatie waarmee je met behulp van een quiz de 15 kerken van stichting Oude Gelderse Kerken kunt leren ontdekken vanuit je huis, maar ook door naar de kerken toe te gaan. De stijl is een mix van flat design en skeuomorphism. Deze mix zorgt ervoor dat de designs tijdloos blijven en dus langer mee kunnen gaan. Als typografie hebben we twee lettertypes gekozen. Baron Neue en Glober. Baron Neue voor titels en Glober voor teksten en informatie. De interactieve animaties in de app brengen het geheel nog dichter bij elkaar door er echt een beleving van te maken voor de gebruiker. Dit alles zorgt ervoor dat GelreQuest je meeneemt in het ontdekken van een stukje extra geschiedenis van gelderland!
45
ONTWERPDOCUMENT | SIM
BRONNENLIJST Positivemed (2013). The psychology of colour. Geraadpleegd op 1412-2016, van http://positivemed.com/2013/03/07/the-psychology-ofcolor/
46
Hubspot (2015). Color Theory 101: How to Choose the Right Colors for Your Designs. Geraadpleegd op 14-12-2016, van https://blog.hubspot. com/marketing/color-theory-design Wonderkamers (2016). Kunst in het klein. Geraadpleegd op 16-122016, van http://www.wonderkamers.nl/
47
ONTWERPDOCUMENT | SIM
BIJLAGE
SHOTLIST INFORMATIE VIDEO
48
SIM Trailer/walktrough
Type shot
Beschrijving
Shot 1
Extreem totaal - Drone
Reveil van de kerk achter een gebouw of boom langs (het liefst sunset)
Shot 2
Extreem totaal - 8mm - statief
Openingsshot kerk (pan of tilt)
Shot 3
Medium - 50mm - Glidecam
Detail
Shot 4
Close - 50mm - Glidecam
Detail
Shot 5
Close - 50mm - Glidecam
Detail
Shot 6
Totaal - 20mm - Statief
Timelapse kerk exterieur
Shot 7
Medium - Drone
Details ramen
Shot 8
Extreem totaal - Drone
Drone uit het gebouw of drone die weg/hoog weg vliegt
Dit zijn de shots die we tenminste nodig hebben. V/o: Welkom bij de Remigiuskerk in Steenderen. De kerk is gebouwd in de 12e eeuw dat houd in dat hij in de laat gotische tijd gebouwd is en dat kan je goed terug zien in het design van de kerk. De kerk staat onder anderen bekend om zijn prachtige houten plafond en mooie akoestiek. Veel plezier met ontdekken.
Figuur 40.
BIJLAGE
SHOTLIST TRAILER SIM Trailer/walktrough
Type shot
Beschrijving
Shot 1
Extreem totaal - 20mm - statief
Splitscreen iemand op de bank op telefoon en iemand voor de kerk op telefoon.
Shot 2
Close up - 70mm handheld of statief
Close up openings scherm en doorklikken naar de kaart op telefoon
Shot 3
Medium - 35 mm - handheld
B-roll shots van de kerk hoofdpersoon kijkt rond
Shot 4
Medium - 35 mm - handheld 4K
Overgangshot naar man op bank die kijkt op zijn telefoon/tablet
Shot 5
Medium - 50mm - statief
Man die quiz doet op de bank (overshoulder)
Shot 6
Close up - 70mm - handheld beweging links naar rechts
Close up van scherm en man klikt op antwoord
Shot 7
Close up - 70mm - handheld beweging links naar rechts
Zelfde actie als de man maar dan het kind in de kerk
Shot 8
Medium totaal - 20mm - ronin/ glidecam
Kind loopt naar qr code
Shot 9
Medium - 35mm - glidecam
Kind scant qr code en ziet animatie
Shot 10
Close - medium - totaal - 20,35 en 50mm - handheld en glidecam
B-roll shots van de kerk en de hoofdpersonen die door de app aan het kijken zijn
Shot 11
Medium close - 35mm - handheld of glide cam
Eindscherm laten zien met punten en doorklikken naar de winkel
Shot 12
Medium close - 35mm - handheld of glide cam
Hoofdpersoon loopt naar cafe/koffietent
Shot 13
Medium close - 35mm - handheld of glide cam
2 shot van hoofdpersoon en barmedewerker die de coupon laat zien en koffie krijgt
Shot 14
Close - 35mm - handheld of glide cam
Koffie drinken
Shot 15
ANIMATIE
Eindanimatie met download de app
49
Figuur 41.
ONTWERPDOCUMENT | SIM
50