CRIA VSD - Design Study Document (Travellu) by Tom Pijnappel

TRAVELLU Design Study CRIA VSD

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

VOORWOORD Travellu 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.

DESIGN STUDY TRAVELLU

INHOUDSOPGAVE Voorpagina

Voorwoord

Design Study

Grid

Navigation

Forms

Color

Typography

Photography

Icons

Mobile

Gestalt

Feedback & Reflectie

Bronnenlijst

DESIGN STUDY TRAVELLU

GRID

WEBSITE: WWW.VISITBRAZIL.COM

Bovenstaande website viel meteen op. Een strakke en chique uitstraling die zelf erg kan waarderen. Wat hier een â&#x20AC;&#x2DC;gridâ&#x20AC;&#x2122; 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.

Uitgelicht Item Ik vind het zelf erg gaaf om je pagina te introduceren op een minimalistische wijze. Misschien is dit nog wel iets te minimalistisch. Op de volgende pagina zie je hoe ik het grid hiervan zie.

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.

DESIGN STUDY TRAVELLU

GRID

Hierboven heb ik een aantal blokken met text toegevoegd. Het oogt direct al iets â&#x20AC;&#x2DC;vollerâ&#x20AC;&#x2122;. 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.

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 hebben. 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 desbetreffende doelgroep kan aantreffen.

Uitgelicht Item

DESIGN STUDY TRAVELLU

GRID

Ook hier heb ik vrijwel het hele grid systeem overgenomen.

DESIGN STUDY TRAVELLU

GRID

DESIGN 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 â&#x20AC;&#x2DC;basicâ&#x20AC;&#x2122; 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 inzoomen 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 experiementeren.

DESIGN STUDY TRAVELLU

NAVIGATION Eigen 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.

DESIGN STUDY TRAVELLU

NAVIGATION Dezelfde 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).

DESIGN STUDY TRAVELLU

NAVIGATION Uiteindelijik kan je ook nog iets doen met de â&#x20AC;&#x2DC;Hoverâ&#x20AC;&#x2122;. 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.

DESIGN 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 bijzonders, maar het bracht me wel op een idee voor wat ik wil. Het uigelichte item is de Navigatie. 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.

DESIGN STUDY TRAVELLU

NAVIGATION Het 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 verticaal menu zelf uitgewerkt en toegepast heb, ben ik toch in de twijfel gekomen. Het is dus:

DESIGN STUDY TRAVELLU

FORMS 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 informatie 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 uitgebreid 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.

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

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.

DESIGN STUDY TRAVELLU

FORMS Eigen uitwerking

DESIGN STUDY TRAVELLU

FORMS

DESIGN STUDY TRAVELLU

FORMS Hier 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 â&#x20AC;&#x2DC;alignedâ&#x20AC;&#x2122; zijn.

DESIGN STUDY TRAVELLU

COLOR Hoewel de merkwaarden “Together”, “Adventure” en “Total Experience” zijn, wil ik dat in Travellu vooral de Adventure merkwaarde terug te zien moet zijn in het kleurgebruik van de website. 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:

WEBSITE: WWW.FAIRTRADETOURISM.COM

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.

DESIGN STUDY TRAVELLU

COLOR Vervolgens ben ik gaan zoeken naar websites die meer een ‘avontuurlijke’ sfeer in zich hebben. 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

DESIGN STUDY TRAVELLU

COLOR De 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, DUURZAAM RUSTGEVEND, JONG, FRIS, GEZOND, POSITIEF

ORANJE, SPORTIEF, SOCIAAL, OPTIMISTISCH, WARM MET ELKAAR, SNEL

DESIGN STUDY TRAVELLU

COLOR

BRUIN, AARDE, SAFARI, AVONDTUUR, ONDEKKEN, REIZEN SPANNING 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.

DESIGN STUDY TRAVELLU

COLOR Als 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 â&#x20AC;&#x153;overdrevenâ&#x20AC;? 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

DESIGN STUDY TRAVELLU

#A6A352

COLOR

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

DESIGN STUDY TRAVELLU

TYPOGRAPHY Voor 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 verschillende 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 (geometrisch en de humanist.) Daarnaast ben ik ook websited tegengekomen die wat avondtuurlijker overkomen en een hand getekent lettertype gebruiken.

Chique websites met een serif lettertype:

WEBSITE: www.waldorfastoria3.hilton.com

WEBSITE: www.celticcastles.com/castles/thornbury/

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

WEBSITE: www.waldorfastoria3.hilton.com

DESIGN STUDY TRAVELLU

WEBSITE: WWW.wythehotel.com/

TYPOGRAPHY Tot slotte zie je websites die hele overdreven lettertypen gebruiken en erg avondtuurlijk overkomen.

WEBSITE: www.traveloregon.com/

WEBSITE: www.wheellifetravel.com/

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.

DESIGN STUDY TRAVELLU

TYPOGRAPHY #Montserrat Regular

#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

#Open-Sans Bold

Henis ese pa voloratemque cus ent re, aboresequis del

Henis ese pa voloratemque cus ent re, aboresequis

explita voluptatis ma cusdam, temporeptate repero core-

del explita voluptatis ma cusdam, temporeptate

icto maion con non et id eos unt omnihit iuscit molorum

repero coreicto maion con non et id eos unt omnihit

