43
Hogeschool Arnhem & Nijmegen Informatica & Communicatie Academie Semester | CRIA 2014 Tom Pijnappel CRIA (Create a Rich Internet Application) VSD Elise van Tuijl TRAVELLU Design Study CRIA VSD

CRIA VSD - Design Study Document (Travellu)

Embed Size (px)

DESCRIPTION

CRIA VSD - Design Study Document (Travellu)

Citation preview

Page 1: CRIA VSD - Design Study Document (Travellu)

Hogeschool Arnhem & NijmegenInformatica & Communicatie AcademieSemester | CRIA 2014

Tom PijnappelCRIA (Create a Rich Internet Application) VSD Elise van Tuijl

TRAVELLUDesign Study CRIA VSD

Page 2: CRIA VSD - Design Study Document (Travellu)

2DESIGN STUDY TRAVELLU

VOORWOORDTravellu

In dit document wordt uitgelegt en laten zien hoe mijn idee Travellu gerealiseerd moet worden. We gaan het echter nu hebben over ‘Research & Concept’. Dat houdt in, wat de gedachte is achter Travellu, wat de doelgroepen bijvoorbeeld worden en noem maar op. Travellu zelf is een ‘niet’-bestaande organistatie die wij gebruiken als casus voor school. De gedachte achter Travellu is dat het reizen aanbiedt voor mensen die bijvoorbeeld echt iets van de wereld willen zien.

Page 3: CRIA VSD - Design Study Document (Travellu)

3 DESIGN STUDY TRAVELLU

Voorpagina

Voorwoord

Design Study

Grid

Navigation

Forms

Color

Typography

Photography

Icons

Mobile

Gestalt

Feedback & Reflectie

Bronnenlijst

INHOUDSOPGAVE1

2

3

4

10

16

20

26

32

35

38

40

42

43

Page 4: CRIA VSD - Design Study Document (Travellu)

4DESIGN STUDY TRAVELLU

GRID

Bovenstaande website viel meteen op. Een strakke en chique uitstraling die zelf erg kan waarderen. Wat hier een ‘grid’ is is niet zozeer een grid, aan gezien er maar vier afbeeldingen zijn. Vooral voor een voorpagina vind ik dit een hele gave uitstraling hebben.

WEBSITE: WWW.VISITBRAZIL.COM

Uitgelicht Item

Ik vind het zelf erg gaaf om je pagina te intro-duceren op een minimalistische wijze. Miss-chien is dit nog wel iets te minimalistisch.

Op de volgende pagina zie je hoe ik het grid hiervan zie.

Page 5: CRIA VSD - Design Study Document (Travellu)

5 DESIGN STUDY TRAVELLU

GRID

Eigen uitwerking

Voor de uitwerking heb ik wat bij elkaar gegooit zodat je een beetje het gevoel krijgt van de website op de vorige pagina. Het ziet er chique en professioneel uit.

Page 6: CRIA VSD - Design Study Document (Travellu)

6DESIGN STUDY TRAVELLU

GRID

Hierboven heb ik een aantal blokken met text toegevoegd. Het oogt direct al iets ‘voller’. Buiten het feit dat ik hier het grid gebruik die ongeveer te zien is op www.visitbrazil.com maak ik hier ook gebruik van blokken met rechte hoeken en strakke lijnen.

Page 7: CRIA VSD - Design Study Document (Travellu)

7 DESIGN STUDY TRAVELLU

GRID

WEBSITE: WWW.PICTORICODEMO.WORDPRESS.COM

Het grid-systeem (ook een 4-grid) is hier zowel horizontaal als verticaal.Het belangrijke verschil is hier dat de blokken echt aan elkaar zitten. Wat een (misschien) iets te moderne uitstraling kan hebben. Persoonlijk denk ik vaak aan Fashion websites die zoiets heb-ben. Toch vind ik het wel gaaf want de doelgroep van Travellu is dan ook jong en fris. Het zou dus goed kunnen zijn dat een website die op de manier als hierboven ontworpen is, het desbe-treffende doelgroep kan aantreffen.

Uitgelicht Item

Page 8: CRIA VSD - Design Study Document (Travellu)

8DESIGN STUDY TRAVELLU

GRID

Ook hier heb ik vrijwel het hele grid systeem overgenomen.

Page 9: CRIA VSD - Design Study Document (Travellu)

9 DESIGN STUDY TRAVELLU

GRID

Page 10: CRIA VSD - Design Study Document (Travellu)

10DESIGN STUDY TRAVELLU

NAVIGATION

WEBSITE: HTTp://THEmEfoREST.NET/ITEm/ExploRER-oNE-pAgE-pARAllAx-TEmplATE

