Stijn schouten 503835 designstudy

Page 1

Travellu Design study Naam: Studentnummer: Docent: Klas: Datum: School:

Stijn Schouten 503835 Elise van Tuijl LB VSD February 2014 HAN

Design Study / Stijn Schouten / VSD LB


Inhoudsopgave

2

Opdracht Grid en navigatie Formulieren Mobile Kleur Typografie Gestalt Beeld Iconen Feedback Bronnenlijst

Design Study / Stijn Schouten / VSD LB

03 04 16 27 30 39 50 55 66 69 73


Opdracht In dit document komt de design study naar voren die moet gaan bepalen hoe de website van Travellu er uit moet komen te zien. In het eerste deel van het document zal ik mij gaan verdiepen in grid, navigatie, moble en formulieren van websites. In het tweede deel ga ik het hebben over typografie en kleurgebruik, ik analyseer hier verschillende logo’s of websites om voor de beste resultaten te zorgen. In het derde deel ga ik het hebben over gestalt, beeld en iconen.

Design Study / Stijn Schouten / VSD LB

3


Concept Het idee voor Travellu is dat de gebruiker Travellu kan zien als zijn vriendengroep, zij zijn er altijd wanneer je ze nodig hebt. Je kunt alles bij ze kwijt. Je kunt ze om advies vragen, en als je verdwaald bent kun je ze raadplegen om je uit de brand te helpen. Ik ga dan ook in de Design Study onderzoeken hoe deze websites in elkaar zijn gezet en wat voor functionaliteiten ze gebruiken.

4

Wanneer reizigers eigen blogs hebben en bepaalde blogposts, kan daarop gereageerd worden. Hoe vaker iemand reageerd met zijn account op een andere blog, des te meer punten krijgt deze reiziger. Er gaat een soort van rankingsysteem komen waarmee de verschillende communityleden elkaar kunnen onderscheiden. De ervaren backpackers kunnen hierdoor meer geneigd worden om een vraag te beantwoorden van een onervaren backpacker. Op deze manier kan er een grote community geschept worden. De merkwaarden van Travellu zullen in de soort reizen en vormgeving van de website zijn terug te vinden.

Design Study / Stijn Schouten / VSD LB


Grid en navigatie

Design Study / Stijn Schouten / VSD LB

5


Website: http://www.traveltomilano.com/

6

Ik heb deze website gekozen omdat ik meteen een grid zag, en tegelijkertijd ook zag dat de ontwerper het grid niet nauwlettend gevolgd heeft. Hiermee bedoel ik dat niet alle 5 de rijen zijn benut. Zo ook de afbeelding in het midden, deze is niet in een klein vierkantje gepropt maar is een soort van uitzondering van de rest. En toch past daardoor juist ook in dit grid. Er waren geen hovers op de site zelf, dat was wel jammer. Uitgelicht item Omdat ik eigenlijk de hele structuur heb gebruikt van de website, om deze te onderzoeken is dat ook meteen het uitgelichte item. Waar ik achter ben gekomen op deze site, is dat wanneer je je beeldschermresolutie schaalt (hoger of lager) dan bewegen de vierkante blokken ook mee, de blokken die nu te zien zijn, zijn niet in hun eentje, de site gaat namelijk nog een stukje verder Door, maar dat is ook het enige RIA aan deze website. Want bij een hover veranderd er helemaal niets, wat wel zonde is. Want met zo’n website kun je voor jezelf heel wat moois maken. Ik zou eenzelfde structuur zeker in overweging nemen voor de website die ik ga ontwerpen voor Travellu. Wel moet ik nog bij de site zeggen dat de afbeeldingen wel aanklikbaar zijn. Ze veranderen alleen niet als de muis eroverheen gaat.

Design Study / Stijn Schouten / VSD LB


Eigen uitwerking

Bij mijn eigen verwerking heb ik gekozen van eenzelfde samenhang, maar heb ik het toch net iets anders gedaan. Ik heb door middel van het grid de vierkanten geplaatst met de inhoud erin. Net als bij de onderzochte website. Maar ik heb in plaats van vervolgpagina’s zonder veel inhoud, gekozen voor een homepagina met overzichtelijke navigatiemogelijkheden. Uit de afbeelding links is extra goed te zien dat ik gebruik heb gemaakt van het gridsysteem wat traveltomilano ook gebruikt, maar ik heb het iets veranderd. De vierkante blokken komen terug in dit ontwerp, maar ik heb er wel voor gezorgd dat er een andere structuur ontstaat, doordat ik de rechterhelft van het scherm leeg heb gelaten. In plaats van de 5 rijen grid heb ik er eentje van 4 gebruikt, omdat ik wanneer de gebruiker 1 van de iconen aanklikt, dat deze aan de rechterkant verschijnt. Als de gebruiker bijvoorbeeld iets te weten wilt komen over een reis die hij wilt plannen, klikt hij op de reisplanner. Vervolgens ontstaat er rechts naast de iconen een reisplanner, op dezelfde pagina.

Design Study / Stijn Schouten / VSD LB

7


Website: http://www.canopy.co

8

Ik heb deze website gekozen omdat ik meteen een grid zag, omdat alles perfect was uitgelijnd, ook vond ik het mooi hoe de ontwerper om is gegaan met gestalt, maar dat even terzijde. Hiermee bedoel ik dat niet alle 5 de rijen zijn benut. De drie afbeeldingen onderin suggereren al aan de randen dat ze zijn uitgelijnd aan de andere elementen die op dezelfde lengte zitten. Ook is het een erg rustige site met weinig vulling Uitgelicht item Omdat het gaat om het grid van de site, heb ik ervoor gekozen de hele site te uitlichten. Wanneer de gebruiker de website gaat schalen, zal hij/zij erachter komen dat alles meeschaalt, tot aan de laatste afbeelding, dat wil zeggen dat de gebruiker de website zo klein kan maken, totdat er nog maar 1 afbeelding te zien is. Wanneer ik over een item wil hoveren, dus 1 van de 3 afbeeldingen, gebeurt er niets. Maar wanneer ik op de afbeelding klik, komt er een pop-up met uitleg hoe ik het product kan bestellen. Er word dus geen nieuwe pagina aangemaakt, dus is de site best RIA. Wanneer je bijvoorbeeld op het zoek icoon drukt, verdwijnt het logo en maakt het plaats voor een zoekbalk.

Design Study / Stijn Schouten / VSD LB


Eigen uitwerking

Bij mijn uitwerking heb ik ervoor gekozen het grid aan te houden. Ik heb alle elementen van de site omgetoverd naar een stijl voor Travellu. In de navigatiebalk zijn de navigatiemogelijkheden veranderd. Ook heb ik een zoek en boek functie in de site verwerkt. Wanneer de gebruiker een goedkope vakantie wil, kan hij/zij dat vooraan selecteren voordat de zoek & boek functie kan worden ingevuld. Om de gebruiker een extra keuze te geven, heb ik de segmentatie ook voor op de website geplaatst, in de stijl van iconen. Hier is goed te zien dat ik de drie afbeeldingen heb overgenomen van canopy.com, het is een makkelijke manier om de aandacht te winnen van gebruikers door de kleuren die eruit springen. Maar doordat de manier van gebruiken veranderd is ten opzichte van de site is het moeilijk te zeggen of deze aanpak zal werken. Het gridgebruik is in ieder geval ruimtelijk, overzichtelijk en rustig.

Design Study / Stijn Schouten / VSD LB

9


Website: http://www.cloudnine.se/

10