aliam ad explacea doluptus, optat quae volum comnis

iuscit molorum aliam ad explacea doluptus, optat

aligeniatur?

quae volum comnis aligeniatur?

#Neou light (caps only)

#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

#Titillium Bold

Henis ese pa voloratemque cus ent re, aboresequis del explita voluptatis ma cusdam, temporeptate repero coreicto maion

Henis ese pa voloratemque cus ent re, aboresequis del

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

explita voluptatis ma cusdam, temporeptate repero coreicto

cea doluptus, optat quae volum comnis aligeniatur?

maion con non et id eos unt omnihit iuscit molorum aliam ad explacea doluptus, optat quae volum comnis aligeniatur?

#Roboto Light

#Roboto Bold

Henis ese pa voloratemque cus ent re, aboresequis del

explita voluptatis ma cusdam, temporeptate repero coreicto

explita voluptatis ma cusdam, temporeptate repero core-

maion con non et id eos unt omnihit iuscit molorum aliam

icto maion con non et id eos unt omnihit iuscit molorum

ad explacea doluptus, optat quae volum comnis aligeniatur?

aliam ad explacea doluptus, optat quae volum comnis aligeniatur?

DESIGN STUDY TRAVELLU

TYPOGRAPHY Nu 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 kunnen 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 Script

#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)

#The Chicken Love Story

Henis ese pa voloratemque cus ent re, aboresequis del

Henis ese pa voloratemque cus ent re, aboresequis

explita voluptatis ma cusdam, temporeptate repero core-

del explita voluptatis ma cusdam, temporeptate

icto maion con non et id eos unt omnihit iuscit molorum

repero coreicto maion con non et id eos unt omnihit

aliam ad explacea doluptus, optat quae volum comnis

iuscit molorum aliam ad explacea doluptus, optat

aligeniatur?

quae volum comnis aligeniatur?

#A Bit of Flaire

#Mathilde

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

explacea doluptus, optat quae volum comnis aligeniatur?

DESIGN STUDY TRAVELLU

TYPOGRAPHY Als 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 Welcome to Travellu

(Mathilde) (moon fLower)

Onder en op de volgende pagina heb ik een vergelijking gemaakt van de verschilende lettertypen. 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 lettertype 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.

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?

DESIGN STUDY TRAVELLU

TYPOGRAPHY Titel: Titillium

Tekst: Titillium

Titel: Mathilde

Tekst: Titillium

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?

Titel: Moon Flower

Tekst: Titillium

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?

DESIGN STUDY TRAVELLU

PHOTOGRAPHY In 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 doelgroep 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 weergegeven 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:

DESIGN STUDY TRAVELLU

PHOTOGRAPHY

DESIGN STUDY TRAVELLU

PHOTOGRAPHY Dit zou uiteindelijk bijvoorbeeld op de â&#x20AC;&#x2DC;discoverâ&#x20AC;&#x2122; 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.

DESIGN STUDY TRAVELLU

ICONS Het 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.

WEBSITE: http://visitsanantonio.com/

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

WEBSITE: http://www.travelsmarthawaii.com/en/

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. Onderstaande 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.

DESIGN STUDY TRAVELLU

ICONS Bovenstaande iconen gaan over het vervoer wat mogelijk is (en de reistijd) van de desbetreffende 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.

DESIGN STUDY TRAVELLU

WEBSITE: http://visitsanantonio.com/

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

WEBSITE: http://www.travelsmarthawaii.com/en/

DESIGN STUDY TRAVELLU

MOBILE Tegenwoordig 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 applicatie 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.

TwiTTER

MUZk

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.

DESIGN STUDY TRAVELLU

MOBILE

De applicatie zal waarschijnlijk dienen voor de reiziger zelf. Ik wil met Travellu hier de communicatieve kant terug laten komen, waar reizigers met elkaar kunnen chatten en â&#x20AC;&#x153;travelluenâ&#x20AC;?. Ze blijven met elkaar in contact doormiddel van berichtjes naar elkaar toe of in het algemeen.

DESIGN STUDY TRAVELLU

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

WEBSITE: WWW.LIVE-AFRICA.NET

WEBSITE: WWW.marker9design.com/

Ik vind het gaaf hoe sommige websites met hun afbeeldingen omgaan. Op bovenstaande websites zie je voorbeelden van een â&#x20AC;&#x153;Proximityâ&#x20AC;? 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 afbeeldingen. 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.

DESIGN STUDY TRAVELLU

GESTALT Aangezien 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 schuiven.

DESIGN STUDY TRAVELLU

FEEDBACK & REFLECTIE Feedback 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.

DESIGN STUDY TRAVELLU

BRONNENLIJST Afbeeldingen:

Gedownload op 15 Oktober 2014, van http://upload.wikimedia.org/wikipedia/commons/2/20/Backpacking_in_Grand_Teton_NP-NPS. jpg Gedownload op 16 Oktober 2014, van http://thekitchenrag.com/wp-content/uploads/blogger/-59YXEmZPOLM/UEWY2bcYsJI/ AAAAAAAAAWg/vBuQaglmAYU/s1600/IMG_4923.jpg Gedownload op 16 Oktober 2014, van http://halolux.com/wp-content/uploads/2013/02/bakcpacking1-1024x768.jpg

DESIGN STUDY TRAVELLU