Door: Marcel LoeffenStudentnummer: 200968508

Docent: Emiel RuisVak: Visual Screen Design

Datum: 12-05-2012

Inhoudsopgave

Inhoudsopgave 2Inleiding 3Research 4Concept 5Navigatie 6Kleuren 7Typografie 8Schetsen 9Designs 10Reflectie 21

2

Inleiding

Footprint Travel: een reisorganisatie die avontuurlijke reizen aanbiedt in het Backpack+ segment. Jongeren, maar ook ouderen willen graag ervaringen van andere backpackers lezen en zijn daarbij actief opzoek naar media zoals foto’s en video’s die ter plekke zijn gemaakt.

Er is mij gevraagd om een Rich Internet Application voor jullie te ma-ken.

Na de onderzoeksfase ben ik begonnen met de design studie waarbij ik uitgebreid verschillende zaken heb toegelicht zoals navigatie, design patterns, kleur, lettertypen en beeldprincipes.

Ik wil, in dit document verschillende screenshots laten zien van de web-pagina’s en de dynamische onderdelen toelichten.

Het doel van dit document is dat u, de opdrachtgever een weloverwogen beslissing kan maken om over te gaan tot de bouw van de Rich Internet Application.

3

4

Research

Ik ben begonnen met een onderzoek te doen door eerst de opdracht te beschrijven.

Middels een interview dat ik met jul-lie organisatie heb afgenomen kwam ik er achter dat jullie een full service reisorganisatie zijn die haar klanten tijdens het hele reistraject wil inspire-ren.

In een vragenlijst die ik in een bekend backpackersforum zette wees een gebruiker mij erop dat de doelgroep die Footprint Travel voor ogen heeft, namelijk 28-40 ook nog ouder dan 40 jaar is en niet elke backpacker aan projecten mee wilt doen. Sommige gaan namelijk lokaal op onderzoek uit en kijken ter plekke wat ze kunnen doen voor de bevolking.

Ikhebdaarnavanuitdedesignbriefingdewebsite,hetlogoendecasuszoals die was uitgereikt door de opdrachtgever onderzocht en één van de belangrijkste bevindingen was de natuurlijke uitstraling van de huidige website en de duurzame kleur groen.

Daarna heb ik de doelstelling S.M.A.R.T. beschreven en dat de nieuwe website omstreeks 1 juni in gebruik wordt genomen.

Ikhebonderandereeenpersonauitgewerkteneenuitgebreidprofielbe-schreven van de “gemiddelde” backpacker.

Door concurrenten te analyseren kwamen we erachter hoe Kilroy en Shoestring zich op de markt begeven én bewegen.

Reiszigerservaringen, de koppeling met sociale media en duurzame pro-jecten waren bij beide te vinden.

Concept

Een Rich Internet Application is; Seamless, Focused, Connected en Awa-re.

Vanuit deze gedachte heb nagedacht over een geschikt design voor Footprint Travel.

Op een bepaald moment in dit proces, waarbij ik daarvoor mijn onder-zoek had afgerond speelde ik met het idee om op een, interactieve ma-nier informatie te vinden op de website.

Gebruikers maken in het dagelijks leven veel gebruik van de zoekmachi-negoogleendaardoorkreegikeenideeomeengrafisch,interactievezoekmachine te implementeren.

Deze zoekmachine zou het paradepaardje worden van de site en door het gebruik ervan zouden juiste, maar ook, voor de gebruiker interes-sante blogs tevoorschijn komen die, uiteindelijk leiden tot het boeken van een reis.

Eenvoud op de website, maar ook de “circles” zorgen ervoor dat de ge-bruiker al spelenderwijs de website ontdekt en daarbij actief gebruik maakt van de zoekmachine om uiteindelijk een reis te boeken.

Het natuurlijke wilde ik ook terug laten komen. Door een licht verloop toe te passen bij het veranderen van pagina werd op die manier de kleurverande-ring bij een kameleon nagebootst.

De applicatie is gemaakt voor mensen die thuis achter hun pc zitten en een minimale resolutie van 1024x768 pixels hebben.