Voor de navigatie heb ik de website van cloudnine bekeken. Ze hebben een erg leuk systeem bedacht voor de navigatie, en zorgen ervoor dat het niet de belangrijkste optie is die op de site gebruikt kan worden. Het plusje linksbovenin zorgt ervoor dat de icoontjes uitleg krijgen. Dit is voor de mensen die niet duidelijk kunnen zien wat het nou eigenlijk betekend. Bij de website kan de gebruiker naar beneden scrollen, wanneer hij dit doet gaat de navigatie mee, deze blijft altijd staan terwijl de rest van de site wel veranderd. Wanneer de gebruiker naar een andere pagina wil, veranderd de lay-out niet. Deze blijft telkens hetzelfde. De foto veranderd wel, en de tekst ook. Uitgelicht item De navigatiebalk die cloudnine gebruikt schuift gaandeweg het gebruik van de website niet mee, hij blijft stilstaan. Het logo van cloudnine wordt niet weergegeven in de navigatiebalk, maar groot op de pagina zelf. Het +je bovenaan zorgt ervoor dat de icoontjes voorzien zijn van uitleg. Ik kon dit niet echt met honderd procent duidelijkheid zeggen, omdat het er in het zweeds staat. Wanneer de gebruiker over de items hovert, krijgen deze een witte kleur, maar alleen het icoontje. Wanneer de gebruiker op het plusje drukt van de navigatie, vervaagt de rest van de site. Hierdoor blijft de concentratie gefocust op de navigatiebar.

Design Study / Stijn Schouten / VSD LB


Eigen uitwerking

Dit is de navigatie van Travellu geinspireerd door cloudnine.se. Maar ik heb het net iets anders aangepakt dan cloudnine. Ik wilde graag dat alle reizigers/gebruikers konden zien wat ze aanklikten, dus vond ik tekst wel erg belangrijk. Ook pak ik de manier van het switchen tussen pagina’s pak ik anders aan. Wanneer de gebruiker een ander tabje van de navigatie aanklikt, verander het rechterscherm, de gebruiker gaat niet naar een volgende pagina.

Wanneer de gebruiker op een ander tabje klikt, bijvoorbeeld reisplanner. Zal het icoontje van de reisplanner wit worden in plaats van vervaagd grijs. Ook zal er naast de navigatie iets nieuws verschijnen, in dit geval verschijnt er een reisplanner zoals deze rechts te zien is. De home status van de pagina, waarin verteld wordt waar travellu voor staat verdwijnt dan.

Design Study / Stijn Schouten / VSD LB

11


Website: http://www.tripplanner.travelalberta.com/

12

Omdat ik niet tevreden was over het grid wat ik onderzocht heb, omdat het voor mij zelf onduidelijk was wat de site nou eigenlijk te bieden had, ga ik hier opnieuw naar grid en navigatie in 1 kijken. Deze website is tevens een formulierwebsite. Bij de twee afbeeldingen is goed te zien dat de ene afbeelding de gebruiker naar wintervakanties brengt, en de ander naar zomervakanties. Maar er is ook duidelijk een grid te zien. De navigatiebalk en het witte vak met de informatie samen met de twee keuzes winter en zomer vormen 3 grote blokken. Deze drie grote blokken zijn weer op te delen in 12 gridlijnen. Wanneer de gebruiker over 1 van de foto’s hovert, verwijnt de grijze opacity. Uitgelicht item Wanneer de gebruiker de website schaalt, gaat ook de website tot een bepaald deel mee, wanneer het niet meer mogelijk is om beide buttons van de jaargetijden op de afbeeldingen te houden, is de website niet meer te schalen op een manier dat de website zelf reageert door het op de goede plek te zetten. Wanneer de gebruiker zelf doorgaat naar de volgende stap, krijgt de gebruiker weer twee keuzes, namelijk wintersport of wandelen. Elke keer als er een keuze gemaakt kan worden, blijft de website ongeveer hetzelfde. Soms zijn er drie keuzes, maar dan blijft het gridsysteem hetzelfde. Deze website laat een beetje het gridsysteem zien zoals we die voor Travellu willen.

Design Study / Stijn Schouten / VSD LB


Eigen uitwerking

Ik heb het gridsysteem wat gehanteerd werd klakkeloos overgenomen van albertatravel. De manier hoe de pagina’s zijn ingedeeld waren erg goed voor het oog, en ik kon goed zien wat ik allemaal moest klikken om bij de eindbestemming te komen. Ik heb wel een paar andere ontwerpkeuzes gemaakt t.a.v. de hovers en de navigatiebalk. Zo zijn de hovers van de Travellu website anders. Ik heb ervoor gekozen dat wanneer de gebruiker over 1 van de foto’s heen gaat, deze een doorschijnend groene kleur krijgt. Ook wordt de button grijs i.p.v. groen. De navigatiebalk is de manier hoe de Travellu gebruikers naar hun item kunnen. de manier waarop dit gaat gebeuren wordt nog uitgewerkt in een verder stadia. Zoals je hier links kunt zien zijn alle elementen verticaal afgestemd op een gridsysteem. Ook de knoppen zijn hierop afgestemd, wat niet het geval was bij de tripplanner van alberta. Bij de website van Travellu zal net als bij Alberta de pagina meeveranderen met de keuze die de gebruiker maakt. De navigatiebalk zal altijd blijven staan, alleen de hover zal veranderen. Vervolgens schuift de nieuwe keuze van de navigatie over de oude keuze heen. Hierdoor zal de gebruiker ook niet het gevoel krijgen dat hij zit te wachten totdat de website laadt.

Design Study / Stijn Schouten / VSD LB

13


Navigatie en grid voor travellu

Dit is de navigatie voor Travellu, uit de onderzoeken die ik bij de vorige websites gedaan heb is dit ontwerp gekomen voor het navigeren.

14

Up

Up

Hover

Hover

Click

Click

Ik heb gekozen voor een hover voor alleen de icoontjes. Op de site van cloudnine werd dit ook gebruikt, behalve de hover. De hover heb ik hier later aan toegevoegd.

Design Study / Stijn Schouten / VSD LB


Om een betere indruk te geven hoe de navigatie interactie zal werken, heb ik hier een extra pagina gemaakt die laat zien hoe het in zijn werk gaat. Wanneer je dus van de ene naar de andere pagina gaat, veranderd alles behalve de navigatie. Wanneer er een ander tabje is geselecteerd in de navigatie kleurt deze wit.

Ik heb hetzelfde gridsysteem gebruikt als de tripplanner van Albertatravel. De eerste twee “rechthoeken� zullen altijd dezelfde grootte blijven. De rechterkant van de website zal dynamisch zijn en er zullen ook soms drie afbeeldingen staan.

Design Study / Stijn Schouten / VSD LB

15


16

formulieren

Design Study / Stijn Schouten / VSD LB


Website: http://www.tripplanner.travelalberta.com/

De reisplanner van Travel Alberta is heel anders dan de reisplanners die te vinden zijn op andere websites van reisbureau’s. Alberta maakt gebruik van afbeeldingen en tekst om de gebruiker op het goede pad te sturen. Hierdoor wordt het kiezen van de vakantie ook wat leuker om te doen. De gebruiker hoeft niet veel te doen en kan gewoon klikken om naar de volgende pagina te gaan, in plaats van typen of invoeren. Uitgelicht item Op de manier hoe Alberta het begin van haar reisplanner heeft gemaakt, wil ik voor Travellu zorgen dat de reisplanner voor zover mogelijk door afbeeldingen met tekst wordt geleid. Hierdoor wordt de ervaring van de gebruiker met de site rijker en leuker. Op deze manier zal ik voor Travellu ook een planner maken. Het enige verschil zal zijn, dat wanneer het op boeken aankomt, en er echt gekozen moet worden voor een datum, het op een iets ander manier zal gaan. Bij het invoeren van aantal personen en datum/tijd zal er een andere manier van plannen gevonden moeten worden, dat wordt het tweede deel van de reisplanner.

Design Study / Stijn Schouten / VSD LB

17


Eigen uitwerking

18