Ik was nog bezig met het onderzoeken van het Grid-Systeem, maar kwam deze website tegen. Ik zag de simpele navigatie, maar het trok mijn aandacht direct. Ik heb dit opgeslagen zodat ik dat later kon gebruiken. Het geen wat ik van deze minimalistische website dus wil uitlichten is de navigatie:

Het simpele idee van deze navigatie is dat het eigenlijk zo ‘basic’ is, dat het er ontzettend strak uitziet, wat tegenwoordig wel bij veel meer elementen te zien valt. Ik vind alleen wel dat hier je lettertype (font-face) wel erg belangrijk is. De lettertype die Themeforest.net gebruikt voor dit template vind ik niet bijpassend. Helaas valt het niet goed te zien. Mysterieus genoeg is in-zoomen op deze pagina niet mogelijk.

Zodra je met je muis over de knoppen zweeft gebeurt er niks. Zelf geef ik wel de voorkeur dat er wel iets gebeurt, al is het maar minimalistisch. Verder in dit hoofdstuk ga ik hiermee experie-menteren.

Page 11: CRIA VSD - Design Study Document (Travellu)

11 DESIGN STUDY TRAVELLU

NAVIGATIONEigen uitwerking

Ik heb hier gekozen voor de lichte versie van de lettertype die ik gebruik. Persoonlijk vind ik dit het mooist en de meest professionele uitstraling hebben. Daar zit echter wel een nadeel aan. Het kan zijn dat de lettertype door de lichte vorm slecht te lezen is. Ik heb meerdere versies gemaakt.

Page 12: CRIA VSD - Design Study Document (Travellu)

12DESIGN STUDY TRAVELLU

NAVIGATIONDezelfde navigatie maar dan met de Bold versie van de lettertype.

Aangezien de navigatie nog wel redelijk groot wordt kan de light versie best gebruikt worden. Daarnaast heb ik ook nog even gekeken naar de kleur. Ik ben van mening dat het een lichte of donkere kleur moet zijn (Richting Zwart of Wit).

Page 13: CRIA VSD - Design Study Document (Travellu)

13 DESIGN STUDY TRAVELLU

NAVIGATIONUiteindelijik kan je ook nog iets doen met de ‘Hover’. Dat wil zeggen zodra je er met je muis over heen gaat, wat gebeurt er dan. Wat je op veel sites tegenwoordig ziet is dat er simpel gebruik wordt gemaakt van een streepje of kleurverandering. Dit geld ook voor de pagina waarop je je momenteel bevindt. Hetzelfde streepje zal daar zijn.

Page 14: CRIA VSD - Design Study Document (Travellu)

14DESIGN STUDY TRAVELLU

NAVIGATION

WEBSITE: HTTp://THEmES.mEDIACREED.Com/HTml/SyNERgy/#poRTfolIo.HTml

Echt veel bijzonders vond ik deze website niet. Aangezien ik aan het scrollen was in ‘Responsive HTML 5 Templates’ kwam ik deze vorm van navigatie opeens tegen. Ook dat is niet veel bij-zonders, maar het bracht me wel op een idee voor wat ik wil. Het uigelichte item is de Naviga-tie.

