Ontwerpdocument icd

Icd M 55 el 18 iss 17 a va n

ee k

B

s

rk en

oe

Ta 55 m 17 ar 48 a M

blob

inhoud

Qui nectas dem quo coribus, iunt modit faces ma dist oditam esci con net, coreic tes eum fugit volore paritamus que eat.

It ventium et unt res non non nosam, qui te et mint moditaq uiatem. Or am, conem restoreperro maio des ad molorpore vendus, numquo tet que lant res etTem. Ut volupta tessum, simagnatio. Ut aboremporem earcimincil idelendit acculpa sed excersp erehend icient doluptio magnimo dolupti atur, to dolo ent.

Acillit parcium ad et inumet quae dolorro omnimus.

Id quae. Nam, sin rates quiaspe vent ut facesti nestibus qui blam hitatur mossim lam volum quodiscidus dolorero explabores ut erciti dolupta tionsequi cumqui doluptur? Caecto doluptatem re plitatur aut vent reped magni nullorp oraeres sunt, autectaernam ut arunt optati alia comnia que nonem qui veni aut quate Qui nectas dem quo coribus,

iunt modit faces ma dist oditam esci con net, coreic tes eum fugit volore paritamus que eat.

It ventium et unt res non non nosam, qui te et mint moditaq uiatem. Or am, conem restoreperro maio des ad molorpore vendus, numquo tet que lant res etTem. Ut volupta tessum, simagnatio. Ut aboremporem earcimincil idelendit acculpa sed excersp erehend icient doluptio magnimo dolupti atur, to dolo ent.

Acillit parcium ad et inumet quae dolorro omnimus.

Id quae. Nam, sin rates quiaspe vent ut facesti nestibus qui blam hitatur mossim lam volum quodiscidus dolorero explabores ut erciti dolupta tionsequi cumqui doluptur? Caecto doluptatem re plitatur aut vent reped magni nullorp oraeres sunt, autectaernam ut arunt optati alia comnia que nonem qui veni aut quate Qui nectas dem quo coribus, iunt modit faces ma dist oditam

esci con net, coreic tes eum fugit volore paritamus que eat.

It ventium et unt res non non nosam, qui te et mint moditaq uiatem. Or am, conem restoreperro maio des ad molorpore vendus, numquo tet que lant res etTem. Ut volupta tessum, simagnatio. Ut aboremporem earcgit volore paritamus que eat.

It ventium et unt res non non nosam, qui te et mint moditaq uiatem. Or am, conem restoreperro maio des ad molorpore vendus, numquo tet que lant res etTem. Ut volupta tessum, simagnatio. Ut aboremporem earcimincil idelendit acculpa sed excersp erehend icient doluptio magnimo dolupti atur, to dolo ent.

Acillit parcium ad et inumet quae dolorro omnimus.

Id quae. Nam, sin rates quiaspe vent ut facesti nestibus qui blam hitatur mossim lam volum quodiscidus dolorero explabores ut erciti dolupta tionsequi cumqui

Inleiding

In dit ontwerpdocument staat al-

les wat te maken heeft met het ontwerp van onze applicatie. Onze applicatie heet ‘Blob’, vernoemd naar het hoofdkarakter van de game.

Allereerst zullen de highlights en ocnclusies uit de omgevingsanalyse kort worden samengevat in het eerste hoofdstuk. Vervolgens hebben wij beeldmateriaal verzameld over het onderwerp. Het onderwerp van onze applicatie is fantasiedieren en de omgeving waarin de app zich afspeelt is in de natuur. Specifieker gezegd: in een hol, een bos en onderwater. Ook van deze omgevingen is beeldmateriaal te vinden.

In het hoofdstuk wat daarop volgt staat beeldmateriaal van de vormgeving en stijl die wij gaan hanteren voor onze karakters, iconen en omgevingen in onze app. Vervolgens staat in het voglende hoofdstuk uitgebreid beschreven van het

concept van onze applicatie is. Daarna hebben wij een moodboard opgesteld aan de hand van het verzamelde beeldmateriaal en beschrijving van ons concept om zo een duidelijk beeld te geven van de look en feel van onze app. Op basis hiervan hebben wij verschillende schetsen gemaakt die verschillende varianten van de app weergeven. In het daarop volgende hoofdstuk staan de highlights van de designstudie ICD genoemd. In het hoofdstuk audioplan staat beschreven welke geluiden en wat voor muziek er allemaal voorkomt in onze app. Uit alle bovengenoemde hoofdstukkken hebben wij vervolgens de definitieve schermontwerpen gecreeerd, en deze zijn dan ook te zien in het op ĂŠĂŠn na laatste hoofdstuk. Tot slot staan in het laatste hoofdstuk de dynamische onderdelen beschreven en uitgebeeld zodat de gebruiker precies weet welke interacties allemaal mogelijk zijn.

Highlights

research

onderwerp

In de omgevingsanalyse is er research gedaan naar het onderwerp van de applicatie. Deze hebben we ook uitgebreid besproken In dit hoofdstuk worden de highlights hier uit gehaald. Er is gekozen voor het onderwerp “Een fictief dier samenstellen” Dit deed ons meteen denken aan spellen als Tamagotchi of Pou, waar het de bedoeling is dat een fictief dier word verzorgd door de ge-