Ik heb de reisplanner van Alberta gekoppeld aan de segmenten van Travellu. Namelijk de avonturisten, de relaxers en de mensen die sociaal willen zijn op vakantie. Op deze manier zal ik voor de gebruikers van Travellu een zo gebruiksvriendelijk mogelijke manier van plannen proberen te maken. Bij de reisplanner zal er een reis worden samengesteld, maar er zijn ook mensen die dat niet willen, en gewoon een aanbevolen reis willen boeken, voor die mensen staat er in het witte blok een knop met de topvakanties.

1.

2.

Bij het eerste scherm zullen de gebruikers van Travellu kiezen welke soort vakantie ze willen, een avontuurlijke, sociale of relaxende vakantie.

Bij het volgende scherm zal de gebruiker kiezen tussen zijn reisgezelschap, wil hij/ zij alleen op vakantie, of met meerdere. Of wil hij/zij alleen met zijn/haar vriendin? Dat kiest de gebruiker hier, om tot de beste selectie vakanties te komen.

Design Study / Stijn Schouten / VSD LB


Website: http://www.f-i.com/fi/airlines/

Naar deze website heb ik gezocht, omdat dit de tussenstap voor Travellu was, het land kiezen. Daarom heb ik deze website onderzocht. Ik wilde ervoor zorgen dat de gebruiker van travella tijdens het plannen van zijn reis kon kiezen naar welk continent hij/zij wilde. Op deze site staan allerlei ontwerpen die te maken hebben met het samenvoegen van reisbureau’s met vliegmaatschappijen. Uitgelicht item Op deze kaart is te zien waar ernaartoe te reizen is, en als je die bestemming aanklikt op de website geeft hij dat ook aan wanneer je de reis wilt gaan boeken.

Design Study / Stijn Schouten / VSD LB

19


Eigen uitwerking Op de Travellu site moet de gebruiker ook de keuze hebben uit alle continenten. Zo kan de beste reis samengesteld worden voor hem/haar. Dit is tevens de volgende stap in het plannen van de reis, stap 3. Een continent kiezen. Vervolgens zal de gebruiker bij de volgende stap een lijst krijgen met mogelijke vakanties.

20

Ook heb ik een knop toegevoegd die ervoor zorgt dat de gebruiker teruggaat naar de vorige stap. Het kruisje wat bovenin staat. Wanneer de gebruiker over een continent hovert, krijgt hij/zij een groen continent met een witte banner en groene tekst erin. Wanneer er niet over gehovert wordt, blijft hij wit met een groene banner en witte tekst

Een voorbeeld daarvan staat hierboven, wanneer de gebruiker een land heeft gekozen kan hij een plek waar Travellu reizen heeft boeken. Wanneer de gebruiker dus bijvoorbeeld Perth aanklikt, krijgt hij de vakanties vanuit Perth te zien. Daarnaast is te zien hoe goed deze beoordeelt zijn. Wanneer de gebruiker zijn stad/dorp heeft gevonden om vanuit te starten krijgt hij/zij een aantal suggesties van Travellu zelf. Hier kan de gebruiker doorheen scrollen om zijn ideale vakantie te vinden. Door het integreren van de community krijgen de vakanties een cijfer. Dit cijfer is door de mensen die al bij deze plek zijn geweest gegenereerd.

Design Study / Stijn Schouten / VSD LB


Website: http://www.d-reizen.nl

Deze website heb ik onderzocht voor het prikken van de datums. Het was niet lang zoeken voordat ik een goede reisplanner tegenkwam. Aangezien het kiezen van een datum essentieel is in een reisplanner, is dit ook een belangrijk item. Uitgelicht item Op de reisplanner kan de gebruiker kiezen tussen de maanden van het jaar op twee manieren, door gewoon een maand aan te klikken, of door te klikken op een slider totdat de beoogde maand langs komt. Als de gebruiker op een datum klikt die nog beschikbaar is, zal deze oranje worden. Dit betekend dat de gebruiker de vakantie kan gaan boeken. Waneer het niet mogelijk is om een vakantie te boeken, krijgt de gebruiker geen feedback, er gebeurd namelijk niets.

Design Study / Stijn Schouten / VSD LB

21


Eigen uitwerking

22

Het boeken van een reis bij Travellu ziet er als volgt uit. De gebruiker zal eerst een datum moeten kiezen om bij het boeken van de vakantie te komen. Voordat de gebruiker bij het aantal volwassenen, aantal kinderen en het type vervoer komt dus. De witte vierkanten betekend dat die periode nog beschikbaar is voor deze vakantie en dus geselecteerd kan worden. Wanneer de reisplanner volledig is ingevuld, heeft de gebruiker succesvol zijn reis geplant. Dit is de laatste stap in het plannen van deze reis. De gebruiker zal altijd kunnen zien of er nog een vakantie beschikbaar is, doordat de blokjes die dus wit zijn gekleurt uit gekozen kan worden. De reisplanner van d-reizen heeft me geinspireerd om ongeveer hetzelfde te gaan doen voor Travellu.

Design Study / Stijn Schouten / VSD LB


Reisplanner voor Travellu

De eerste stap om een reis te plannen op travellu is de reisplanner aan te klikken op de navigatie, vervolgens krijgt de gebruiker een keuze uit zes continenten om te gaan backpacken. Wanneer er over een werelddeel gehovert en geklikt wort, krijgt deze een groene kleur om aan te geven dat de gebruiker het continent heeft gekozen.

De tweede stap is de keuze tot gebied/stad/plek op het continent om te gaan backpacken. Het land wat gekozen is komt wordt op ingezoomd en de keuzes veranderen naar de keuzes die alleen met het continent te maken hebben.

Design Study / Stijn Schouten / VSD LB

23


24

Vervolgens wanneer de gebruiker een plek heeft aangeklikt om te gaan reizen, krijgt hij een selectie met reizen te zien die te maken hebben met de eerdere segmentatie van Travellu. Relaxers, Avonturiers of sociaal. De reizen die geselecteerd zijn hebben dan ook niet meer te maken met de andere twee segmentaties.

De laatste stap voor de gebruiker is wanneer hij de reis heeft gekozen die hij/zij wilt gaan doen. Het continent maakt plaats voor een reisplanner waarin de gebruiker gedetailleerd kan aangeven wanneer hij wil gaan reizen, en met welke hoeveelheid. Wanneer de gebruiker “koppel” of “solo” heeft ingevoerd zullen deze plekken al ingevoerd zijn. En om het duurzame aspect van Travellu te vertegenwoordigen krijgt de gebruiker nog de keuze om zijn vervoer te kiezen. Design Study / Stijn Schouten / VSD LB


Website: http://www.lonelyplanet.com

Lonelyplanet is een website die allerlei gelegenheden over de hele wereld samenbrengt. Van reizen tot het bekijken van monumenten. Lonelyplanet staat ervoor dat elk mens zoveel mogelijk van de wereld kan zien. Ook hebben ze een verfijnde zoekmachine waarmee een reis geboekt kan worden. Uitgelicht item De zoek & boek engine van lonelyplanet is erg makkelijk te gebruiken en ziet er rustig en simpel uit. Het enige wat lonelyplanet van je wilt weten om een reis voor je te vinden is de datum van vertrek, en het gebied waar je naartoe wilt reizen. Vervolgens vragen ze ook nog om het reisgezelschap van de gebruiker. Maar dat zal bij de website van travellu op een andere manier gebeuren. De lichtgedrukte woorden in de tekstgebieden zijn suggesties die ervoor zorgen dat mensen weten wat ze waar invoeren. Het is een erg makkelijke manier om zonder uitleg buiten het invoeren van de tekst, de gebruiker zijn reis te laten boeken.

Design Study / Stijn Schouten / VSD LB

25


Zoek & boek voor travellu

26