Er wordt gebruik gemaakt van jQuery om de zoekachine interactief te maken.

5

6

Navigatie

De gebruiker komt op de homepage waar deze de keuze heeft uit een aantal buttons. Deze worden snel opgemerkt omdat ze rechtsboven in beeld staan.

De buttons zijn: Home, reizen, projec-ten, wie zijn wij? en de login button.

Linksboven staat het logo van Footrpint Travel en daaronder een breadcrumbs pad. Voor alle design patterns die je zo op de pagina’s in beeld ziet komen heb ik gebruik gemaakt van de pattern libra-ry op www.welie.com.

Het belangrijkste pattern is de interactieve search result cloud waar, ge-bruikers kunnen zoeken op allerlei blogs en vlogs die andere gebruikers door in te loggen toegevoegd hebben.

Deze zoekmachine staat in het mainframe, in het midden van de pagina.

Onderaan de pagina staat nog een button om naar de contactpagina te gaan waar men de telefoonnummers, bankgegevens en sociale media links kan vinden.

7

Kleuren

Na een uitgebreide kleurenstudie heb ik ervoor gekozen om monochro-me kleuren te gebruiken met een heel licht verloop. Hierop is de tekst goed leesbaar en de pagina’s komen daardoor duidelijk in beeld.

Ik heb me laten inspireren door de natuur. Het idee om de kleurveran-dering van een kameleon toe te passen sprak mij erg aan wanneer de

gebruiker van pagina verandert.

Ik heb gekeken naar mooie, natuurlijke en lichte kleuren die niet te fel mochten zijn.

Voor het lettertype heb ik de kleur zwart gebruikt en wan-neer iemand over een knop heen gaat kleurt het lettertype wit. Dit gebeurd omdat iemand zo duidelijk weet dat hij erop kan klikken.

8

Typografie

Dit hele document heeft het font Verdana. Dit is een font van de Huma-nist Sans familie. Dit is ook het lettertype wat, na onderzoek op de meest grote besturingssystemen ondersteund wordt.

Dit lettertype heb ik ook gebruikt voor de site.

De tekst heeft een 12pt hoogte en is een moderne, persoonlijke font.

Voor de titels van de kopjes gebruik ik een 14pt versie.

Voor het logo heb ik het lettertype Existence Light gekozen.

9

Schetsen

In een moleskine heb ik schetsen gemaakt en de pagina’s uitgewerkt.

Doordat ik al in een vroeg stadium begon met het schetsen van allerlei pagina’s kreeg ik een steeds beter beeld hoe de website eruit zou ko-men te zien en kon ik mij meer en meer toespitsen op het zoekscherm waar de belangrijkste interactie plaats zou vinden.

Ik heb in het begin vooral ook goed nagedacht wat ik zoal allemaal bij backpack reizen vond passen.

Designs

Een gebruiker komt op de homepage. Het oog valt gelijk op het logo en de zoekmachine. De gebruiker weet waar hij zich bevindt door het brood-kruimelpad. Hierdoor kan hij ook altijd een stap terug. Rechtsboven staan een aantal opties waar de gebruiker uit kan kiezen. Onderaan de pagina staat, zoals verwacht de manier om in contact te komen met de organisa-tie.

De zoekmachine werkt als volgt: Er bestaat een mogelijkheid op de site ominteloggenenjeprofieltebeheren.Jekan,wanneerjebentinge-logd een blog/vlog plaatsen waarbij je tekst, foto’s en video’s kan zetten. Het blog wordt uiteindelijk opgeslagen met 10 zogenaamde “tags”.

10

Deze “tags” zijn een soort kernwoorden die de gebruiker verzint.

Vervolgens komen deze kernwoorden in de database, waarbij ze gekop-peld zijn aan de, door de gebruiker ingevoerde blog.

Stel voor: de gebruiker zoekt in het zoekscherm op Bali. Er komen nu 5 bollen in beeld die allemaal woorden uit de blogs/vlogs bevatten.