bruiker en hierdoor groeit en veranderd. Ook schoot de serie Pokémon door ons hoofd, vanwege de verschillende vormen die de fictieve dieren in de serie aannemen. Zo is besloten om ook een verzorg-element in de applicatie terug te laten komen. Het fictieve dier kan bijvoorbeeld gevoerd worden of er kan mee gespeeld worden.

Los hiervan word er ook een puzzel ele-

ment aan de applicatie toegevoegd.

Er moeten zaken opgelost worden om verder te komen en van vorm te veranderen.

Het verhaal speelt zich af in een fantasiebos. Dat vonden wij passend bij het onderwerp fictieve dieren. Het fictieve dier doorloopt 3 ruimtes, namelijk het hol, het bos zelf en onder water. Als in alle drie de ruimtes alle acties zijn

uitgevoerd heeft de gebruiker de applicatie uitgespeeld. Tijdens het spelen van de applicatie worden er pictogrammen vrijgespeeld. Dit zijn de volgende vijf pictogrammen: Aandacht, Spelen, Kleur, Eten en Vacht. Via deze pictogrammen kan de gebruiker ook interacteren met het diertje.

opdracht debrief

De opdracht van deze cursus was om een interactieve applicatie te ontwikkelen met een natural user interface voor een tablet.

Daarbij kon gekozen worden uit drie onderwerpen waarbinnen je de app moest gaan creeĂŤren. Deze onderwerpen waren tijdreizen, fantasiedieren of het weer. Wij hebben uiteindelijk gekozen voor het onderwerp fantasiedieren omdat wij hier meteen de meeste ideeĂŤn en inspiratie bij hadden.

programma van eisen

In het programma van eisen staan eisen die betrekking hebben op de communicatie, de interactie en het ontwerp.

Voor de communicatie zijn de eisen als volgt: - Verhaal moet goed overkomen - Geen knoppen of teksten - Alles moet duidelijk worden door interacties en ontwerp - Goede acties communiceren met gebruiker d.m.v. bijvoorbeeld symbolen De eisen voor de interactie zijn: - Er moet getikt, geswiped en gesleept kunnen worden in de applicatie - Afwisseling van deze 3, niet veel hetzelfde.

En tot slot zijn de ontwerpeisen: - No outline cartoon style - Ontwerp is geschikt voor tablets - Levendige en vrolijke kleuren - Veel vormen van het fictieve dier

plan van aanpak

doelgroep

We richten ons op een brede doelgroep, de leeftijdscategorie is 7 tot 25 jaar. De applicatie word over het algemeen afgestemd op de doelgroep van 7 tot 12 jaar. De applicatie word zo ontwikkeld dat het voor hen te begrijpen is en ze behalve vermaak, ook wat leren door de applicatie.

Kinderen van 7 tot 12 jaar leren namelijk op die leeftijd verbanden te leggen.

Deze applicatie kan ze hierbij helpen en dit ook toetsen.

Kinderen worden in hun eigen wereld beloond als zij iets goed doen, dit willen wij ook in de applicatie laten terugkomen door middel van een geluidje of vrijgespeeld pictogram bij een goede actie. Ook het ontwerp is op deze doelgroep afgestemd. De karakters en objecten op de voorgrond (de belangrijke objecten waarmee geĂŻnteracteerd kan worden) krijgen felle kleuren, dit trekt, net als felkleurige snoepjes en dergelij-

ke, de aandacht van het kind. Voor de leeftijden van 12 tot 25 staat vooral vermaak en amusement voorop bij deze applicatie. Deze personen zijn dan al ver genoeg ontwikkeld om nog iets te leren met deze applicatie, maar het dient nog steeds als een leuk tijdverdrijf.

Daarnaast word iedereen vrolijk van felle kleuren en valt het op, daarom is het ontwerp ook geschikt voor de oudere kinderen en volwassenen. De

leeftijdscategorie gaat tot 25 jaar.

Hier is bewust voor gekozen omdat uit onderzoek is gebleken dat personen tussen de 12 en 25 jaar de meeste vrije tijd online doorbrengen. Na het 25e levensjaar wordt er vaak meer aandacht besteed aan het gezinsleven of de carrière van de persoon.

scenario’s

concurrentie

Onze app wordt een game waarbij je een fantasiedier bent. Dit fantasiedier moet je steeds verder laten transformeren door interacties met hem of de omgeving aan te gaan.

Een concurrent van onze game is de eeuwenoude tammagotchi.

Net zoals bij de tammagotchi moet je bij onze game een diertje verzorgen en als je het goed doet groeit hij. Waar onze game in verschilt is dat hij niet alleen groeit, maar veel meer uiterlijke veranderingingen kan aangaan.

Daarnaast heb je bij een tammagotchi niet echt een omgeving. Bij onze app heb je wel een omgeving, het spel speelt zich af in een fantasiebos.

Daarnaast zou je onze game kunnen vergelijken met pokemon.

Bij pokemon is het doel om zoveel mogelijk soorten pokemons te vinden en deze te vangen. Bij ons moet je ook zoveel mogelijk verschillende dieren tegenkomen. Maar in tegenstelling tot bij pokemon ben je zelf het dier dat steeds transformeert in een ander dier terwijl je bij

pokemon gewoon steeds verschillende fantasiedieren tegenkomt.

Pokemon kent echter wel het concept van transformaties, hier heet het evolueren.