Lonelyplanet is een website die allerlei gelegenheden over de hele wereld samenbrengt. Van reizen tot het bekijken van monumenten. Lonelyplanet staat ervoor dat elk mens zoveel mogelijk van de wereld kan zien. Ook hebben ze een verfijnde zoekmachine waarmee een reis geboekt kan worden. Bij de Zoek & boek engine gaat precies hetzelfde vooraf, als bij de reisplanner. Eeers zal er gesegmenteerd worden op Relaxers, Avonturiers en Sociale reizigers, daarna zal het reisgezelschap vastgesteld worden. Dit gezelschap kan bestaan uit; koppels, solisten of groepen. Daarna komt de reiziger dus hier terecht, bij de zoek & boek engine. Om ervoor te zorgen dat de zoek & boek engine makkelijk te bedienen is, heb ik voor travellu ervoor gezorgd dat het systeem niet te ingewikkeld in elkaar zit. Wanneer de gebruiker een bestemming zoekt verschijnt er naast de zoek & boek engine de bestemmingen die het meest in de buurt kwamen bij de vraag van de gebruiker. Ook wordt er al meteen geselecteerd op data, zodat de gebruiker niet teleurgesteld zal worden wanneer een reis niet blijkt door te gaan, omdat deze al volgeboekt is.

Design Study / Stijn Schouten / VSD LB


Mobile

Design Study / Stijn Schouten / VSD LB

27


Applicatie: 9292 OV reisplanner

28

Dit is de reisplanner van OV 9292. De applicatie is primair bedoelt voor het reizen met het openbaar vervoer. Maar is ook getest op usability en elke student gebruikt deze app regelmatig. Dit is dan samen met de reisplanner van de NS ook de enige applicatie die gebruikt worden. Om ervoor te zorgen dat de gehele doelgroep van Travellu goed wordt bereikt is het een must om ook een website voor de mobiele telefoon te maken. Via deze website kunnen de reizigers ook aangeven dat ze onderweg zijn, en zo inspiratie en andere leuke dingen kunnen vinden. Ook is het vinden van tickets en contactinformatie belangrijk voor travellu. Dat deze applicatie zo vaak gebruikt wordt, ligt natuurlijk aan de eenvoudigheid van de applicatie zelf. En natuurlijk de bron van informatie.

Design Study / Stijn Schouten / VSD LB


Eigen uitwerking

29

Dit is een uitwerking van de mobiele app van Travellu, simpel en toch ook stijlvol. Om de ervaring voor de gebruiker zo fijn mogelijk te maken, heb ik de gemakkelijkheid overgenomen van OV 9292. Om ervoor te zorgen dat deze applicatie/website voor het mobiel makkelijk te gebruiken is, zal de website voldaan worden aan verschillende resoluties die gebruikt worden door de verschillende smartphones.

Design Study / Stijn Schouten / VSD LB


30

kleur

Design Study / Stijn Schouten / VSD LB


Website: http://www.fair2.travel

31 Om erachter te komen wat voor kleuren nou eigenlijk “Fair Travel” of duurzaam reizen inhouden ben ik op een zoektocht gegaan naar websites die een bepaald kleurenpatroon hanteren. Maar het zoeken naar zo’n site was erg lastig. Fairtravel.se gebruikte bijvoorbeeld alleen bruine kleuren, en andere fairtravel of duurzame sites gebruikten alleen maar wit en grijs. Met zo nu en dan een andere kleur. Voor mij was de website zelf geen enkele toevoeging op mijn Design Study. Maar het kleurgebruik wat ze hanteerden was wel speciaal. De wat bruinere kleuren en alle kleuren groen staan voor de natuur, en dus ook voor duurzaam reizen en voor Fair Travel. De oranje kleuren staan juist weer voor avontuur. Het word ook wel de kleur van het avontuur genoemd. Er zit zelfs een psychologische betekenis achter. “The color orange radiates warmth and happiness, combining the physical energy

and stimulation of red and the cheerfulness of yellow” Deze quote komt van een website die alle kleuren heeft onderzocht en de psychologische betekenis erachter. Gevonden op “http://www.empower-yourself-with-color-psychology.com/color-orange.html” Geraadpleegd op: 12-03-2014 (Scott-Kemmis, 2014) Er zijn nog meer psychologische beteknissen te vinden over de kleur oranje, ook dat deze optimisme opwekt en het enthousiasme in leven. Kortom, een levendige kleur. Alleen met deze site zijn al twee merkwaarden van Travellu beschreven, Duurzaam en Avontuur. Ook heeft oranje zelfs iets te maken met Sociaal. Het gaat dan om de sfeer wanneer veel mensen bij elkaar zijn.

Design Study / Stijn Schouten / VSD LB


Website: http://www.african-backpackers.nl

32 Toen ik verder zocht naar andere websites die te maken hadden met Travellu. Ik zocht op backpacking en kon alle websites weer snel vergeten, totdat ik bij de website van african backpackers kwam. De bruine kleuren in deze website geven echt een “rough” gevoel. De kleur staat ook niets voor niets voor de aarde en het harde werken.

den, de kleur die staat voor natuur en duurzaamheid. Maar ook de kleur geel is te vinden op de website. Gevonden op “http://www.empower-yourself-with-color-psychology.com/color-yellow. html” Geraadpleegd op: 13-03-2014 (Scott-Kemmis, 2014)

Gevonden op “http://www.empower-yourself-with-color-psychology.com/color-brown. De kleur geel is nog meer dan de kleur oranje. De kleur geel schijnt nog meer optimisme html” Geraadpleegd op: 12-03-2014 (Scott-Kemmis, 2014) en enthousiasme in de mens te bevrijden. Het is een erg vrolijke kleur en straalt het gezelligheid en lol uit. Bruin staat ook voor het “down to earth” gevoel wat veel mensen hebben. Bruin is ook de kleur waardoor mensen psychologisch denken aan de waarheid, eerlijkheid en hardwerkend. Ook is er op de website van african backpackers weer groen te vinDesign Study / Stijn Schouten / VSD LB


Kleurpaletten

Kleur: Groen Soort: Monochromatic Kenmerken: Groei, gezondheid, eerlijkheid, duurzaamheid, kalm en natuur Tijdens het onderzoeken van websites was ik er al deels achter dat groen de kleur is voor een website als Travellu. De kleur zelf ademt fair travel en duurzaam reizen. Ook is het natuurlijk de kleur die het dichtst bij de natuur staat.

Kleur: Oranje Soort: Monochromatic Kenmerken: Avontuur, optimisme, enthousiasme, sociaal en warm Bij de merkwaarden van travellu past oranje eigenlijk het meest. De kleur is in nauw verband met de duurzaamheid en heeft ook iets sociaals aan zich. Het is eigenlijk een goede kleur voor de website van travellu.

Design Study / Stijn Schouten / VSD LB

33


Kleur: Blauw Soort: Monochromatic Kenmerken: Trouw, eerlijk, verantwoordelijkheid, vreedzaam en kalm.

34

Dit is niet echt een kleurenpalet wat zal passen in de stijl van Travellu. Alhoewel het wel belangrijk is dat de reisorganisatie waar geboekt wordt betrouwbaar is. En dat straalt deze kleur uit.

Kleur: Brown Soort: Monochromatic Kenmerken: Down-to-earth, praktisch, vriendelijk, stabiel en betrouwbaar De kleur bruin staat bij Travellu voor de meer avontuurlijke reizen, de wat modderige en ruigere backpackreizen. Bij beide onderzochte websites kwam deze kleur ook naar boven.

Design Study / Stijn Schouten / VSD LB


“Blauw, betrouwbaar, eerlijk, trouw en verantwoordelijk”

“Groen, natuurlijk, groei, gezondheid, duurzaam, eerlijk en kalm”

35

“Oranje, optimistisch, enthousiast, Avontuur Sociaal Warm”

Design Study / Stijn Schouten / VSD LB


36

Design Study / Stijn Schouten / VSD LB


Eigen uitwerking

