Design Study Rigit Namen:
Stijn Schouten - 503835 Lars Mulder - 511692 Harald Velner - 504535 Peter Otten - 510622 Rene Reijnen - 504516
Docent: Klas: Datum: School: Groep:
Elisa van Tuijl CRIA Project April 2014 HAN 15
1
Inhoudsopgave Opdracht Concept Inleiding Grid & navigatie Games Kleur Typografie Beeld Gestalt Logo’s Voertuig bouwen Level kiezen Iconen/onderdelen Bronnenlijst
2
03 04 05 06 24 29 36 49 53 59 62 67 70 74
opdracht opdracht Vanuit het Gerrit Komrij college in Winterswijk, kregen wij de opdracht om een game te maken die kinderen interesseert in natuurkunde. Aangezien het aantal kinderen dat op de middelbare school een natuurkundig profiel kiest verminderd. Ons doel is dus om ervoor te zorgen dat de kinderen door de game die wij gaan maken te interesseren in natuurkunde, maar tegelijkertijd ook voor de kinderen die sowieso weten dat ze geen natuurkunde willen doen, een leuke game neerzetten.
3
Concept De game die we gaan maken voor de middelbare school heet Rigit. De game zal ervoor zorgen kinderen op een speelse manier leren hoe belangrijk/leuk natuurkunde is. De kinderen kunnen een voertuig maken, en vervolgens met het voertuig wat ze gemaakt hebben verspringen in de game. Het kan zo gek als ze willen, geen wielen maar een hover aan de onderkant? Prima! De gebruikers kunnen hun eigen voertuig geheel naar hun voldoening maken.
4
Inleiding In dit document worden er onderzoeken gedaan naar de vormgeving. De verschillende onderdelen die onderzocht zullen worden zijn: - Kleur - Typografie - Grid & navigatie - Games - Beeld - Gestalt - Iconen/onderdelen De grenzen zullen in bepaalde onderzoeken opgezocht worden wat betreft onze merkwaarden, dit om tot een zo goed mogelijk ontwerp te komen.
5
grid & navigatie
6
Inspiratie: angrybirds.com Ik heb deze website gekozen omdat de stijl die angry birds neerzet ook precies de stijl is die wij voor onze game/customizer willen gebruiken. Daarnaast is er goed te zien dat er gebruik is gemaakt van een grid. Het grid is opgebouwd uit kolommen van 1 tot 3.
7
Uitgelicht item Hier is nog beter te zien hoe de website gebruik maakt van een grid. De verschillende grootte van de kolommen staan altijd perfect geschaald in het grid, waardoor het ontwerp rust uitstraalt.
8
Eigen uitwerking We hebben hierbij onze eigen uitwerking gemaakt. Omdat Rigit een spel is, dat eigenlijk meteen te spelen moet zijn, hebben we ervoor gekozen om deze al op het homescherm te laten zien. Ook is het grid van Angry birds terug te zien, maar dan op een andere manier. De kolommen zullen geschikter zijn voor de andere pagina’s die op de website gemaakt zullen worden, die niet gamegerelateerd zijn.
9
Inspiratie: tapbots.com Deze website had ik ten eerste gekozen vanwege de grid die meteen te merken is, niet omdat ik vond dat hij geweldig paste bij wat we uit willen stralen, maar dat hier goed gebruik is gemaakt van grid. De website zelf is verder niet responsive en schaalt dus niet mee met de voorkeur van de gebruiker op dat moment. Ook is er goed te zien dat alles uitgelijnd is.
10
Eigen uitwerking Het grid van tapbots.com is hier goed in terug te zien, de vakken zijn grotendeels overgenomen, maar met een andere stijl en functionaliteit weergegeven. Ook is de navigatiebalk van de uitwerking zonder de balk zelf. De game zelf is verwerkt in de header die gebruikt werd door de site van inspiratie.
11
Inspiratie: totaljerkface.com De navigatie van totaljerkface.com is gebaseerd op het spel wat de site zo populair maakt, happy wheels. De navigatie is erg gemakkelijk en in blokken vormgegeven. Wanneer er een deel van de navigatie geselecteerd is, wordt hij samengevoegd met de content eronder, door ervoor te zorgen dat het geklikte navigatiedeel dezelfde kleur krijgt als het vak waar de game in staat.
12
Eigen uitwerking De navigatie is net als bij totaljerkface.com apart genomen van de rest van de site. Door de navigatie een andere kleur te geven dan de rest van de website. In plaats van ervoor te zorgen dat een navigatiedeel wordt samengevoegd met de content die eronder staat, hebben we het geklikte navigatiedeel dezelfde kleur gegeven als de game.
13
Inspiratie: zelda.com De navigatie van zelda.com is op een andere manier neergezet dan bij de voorgaande websites. Zelda.com heeft ervoor gezorgd dat de navigatie bovenaan de website te vinden is, en dat de aandacht eigenlijk meer gevestigd wordt op de content die er te vinden is.
14
Eigen uitwerking De manier van navigeren is hier overgenomen van Zelda.com. We willen namelijk dat de game het belangrijkste element is op de website, en dat daar de meeste aandacht op gevestigd wordt.
15
Inspiratie: thinkgeek.com Dit is een website die gemaakt is voor de echte Nerd, alle series die bekend staan om de aantrekkingskracht tot deze doelgroep worden op de site lang en breed besproken. Het is vooral een erg jongensachtige website, dit komt door de diensten die worden aangeboden op de website; Marvel, Portal, Star Wars en Star Trek, maar ook het kleurgebruik (het zijn wat hardere kleuren, en er is gebruik gemaakt van jongensblauw). Ook is het een webwinkel, waar games gekocht kunnen worden en accessoires. 16
Inspiratie: nerdmachine.com The nerdmachine is ook echt een website voor de nerds en geeks. Maar wat ons opvalt is dat de websites nooit echt over natuurkunde gaan, maar meer over gadgets,games en series. Waarschijnlijk trekt deze stijl ze dus ook aan tijdens het spelen van Rigit. Daar moeten we met de ontwerpkeuzes dan ook zeker rekening mee houden. Ook hebben de nerdy websites veelal een achtergrond waar iets op gebeurd, dus geen clean wit, maar een achtergrond met afbeeldingen of tekeningen. 17
Inspiratie: nerdist.com Hier zien we eigenlijk precies hetzelfde als bij de voorgaande websites, het gaat over strips, games en series. Alhoewel deze website meer bedoeld is voor het volgen van mensen die reviews plaatsen over bepaalde series en video’s.
18
Eigen uitwerking Om de stijl van de nerds/geeks op de middelbare school na te bootsen hebben we een eigen uitwerking gemaakt van de art op de achtergrond, aangezien de meeste geek/nerd websites dit dus hebben.
19
Eigen uitwerking Deze uitwerking is gemaakt met de kleuren die bij de voorgaande eigen uitwerkingen gebruikt werden. Hier is goed te zien dat er al wat dingen veranderd zijn ten opzichte van de doelgroep. Maar dat de stijl er nog niet echt nerdy/geeky uitziet.
20
Eigen uitwerking In dit ontwerp is het grid verwerkt van nerdist.com, maar de kleuren van nerdmachine.com en thinkgeek.com. De achtergrond heeft de blauwe kleur gekregen aangezien die veel word geassocieerd met websites die voor geeks en nerds bedoeld zijn. Het grid wat overgenomen is door ons van nerdist.com is met de reden dat er eigenlijk niet heel veel informatie op de website hoeft te staan. Het enige waar de gebruiker op af komt is de game, en misschien nog om accountgegevens te veranderen. Ook daarom word Rigit een fullscreen website. 21
Inspiratie: cartoonnetwork.com Door de grenzen op te zoeken van de verschillende merkwaarden - dus ook cartoony - zijn we gekomen bij de website van cartoonnetwork. Want ja, alle cartoons komen daar samen, en het is een professionele organisatie. De ontwerpkeuzes zullen dus goed onderzocht zijn. Zo zien we ook het zwart-wit aspect terug . Zo werden cartoons vroeger ook gemaakt. De navigatie is erg interessant, want er word gebruik gemaakt van twee lagen. De eerste laag is de primaire navigatie, de secundaire wordt vanuit de primaire georganiseerd. De secundaire navigatie maakt ook gebruik van icons. 22
Eigen uitwerking Omdat we de grenzen op wilden zoeken van de merkwaarden zijn we bij dit ontwerp gekomen. De secundaire navigatie hebben we een aardige make-over gegeven en we hebben de info op de website van cartoonnetwork vervangen door de game.
23
games
24
Inspiratie: bad piggies Om de sfeer op te zoeken die bij ons spel past, hebben we ervoor gekozen om bad piggies te onderzoeken. Het is een erg simpele stijl, met hier en daar wat gedetailleerdere elementen. Zoals de boompjes linksboven en de bloemetjes. Ook de stenen zijn wat gedetailleerder. Het grid wat je bovenin ziet is om onderdelen in te plaatsen. Bij ons spel zal dat aan het begin van de game zijn.
25
Eigen uitwerking Door middel van vierkanten kunnen wij ervoor zorgen dat er verschillende stukken aarde gebruikt kunnen worden voor de game. Op die stukken aarde kan het voertuig bewegen. Dit betekent dat we verschillende blokken aarde moeten maken, en die moeten spiegelen, zodat het er egaal uitziet.
26
Inspiratie: angry birds Om de sfeer op te zoeken die bij ons spel past, en die te realiseren valt, hebben we ervoor gekozen om bad piggies te onderzoeken. Het is een erg simpele stijl, met hier en daar wat gedetailleerdere elementen. Zoals de boompjes linksboven en de bloemetjes. Ook de stenen zijn wat gedetailleerder. Het grid wat je bovenin ziet is om onderdelen in te plaatsen, alleen bij ons spel is dat aan het begin van de game. 27
Eigen uitwerking Bij de game van Angry birds is veel gebruik gemaakt van verschillende lagen. Dit wilden wij ook overbrengen naar de stijl van Rigit. We hebben de horizon een wat rodere kleur gegeven, alsof het lijkt dat de zon net onder gaat. Verder hebben we nog wat bergen toegevoegd om wat meer sfeer te krijgen.
28
kleur
29
Inspiratie: memrise.com Dit is een erg leerzame website voor mensen die erachter willen komen hoe je snel een taal kunt leren. Ook is dit natuurlijk voor mensen die even tussendoor een taal erbij willen leren. Zoals hier ook goed te zien is. Word er veel gebruik gemaakt van blauwe kleuren, en een groene kleur voor de buttons.
30
Blauw De kleur blauw is onder andere de kleur van het geweten. De inhoud van het menselijk brein, op een figuurlijke manier. Het gaat hier dus om kennis en de dingen die een mens gaandeweg geleerd heeft en onthouden heeft. Ook is het de kleur van ambitie en vertrouwen. Beide goede psychologische kenmerken van een kleur. Dit is volgens mens en psychologie dus ook de kleur van veiligheid. http://mens-en-samenleving.infonu.nl/psychologie/4051-kleurenpsychologie-betekenis-kleur-blauw-violet.html
Groen De groene kleur zal gekozen zijn voor de button omdat mensen bij die kleur een positief gevoel krijgen, zoals bij stoplichten. Wanneer deze op rood staan mag je niet door, maar groen daarentegen laat mensen toe. Ook volgens Mens & Samenleving is de kleur groen een instinctieve kleur. http://mens-en-samenleving.infonu.nl/psychologie/4050-kleurenpsychologie-betekenis-kleur-groen-blauw.html
31
Inspiratie: badpiggies.com Dit is een website voor een game die erg cartoony is, een stijl die Rigit ook wil gebruiken. De website is geheel in getekende stijl. De kleuren die gebruikt zijn, zijn vooral natuurkleuren. Bruin, groen, blauw en het wit-gele van de wolken. Omdat de kleuren groen en blauw al onderzocht zijn, bestuderen we op deze website twee andere kleuren.
32
Bruin Volgens mens en samenleving is bruin de kleur van de natuur en van de praktijk. Het zelf maken van dingen en ook een kleur van zekerheid. Het is dus een kleur die erg goed past bij het concept dat we bedacht hebben, waar je je eigen voertuig moet maken. Ook is de natuurkunde iets wat erg met deze kleur te maken heeft.
Geel De gele kleur is een kleur van beweging volgens mens & samenleving. Maar ook is het de kleur van intellect. Het is dus ook een leerzame kleur. De kleur kan dus gebruikt worden voor bewegende elementen binnen de game. Zoals bijvoorbeeld iets om de aandacht te trekken van de gebruiker.
http://mens-en-samenleving.infonu.nl/psychologie/4067-kleurenpsychologie-betekenis-kleur-bruin.html
http://mens-en-samenleving.infonu.nl/psychologie/4067-kleurenpsychologie-betekenis-kleur-geel.html
33
Eigen uitwerking Dit zijn de kleuren van Rigit. Zoals te zien is word er veel groen in het spel gebruikt. Ook worden de buttons in het groen gemaakt, zodat mensen instinctief zullen klikken. De blauwe achtergrond en het logo hebben de leerzame kleur tot zich genomen. Hierdoor krijgt het nog een beetje die geek/nerd achtige feeling. In het spel zelf word ook veel bruin gebruikt. Maar dat is alleen omdat het spel zich buiten afspeelt. 34
Kleurenpalet De kleuren zijn allen gekozen voor de waarde die ze hebben en voor wat ze uitstralen. Zo is blauw de kleur van het geweten (leerzaamheid), groen de kleur van het instinctieve, en de natuur. En bruin hoort erbij omdat die kleur de praktijk nabootst in de game.
35
typografie
36
Merk: Cartoon Network Kenmerk: Cartoons Font: CN Bold Fontfamily: Humanist
Merk: Looney Tunes Kenmerk: Cartoons Font: Tilt BT Tilt Fontfamily: Humanist
Merk: Disney Kenmerk: Cartoons & films Font: Waltograph Fontfamily: Formal
37
Merk: Star Wars Kenmerk: Geeky/nerdy movies Font: Star Jedi Fontfamily: Slab
Merk: Minecraft Kenmerk: Geeky/nerdy games Font: Minecrafter Font Fontfamily: Humanist
Merk: Star Trek Kenmerk: Geeky/nerdy films Font: Waltograph Fontfamily: Square/Humanist 38
CHUNK
Kitchen police
Volgens mens en samenleving is bruin de kleur van de natuur en van de praktijk. Het zelf maken van dingen en ook een kleur van zekerheid. Het is dus een kleur die erg goed past bij het concept dat we bedacht hebben, waar je je eigen voertuig moet maken. Ook is de natuurkunde iets wat erg met deze kleur te maken heeft.
Volgens mens en samenleving is bruin de kleur van de natuur en van de praktijk. Het zelf maken van dingen en ook een kleur van zekerheid. Het is dus een kleur die erg goed past bij het concept dat we bedacht hebben, waar je je eigen voertuig moet maken. Ook is de natuurkunde iets wat erg met deze kleur te maken heeft.
Bebas neue
CHUNKy blocks
Volgens mens en samenleving is bruin de kleur van de natuur en van de praktijk. Het zelf maken van dingen en ook een kleur van zekerheid. Het is dus een kleur die erg goed past bij het concept dat we bedacht hebben, waar je je eigen voertuig moet maken. Ook is de natuurkunde iets wat erg met deze kleur te maken heeft.
Volgens mens en samenleving is bruin de kleur van de natuur en van de praktijk. Het zelf maken van dingen en ook een kleur van zekerheid. Het is dus een kleur die erg goed past bij het concept dat we bedacht hebben, waar je je eigen voertuig moet maken. Ook is de natuurkunde iets wat erg met deze kleur te maken heeft.
39
Aaargh
Biko
Volgens mens en samenleving is bruin de kleur van de natuur en van de praktijk. Het zelf maken van dingen en ook een kleur van zekerheid. Het is dus een kleur die erg goed past bij het concept dat we bedacht hebben, waar je je eigen voertuig moet maken. Ook is de natuurkunde iets wat erg met deze kleur te maken heeft.
Volgens mens en samenleving is bruin de kleur van de natuur en van de praktijk. Het zelf maken van dingen en ook een kleur van zekerheid. Het is dus een kleur die erg goed past bij het concept dat we bedacht hebben, waar je je eigen voertuig moet maken. Ook is de natuurkunde iets wat erg met deze kleur te maken heeft.
Kraash Volgens mens en
samenleving is bruin
de kleur van de natuur en van de praktijk. Het zelf maken. 40
Minecraftia Volgens mens en samenleving is bruin de kleur van de natuur en van de praktijk. Het zelf maken van dingen en ook een kleur van zekerheid. Het is dus een kleur die erg goed past bij het concept dat we bedacht hebben, waar je je eigen voertuig moet maken. Ook is de natuurkunde iets wat erg met deze kleur te maken heeft.
Brain fower Volgens mens en samenleving is bruin de kleur van de natuur en van de praktijk. Het zelf maken van dingen en ook een kleur van zekerheid. Het is dus een kleur die erg goed past bij het concept dat we bedacht hebben, waar je je eigen voertuig moet maken. Ook is de natuurkunde iets wat erg met deze kleur te maken heeft.
basic title font Volgens mens en samenleving is bruin de kleur van de natuur en van de praktijk. Het zelf maken van dingen en ook een kleur van zekerheid. Het is dus een kleur die erg goed past bij het concept dat we bedacht hebben, waar je je eigen voertuig moet maken. Ook is de natuurkunde iets wat erg met deze kleur te maken heeft.
Grobold Volgens mens en samenleving is bruin de kleur van de natuur en van de praktijk. Het zelf maken van dingen en ook een kleur van zekerheid. Het is dus een kleur die erg goed past bij het concept dat we bedacht hebben, waar je je eigen voertuig moet maken. Ook is de natuurkunde iets wat erg met deze kleur te maken heeft.
41
Leerzaam Het letterype moet leerzaamheid kunnen uitstralen. Omdat leerzaam de belangrijkste merkwaarde is van Rigit, moet het ook een beetje uitgestraald worden. Daarom hebben we een selectie van een aantal lettertypen gemaakt die dit uit kunnen gaan stralen. Lettertypen die goed leesbaar zijn, maar ook wat speels. Daarnaast maken we nog gebruik van de lettertypen Calibri en Roboto, omdat deze goed leesbaar zijn.
42
Aaargh
Biko
Volgens mens en samenleving is bruin de kleur van de natuur en van de praktijk. Het zelf maken van dingen en ook een kleur van zekerheid. Het is dus een kleur die erg goed past bij het concept dat we bedacht hebben, waar je je eigen voertuig moet maken. Ook is de natuurkunde iets wat erg met deze kleur te maken heeft.
Volgens mens en samenleving is bruin de kleur van de natuur en van de praktijk. Het zelf maken van dingen en ook een kleur van zekerheid. Het is dus een kleur die erg goed past bij het concept dat we bedacht hebben, waar je je eigen voertuig moet maken. Ook is de natuurkunde iets wat erg met deze kleur te maken heeft.
Cartoony Een ander soort lettertype wat we graag willen gaan gebruiken, zijn de cartoonachtige lettertypen, deze gaan de stijl van Rigit versterken. Aangezien het een cartoonachtige game word, moet daar ook eenzelfde lettertype bij zitten. Beide lettertypen zijn speels en stralen een goede cartoonachtige stijl uit, omdat ze bold zijn en onregelmatige vormen aanhouden.
CHUNK
Grobold
Volgens mens en samenleving is bruin de kleur van de natuur en van de praktijk. Het zelf maken van dingen en ook een kleur van zekerheid. Het is dus een kleur die erg goed past bij het concept dat we bedacht hebben, waar je je eigen voertuig moet maken. Ook is de natuurkunde iets wat erg met deze kleur te maken heeft.
Volgens mens en samenleving is bruin de kleur van de natuur en van de praktijk. Het zelf maken van dingen en ook een kleur van zekerheid. Het is dus een kleur die erg goed past bij het concept dat we bedacht hebben, waar je je eigen voertuig moet maken. Ook is de natuurkunde iets wat erg met deze kleur te maken heeft.
43
Nerdy/geeky Om ook even te onderzoeken wat voor lettertypen bij de geeks/nerds passen, kunnen we een betere selectie maken van lettertypen waaruit de designs moeten bestaan. Aangezien het nerderige gedeelte van Rigit ook erg belangrijk is, omdat meestal de wat slimmere leerlingen voor een Natuur en Techniek profiel kiezen. Deze groep scholieren willen we dan ook aan kunnen spreken, of dat door het lettertype gedaan word, of door het design onderzoeken we hier.
Minecraftia Volgens mens en samenleving is bruin de kleur van de natuur en van de praktijk. Het zelf maken van dingen en ook een kleur van zekerheid. Het is dus een kleur die erg goed past bij het concept dat we bedacht hebben, waar je je eigen voertuig moet maken. Ook is de natuurkunde iets wat erg met deze kleur te maken heeft.
44
Selecties lettertypen Om voor de beste selectie lettertypen te komen die gebruikt gaan worden op de website, gaan we hier een aantal mogelijke combinaties maken die dezelfde stijl proberen aan te houden. Uiteindelijk kiezen we de combinatie waarvan wij vinden dat hij het beste past bij wat Rigit wil uitstralen.
Rigit
Rigit
Volgens mens en samenleving is bruin de kleur van de natuur en van de praktijk. Het zelf maken van dingen en ook een kleur van zekerheid. Het is dus een kleur die erg goed past bij het concept dat we bedacht hebben, waar je je eigen voertuig moet maken. Ook is de natuurkunde iets wat erg met deze kleur te maken heeft.
Volgens mens en samenleving is bruin de kleur van de natuur en van de praktijk. Het zelf maken van dingen en ook een kleur van zekerheid. Het is dus een kleur die erg goed past bij het concept dat we bedacht hebben, waar je je eigen voertuig moet maken. Ook is de natuurkunde iets wat erg met deze kleur te maken heeft.
Chunk & Calibri
Chunk & Roboto
45
Rigit
Rigit
Volgens mens en samenleving is bruin de kleur van de natuur en van de praktijk. Het zelf maken van dingen en ook een kleur van zekerheid. Het is dus een kleur die erg goed past bij het concept dat we bedacht hebben, waar je je eigen voertuig moet maken. Ook is de natuurkunde iets wat erg met deze kleur te maken heeft.
Volgens mens en samenleving is bruin de kleur van de natuur en van de praktijk. Het zelf maken van dingen en ook een kleur van zekerheid. Het is dus een kleur die erg goed past bij het concept dat we bedacht hebben, waar je je eigen voertuig moet maken. Ook is de natuurkunde iets wat erg met deze kleur te maken heeft.
Grobold & Calibri
46
Grobold & Roboto
Rigit
Rigit
Volgens mens en samenleving is bruin de kleur van de natuur en van de praktijk. Het zelf maken van dingen en ook een kleur van zekerheid. Het is dus een kleur die erg goed past bij het concept dat we bedacht hebben, waar je je eigen voertuig moet maken. Ook is de natuurkunde iets wat erg met deze kleur te maken heeft.
Volgens mens en samenleving is bruin de kleur van de natuur en van de praktijk. Het zelf maken van dingen en ook een kleur van zekerheid. Het is dus een kleur die erg goed past bij het concept dat we bedacht hebben, waar je je eigen voertuig moet maken. Ook is de natuurkunde iets wat erg met deze kleur te maken heeft.
Chunk & Grobold
Grobold en Chunk
Rigit
Rigit
Volgens mens en samenleving is bruin de kleur van de natuur en van de praktijk. Het zelf maken van dingen en ook een kleur van zekerheid. Het is dus een kleur die erg goed past bij het concept dat we bedacht hebben, waar je je eigen voertuig moet maken. Ook is de natuurkunde iets wat erg met deze kleur te maken heeft.
Volgens mens en samenleving is bruin de kleur van de natuur en van de praktijk. Het zelf maken van dingen en ook een kleur van zekerheid. Het is dus een kleur die erg goed past bij het concept dat we bedacht hebben, waar je je eigen voertuig moet maken. Ook is de natuurkunde iets wat erg met deze kleur te maken heeft.
Minecraftia & Calibri
Minecraftia & Roboto
Rigit
Rigit
Volgens mens en samenleving is bruin de kleur van de natuur en van de praktijk. Het zelf maken van dingen en ook een kleur van zekerheid. Het is dus een kleur die erg goed past bij het concept dat we bedacht hebben, waar je je eigen voertuig moet maken. Ook is de natuurkunde iets wat erg met deze kleur te maken heeft.
Volgens mens en samenleving is bruin de kleur van de natuur en van de praktijk. Het zelf maken van dingen en ook een kleur van zekerheid. Het is dus een kleur die erg goed past bij het concept dat we bedacht hebben, waar je je eigen voertuig moet maken. Ook is de natuurkunde iets wat erg met deze kleur te maken heeft.
Biko & Calibri
Biko & Roboto
47
Uiteindelijke keuze We hebben gekozen voor de combinatie tussen Chunk en Roboto. Om een speels lettertype af te wisselen met een makkelijk te lezen lettertype, zorgen we ervoor dat beide merkwaarden, Leerzaam en Cartoony, terugkomen in de uiteindelijke keuze van de typografie. Chunk zal fungeren in knoppen en navigatie, maar ook in titels van bepaalde teksten. Roboto zal fungeren als lettertype dat bedoeld is om gelezen te worden en dus een wat intelligentere uitstraling krijgt.
Rigit Volgens mens en samenleving is bruin de kleur van de natuur en van de praktijk. Het zelf maken van dingen en ook een kleur van zekerheid. Het is dus een kleur die erg goed past bij het concept dat we bedacht hebben, waar je je eigen voertuig moet maken. Ook is de natuurkunde iets wat erg met deze kleur te maken heeft. Chunk & Roboto
48
beeld
49
Nerd van vroeger Zoals te zien is op deze foto, was de nerd van vroeger heel anders dan die van nu. De nerd van vroeger zag er namelijk standaard zo uit. Een werkende nerd, met jampotglazen en het shirt in de broek, met de broek hoog.
Nerd van nu De nerd van nu hoeft niet meer per se iemand te zijn, die er niet uitziet en enorm slecht gekleed is. Wanneer iemand een bril op heeft, een typerend kapsel en een niet al te dik lichaam, word hij meestal ook geportreteerd als Nerd. De nerd is een veel ruimer begrip geworden.
50
Cartoons van vroeger Op deze foto is te zien hoe de cartoons van vroeger eruit zagen, het ziet er ook een stuk ouder uit. Er zijn verschillende soorten pastelkleuren gebruikt.
Cartoons van nu De cartoons van nu gebruiken meer realistische vormen en kleuren. Ook wordt er meestal meer rekening gehouden met het detail op de achtergrond.
51
2D Games van vroeger Bij een van de eerste super mario’s is te zien hoe eentonig en simpel het er allemaal eigenlijk uitzag. Dezelfde patronen die vaak werden gebruikt, weinig detail, en een donkerdere achtergrond
2D Games van nu De games van nu, zoals angry birds, gebruiken meerdere lagen op de achtergrond, waardoor de omgeving rijker wordt en meer detail lijkt te hebben. De boompjes en bergen op de achtergrond hebben allemaal verschillende tinten groen, waardoor deze ook rijker lijkt.
52
gestalt
53
Inspiratie: quarto.com De website van quarto is een vorm van good continuation gebruikt. De manier hoe het logo aanspreekt op de informatie die te vinden is onder de navigatie, is een goede manier om ervoor te zorgen dat de gebruiker toch het verhaal gaat lezen wat eronder staat. De streep die voor de good continuation zorgt, gaat weg wanneer de gebruiker begint te scrollen.
54
Inspiratie: quarto.com Ook maakt quarto gebruik van similarity. Alle logo’s die hierboven staan zijn op dezelfde manier vormgegeven, en wanneer je verder scrollt blijven ze verschijnen. Naast het feit dat similarity en good continuation worden gebruikt, gebruikt quarto ook closure bij de navigatie. In plaats van een volledige streep om te suggereren dat de volgende navigatietab begint, hebben ze gekozen voor een half streepje, waar de gebruiker zelf bij bedenkt dat dat het einde is van het navigatietabje. 55
Inspiratie: monsterenergy.com Op de website van monster energy zijn een paar gestaltprincipes te vinden. Zo is er in de navigatie gebruik gemaakt van closure, omdat de woorden ver uit elkaar staan, zien wij het als individuele elementen en niet als groep. Ook heeft monster onder de video een aantal foto’s in een slideshow gezet, deze voldoen aan de term similarity van de gestaltprincipes, aangezien ze op dezelfde manier zijn ingedeeld. 56
Eigen uitwerking Dit ontwerp is geheel gebaseerd op het gestalt dat monster energy op hun website hanteert.
57
Eigen uitwerking Dit is de uiteindelijke stijl van de rigit website. Na alle onderzoeken die gedaan zijn, van navigatie tot aan kleur, zijn we gekomen op het volgende ontwerp.
58
logo’s
59
Logo’s uitwerkingen Voor Rigit hebben we een aantal logo’s gemaakt waarvan we dachten dat die goed pasten bij hetgeen wat we moesten uitstralen. Deze logo’s hebben we laten zien aan verschillende mensen, en we zijn erachter gekomen welk logo het beste past volgens de studenten die we om een mening gevraagd hadden.
60
Gekozen logo Het uiteindelijke logo dat door de projectgroep en de ondervraagde mensen het meest gekozen was, was deze. Omdat dit logo alles omvat wat Rigit inhoudt. Het is cartoony, het representeert een voertuig en het is leerzaam door de kleuren die gebruikt zijn. De andere logo’s waren veelal harder van uiterlijk, en hadden niet zo’n vriendelijke/kinderlijke uitstraling als deze.
61
voertuig bouwen
62
Voertuig maken Omdat er nogal verschillende meningen waren over dit deel van de game, hebben we ervoor gekozen om meerdere ontwerpen te maken, en van daaruit te kijken welke het beste past bij de stijl, en wat we willen uitstralen. Bij dit ontwerp hebben we gekozen voor een opacity bij de achtergrondafbeelding, om ervoor te zorgen dat de aandacht is gevestigd op de functionaliteiten, en niet op het plaatje. Maar dat er wel een bepaalde sfeer wordt neergezet.
63
Voertuig maken Hier hebben we gekozen om de eerste achtergrond te gebruiken die we gemaakt hadden, om ervoor te zorgen dat het geeky/nerdy aspect van Rigit nog naar voren kan komen. Ook vonden we deze achtergrond beter passen bij een garage, omdat deze meestal grijs en grauw zijn. 64
Voertuig maken Ook de slider was iets waar we nog over na wilden denken, omdat er eerst 4 waren, waartussen erg veel ruimte zat. Nu zijn het in dit ontwerp 6 vakken en ziet het er wat beter uit doordat de ruimte benut is. Daarnaast hebben we het vak weggehaald waarin de onderdelen stonden, want dit was eigenlijk nergens voor nodig, aangezien het al duidelijk was dat de onderdelen bij elkaar hoorden. 65
Voertuig maken Dit is het uiteindelijke ontwerp geworden wat we willen gaan gebruiken in de game. De achtergrond met een geeky uitstraling, de slider die ervoor zorgt dat de ruimte goed benut wordt en geen overbodige ruimte inneemt. Ook is de opslaanknop eruit gehaald, wanneer de gebruiker een account heeft en gaat spelen, slaat hij automatisch zijn voertuig op. 66
Level kiezen
67
Angry birds Bij angry birds hebben ze bij elk level een afbeelding van het level, en ook nog verschillende opties om naar rechts te gaan, om extra levels te bekijken en te spelen. 68
Voertuig maken We hebben ervoor gekozen om geen extra vakken te plaatsen om de levels, omdat we niet veel levels hebben om te realiseren. De slotjes op de levels geven aan dat dit level nog niet te spelen is, en wanneer je level 1 haalt, ga je naar level 2. 69
iconen/onderdelen
70
Inspiratie: bad piggies Dit is het maken van voertuigen met bad piggies. Op deze manier willen wij ook de iconen/onderdelen in onze game maken. De beoogde sfeer die wij hebben, wordt het beste gerepresenteerd door Bad piggies.
71
Iconen Dit zijn gedeeltelijk de iconen die gemaakt zijn voor de game van rigit. Omdat de website zelf geen gebruik maakt van iconen, maar van buttons met tekst, hebben we uit de game verschillende iconen gehaald die iets suggereren. De slotjes die linksboven en daarnaast te zien zijn, geven aan dat iets nog unlocked moet worden. Dus iets wat daarvoor zit, moet nog gehaald worden. De driehoekjes die bovenin zitten, zijn bedoeld voor een slider, de groene is bij de levels de knop die ervoor zorgt dat er meer levels verschijnen, en de oranje is ervoor om door je onderdelen of verschillende auto’s te bladeren. Het grid wat onderin te zien is, is de plek waar de onderdelen in worden geplaatst. De plusjes suggereren dat er iets toegevoegd kan worden, en de oranje kleur geeft aan welk deel geselecteerd is, en welke onderdelen daarbij horen.
72
Iconen Dit zijn de onderdelen van de game Rigit. Ze zijn gebaseerd op een 2D visie en een eenvoudige kijk op het design. De merkwaarde cartoony hebben we dan ook verwerkt in het ontwerpen van de verschillende onderdelen. Er zitten ook een paar onderdelen tussen die meer zijn voor de kinderen die het spel niet echt zullen snappen, de container en het vlaggetje zijn daar voorbeelden van. Dit zijn gewoon twee grappige onderdelen die we in het spel hebben geintegreerd. Ook de ski’s en de rupsbanden zijn hier voorbeelden van.
73
bronnenlijst
74
Kleuren
http://mens-en-samenleving.infonu.nl/psychologie/4067-kleurenpsychologie-betekenis-kleur-bruin.html http://mens-en-samenleving.infonu.nl/psychologie/4051-kleurenpsychologie-betekenis-kleur-blauw-violet.html http://mens-en-samenleving.infonu.nl/psychologie/4067-kleurenpsychologie-betekenis-kleur-geel.html http://mens-en-samenleving.infonu.nl/psychologie/4050-kleurenpsychologie-betekenis-kleur-groen-blauw.html
Inspiratie websites Nerdmachine.com Nerdist.com Thinkgeek.com Cartoonnetwork.com Tapbots.com Angrybirds.com Badpiggies.com Rovio.com
Games
Happy wheels Angry birds Bad piggies Alle websites zijn geraadpleegd op 18 mei 2014, de games op 22 mei 2014 en het kleuronderzoek is op 26 mei 2014 gedaan. 75
76