Ons spel verschilt erin dat ons fantasiedier een hele hoop transformaties aan kan gaan en een pokemon kan maar maximaal 3x evolueren.

Tot slot kan de computergame Spore nog als een concurrent worden gezien. Bij spore ben je een dier en door te vechten met verschillende soorten dieren of door ze te imponeren kan je bepaalde

uiterlijke kenmerken overnemen. Het concept van het spel is bijna hetzelfde als onze game. Ons spel verschilt erin dat het veel simplistischer is en minder uitgebreid. Ons spel is dus meer geschikt om even tussendoor te spelen terwijl het bij Spore de bedoeling is dat de speler er echt voor gaat zitten en de tijd gaat nemen. ze spreken dus beide een andere doelgroep aan.

inspiratie/trends

Inspiratie/Trends Voor het onderwerp “Fictieve dieren” werden wij geïnspireerd door het spel Tamagotchi en de serie Pokémon. Bij Tamagotchi is het de bedoeling dat de gebruiker zijn fictieve diertje verzorgd zodat deze groter word en van vorm veranderd.

Dit inspireerde ons om ook een verzorg-element in de applicatie terug te laten komen.

In de serie Pokémon draait alles om fictieve dieren. Ook hier

veranderen deze dieren uiteindelijk van vorm door te evalueren. Door de vele variatie in fictieve dieren werden wij geïnspireerd om het fictieve dier in de applicatie zo veel mogelijk vormen te geven.

Voor de vormgeving zijn we geinspireerd door developers als Vector Park en Metro Trains. Deze developers hanteren in hun applicaties vooral Flat Design.

Deze stijl sprak ons erg aan omdat het

een vrolijke, speelse en frisse uitstraling heeft. Ondanks dat deze stijl niet meer zo populair is als eentijdje geleden, vinden we toch dat deze het beste bij het verhaal in onze applicatie past. Ook de manier van interacteren in applicaties van deze developers sprak ons aan. Er worden dezelfde technieken gebruikt als die wij willen gebruiken in onze applicatie. Denk aan drag and drop, swipen, tikken etc.

conclusies

Als we de omgevingsanalyse samen moeten vatten komen we tot een aantal conclusies over de applicatie. Er word een applicatie gemaakt met het onderwerp “Fictieve dieren” deze applicatie gaat zich afspelen in drie ruimtes van een fantasiebos.

Door acties uit te voeren veranderd het fictieve dier van vorm en doorloopt zo de drie ruimtes. De applicatie word vormgegeven met felle kleuren omdat dit de jonge doelgroep aanspreekt. Elementen

op de voorgrond worden gemaakt in flat design, de achtergronden worden wat realistischer gemaakt en minder opvallend zodat de elementen waar de gebruiker daadwerkelijk iets mee moet doen juist beter opvallen. De doelgroep van de applicatie zijn personen tussen de 7 en 25 jaar. Voor de leeftijden 7 tot en met 12 heeft de applicatie niet alleen een amusement functie maar ook een leer functie. Voor de leeftijden 12 tot en met 25 bied de applicatie

vooral als amusement.

De stakeholders van de applicatie zijn de gebruikers zelf, investeerders, app ontwikkelaars en marketeers.

De opdrachtgevers zijn uitgevers van game-applicaties/developers.

De applicatie wordt ontwikkeld voor een tablet. Er wordt dus geïnteracteerd door middel van touchscreen, dit word in de applicatie gedaan door o.a. swipen, tikken en slepen.

Beeldmateriaal

Onderwerp onderwerp

In dit hoofduk staat

het beeldmateriaal dat bij ons onderwerp hoort. Er kon gekozen worden uit drie onderwerpen. Deze waren: tijdreizen, het weer of fantasiedieren. Wij hebben gekozen voor fantasiedieren. Op deze en de volgende pagina’s zijn verschillende afbeeldingen te zien die te maken hebben met dit onderwerp. Wat opvalt is dat de fantasiedieren allemaal gemeen hebben dat zij delen van dieren of objecten bevatten die zich samen tot een nieuw dier vormen. Het verschil zit hem in de hoe-

veelheid samengestelde delen. Het plaatje van de eenhoorn is bijvoorbeeld een paard met een hoorn erop. Maar er zijn ook afbeeldingen van fantasiedieren die helemaal niet meer terug te herkennen zijn als een (deel van een) dier, kijk maar eens naar het blauwe fantasiedier wat naast de eenhoorn staat. Het beeldmateriaal verschilt verder vooral de in stijl waarin ze zijn uitgewerkt. Wij hebben afbeeldingen gezocht met een zeer realistische uitwerking, geanimeerde afbeeldingen, foto’s van kunstwerken etc.

Dit zorgt ervoor dat wij een breed assortiment aan beeldmateriaal hebben.

Verder hebben wij ervoor gekozen om onze game af te laten spelen in een fantasiebos en onderwaterwereld.

Deze twee omgevingen zijn dus ook onderwerpen van ons concept en daarom hebben wij hier ook beeldmateriaal van gezocht. Op de volgende pagina’s is allereerst het beeldmateriaal van (sprookjes)bossen te zien. Daarna is er beeldmateriaal van onderwaterwerelden en objecten of dieren die hier mee te maken hebben te vinden. Wat opvalt bij het beeldmateriaal van het bos is dat er veel met kleur en licht wordt gespeeld. Als je normaal een bos zou tekenen zou je bruine boomstammen met groene bladeren tekenen maar in het beeldmateriaal is te zien dat we veel meer met kleur kunnen spelen om de omgeving interessant te maken. We kunnen bijvoorbeeld de bladeren een blauwe gloed geven en het zonlicht door de boomstammen laten schijnen in een roze gloed.