Na mijn onderzoek met het gebruik van kleurenpaletten ben ik tot twee eindontwerpen gekomen, de eerste hierboven waarbij groen wordt gebruikt staat voor bijna alles wat Travellu inhoudt. Fair Travel, duurzaamheid en de natuur. Ook is het een erg neutrale kleur voor een duurzame reisorganisatie.

Het tweede ontwerp is gebaseerd op het kleurenpalet oranje. Beide kleurpaletten zijn trouwens Monochromatic. Ik wilde alleen de kleuren gebruiken die belangrijk zijn voor Travellu en voor de merkwaarden. De avontuurlijke kant van Travellu, en de duurzame kant worden ook door oranje vertegenwoordigd.

Design Study / Stijn Schouten / VSD LB

37


Kleurenpalet travellu

38

Uiteindelijk heb ik een ontwerp gemaakt voor travellu omdat ik geen van de twee kleurenpaletten kon kiezen. Hierdoor ben ik eigenlijk aan een beter stijl gekomen voor Travellu. Meer kleur en meer vertegenwoordiging. Aan het einde ben ik dan toch op een Monocromatic kleurenpalet gekomen.

Dit zullen de kleuren worden van Travellu. De website zal opgebouwd zijn uit vakken die deze twee kleuren huisvesten. Hierdoor heeft Travellu alles uit haar merkwaarden gehaald en stralen ze letterlijk hun merk uit.

Design Study / Stijn Schouten / VSD LB


typografie

Design Study / Stijn Schouten / VSD LB

39


Inspiratie typografie Om de beste lettertypen te vinden voor Travellu, is het belangrijk dat we die samen met de merkwaarden overwegen. Ter inspiratie van het lettertype voor Travellu, ben ik eerst bezig gegaan met het onderzoeken van andere bekende lettertypes die te maken hebben met 1 of meerdere merkwaarden van Travellu.

Merk: Jack Wolfskin Kenmerk: Avontuur, outdoor sporten Font: ITC Korinna ExtraBold Fontfamily: Transition

40

Merk: Red Bull Kenmerk: Avontuur, motorsporten, teamsport, racing en wintersport. Font: Futura Fontfamily: Humanist

Merk: Fairtrade max havelaar Kenmerk: Fair trading, fair prices, het goede doel. Font: Adelle Sans Semibold Fontfamily: Humanist

Design Study / Stijn Schouten / VSD LB


Typografie verwerking

Roboto

Calibri

Rain forests belong to the tropical wet climate group. The temperature in a rain forest rarely gets higher than 93 °F (34 °C) or drops below 68 °F (20 °C); average humidity is between 77 and 88%; rainfall is often more than 100 inches a year. There is usually a brief season of less rain. In monsoonal areas, there is a real dry season. Almost all rain forests lie near the equator.

Rain forests belong to the tropical wet climate group. The temperature in a rain forest rarely gets higher than 93 °F (34 °C) or drops below 68 °F (20 °C); average humidity is between 77 and 88%; rainfall is often more than 100 inches a year. There is usually a brief season of less rain. In monsoonal areas, there is a real dry season. Almost all rain forests lie near the equator.

41 Biko

Sansation

Rain forests belong to the tropical wet climate group. The temperature in a rain forest rarely gets higher than 93 °F (34 °C) or drops below 68 °F (20 °C); average humidity is between 77 and 88%; rainfall is often more than 100 inches a year. There is usually a brief season of less rain. In monsoonal areas, there is a real dry season. Almost all rain forests lie near the equator.

Rain forests belong to the tropical wet climate group. The temperature in a rain forest rarely gets higher than 93 °F (34 °C) or drops below 68 °F (20 °C); average humidity is between 77 and 88%; rainfall is often more than 100 inches a year. There is usually a brief season of less rain. In monsoonal areas, there is a real dry season. Almost all rain forests lie near the equator.

Design Study / Stijn Schouten / VSD LB


Typografie verwerking

Opificio

Gravity

Rain forests belong to the tropical wet climate group. The temperature in a rain forest rarely gets higher than 93 °F (34 °C) or drops below 68 °F (20 °C); average humidity is between 77 and 88%; rainfall is often more than 100 inches a year. There is usually a brief season of less rain. In monsoonal areas, there is a real dry season. Almost all rain forests lie near the equator.

Rain forests belong to the tropical wet climate group. The temperature in a rain forest rarely gets higher than 93 °F (34 °C) or drops below 68 °F (20 °C); average humidity is between 77 and 88%; rainfall is often more than 100 inches a year. There is usually a brief season of less rain. In monsoonal areas, there is a real dry season. Almost all rain forests lie near the equator.

Asenine

Aaargh

Rain forests belong to the tropical wet climate group. The temperature in a rain forest rarely gets higher than 93 °F (34 °C) or drops below 68 °F (20 °C); average humidity is between 77 and 88%; rainfall is often more than 100 inches a year. There is usually a brief season of less rain. In monsoonal areas, there is a real dry season. Almost all rain forests lie near the equator.

Rain forests belong to the tropical wet climate group. The temperature in a rain forest rarely gets higher than 93 °F (34 °C) or drops below 68 °F (20 °C); average humidity is between 77 and 88%; rainfall is often more than 100 inches a year. There is usually a brief season of less rain. In monsoonal areas, there is a real dry season. Almost all rain forests lie near the equator.

42

Design Study / Stijn Schouten / VSD LB


Typografie verwerking

Verdana

Gravity

Rain forests belong to the tropical wet climate group. The temperature in a rain forest rarely gets higher than 93 °F (34 °C) or drops below 68 °F (20 °C); average humidity is between 77 and 88%; rainfall is often more than 100 inches a year. There is usually a brief season of less rain. In monsoonal areas, there is a real dry season. Almost all rain forests lie near the equator.

Rain forests belong to the tropical wet climate group. The temperature in a rain forest rarely gets higher than 93 °F (34 °C) or drops below 68 °F (20 °C); average humidity is between 77 and 88%; rainfall is often more than 100 inches a year. There is usually a brief season of less rain. In monsoonal areas, there is a real dry season. Almost all rain forests lie near the equator.

Coolvetica

Cambria

Rain forests belong to the tropical wet climate group. The temperature in a rain forest rarely gets higher than 93 °F (34 °C) or drops below 68 °F (20 °C); average humidity is between 77 and 88%; rainfall is often more than 100 inches a year. There is usually a brief season of less rain. In monsoonal areas, there is a real dry season. Almost all rain forests lie near the equator.

Rain forests belong to the tropical wet climate group. The temperature in a rain forest rarely gets higher than 93 °F (34 °C) or drops below 68 °F (20 °C); average humidity is between 77 and 88%; rainfall is often more than 100 inches a year. There is usually a brief season of less rain. In monsoonal areas, there is a real dry season. Almost all rain forests lie near the equator.

Design Study / Stijn Schouten / VSD LB

43


Typografie verwerking Avontuur Voor het eerste lettertype wil ik op zoek gaan naar iets avontuurlijks, iets wat met avontuur te maken had, het kan in een logo hebben gezeten maar het kan ook echt een apart lettertype zijn, wat ik door uitleg verduidelijk. Omdat avontuur een belangrijke merkwaarde is binnen Travellu, zal er onderzoek gedaan worden naar een avontuurlijk lettertype.

Roboto

Sansation

Travellu Avontuur Duurzaam Local

Travellu Avontuur Duurzaam Local

44 Calibri Travellu Avontuur Duurzaam Local

Sathu Travellu Avontuur Duurzaam Local

Design Study / Stijn Schouten / VSD LB


Typografie verwerking Duurzaam Voor het tweede lettertype ga ik op zoek naar de soort lettertypes die op de fairtrade producten staan. Ik ga niet op zoek naar geschreven stijlen en oud moderne fonts. Bij deze font’s wil ik een duidelijke tekst met eventueel een vet effect.

Arial

bebas neue