Hieronder zie je hoe de homepage eruit komt te zien:

11

De gebruiker gaat nu met de muiscursor over Bali. Deze veranderd in een handje, wat eigenlijk inhoudt dat de bol versleepbaar is. Ook zie je stippellijntjes met de mogelijke combinaties. Het volgende scherm laat zien hoe dit er dan uit komt te zien:

De volgende stap is dat de gebruiker een bol gaat slepen. Hij klikt met de muis op Bali en deze verandert in een aparte muiscursor met vier punten.

12

De gebruiker wil deze keer de combinatie Bali en Winkel maken. In het volgende scherm ziet u hoe dit eruit komt te zien. In het scherm erna ziet u wat er met de bollen gebeurd wanneer de eerste combinatie is gemaakt.

13

Nu worden de bollen Bali en Winkel samengevoegd:

U ziet dat er een extra bol bijkomt. Deze heeft een zalmachtige kleur. Daarmee is ook een combinatie mogelijk. Deze combinatie gaat de ge-bruiker in het volgende scherm maken. De extra bol komt in beeld om de vijf bollen aan te vullen.

14

Hieronder wordt de laatste combinatie gemaakt met Bali-Winkel-Weer.

Bij het slepen verandert de cursor weer en de bol wordt groter en wordt samengevoegd met weer.

15

De 2e combinatie is gemaakt en de bol vliegt in hetzelfde scherm naar links. Nu wordt er een blog weergegeven. Onderin is er een extra button bijgekomen, namelijk “Reis boeken”.

Je hebt ook een tabblad om opnieuw te beginnen met zoeken. Zodra je daar op klikt krijg je het zoekscherm weer in beeld.

16

Hieronder ziet u de pagina reizen. Dit is het 2e tabblad linksboven.De gebruiker kan op deze pagina kiezen uit een aantal prominentelocaties waar Footprint Travel haar reizigers reizen aanbiedt.

Er is een optie onder elk stukje tekst om meer te lezen. Deze optie biedt ook meer informatie.

17

Het 3e tabblad laat de projecten zien. Dit is qua opzet hetzelfde als de pagina reizen.

18

Het 3e tabblad laat zien wie Footprint Travel is.

19

Onderaan zit de contact knop waar de gebruiker allerlei handige

contactgegevens kan vinden zoals het telefoonnummer, de openingstij-den en de bankgegevens.

20

Reflectie

Ik begon met dit semester omdat ik belangrijk vond om mijn kennis en kunde te vergroten wanneer ik in de toekomst wat meer interactieve webpagina’s zou gaan ontwerpen. Op mijn werk ben ik al veel bezig met het maken van allerlei pagina’s, maar ik merkte dat ik tijdens de lessen heel veel nieuwe informatie heb opgestoken waar ik echt wat aan had.

De pagina’s die ik op mijn werk maak zijn nogal statisch en het was een creatieve ervaring om tijdens de lessen van Emiel Ruis mijzelf te verdie-pen in allerlei stof waar ik echt wat mee kon.

Door de theorie die werd gegeven en ermee aan de slag te gaan tijdens de designstudie werd mijn niveau een heel eind omhoog gekrikt. Er wa-ren veel dingen die ik al wist, maar het merendeel van de lesstof was nog onbekend bij mij.

Doordat we al in een vroeg stadium met Indesign zijn gaan werken kwam ik erachter dat dit een heel goed programma is om pagian’s mee te ontwerpen. De combinatie met Photoshop is ideaal.

Ik heb mij aan de inleverdata gehouden en dit beviel mij heel goed. Daardoor hoefte ik niet op een laatste moment vanalles te doen.

Er waren genoeg momenten waar ik om feedback vroeg en Emiel heeft mij ook de goede weg op geholpen met het design dat ik voor ogen had.

Ik wil, in de toekomst andere documenten voor de, wat meer creatieve vakken ook in Indesign maken.

Al met al, een hele leuke course waar ik veel heb opgestoken en weinig moeite heb ondervonden om alles bij te houden.

21