Op

deze pagina’s staat het beeldmateriaal van de onderwaterwereld weergegeven. Ook hier valt op dat er met kleur gespeeld kan worden om de omgeving interessanter te maken. Water hoeft niet per se blauw te zijn, het kan door het licht van de ondergaande zon alle kleuren van de regenboog krijgen, zoals te zien is op de afbeelding hiernaast. Verder laat het beeldmateriaal zien dat objecten of dieren onderwater een hele andere vorm kunnen aannemen doordat de zwaartekracht anders werkt onderwater, kijk maar eens naar het plaatje op de vorige pagina waar de jurk van de vrouw lijkt te zweven.

Beeldmateriaal I

n dit hoofdstuk staat het beeldmateriaal van de vormgeving en stijl van onze applicatie weergegeven. Wij wilden ons karakter vooral gaat vormgeven in een zogenoemde ‘flat design’ stijl. Hierbij lijkt het of de omgeving en alle objecten daarin zijn platgestreken. Dit zorgt ervoor dat het beeld meer 2D lijkt dan 3D. Wij hebben het gehele ontwerpdocument ook zoveel mogelijk in flat design stijl gemaakt zodat de vormgeving van het ontwerpdocument aansluit

Vormgeving bij de stijl van de applicatie. Het gehele ontwerpdocument zou je dus ook kunnen zien als beeldmateriaal van de vormgeving en stijl voor onze app. Op de pagina hiernaast is een afbeelding te zien van een bos met allerlei dieren erin die is ontworpen in flat design stijl. Deze afbeelding geeft goed weer hoe wij willen

& StijL dat onze app eruit moet komen te zien. Het onderwerp is namelijk hetzelfde (een bos) en de stijl en vormgeving zijn ook vergelijkbaar met die van ons karakter.

Op de volgende pagina’s is meer beeldmateriaal te vinden van flat design.

De afbeeldin-

gen zoals je hier op deze pagina ziet, met allerlei soorten fruit en icoontjes in flat design stijl is vergelijkbaar met hoe wij onze

icoontjes willen vormgeven. Wij willen deze ook in flat design stijl vormgeven en wij willen ze allemaal in een ronde gelijke vorm ontwerpen.

Op deze en de vorige pagina zie je beeldmateriaal van de stijl die wij willen gaan hanteren voor de omgeving van de game. Zoals je ziet is deze niet in flat design stijl. Wij hebben hiervoor gekozen omdat de karakters en objecten dan extra afsteken en het voor de gebruiker duidelijk is met wat hij of zij kan interacteren binnen de game. Wij hebben gekozen voor een stijl die iets realistischer is dan flat design, er zijn meer schaduwen en lichtbronnen en alles lijkt meer 3D. Het is wel nog een duidelijk getekende stijl, wij wilden geen met de computer geanimeerde omgeving omdat het contrast dan te groot zou worden tussen de karakters in flat design stijl en de omgeving die er super driedimensioneel uit ziet. Door te kiezen voor een vormgeving en sitjl die beter aansluit wordt het meer een geheel. Daarnaast is hier in het beeldmateriaal te zien dat erg veel games en spelletjes apps zo’n (met de computer) getekende stijl hanteren. Aangezien wij ook een game hebben die puur tot doel heeft om te vermaken en tijd te verdrijven past de vormgeving van onze app bij de stijl van deze branche.

Concept applicatie

I

n dit onderdeel wordt toegelicht waar het concept over gaat. Dit houdt in dat hier verteld wordt wat de gebruiker beleefd en waarneemt zodra hij met onze applicatie bezig is. Dit zal toegelicht worden aan de hand van een beschrijving van de omgeving en het verhaal.

Het thema waarvoor wij hebben gekozen is fantasiedieren. In het hoofdstuk ‘research onderwerp’ van de omgevingsanalyse is hier meer informatie over te vinden. Ons idee in grote lijnen is dat je bij onze applicatie een fantasiedier moet verzorgen en dat dit fantasiedier steeds in andere versies van zichzelf transformeert.

Als eerst hadden we het idee om de app met het diertje in een kooi in een huiskamer te laten starten. Allereerst zou je dan interacties in het kooitje moeten doen. Dit kunnen dingen zijn als rennen in een rad, eten, drinken of slapen. Vervolgens zou je dan uit het kooitje moeten ontsnappen om door de huiskamer rond te kunnen

lopen en hier verdere interacties te kunnen doen. Later bedachten wij dat het leuker zou zijn als de omgeving geen saaie huiskamer zou zijn maar dat het beter zou zijn als we voor een omgeving zouden kiezen die meer bij het thema fantasiedieren past. Op dit idee zijn we verder gaan borduren en kwamen we op het idee om voor een (fantasie)bos te kiezen. Hierin zouden de interacties die je moet verrichten met het diertje net iets moeilijker te vinden zijn, wat het spel uitdagender maakt. Bijvoorbeeld: in plaats van dat je naar de voerbak loopt om het diertje eten te geven, zal je nu een struik moeten vinden waar eetbare bessen aan groeien of iets dergelijks. Of in plaats van dat je onder de douche gaat staan met je diertje moet je hem nu laten zwemmen in een rivier om hem te wassen. Deze omgeving zorgt ervoor dat de gebruiker meer betrokken blijft bij het thema en de ervaring