Travellu Avontuur Duurzaam Local

Travellu Avontuur Duurzaam Local

Verdana

Basic title

Travellu Avontuur Duurzaam Local

Travellu Avontuur Duurzaam Local

Design Study / Stijn Schouten / VSD LB

45


Typografie verwerking

46

Roboto & Calibri

Roboto & Verdana

Travellu

Travellu

Rain forests belong to the tropical wet climate group. The temperature in a rain forest rarely gets higher than 93 °F (34 °C) or drops below 68 °F (20 °C); average humidity is between 77 and 88%; rainfall is often more than 100 inches a year. There is usually a brief season of less rain. In monsoonal areas, there is a real dry season. Almost all rain forests lie near the equator.

Rain forests belong to the tropical wet climate group. The temperature in a rain forest rarely gets higher than 93 °F (34 °C) or drops below 68 °F (20 °C); average humidity is between 77 and 88%; rainfall is often more than 100 inches a year. There is usually a brief season of less rain. In monsoonal areas, there is a real dry season. Almost all rain forests lie near the equator.

Roboto & Arial

Roboto & Gravity

Travellu

Travellu

Rain forests belong to the tropical wet climate group. The temperature in a rain forest rarely gets higher than 93 °F (34 °C) or drops below 68 °F (20 °C); average humidity is between 77 and 88%; rainfall is often more than 100 inches a year. There is usually a brief season of less rain. In monsoonal areas, there is a real dry season. Almost all rain forests lie near the equator.

Rain forests belong to the tropical wet climate group. The temperature in a rain forest rarely gets higher than 93 °F (34 °C) or drops below 68 °F (20 °C); average humidity is between 77 and 88%; rainfall is often more than 100 inches a year. There is usually a brief season of less rain. In monsoonal areas, there is a real dry season. Almost all rain forests lie near the equator.

Design Study / Stijn Schouten / VSD LB


Typografie verwerking

Basic title font & Roboto

Basic title font & Verdana

Travellu

Travellu

Rain forests belong to the tropical wet climate group. The temperature in a rain forest rarely gets higher than 93 °F (34 °C) or drops below 68 °F (20 °C); average humidity is between 77 and 88%; rainfall is often more than 100 inches a year. There is usually a brief season of less rain. In monsoonal areas, there is a real dry season. Almost all rain forests lie near the equator.

Rain forests belong to the tropical wet climate group. The temperature in a rain forest rarely gets higher than 93 °F (34 °C) or drops below 68 °F (20 °C); average humidity is between 77 and 88%; rainfall is often more than 100 inches a year. There is usually a brief season of less rain. In monsoonal areas, there is a real dry season. Almost all rain forests lie near the equator.

Verdana & Arial

Verdana & Coolvetica

Travellu

Travellu

Rain forests belong to the tropical wet climate group. The temperature in a rain forest rarely gets higher than 93 °F (34 °C) or drops below 68 °F (20 °C); average humidity is between 77 and 88%; rainfall is often more than 100 inches a year. There is usually a brief season of less rain. In monsoonal areas, there is a real dry season. Almost all rain forests lie near the equator.

Rain forests belong to the tropical wet climate group. The temperature in a rain forest rarely gets higher than 93 °F (34 °C) or drops below 68 °F (20 °C); average humidity is between 77 and 88%; rainfall is often more than 100 inches a year. There is usually a brief season of less rain. In monsoonal areas, there is a real dry season. Almost all rain forests lie near the equator.

Design Study / Stijn Schouten / VSD LB

47


Typografie verwerking Verantwoording Deze combinatie van lettertypen past erg goed bij Travellu, ze staan namelijk voor duidelijkheid en helderheid. Ook stralen beide lettertypen rust uit en zijn niet moeilijk om te lezen. Tijdens het onderzoek bleek dat deze twee in combinatie elkaar erg goed afstemmen. Ze zijn makkelijk te lezen voor iedereen en passen ook goed in het fair travel gedeelte. De meeste duurzame logo’s hanteren namelijk eenzelfde Basic Sans Serif lettertype. Ook als het gaat om de avonturiersmerkwaarde is dit lettertype in combinatie prima, de meeste logo’s (zoals ook Jack Wolfskin) hebben eenzelfde soort lettertype. Arial, verdna en tahoma waren net wat minder dan Calibri in samenstelling met Roboto.

Travellu

48

Rain forests belong to the tropical wet climate group. The temperature in a rain forest rarely gets higher than 93 °F (34 °C) or drops below 68 °F (20 °C); average humidity is between 77 and 88%; rainfall is often more than 100 inches a year. There is usually a brief season of less rain. In monsoonal areas, there is a real dry season. Almost all rain forests lie near the equator.

Roboto & Calibri

Design Study / Stijn Schouten / VSD LB


Typografie uitwerking

49 Wanneer je het verschil bekijkt tussen de linker en de rechter foto, kun je het verschil goed zien, bij de linker afbeelding zijn roboto en calibri verwerkt in een menu voor Travellu. Het rechterscherm ziet er wat minder uit, hierbij heb ik verdana en basic title font gebruikt. Deze zijn het beide net niet, en in samenhang ziet het er ook niet geweldig uit. Uit deze voorbeelden is goed te zien dat de lettertypes elkaar goed aanvullen. Ik heb bijvoorbeeld het vette gedeelte van zoek je reis & boek hem met Roboto gedaan en het gedeelte daaronder (& boek hem) met calibri. Voor de rest van de teksten zal ik ook calibri gaan gebruiken. Op een witte achtergrond zal deze tekst dan een donkergrijze kleur krijgen en op een gekleurde achtergrond - in dit geval oranje en groen - een witte kleur krijgen.

Design Study / Stijn Schouten / VSD LB


50

gestalt

Design Study / Stijn Schouten / VSD LB


Inspiratie: http//www.illy.com

51 Op de website van illy is goed te zien dat ze verschillende soorten van gestalt hanteren. Er is namelijk closure op deze website, er staan een paar verschillende soorten koffie, maar er staan geen randingen/kaderingen omheen. Maar ik krijg wel het gevoel dat het apart van elkaar is. Dat komt omdat het in een grid staat/in kolommen. Maar waar het bij mij echt over gaat op deze site, is het blikje koffie op de voorgrond. Deze gaat namelijk over de rand heen van de website. Hij gaat over de grens heen en staat daarom op beide delen van de website. Dit is een gestalt in de vorm van proximity. De gebruiker wordt eigenlijk voor de gek gehouden dat er iets op de website staat. Ook wekt de website een illusie door voorgrond en achtergrond te nabootsen.

Design Study / Stijn Schouten / VSD LB


Eigen uitwerking

52

Hier is goed te zien dat het over gestalt gaat. Om te laten zien aan de gebruiker van Travellu dat het hier echt om backpacken gaat, en hij hier zijn reis kan boeken naar een nieuw avontuur heb ik ervoor gekozen hier een proximity gestalt te hanteren. De tekst heb ik ook om de rugzak heen geschoven. Hierdoor ziet het er net iets beter uit. Om te laten zien dat de gebruiker niet ver weg is van de vakantie en hier zijn tijd goed benut heb ik voor een tweedeling gekozen tussen navigatie en de foto die de reizen van Travellu brengt naar naar de gebruiker. De rugzak staat symbool voor het boeken van een vakantie. De stap daarvoor is het zoeken naar de vakantie en het realiseren dat je ergens wilt gaan boeken. De derde stap (de foto) geeft de gebruiker de realiteit van de vakantie die hij/zij met Travellu kan realiseren.

Design Study / Stijn Schouten / VSD LB


Inspiratie: http//www.quarto.com