Het ging mij eroom dat deze navigatie aan de zijkant zit. Het leek me wel gaaf om eens te kijken hoe zoiets uitpakt op mijn website, waar ik als idee heb dat alles binnen een centered content zit. (2 lege verticale balken aan iedere zijde dus.

Hier links zie je hoe de navigatie naar mijn smaak is als ik het op een verticale manier gebruik.

De pijltjes stellen een ‘drop-down’ menu voor als die van toepassing is.

Page 15: CRIA VSD - Design Study Document (Travellu)

15 DESIGN STUDY TRAVELLU

NAVIGATIONHet resultaat hiervan vind ik erg mooi. De stijl is toegankelijk voor iedereen en de navigatie blijft duidelijk. Hieronder zie je het resultaat.

Uiteindelijk kom ik dus uit met twee typen navigatie balken. De verticale en de horizontale. Zelf heb ik normaal gesproken de voorkeur aan een horizontale menu balk. Maar nu ik een verti-caal menu zelf uitgewerkt en toegepast heb, ben ik toch in de twijfel gekomen. Het is dus:

Page 16: CRIA VSD - Design Study Document (Travellu)

16DESIGN STUDY TRAVELLU

FORMS

WEBSITE: WWW.F-I.COM/FI/AIRLINES/ (IMAGE CONTENT)

Op de Travellu website wil ik dat gebruiker op twee verschillende manieren kan boeken. Namelijk via ‘Discover’ en via ‘Search’. Bij de discover pagina krijgt de gebruiker allerlei infor-matie over bepaalde bestemmingen en locaties. Vanuit daar kunnen ze steeds verder in gaan op een bepaalde naar eigen gewenste vakantie. Bij de zoek pagina van Travellu moet uitgeb-reid gezocht kunnen worden. Een contact van mij wees me op deze site, toen ik vroeg weet jij nog een vernieuwende website die zich bezig houdt met vluchten boeken etc.

Dit is van een website die laat zien hoe het boeken van een reis over een aantal jaren uit gaat zien. Een stuk moderner dus.

Dit viel me zo ontzettend op. Het is zo verschillend van vrijwel de meeste reis websites waar je een zoek functie hebt. Ze zijn altijd zo standaard en vooral ‘chaotisch’ naar mijn idee. Door met deze grote vlakken te werken geef weer een veel moderner beeld en dit zou goed bij mijn website kunnen passen.

Page 17: CRIA VSD - Design Study Document (Travellu)

17 DESIGN STUDY TRAVELLU

FORMSEigen uitwerking

Page 18: CRIA VSD - Design Study Document (Travellu)

18DESIGN STUDY TRAVELLU

FORMS

Page 19: CRIA VSD - Design Study Document (Travellu)

19 DESIGN STUDY TRAVELLU

FORMSHier nog enkele variaties gericht op een een volledige transparante achtergrond.

Na enig feedback te hebben gekregen ben ik erachter gekomen dat de indeling te chaotisch is en ook dat er teveel informatie is. Ik was geschrapt en wat vooral belangrijk is, is dat het nu veel makkelijker leesbaarder is. Dat komt omdat de items die zich in het formulier bevinden vertical ‘aligned’ zijn.

Page 20: CRIA VSD - Design Study Document (Travellu)

20DESIGN STUDY TRAVELLU

COLORHoewel de merkwaarden “Together”, “Adventure” en “Total Experience” zijn, wil ik dat in Trav-ellu vooral de Adventure merkwaarde terug te zien moet zijn in het kleurgebruik van de web-site. Daarnaast vind ik duurzaam ook erg belangrijk. Duurzaam is vertrouwd en vaak ‘veilig’. In combinatie met avondtuur moet dit de uitraling van Travellu hebben.

Zo ben ik begonnen met het trefwoord ‘Fair Travel’. Zo hoopte ik op vriendelijke en aangename websites terecht te komen. Ik kwam op het volgende:

Kleurenpalet van de bovenstaande website:

Fair Trade Tourism heeft een hele frisse en duurzame uitstraling. Het probleem is alleen dat ik er zelf niet zo snel een reis website in zie.

WEBSITE: WWW.FAIRTRADETOURISM.COM

Page 21: CRIA VSD - Design Study Document (Travellu)

21 DESIGN STUDY TRAVELLU

COLORVervolgens ben ik gaan zoeken naar websites die meer een ‘avontuurlijke’ sfeer in zich heb-ben. Zo kwam ik op adventure.travel.com en roadsideheritage.org. Deze websites gaven gelijk al een veel betere reis indruk. Een gevoel van vakantie en veiligheid. Beide websited hebben een lichtelijk verschillend kleurenpalet maar geeft toch goed de sfeer weer die ik graag zoek.

WEBSITE: WWW.ADVENTURE.TRAVEL.COM

WEBSITE: WWW.ROADSIDEHERITAGE.ORG

Page 22: CRIA VSD - Design Study Document (Travellu)

22DESIGN STUDY TRAVELLU

COLORDe websites op de vorige pagina komen wat kleurgebruik redelijk dicht bij elkaar in de buurt.

Om bovenstaande websites eens bij elkaar te voegen heb ik 3 kleurenpaletten gemaakt. Hierbij ook wat woorden wat in mij opkomen als ik naar die kleuren kijk. Zo heb ik ook meerdere personen gevraagt om hierover wat woorden te geven.

GROEN, ECO, NATUURLIJK, DUURZAAMRUSTGEVEND, JONG, FRIS, GEZOND, POSITIEF

ORANJE, SPORTIEF, SOCIAAL, OPTIMISTISCH, WARMMET ELKAAR, SNEL

Page 23: CRIA VSD - Design Study Document (Travellu)

23 DESIGN STUDY TRAVELLU

COLOR

BRUIN, AARDE, SAFARI, AVONDTUUR, ONDEKKEN, REIZENSPANNING MODDER,

Eigen uitwerking

De uitwerking van de kleuren heb ik eigenlijk pas gedaan nadat ik begonnen ben met het grid. Bij het het grid kon ik al snel een eerste concept van mijn website maken om alle overige te behandelen elementen te testen in hun uitstraling en contrast met de website.

Page 24: CRIA VSD - Design Study Document (Travellu)

24DESIGN STUDY TRAVELLU

COLORAls oplossing heb ik kleuren gecombineerd. Ik heb een andere kleur groen gebruikt. De kleur groen die ik nu gebruikt heb is wat avontuurlijker en vooral minder “overdreven” duurzaam.

Deze groene kleur te combineren met de avondtuurlijke lichtbruin tot bruine kleur krijg je een een zachte, lieve uitstraling. Het kleurenpalet waar ik uiteindelijk het meest tevreden over ben is als volgt:

Dit worden dan ook de twee hoofdkleuren:

#24A998 #A6A352

Page 25: CRIA VSD - Design Study Document (Travellu)

25 DESIGN STUDY TRAVELLU

COLOR

Het is natuurlijk zo dat de achtergrond hier ontzettend belangrijk is. Daarom behandel ik dat in het volgende hoofdstuk. (Photography)

Page 26: CRIA VSD - Design Study Document (Travellu)

26DESIGN STUDY TRAVELLU

TYPOGRAPHYVoor typography heb ik allerlei verschillende fonts in beeld gebracht. Hierbij kun je denken aan verschillende soorten lettertypen zoals geometrische, sans-serif, serif, old-style, modern en noem maar op. Voordat ik dit gedaan heb ben ik gaan kijken wat andere websites gebruiken. Hierbij gaat het vooral om reiswebsites. Wat ik vooral ontdekt heb is dat er gewoon echt ver-schillende lettertypen gebruik worden. Er zijn bijvoorbeeld websited die er erg chique uitzien en bijvoorbeeld een old-style met serif lettertype gebruiken maar ook strakke lettertypen (ge-ometrisch en de humanist.) Daarnaast ben ik ook websited tegengekomen die wat avondtu-urlijker overkomen en een hand getekent lettertype gebruiken.

Chique websites met een serif lettertype:

Websites die over het algemeen strakke lettertypen gebruiken (Zoals menu-balken etc.)

WEBSITE: WWW.WAlDoRfASToRIA3.HIlToN.Com WEBSITE: WWW.CElTICCASTlES.Com/CASTlES/THoRNBuRy/

WEBSITE: WWW.WAlDoRfASToRIA3.HIlToN.Com WEBSITE: WWW.WyTHEHoTEl.Com/

Page 27: CRIA VSD - Design Study Document (Travellu)

27 DESIGN STUDY TRAVELLU

TYPOGRAPHY

WEBSITE: WWW.WHEEllIfETRAVEl.Com/WEBSITE: WWW.TRAVEloREgoN.Com/

Tot slotte zie je websites die hele overdreven lettertypen gebruiken en erg avondtuurlijk over-komen.

Ik ben van mening dat het gebruik van old-style en serif lettertypen voor de Travellu website niet zou passen, aangezien Travellu zich richt op een jongere doelgroep en juist avondtuurlijk is. Een old-style en serif lettertype weergeeft een chique 5 sterren beeld bijvoorbeel in een hotel in Thailand. Daarom ben ik me gaan focussen op strakke dunne lettertypen. Als eerst vergelijk ik allerlei lettertypen onder de fontfamily geometrisch en humanist.

Page 28: CRIA VSD - Design Study Document (Travellu)

28DESIGN STUDY TRAVELLU

TYPOGRAPHY#Montserrat Regular

Henis ese pa voloratemque cus ent re, aboresequis

del explita voluptatis ma cusdam, temporeptate

repero coreicto maion con non et id eos unt om-

nihit iuscit molorum aliam ad explacea doluptus,

optat quae volum comnis aligeniatur?

#Montserrat Bold

Henis ese pa voloratemque cus ent re, aboresequis

del explita voluptatis ma cusdam, temporeptate

repero coreicto maion con non et id eos unt om-

nihit iuscit molorum aliam ad explacea doluptus,

optat quae volum comnis aligeniatur?

#Open-Sans Light

Henis ese pa voloratemque cus ent re, aboresequis del

explita voluptatis ma cusdam, temporeptate repero core-

icto maion con non et id eos unt omnihit iuscit molorum

aliam ad explacea doluptus, optat quae volum comnis

aligeniatur?

#Open-Sans Bold

Henis ese pa voloratemque cus ent re, aboresequis

del explita voluptatis ma cusdam, temporeptate

repero coreicto maion con non et id eos unt omnihit

iuscit molorum aliam ad explacea doluptus, optat

quae volum comnis aligeniatur?

#Neou light (caps only)

Henis ese pa voloratemque cus ent re, abore-

sequis del explita voluptatis ma cusdam, tem-

poreptate repero coreicto maion con non et

id eos unt omnihit iuscit molorum aliam ad

explacea doluptus, optat quae volum comnis

aligeniatur?

#Neou Bold (caps only)

Henis ese pa voloratemque cus ent re, abore-

sequis del explita voluptatis ma cusdam, tem-

poreptate repero coreicto maion con non et

id eos unt omnihit iuscit molorum aliam ad

explacea doluptus, optat quae volum comnis

aligeniatur?

#Titillium Light

Henis ese pa voloratemque cus ent re, aboresequis del explita

voluptatis ma cusdam, temporeptate repero coreicto maion

con non et id eos unt omnihit iuscit molorum aliam ad expla-

cea doluptus, optat quae volum comnis aligeniatur?

#Titillium Bold

Henis ese pa voloratemque cus ent re, aboresequis del

explita voluptatis ma cusdam, temporeptate repero coreicto

maion con non et id eos unt omnihit iuscit molorum aliam ad

explacea doluptus, optat quae volum comnis aligeniatur?

#Roboto Light

Henis ese pa voloratemque cus ent re, aboresequis del

explita voluptatis ma cusdam, temporeptate repero coreicto

maion con non et id eos unt omnihit iuscit molorum aliam

ad explacea doluptus, optat quae volum comnis aligeniatur?

#Roboto Bold

Henis ese pa voloratemque cus ent re, aboresequis del

explita voluptatis ma cusdam, temporeptate repero core-

icto maion con non et id eos unt omnihit iuscit molorum

aliam ad explacea doluptus, optat quae volum comnis

aligeniatur?

Page 29: CRIA VSD - Design Study Document (Travellu)

29 DESIGN STUDY TRAVELLU

TYPOGRAPHYNu ga ik lettertypen vergelijken die heel erg anders zijn. Lettertypen die er misschien minder volwassener uit zien maar wel erg avondtuurlijk over komen. (Deze lettertype zou ik alleen kun-nen gebruiken als titels omdat de tekst erg slecht te lezen is in de vorm van handgeschreven.) Daarom combineer ik deze titels met de stukken tekst van de linker pagina. Hierdoor krijg je combinaties te zien die wellicht erg mooi kunnen zijn.

#Honey ScriptHenis ese pa voloratemque cus ent re, aboresequis

del explita voluptatis ma cusdam, temporeptate

repero coreicto maion con non et id eos unt om-

nihit iuscit molorum aliam ad explacea doluptus,

optat quae volum comnis aligeniatur?

#Always Forever

Henis ese pa voloratemque cus ent re, aboresequis

del explita voluptatis ma cusdam, temporeptate

repero coreicto maion con non et id eos unt om-

nihit iuscit molorum aliam ad explacea doluptus,

optat quae volum comnis aligeniatur?

#Moon FLower (caps only)

Henis ese pa voloratemque cus ent re, aboresequis del

explita voluptatis ma cusdam, temporeptate repero core-

icto maion con non et id eos unt omnihit iuscit molorum

aliam ad explacea doluptus, optat quae volum comnis

aligeniatur?

#The Chicken Love Story

Henis ese pa voloratemque cus ent re, aboresequis

del explita voluptatis ma cusdam, temporeptate

repero coreicto maion con non et id eos unt omnihit

iuscit molorum aliam ad explacea doluptus, optat

quae volum comnis aligeniatur?

#A Bit of Flaire

Henis ese pa voloratemque cus ent re, abore-

sequis del explita voluptatis ma cusdam, tem-

poreptate repero coreicto maion con non et

id eos unt omnihit iuscit molorum aliam ad

explacea doluptus, optat quae volum comnis

#MathildeHenis ese pa voloratemque cus ent re, abore-

sequis del explita voluptatis ma cusdam, tem-

poreptate repero coreicto maion con non et

id eos unt omnihit iuscit molorum aliam ad

explacea doluptus, optat quae volum comnis

aligeniatur?

Page 30: CRIA VSD - Design Study Document (Travellu)

30DESIGN STUDY TRAVELLU

TYPOGRAPHYAls meest geschikte lettertypen onder de fontfamily geomatric en humanist heb ik Open-Sans en Titillium. Deze lettertype ga ik soiezo gebruiken als plain tekst.

WELCOME TO TRAVELLU (Open-Sans) (Caps)

Welcome to Travellu (Open-Sans)

WELCOME TO TRAVELLU (Titillium) (Caps)

Welcome to Travellu (Titillium)

Voor eventuele titels boven de stukken tekst kan ik gebruik maken van een handgeschreven lettertype. De lettertype die ik het meest geschikt vond waren:

Welcome to Travellu (Mathilde)

Welcome to Travellu (moon fLower)

Titel: Open-Sans Tekst: Open-Sans

WELCOME TO TRAVELLU!

Henis ese pa voloratemque cus ent re,

aboresequis del explita voluptatis ma

cusdam, temporeptate repero coreicto

maion con non et id eos unt omnihit iuscit

molorum aliam ad explacea doluptus,

optat quae volum comnis aligeniatur?

Onder en op de volgende pagina heb ik een vergelijking gemaakt van de verschilende let-tertypen. Aangezien ik dit stuk geschreven heb nadat ik onderstaande voorbeelden gemaakt heb, ben ik er erg van overtuigd dat ik de laatste optie waarbij ik een avondtuurlijke titel letter-type gebruik, erg gaaf uitkomt op mijn pagina. Ik vind het een stuk vrolijker sfeer met zich mee brengen en dat komt beslist door de titel lettertype.

Page 31: CRIA VSD - Design Study Document (Travellu)

31 DESIGN STUDY TRAVELLU

TYPOGRAPHY

WELCOME TO TRAVELLU!

Henis ese pa voloratemque cus ent re, abore-sequis del explita voluptatis ma cusdam, temporeptate repero coreicto maion con non et id eos unt omnihit iuscit molorum aliam ad explacea doluptus, optat quae volum comnis aligeniatur?

Titel: Titillium Tekst: Titillium

Titel: Mathilde Tekst: Titillium

Welcome To TravelluHenis ese pa voloratemque cus ent re, abore-sequis del explita voluptatis ma cusdam, temporeptate repero coreicto maion con non et id eos unt omnihit iuscit molorum aliam ad explacea doluptus, optat quae volum comnis aligeniatur?

Titel: Moon Flower Tekst: Titillium

Welcome To Travellu

Henis ese pa voloratemque cus ent re, abore-sequis del explita voluptatis ma cusdam, temporeptate repero coreicto maion con non et id eos unt omnihit iuscit molorum aliam ad explacea doluptus, optat quae volum comnis aligeniatur?

Page 32: CRIA VSD - Design Study Document (Travellu)

32DESIGN STUDY TRAVELLU

PHOTOGRAPHYIn dit hoofdstuk bespreek ik de de afbeelingen en foto’s die op de Travellu site weergegeven zulllen worden. Uiteraard zijn foto’s en afbeeldingen erg belangrijk aangezien dat de doel-groep wel tot zich moet trekken en getriggerd worden.

Ik behandel waarom bepaalde foto’s wel en niet op de website zullen komen. Daarnaast zou het erg van toepassing kunnen zijn dat er verschillende foto’s voor de doelgroepen weerge-geven worden. De doelgroepen van Travellu zijn: “Reiziger die iets van de wereld wil zien”, “Reiziger met een educatief doel” en tot slotte “Reiziger die opzoek is naar rust”.

Ik vind het erg belangrijk dat de foto’s erg bij de site passen. Daarmee bedoel ik dat de meeste foto’s waarschijnlijk nog lichtelijk gephotoshopt moeten worden willen ze er echt bij passen. Ik vind het belangrijk dat foto’s niet te druk zijn. Denk aan groepsfoto’s waarbij er allerlei mensen verschillende kleuren kleding aanhebben. Vooral kleur is een belangrijk aspect als het gaat om foto’s. De foto’s moeten een geleidelijke kleurenpatroon hebben.

Voorbeelden van foto’s die ik waarschijnlijk zal gaan gebruiken:

Page 33: CRIA VSD - Design Study Document (Travellu)

33 DESIGN STUDY TRAVELLU

PHOTOGRAPHY

Page 34: CRIA VSD - Design Study Document (Travellu)

34DESIGN STUDY TRAVELLU

PHOTOGRAPHYDit zou uiteindelijk bijvoorbeeld op de ‘discover’ pagina eruit kunnen zien als:

Als achtergrond van mijn webpagina heb ik iets gemaakt wat ik al erg lang in beeld had. Ik ben zelf gewoon zo enthousiast over dit plaatje dat ik dit erg graag wil gebruiken. Ik heb wel het ander eraan moeten photoshoppen wil het echt passen, maar uiteindelijk was ik toch erg blij met deze achtergrond. Ik heb dit ook al bij het hoofdstuk over kleur besproken.

Page 35: CRIA VSD - Design Study Document (Travellu)

35 DESIGN STUDY TRAVELLU

ICONSHet gebruik van iconen zorgt ervoor dat informatie erg snel doorgegeven wordt. En dat nog eens zonder tekst. Het kost ook nog eens minder ruimte en het is erg mooi te combineren met andere iconen, mits je dezelfde stijl toepast. Met het idee voor iconen van Travellu ben ik wat gaan zoeken. Iconen kunnen informatie aanduiden, maar ook officiele iconen zoals social media bijvoorbeeld.

Bij bovenstaande afbeelding wordt bijvoorbeeld gebruikt gemaakt van dezelfde vormgeving bij symbolen en iconen.

Bij de afbeelding hier weer boven wordt dat bijvoorbeeld niet gedaan. Ik merk dat er extreem veel websites zijn die de iconen in de zelfde style gebruiken. Daarmee bedoel ik dat de iconen omgevormt worden tot dezelfde kleuren (combinaties).

Ik heb wat iconen gemaakt die ik weergegeven wil hebben op de Travellu website. Onder-staande voorbeelden zijn slechts een voorbeeld maar zullen waarschijnlijk wel onderdeel worden uiteindelijk. Het idee van maar een enkele kleur te gebruiken staat me erg aan en past bij de website.

WEBSITE: HTTp://VISITSANANToNIo.Com/

WEBSITE: HTTp://WWW.TRAVElSmARTHAWAII.Com/EN/

Page 36: CRIA VSD - Design Study Document (Travellu)

36DESIGN STUDY TRAVELLU

ICONSBovenstaande iconen gaan over het vervoer wat mogelijk is (en de reistijd) van de desbetref-fende bestemming. In onderstaande voorbeeld gaat het over Australie.

Persoonlijk vind ik het gebruik van ronde iconen niet pasbaar bij de website. De vierkante in tegenstelling vind ik wel wat hebben. Ik kan persoonlijk nog niet goed kiezen tussen vierkante en zonder achterraster. Dus gewoon alleen het icoon zelf. Ook over kleurgebruik van de iconen ben ik nog niet tevreden.

Page 37: CRIA VSD - Design Study Document (Travellu)

37 DESIGN STUDY TRAVELLU

ICONSHet gebruik van iconen zorgt ervoor dat informatie erg snel doorgegeven wordt. En dat nog eens zonder tekst. Het kost ook nog eens minder ruimte en het is erg mooi te combineren met andere iconen, mits je dezelfde stijl toepast. Met het idee voor iconen van Travellu ben ik wat gaan zoeken. Iconen kunnen informatie aanduiden, maar ook officiele iconen zoals social media bijvoorbeeld.

Bij bovenstaande afbeelding wordt bijvoorbeeld gebruikt gemaakt van dezelfde vormgeving bij symbolen en iconen.

Bij de afbeelding hier weer boven wordt dat bijvoorbeeld niet gedaan. Ik merk dat er extreem veel websites zijn die de iconen in de zelfde style gebruiken. Daarmee bedoel ik dat de iconen omgevormt worden tot dezelfde kleuren (combinaties).

Ik heb wat iconen gemaakt die ik weergegeven wil hebben op de Travellu website. Onder-staande voorbeelden zijn slechts een voorbeeld maar zullen waarschijnlijk wel onderdeel worden uiteindelijk. Het idee van maar een enkele kleur te gebruiken staat me erg aan en past bij de website.

WEBSITE: HTTp://VISITSANANToNIo.Com/

WEBSITE: HTTp://WWW.TRAVElSmARTHAWAII.Com/EN/

Page 38: CRIA VSD - Design Study Document (Travellu)

38DESIGN STUDY TRAVELLU

MOBILETegenwoordig zit iedereen op Smartphones, Tablets en allerlei andere mobile apparaten waarop kleinere versies van websites worden weergegeven. Steeds zie je dat organisaties en bedrijven een aparte mobiele applicatie of website hebben. Een mobiele website is meestal bijna exact het zelfde als de gewone website, maar is meestal anders ingericht waardoor het overzichterlijk is en de items zich aan het scherm aanpassen.

Toch zie je steeds meer dat de meest onbekende bedrijven of organisaties een echte appli-catie krijgen. Applicaties en mobiele weergaven is gewoon toekomst. Daarom heb ik besloten ook een mobiele applicatie versie aan te bieden van Travellu. Dit is een applicatie die te downloaden zal zijn in de appstores van alle besturingssystemen (Android, iOS, Windows).

Twee applicaties van derden waar ik wel raad mee wist. Door deze twee applicaties heb ik een beeld van hoe ik de applicatie van Travellu wil vormgeven.

Van bovenstaande afbeeldingen wil ik van de linker de navigatie overnemen. Dit kom je vaak tegen bij applicaties. Bij de rechter afbeelding vind ik het erg gaaf om een openings pagina te hebben. Je ziet dus een openingspagina met nog alleen Travellu. Zodra je op het scherm klikt, navigeert de applicatie naar de hoofdpagina.

TWITTER muZk

Page 39: CRIA VSD - Design Study Document (Travellu)

39 DESIGN STUDY TRAVELLU

MOBILE

De applicatie zal waarschijnlijk dienen voor de reiziger zelf. Ik wil met Travellu hier de commu-nicatieve kant terug laten komen, waar reizigers met elkaar kunnen chatten en “travelluen”. Ze blijven met elkaar in contact doormiddel van berichtjes naar elkaar toe of in het algemeen.

Van bovenstaande afbeeldingen wil ik van de linker de navigatie overnemen. Dit kom je vaak tegen bij applicaties. Bij de rechter afbeelding vind ik het erg gaaf om een openings pagina te hebben. Je ziet dus een openingspagina met nog alleen Travellu. Zodra je op het scherm klikt, navigeert de applicatie naar de hoofdpagina.

Page 40: CRIA VSD - Design Study Document (Travellu)

40DESIGN STUDY TRAVELLU

GESTALTGestalt is vaak te zien in een stukje creativiteit van een website. Het voegt een stukje toe aan een website en het trekt je aandacht.

Ik vind het gaaf hoe sommige websites met hun afbeeldingen omgaan. Op bovenstaande websites zie je voorbeelden van een “Proximity” gestalt. Heeft geeft naar mijn mening een verbinding met de rest van de pagina (De achtergrond bijvoorbeeld, of misschien wel met de tekst). Zelf zie ik altijd erg snel wat de mogelijkheden zijn met het creatief spelen van afbeeld-ingen. Vaak verwerk ik dat eigenlijk zelf al in het photoshop werk van te voren. Het idee van bovenstaande websites zou in kleine mate erg goed kunnen vallen op mijn Travellu website.

Zo heb ik bijvoorbeeld bij de discover pagina waar op elk deel een bepaald land uitgelicht wordt iets gedaan met de map van dat land. (Een kleine toevoeging waar je blauwe lijnen hoe bijvoorbeeld de vliegtuigen vliegen.

WEBSITE: WWW.LIVE-AFRICA.NET WEBSITE: WWW.MARKER9DESIGN.COM/

Page 41: CRIA VSD - Design Study Document (Travellu)

41 DESIGN STUDY TRAVELLU

GESTALTAangezien dit niet eens zo heel interessant was, kwam ik op een nieuw idee. Ik had bij onder de kaart van Australie een vliegtuig en een boot met hoeveel de kosten zijn om daar heen te gaan. (Qua vervoer). Nou kwam ik op het volgende idee.

Dit vind ik een leuke toevoeging en toch blijft de website erg rustig.

Een geheel ander idee voor gestalt, is het combineren van het logo met de achtergrond. Waar ik het vandaan heb geinspireerd weet ik niet meer maar ik vond het altijd wel een grappig idee, mits je het goed laat weergeven.

Het probleem waar je dan alleen mee zit is dat je een oplossing moet vinden voor het scrollen van de pagina. De bedoeling was dat de alles naar boven scrolled en de achtergrond blijft staan. (De navigatie scrolled wel mee). Nu zal er dus een half Travellu logo naar boven schu-iven.

Page 42: CRIA VSD - Design Study Document (Travellu)

42DESIGN STUDY TRAVELLU

FEEDBACK & REFLECTIEFeedback

Ik heb echt ontzettend veel gehad aan de feedback die ik tijdens de Design Study kreeg.Al een lange tijd kan ik feedback gedeeltelijk negatief op me nemen. Vanaf vorig semester (GAME) is dat deels verandered. Toen begon ik echt te merken dat ik er wel heel veel aan heb. En dat bleek, want zoals nu kan ik echt verder en vooral verder met mijn definitieve ontwerp. Er zijn wel bepaalde keuzes waar ik nog niet helemaal tevreden over ben maar ik denk wel dat het echt heel erg helpt. Ik weet nu ook sneller hoe ik iets kan verbeteren.

Reflectie

Tijdens het ontwerpprocess (Design Study) ben ik tegen meerdere punten aangelopen. Ik vond het in eerste instantie moeilijk om inspiratie te vinden. Zo heb ik bijvoorbeeld echt een halfuur lopen zoeken naar iets wat ik wil. Maar achteraf snap ik beter dat je gewoon sneller vanuit iets moet maken en verzinnen. Want op die manier kom ik weer op nieuwe ideeen.

Page 43: CRIA VSD - Design Study Document (Travellu)

43 DESIGN STUDY TRAVELLU

BRONNENLIJSTAfbeeldingen:

Gedownload op 15 Oktober 2014, vanhttp://upload.wikimedia.org/wikipedia/commons/2/20/Backpacking_in_Grand_Teton_NP-NPS.jpg

Gedownload op 16 Oktober 2014, vanhttp://thekitchenrag.com/wp-content/uploads/blogger/-59YXEmZPOLM/UEWY2bcYsJI/AAAAAAAAAWg/vBuQaglmAYU/s1600/IMG_4923.jpg

Gedownload op 16 Oktober 2014, vanhttp://halolux.com/wp-content/uploads/2013/02/bakcpacking1-1024x768.jpg