die hij beleefd meer aansluit bij het fantasiethema dan wanneer het spel zich in een doodnormale huiskamer zou afspelen.

De verhaallijn die je in onze app doorloopt is die van één fantasiedier. Je begint in principe als een klein diertje wat nog geen specifieke uiterlijke kenmerken heeft.

Je bent in het begin een soort van blob/kwal. Het diertje heet daarom ook blob. Je diertje heeft nog geen poten, oren, staart of andere specifieke dierlijke kenmerken.

Vervolgens is het doel van het spel om dit dier zo ver mogelijk te laten ontwikkelen. Dit doe je door interacties met hem aan te gaan. Enkele voorbeelden hiervan zijn door hem eten te geven zal hij dikker worden. Door hem te laten zwemmen zal zijn huid veranderen, hij zal dan bijvoorbeeld schubben krijgen. Door

hem in bomen te laten klimmen zal hij handige grijparmen krijgen. Of door hem van de rotsen te laten springen zal hij uiteindelijk vleugels krijgen. Zo zijn er allerlei interacties te ontdekken door de gebruiker die het diertje steeds van gedaante te doen wisselen. Zodra je alle gedaantes hebt gehad heb je het spel uitgespeeld.

Het spel heeft geen onderliggende diepe betekenis of les die geleerd kan worden. Ons spel is puur ter vermaak en ons concept is daarom vooral gericht op kinderen of jonge mensen die zich vervelen en de tijd willen doden.

Om een precieze en uitgebreiden beschrijving te geven hebben wij het spel opgesplitst in drie ruimtes/scene’s. Hier worden per scene/ruimte het verhaal en de interacties uitgelegd;

Scene 1 – Hol. Je begint als “blob” in een donker hol. Dit kan gezien worden als de huiskamer van het fictieve dier. Het is de bedoeling dat een aantal elementen worden gemaakt, gesleept en aan getrokken word.

1. Het is donker in het hol, de cursor (in dit geval vinger van gebruiker) dient bij aanraking als licht, op deze manier kan je in de kamer rondzoeken naar bijvoorbeeld een touwtje van de lamp. Hier moet aan getrokken worden (naar beneden slepen) zodat het licht aan gaat.

2. De gebruiker is in eerste instantie waarschijnlijk nieuwsgierig naar het blobje en zal hoogst waarschijnlijk ook een keer op het diertje klikken. De gebruiker ontdekt dan dat je op deze manier het diertje “aait”. Er verschijnen hartjes in beeld bij het blobje. Door deze actie word het pictogram “aandacht” vrijgespeeld.

3. Er staat een badje in het hol.

Als je het blobje hier in wil laten gaan, zal er een geluid komen dat aangeeft dat dit nog niet kan. De gebruiker zal merken dat dit komt doordat er nog geen water in zit.

Naast het bad vind de gebruiker een grote kraan waar aan gedraaid kan worden (het lijkt op een soort stuur) door dit te draaien door middel van de vinger in de juiste draairichting te bewegen, zal er water in het bad lopen. Het blobje kan in bad en veranderd hier door van kleur.

Door deze actie word het “kleur” pictogram beschikbaar.

4. In het hol staat een soort basketbalsetje waar het blobje mee kan spelen. De gebruiker moet eerst iets vinden om door de basket te kunnen gooien. In een hoekje kan de gebruiker wat eikels vinden, door deze door de basket de “gooien” word er gespeeld. Het blobje krijgt door deze actie armen en benen. Het “speel” icoontje word vrijgespeeld.

5. In het hol zit een deurtje.

Het kan zijn dat de gebruiker al heeft geprobeerd te deur te openen. Dit kan door te “trekken” aan de deur. De gebruiker zal dan hebben gemerkt dat deze nog niet open wil. Als de 4 voorgaande interacties zijn volbracht, zal er een geluid afspelen wat het openen van een slot symboliseert, ook zal er iets veranderen aan de deur zelf zodat de gebruiker ook zonder geluid merkt dat er iets is veranderd. Op dit moment kan de deur geopend worden en loopt het blobje dat inmiddels al meer op een fictief dier lijkt, de deur uit en scene 2 (het bos) in.

Scene 2 – Bos 1. Het fictieve dier kan bloemen plukken door hier aan te trekken, als deze in de buurt van zijn mond komen gaat deze open zodat de gebruiker weet dat deze gege-

ten kunnen worden. Hierdoor word het pictogram “eten” vrijgespeeld en word het diertje groter.

2. Er vliegen bijen rond in het bos.

Als de gebruiker hier dichterbij in de buurt komt zullen de bijen rond het hoofd van het dier gaan vliegen en zoemen. Als de gebruiker op de bijen tikt vallen ze weg, uiteindelijk blijft er 1 over die het fictieve dier steekt. Hierdoor krijgt het een andere vacht (stekels bijv.) het “vacht” pictogram word vrijgespeeld.

3. Als het dier in aanraking komt met het riviertje, veranderd het in een fictieve vis. Het dier kan nu verder in wereld 3.

Scene 3 – Onderwaterwereld.