Op deze website zijn verschillende vormen van gestalte te herkennen. Zo maakt de websit gebruik van het gestalt closure. Er zijn geen opmerkelijkje raster/kaderingen te zien op de website. Toch weet de website een goed design neer te zetten. De enige kaderingen/ randen die te zien zijn, zijn van de navigatie. Uitgelicht item Ook maakt de website gebruik van een ander gestalt type. Namelijk continuity. De man rechts spreekt door middel van een wolkje naar de gebruiker en verteld dat quarto de goede en juiste aanpak is. De man kijkt naar de spraakbubbel en zorgt er op die manier voor gestalt.

Design Study / Stijn Schouten / VSD LB

53


Eigen uitwerking

54

Op de manier hoe quarto de spraakwolk heeft gebruikt om te suggereren dat iemand dat tegen de gebruiker zegt, heb ik voor Travellu hetzelfde ontworpen. Het meisje wat aan het backpacken is staat ook symbool voor de manier van reizen voor de gebruikers van Travellu. Ze is op haar bestemming en gebruikt travellu ook tijdens het reizen om buskaartjes te vinden, of inspiratie te lezen over het gebied waar ze nu backpackt. Uitgelicht item Het gestalt continuity heb ik hier overgenomen van quarto. Het is een leuke manier om ervoor te zorgen dat de boodschap bij de gebruiker overkomt. Ook is het handig voor de gebruiker om deze informatie te weten, het is een belangrijk deel van de dienst die Travellu wilt uitstralen. En door het gestalt continuity is dit een makkelijke manier om te doen.

Design Study / Stijn Schouten / VSD LB


beeld

Design Study / Stijn Schouten / VSD LB

55


Inspiratie In dit hoofstuk bespreken we de afbeeldingen en foto’s die op de site van Travellu zullen komen. We behandelen daarin de verschillende aspecten waarom bepaalde foto’s geschikt zijn, en andere niet. De foto’s die voor Travellu nodig zijn, zijn sfeerfoto’s van de gebieden waar de gebruiker naartoe kan reizen. Ook moet er bij de segmentatie voor het plannen van een vakantie foto’s komen. Deze foto’s moeten uitbeelden dat de ene vakantie gaat om avontuur, de andere om relaxen en de laatste om socializen. Verder zal er nog gesegmenteerd worden op type gezelschap. Solo, koppels en groepen worden dan behandeld. In die foto’s moet duidelijk zijn wat het gezelschap is. Bij beide segmentaties moeten de foto’s uitstralen hoe het is om op reis te zijn bij Travellu. De sfeerfoto’s van de verschillende soorten vakanties die te boeken zijn, moeten ook voldoen aan bepaalde eisen, ze hebben allemaal hetzelfde formaat, namelijk 4:3 omdat bij dit formaat het nog mogelijk is om ervoor te zorgen dat er tekst naast de foto staat die over de bestemming gaat.

56

Kenmerken: Solo foto Voor: Segmentatie gezelschap

Design Study / Stijn Schouten / VSD LB


Onderzoek

De rule of the thirds laat zien dat dit een horizonfoto is. Het is een foto waar een hoog gehalte depth of field aan vast zit. Geen blur aan de zijkanten. Ook is er erg veel lichtinval en valt het zonlicht aan de rechterkant in.

Conquering the mountains - Australia

Design Study / Stijn Schouten / VSD LB

57


Inspiratie

Discovering the woods - Amerika

58

Kenmerken: Koppels foto Voor: Segmentatie gezelschap

Design Study / Stijn Schouten / VSD LB


Onderzoek

De rule of the thirds laat zien dat dit geen horizonfoto is. Het is een foto waarbij je kunt zien dat er op de camera een focus zat. De boom aan de linkerkant is geblurred en ziet er en onscherp uit. Ook is er erg veel lichtinval en valt het zonlicht aan de rechterkant in. Het beeldmateriaal dat door de community zal worden aangeleverd, kan alleen op de blogs komen van de reizigers van Travellu. Deze kunnen alle reizigers natuurlijk ook bekijken. Ook op de Social media van Travellu kunnen er foto’s worden ingestuurd die vanuit de vakantiebestemming komen. Deze worden dan misschien zelfs gebruikt op de website, maar dat zal in overleg gaan.

Design Study / Stijn Schouten / VSD LB

59


Inspiratie

Getting out of the comforzone - Australia

60

Kenmerken: Avontuur Voor: Segmentatie

Design Study / Stijn Schouten / VSD LB


Onderzoek

De rule of the thirds laat zien dat dit geen horizonfoto is. Het is een fot waar geen blur of een laag depth of field is. Ook is de foto vanuit het perspectief gemaakt dat het net lijkt alsof de fotograaf onder hem stond, en door het perspectief lijkt het net alsof hij een immense sprong maakt, maar in realiteit kan het een er heel anders uitzien.

Design Study / Stijn Schouten / VSD LB

61


Inspiratie

Discovering the woods - Amerika

62

Kenmerken: Social Voor: Segmentatie

Design Study / Stijn Schouten / VSD LB


Onderzoek

De rule of the thirds laat zien dat dit geen horizonfoto is. De depth of view is prima, er zit geen blur aan de zijkanten of ergens anders op de foto. Het is ook een foto die laat zien dat er groepen aan het backpacken zijn, en samen ergens de weg proberen te vinden Ook zijn de andere mensen afgesneden van de foto. Waarschijnlijk omdat de foto destijds om de middelste personen ging

Design Study / Stijn Schouten / VSD LB

63


Beeld uitwerking

64

Dit is de eerste segmentatie van Travellu. Er wordt eerst gevraagd wat de gebruiker voor vakantie wil hebben. Een avontuur, relaxend of sociaal. De foto’s die hierin gebruikt zijn, zijn allemaal geselecteerd op de segmentatie. Ik heb verder nog een aantal uitwerkingen gemaakt om deze het beste te kunnen selecteren. Hier is goed te zien wat de foto’s en de segmentaties precies inhouden. Ze zijn belangrijk voor de gebruiker, zodat hij/zij makkelijk de reis kan boeken die het beste bij haar past. Omdat een foto vaak niet alles zegt, staat er ook bij wat de foto inhoudt.

Design Study / Stijn Schouten / VSD LB


Beeld uitwerking

Dit is de tweede segmentatie van travellu. Het selecteren op gezelschap. Hier heb ik foto’s gekozen waar het overduidelijk was dat het om dat gezelschap ging. Ook heb ik veelal gezocht naar foto’s waar de personen zelf klein op de voorgrond stonden, zodat ik het op deze manier in het grid kon stoppen. Zonder dat de personen op de foto werden afgesneden. Op deze vergroting van de uitwerking van de foto’s is goed te zien wat welk reisgezelschap is. Dat wilde ik voor Travellu ook in de site voegen. Omdat niet iedereen een reis wilt die eigenlijk bedoelt is voor koppels, terwijl je eigenlijk in je eentje wilde gaan om meer van het gebied te kunnen verkennen en de sfeer pas echt te voelen.

Design Study / Stijn Schouten / VSD LB

65


66

iconen

Design Study / Stijn Schouten / VSD LB


Icoon inspiratie: http//www.cloudnine.se Iconen zijn ervoor om snel duidelijk te maken wat iets is, zonder tekst. Dat is de kracht van een icoon. Iconen zijn uitgevonden omdat er eerder alleen maar iets typografisch stond, en niet iedereen dezelfde taal spreekt. Om het makkelijker te maken voor iedereen, zijn er zodoende iconen ontstaan die dat snel duidelijk kunnen maken en voor iedereen te begrijpen zijn. Zonder dat er een icoon staat naast deze woorden weet niemand waar het over gaat op deze wedstrijd. De kracht is dan ook een icoon te vinden wat precies dat vertegenwoordigd wat er staat. Dat is niet altijd even makkelijk, maar is wel nodig. Want op deze manier weten alleen mensen uit Zweden wat er staat.