1. De bubbels onder water kunnen kapot getikt worden. Deze bubbels hebben een kleur, en welke kleur kapot getikt word, in deze kleur veranderd het dier.

2. Het fictieve dier is nu onder water. Onder water vind de gebruiker

een oester die geopend kan worden.

Als de gebruiker hier 1 keer op tikt zal de oester een klein beetje openen. Tikt de gebruiker er vaker en sneller op, gaat hij echt open. In de oester zit een parel die de gebruiker in de bek of tussen de vinnen van het dier kan slepen. 3. Rechts op het scherm staat een schatkist, als de gebruiker het dier hier heen laat zwemmen zal er nog voor hij de schatkist bereikt heeft, een menselijke hand onder water verschijnen waardoor het dier niet verder kan.

De gebruiker zal kunnen tikken op te hand waardoor de hand lichtelijk beweegt. Door de parel in de hand te leggen verdwijnt de hand weer uit het water. 4. Het dier kan de schatkist openen door de deksel open te trekken, uit de schatkist schijnt een fel licht waardoor het dier even niet zichtbaar is, als het licht verdwijnt is het dier veranderd in een dier met vleugels en vliegt hij het water uit. Dit is het einde van de

applicatie.

Pictogrammen Nadat een pictogram is vrijgespeeld kunnen deze nog een aantal keer worden gebruikt door erop te drukken.

Deze zijn er dan vooral voor amusement, ze dragen niet meer bij aan de voortgang van het verhaal. Door op het “aandacht” pictogram te klikken gebeurd er hetzelfde als dat er gebeurd als de gebruiker het diertje aait. Drukt de gebruiker op het “speel” pictogram gaat het dier spelen. (hij begint bijvoorbeeld te jongleren of te hoelahoepen) met het “eet” pictogram haalt het dier iets te eten tevoorschijn, met het “kleur” pictogram veranderd het dier van kleur en met het “vacht” pictogram veranderd de vacht.

Deze pictogrammen (behalve “aandacht”) kunnen een gelimiteerd aantal keer worden aangeklikt, er zijn namelijk een gelimiteerd aantal kleuren, vachten, voedsel en speelmanieren.

Moodboard

Het moodboard is samengesteld uit half uitgewerkte schermontwerpen, eventuele karakters, ontworpen pictogrammen en kleurschema’s die wij willen gaan gebruiken. Daarnaast hebben wij ook afbeeldingen in het moodboard geplaats die wij niet zelf hebben ontworpen maar die goed bij onze stijl passen en ons concept goed weergeven.

Als met al geeft dit moodboard de sfeer weer van hoe onze app eruit moet komen te zien. Je ziet dat wij voor de achtergronden en omgeving een donkerder kleurenpalet gebruiken dan de karakters en icoontjes. Dit zorgt ervoor dat deze meer opvallen.

Wij willen vooral gebruik maken van veel kleur omdat wij een jonge doelgroep hebben en het beter bij het spel past dan hele sombere saaie kleuren.

SChetsen

schetsen Tamara

Op deze en volgende pagina’s staan de schetsen die Tamara heeft getekend.

Allereerst zijn er op deze pagina 5 varianten van het hoofdpersonage te zien. Vervolgens zijn er 3 varianten van de eerste scene te zien. Op de pagina’s die volgen staan wederom 3 versies van de boswereld en tot slot ook nog 3 varianten van de laatste scene, de onderwaterwereld.

schetsen Melissa

Highlights icd

interactie navigatie & interface NUI

In de applicatie word

gebruik gemaakt van een natural user interface. Bij een NUI worden “natuurlijke” bewegingen gebruikt zoals swipen op een tablet, zwaaien voor een game console of spreken tegen een telefoon, om een actie uit te voeren. Dit in tegenstelling tot een GUI (Graphical User Interface) waar vrijwel altijd een muis of toetsenbord nodig is.

Omdat de applicatie voor een tablet is ontwikkeld word deze interface toegepast. Acties worden

uitgevoerd via de touchscreen van de tablet door middel van o.a slepen en tikken. Een belangrijk punt in deze interface is intuïtiviteit. Dit wil zeggen dat de gebruiker niet veel na hoeft te denken over hoe hij moet interacteren met, bijvoorbeeld, de applicatie. Dit word in de applicatie gedaan doordat de objecten waarmee geïnteracteerd kan worden, een andere stijl hebben dan “normale” objecten. Hierover word meer verteld in het kopje “Stijl achtergrond en

voorgrond”. Ook worden er hints gegeven in beeld en geluid als een gebruiker iets goed of fout doet. De gebruiker weet dan of hij op de goede weg zit of het juist anders aan moet pakken. Als een gebruiker een “level” heeft gehaald, dat wil zeggen alle alle objecten gemaakt, op een juiste plek gezet etc., kan de gebruiker verder naar de volgende ruimte. In elke ruimte zit een object wat met de volgende ruim-

kleurenpalets

In de applicatie wor-

den 3 ruimtes doorlopen. Namelijk een hol, in het bos en onder water. Er zijn kleuren gekozen die hierbij passen. Voor het hol worden vooral donkere kleuren gebruikt met bruine tinten. Er word hier gebruikt van monochrome kleuren, namelijk de kleur bruin in verschillende nuances. Hier en daar worden ook wat andere kleuren gebruikt, omdat de applicatie zich niet in een normaal bos afspeelt, maar een fantasiebos. Denk

hierbij aan kleuren als cyaan en paarse tinten, deze zijn namelijk complementair aan de kleur bruin. In de tweede ruimte, het fantasiebos, worden meer verschillende kleuren gebruikt. Er worden een aantal bruine en groene tinten gebruikt om toch een bee tje een bos-sfeer naar boven te brengen, dit komt bijvoorbeeld terug in het gras of de beplanting. De bomen, die het grootste deel van deze ruimte in beslag nemen, worden monochromatisch paars.

De lucht op de achtergrond en het riviertje worden blauw, er kan dus ook gezegd worden dat er analoge kleuren worden gebruikt (blauw, violet en paars). In de laatste ruimte, de onderwaterwereld, worden zee-kleuren gebruikt.

Denk dus vooral aan monochromatisch blauw.

De beplanting onder water wordt vooral in oranje en groene tinten gemaakt. Oranje is een complementair aan blauw en groen is samen met blauw analoog.

kleurenpalet bos

kleurenpalet onderwater

kleurenpalet hol

karakters

De karakters zijn een belangrijk element in de applicatie.

Er zijn vele vormen van de 3 “basis� karakters omdat via de pictogrammen o.a. kleur en vacht kunnen worden aangepast.

De 3 basis karakters die de uitgangspunten zijn per scene zijn op de volgende pagina weergegeven.

Het karakter uit de eerste scene is het begin karakter. Dit is de “Blob” waar alles mee begint. Hij inhet begin nog grijs gekleurd, omdat alles vormgegeven moet worden door de gebruiker. Het tweede basis karakter heeft benen en armen, is wat groter door het voedsel en heeft inmiddels een kleur gekregen (deze kan variëren, de gebruiker regelt dit immers zelf door middel van het pictogram “kleur”) In de tweede scene word het icoon “vacht” vrijgespeeld

waardoor het karakter bijvoorbeeld stekels of veren kan krijgen. Het derde basis karakter is een vis, omdat deze scene zich onder water afspeelt. Ook hier kan er gevarieerd worden in kleur en vacht door middel van de pictogrammen.

Het green screen karakter in de applicatie is een hand. Deze heeft een rol in de onderwaterwereld. Er kan hiermee geïnteracteerd worden zodat deze weer verdwijnt. Dit karakter speelt dus geen grote rol in de

applicatie. Aan het einde van scene 3 veranderd het karakter in een fictief dier met vleugels dat vervolgens wegvliegt. Dit kan ook als basiskarakter gezien worden, maar dit karakter is maar even te zien omdat dit ook het einde van de applicatie betekend. Van dit karakter zijn ook niet meerdere vormen beschikbaar, in tegenstelling tot de voorgaande karakters.

Daarom is dit karakter geen basis karakter.

pictogrammen

De pictogrammen zijn

in dezelfde flat design stijl gemaakt als de karakters en andere objecten op devoorgrond. Dit omdat ze zo goed opvallen op de wat realistischere achtergrond en het een fris en speels uiterlijk heeft.

Pictogram 1: “Aandacht” Er is gekozen voor een hartje, omdat dit in verband staat met aandacht, Pictogram 2 “Kleur” Er is gekozen voor

een kleurwiel, omdat dit in verband staat met vele verschillende kleuren. Pictogram 3: “Speel” Er is gekozen voor een basketbal, omdat dit in verband staat met spelen. Pictogram 4: “Eten” Er is gekozen voor een appel, omdat dit in verband staat met eten. Pictogram 5: “Vacht” Er is gekozen voor een veer, omdat dit in verband staat met een soort vacht.

stijl voor- en achtergrond

Er is gekozen om de voor-

grond en achtergrond in 2 verschillende stijlen te doen zodat er wat variatie is in vormgeving. De voorgrond word gemaakt in flat design. Onder de voorgrond vallen de karakters en de objecten waarmee ge誰nteracteerd kunnen worden. Flat design word vaak gemaakt met heldere kleuren en zonder zwarte lijnen waardoor dit een opvallende stijl is en er fris uit ziet. De ach-

tergrond word wat realistischer gemaakt. Hier worden meer schaduwen en verschillende kleurtonen gebruikt dan bij de voorgrond. Doordat de flat design elementen met heldere kleuren op de realistische achtergrond worden geplaats komen deze goed naar voren, dit is belangrijk omdat de gebruiker zo een idee krijgt met welke objecten ge誰nteracteerd kunnen worden.

Audioplan

Audio In dit hoofdstuk word er een overzicht gegeven van de audio per scene (muziek en geluidseffecten) die word gebruikt in de applicatie.

Geluiden scene 1 (hol) - Rustig achtergrondmuziekje - Lamp die aangaat - Stromend water - Een bal o.i.d. die gegooid wordt - Een deur die open gaat Een deur die niet open wil gaan - Een slot dat open gaat Geluiden scene 2 (bos) - Bosgeluiden - Bijen gezoem

- Geluidseffect bij trekken van de bloem (?)

- Klap/Sla geluid voor het wegtikken van de bijen - Riviergeluid Geluiden scene 3 (onderwater) - Zee geluiden - Evt. vrolijk, misschien