67 Nou dat cloudnine er naast heeft gezet in pictogrammen zullen mensen eerder doorhebben wat het nou eigenlijk inhoudt. De home knop is daar een heel goed voorbeeld van, als je niet wist wat er stond, is het nou een stuk duidelijker geworden. De rest is iets discutabeler. Het tweede icoon kan ik nog wel iets van bedenken, namelijk dat het een icoon is om uit te leggen waar ze voor staan. Maar de rest is niet erg duidelijk. Voor Travellu wil ik er dus voor zorgen dat alles duidelijk is, en mensen meteen doorhebben wat het betekend. Omdat alleen een engels woord ook niet helpt.

Design Study / Stijn Schouten / VSD LB


Eigen uitwerking Om ervoor te zorgen dat de iconen die gebruikt zullen worden op de website van Travellu ook daadwerkelijk de gebruiker een beter idee geven van de dienst die erachter hangt, heb ik via google een aantal voorbeelden onderzocht. Hieruit ben ik zelf gaan ontwerpen en heb ook een paar dingen gemodificeerd.

68 Zo zijn de pictogrammen goed afzonderlijk te zien, voor een reissite zijn ze bijna allemaal duidelijk. Behalve degene van de community. Ik kon daar geen pictogram van vinden wat ik kon modificeren en zelf kon ik ook niks anders bedenken dan deze uitwerking.

Design Study / Stijn Schouten / VSD LB


feedback

Design Study / Stijn Schouten / VSD LB

69


Feedback deel 1 Het feedbackspanel voor navigatie, grid en formulieren was niet echt goed georganiseerd, veel mensen hadden hun werk niet af. En eigenlijk kon ik bijnan niemand mijn werk laten zien. Maar ik heb mijn werk toch laten zien aan het mijn feedbackspanel. Mijn eerste vraag was hoe ik een grid in mijn design study kon verwerken, want ik had deze nog niet gedaan en vroeg me af hoe ik het moest gaan onderzoeken. Lars stelde me voor om het 12 gridsysteem wat we in de les hadden gehad toe te passen op bepaalde websites waarvan je kunt zien dat ze met een grid werken, dit heb ik ook verwerkt in mijn onderzoek. Ik kon alleen moeilijk sites vinden die ook wat met het onderwerp “travel” te maken hadden.

70

Mijn tweede vraag was of mijn navigatie op een goede plek was neergezet op het scherm. Veel vonden van wel, maar er werd ook gezegd dat ik misschien kon proberen de navigatie bovenaan de site te huisvesten. Dit vond ik wel een leuk idee, maar op de manier hoe de site moet gaan werken is het niet heel erg praktisch, dus heb ik het niet verwerkt. Ook had ik niet veel kunnen bedenken over de hovers van de navigatie. Mijn vraag was dan ook of de rest van het panel misschien wist wat ik daar kon doen. Er werd voorgesteld of ik net als de logo’s ook de opacity van de typografie van de navigatie kon zetten op hetzelfde percentage als de iconen, en wanneer er een hover kwam of een klik, dat deze dan knalwit werden. Ook stelde iemand voor om de kleuren wit en groen te gebruiken om de navigatie te hoveren, bij hover van een groene balk met navigatie, dat deze dan wit werd en de typografie groen. Bij de formulieren had ik de vraag hoe ik goed een wereld kon gaan verwerken in de reisplanner, dat de gebruiker zelf kon kiezen welk continent en welk land er gekozen konden worden. Iemand stelde voor dat ik hetzelfde deed als de website kilroy-travel.com. Dat elk continent een button kreeg, al wilde ik het niet op die manier gaan doen, maar ik kreeg wel nieuwe inspiratie en heb zo de reisplanner gemaakt. Uiteindelijk was mijn laatste vraag van het panel of ik een goed georganiseerde reisplanner had gemaakt, en dat het overzichtelijk was. Niemand had echt wat te vertellen over deze vraag en heb het dan ook gelaten voor wat het was.

Design Study / Stijn Schouten / VSD LB


Feedback deel 2 Mijn eerste vraag voor het feedbackpannel tijdens het feedbackmoment voor kleur en typografie was het kleurgebruik wat ik wilde hanteren. Ik kwam er namelijk achter dat ik maar 1 kleur gebruikte voor de paletten. Ik vroeg dan ook hoe ik dat aan kon pakken, aangezien ik de les van kleur had gemist. Er werd me voorgesteld dat ik de kleuren bekeek op monochromatic, dus meerdere helderheden van de kleur eigenlijk. Ook werd me aanbevolen om twee verschillende kleuren te gebruiken. Dit heb ik ook gedaan aan het einde van het zoeken van de kleuren. Bij de tweede vraag die ik stelde, omdat ik weinig kleuren had gebruikt en nog steeds dezelfde groene kleur wilde. Uiteindelijk werd me voorgesteld dat ik het zou kunnen integreren in mijn ontwerpen van de website om een idee te krijgen hoe het eruit zal zijn. Dit heb ik dan ook met de drie kleuren gedaan die het beste eruit zagen. Mijn derde vraag ging over het feit of mijn ontwerp naar aanleiding van het kleurgebruik er een beetje goed uitzag en niet onleesbaar was op bepaalde stukken. Iedereen vond het leesbaar en sommigen vonden het er echt goed uitzien. Ik had toen nog niet de oranje en groene kleur geintegreerd in het nieuwe ontwerp van de website, dit was in een eerder stadia. Mijn vierde vraag ging over de typografie, aangezien ik maar weinig vormen van typografie had, en niet precies wist hoe ik het moest onderzoeken in mijn design study. Iedereen zij gewoon zoveel mogelijk lettertypen tegenover elkaar te zetten en dan kijken wat de beste is, dit heb ik dan ook gedaan. Ik had niet echt vragen meer, omdat ik niet meer had om te laten zien. Dus vroeg ik nog even hoe ik het lettertype kon vergelijken met elkaar. Mij werd verteld om samen met de kleuren een voorbeeldje te maken hoe het eruit zou zien. Dit heb ik ook gedaan en heb ook nog even laten zien waarom ik geen andere keuze heb gemaakt.

Design Study / Stijn Schouten / VSD LB

71


Feedback deel 3 Docente Bij dit feedbackmoment was ik niet omdat ik immersive space ook moest herkansen en dit deel nog in gemaakt had. Daarom heb ik ook alles op alles gezet om het alsnog te maken voor het feedbackmoment van de docente, zodat ik er sowieso feedback op kon krijgen. In het eerste deel van de design study had ik als feedback gekregen dat ik 1 gridontwerp te weinig had en ook dat er een ontwerp ontbrak die over mobile ging. Deze heb ik beide ontworpen en toegelicht. Verder kreeg ik ook de feedback om minder in een kopie van Travel Alberta te blijven denken met de foto’s van de segmentatie. Daarom heb ik de foto’s op een andere manier gedesigned, maar dat het toch nog dezelfde functie heeft.

72

Bij het tweede deel kreeg ik feedback op typografie en kleur. Ik had een paar kleine typfouten, en kreeg ik nog feedback om bij mijn typografie ipv lorem ipsum een tekstje over regenwouden of iets in die richting moest plaatsen. Dat heb ik dan ook even gedaan. Verder ontbrak mijn bronnenlijst nog, ik heb deze meteen ook toegevoegd.

Design Study / Stijn Schouten / VSD LB


Bronnen Alle bronnen zijn uit: “http://www.empower-yourself-with-color-psychology.com/” (Scott-Kemmis, 2014) Gevonden op “http://www.empower-yourself-with-color-psychology.com/color-brown. html” Geraadpleegd op: 12-03-2014 Gevonden op “http://www.empower-yourself-with-color-psychology.com/color-yellow. html” Geraadpleegd op: 13-03-2014 Gevonden op “http://www.empower-yourself-with-color-psychology.com/color-orange. html” Geraadpleegd op: 12-03-2014

Design Study / Stijn Schouten / VSD LB

73


Design Study / Stijn Schouten / VSD LB


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.