tropisch achtergrondmuziekje - Hoge tonen bij kapot gaan van een bubbel - Klop geluid bij tikken op de oester - Krakend geluid (?) voor openen van de oesters - Spannende muziek voor de menselijke hand - Krakend geluid bij openen schatkist - (op het eind) vrolijke geluiden en muziek omdat de applicatie is voltooid Algemene geluiden : - Geluid (uit het dier zelf)

dat aangeeft dat een actie nog niet uitgevoerd kan worden - Geluid (uit het dier zelf) dat aangeeft dat de gebruiker op de goede weg zit - “plop� geluidseffect als een pictogram word aangetikt.

- Vrolijk geluidseffect als pictogram word vrijgespeeld.

SchErmonTwerpeN

De definitieve schermontwerpen die wij hebben gemaakt zijn te vinden op de volgende pagina’s. Op de eerstkomende twee pagina’s is het schermontwerp van de eerste scene te vinden.

Hier staat de blob in het hol. Op de volgende twee pagina’s staat het schermontwerp van de tweede scene, het bos, weergegeven en beschreven. Tot slot staan op de volgende twee pagina’s het derde en laatste schermontwerp weergegeven: namelijk die van de onderwaterwereld.

In de schermontwerpen is te zien dat we ons zoveel mogelijk hebben gehouden aan ons concept en gekozen vormgeving en stijl. Bij ieder schermontwerp wordt apart toegelicht welke designelementen zijn totoegepast en waarom wij hiervoor hebben gekozen.

Schermontwerp 1 - het hol Het eerste schermontwerp wat op de pagina hiernaast is weergegeven is de eerste scene. Hier begint het spel.

Wat je ziet is dat het karakter is ontworpen in flat design stijl, evenals de badkuip, de basket en de eikeltjes. Doordat deze in flat design zijn ontworpen (in tegenstelling tot de achtergrond omgeving) vallen ze meer op. De speler krijgt dus zo onbewust een hint dat er misschien wel iets met die objecten die meer opvallen gedaan moet of kan worden.

Het kleurgebruik van de omgeving is wat donkerder en ook dit zorgt ervoor dat de objecten en het karakter waarmee geinteracteerd kan worden meer opvallen.

Ondanks dat er gebruik is gemaakt van twee verschillende stijlen (flat design en een iets meer realistische 3d stijl) is het schermontwerp wel ĂŠĂŠn geheel doordat beide stijlen geillustreerde stijlen zijn. In tegenstelling tot wanneer de omgeving bijvoorbeeld in Cinema4d was gemaakt, dan zou het constrast zo groot zijn dat het niet meer bij elkaar past.

Schermontwerp 2 - het bos Bij het zoeken van beeldmateriaal zagen we dat een bos een sprookjesachtige uitstraling kreeg als er met licht en kleur werd gespeeld. Wij hebben dit ook zoveel mogelijk toegepast door lampjes in de bomen te hangen en de bomen en planten niet een standaard groene kleur te geven, maar in plaats daarvan een paarse of blauwige gloed. Dit zorgt ervoor dat het bos veel interessanter en fantasierijker lijkt dan een normaal bos.

Verder is ook hier wederom de blob en objecten waarmee geinteracteerd kan worden, zoals de bij en de bloemen, in flat design stijl terwijl de achtergrond een meer gedetailleerde uitwerking heeft. Ook valt op dat de omgeving donkerder is dan het karakter en de objecten. Dit zorgt voor een mooi contrast en laat het karakter en de objecten opvallen.

Daarnaast zie je op dit schermontwerp bepaalde iconen die zijn vrijgespeeld, de iconen zijn ook in flat design stijl en ontworpen in lichte felle kleuren. Dit zorgt ervoor dat ze opvallen en stimuleert de gebruiker om hier op te letten.

Schermontwerp 3 - de onderwaterwereld Hier zie je dat gebruik is gemaakt van veel kleur en dan met name vrolijke felle kleuren. Wij hebben hiervoor gekozen omdat dit kleurgebruik geschikt is voor kinderen. Wij hebben een jonge doelgroep en met het vrolijke kleurgebruik willen wij hen aanspreken.

Ook hier is weer het contrast van flat design en een meer gedetailleerde achtergrond. Zo zie je dat de vormgeving bij alledrie de scene’s is doorgevoerd. Dit zorgt ervoor dat de scene’s bij elkaar passen en dat de app een consistent geheel is ondanks de drie zeer verschillende omgevingen.

Verder is de indeling van het scherm hetzelfe als de vorige twee schermontwerpen. Het karakter staat in een ruimte met objecten en dieren waarmee geinteracteerd kan worden. Boven in het scherm staan de icoontjes. De icoontjes hebben allemaal een grijs/transparante circkel als achtergrond zodat elk icoon van gelijke grootte is ondanks dat ze verschillende vormen hebben. Dit zorgt ervoor dat de icoontjes overzichtelijk en duidelijk zijn en blijft het een rustig geheel.

Dynamische dynamische onderdelen

Beschrijving-dynamische-onderdelen ICD: uitleg!in!woord!en!beeld!van!de! interactieve!elementen!in!je!applicatie!en!de!beoogde!experience.!Laat!de verschillende!stadia!zien!van!interface,!interactieve!assets of!animaties,!video,!audio,! karakters!en!verhaal!m.b.t.!interacties,!goed,!fout,!beloning,!verder,!terug,!vooruit,! start,!eind,!help,!etc.

reflectie

logboek

tamara: 6-10-2015 11:00-21:00 ontwerpen ontwerpdocument,