Design Document VSD

Door: Marcel Loeffen Studentnummer: 200968508 Docent: Emiel Ruis Vak: Visual Screen Design Datum: 12-05-2012

Inhoudsopgave Inhoudsopgave 2 Inleiding 3 Research 4 Concept 5 Navigatie 6 Kleuren 7 Typografie

8 Schetsen 9 Designs 10 Reflectie

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

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 webpagina’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

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

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

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.

Ik heb daarna vanuit de designbriefing de website, het logo en de casus zoals 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.

Ik heb onder andere een persona uitgewerkt en een uitgebreid profiel beschreven 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 projecten waren bij beide te vinden.

4

Concept Een Rich Internet Application is; Seamless, Focused, Connected en Aware.

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

Op een bepaald moment in dit proces, waarbij ik daarvoor mijn onderzoek had afgerond speelde ik met het idee om op een, interactieve manier informatie te vinden op de website.

Gebruikers maken in het dagelijks leven veel gebruik van de zoekmachine google en daardoor kreeg ik een idee om een grafisch, interactieve zoekmachine te implementeren.

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

Eenvoud op de website, maar ook de “circles� zorgen ervoor dat de gebruiker 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 kleurverandering 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

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, projecten, 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 library op www.welie.com.

Het belangrijkste pattern is de interactieve search result cloud waar, gebruikers 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.

6

Kleuren Na een uitgebreide kleurenstudie heb ik ervoor gekozen om monochrome 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 kleurverandering 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 wanneer iemand over een knop heen gaat kleurt het lettertype wit. Dit gebeurd omdat iemand zo duidelijk weet dat hij erop kan klikken.

7

Typografie Dit hele document heeft het font Verdana. Dit is een font van de Humanist 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.

8

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

9

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 broodkruimelpad. 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 organisatie.

De zoekmachine werkt als volgt: Er bestaat een mogelijkheid op de site om in te loggen en je profiel te beheren. Je kan, wanneer je bent ingelogd 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 gekoppeld 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 gebruiker 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 prominente locaties 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 openingstijden 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 verdiepen 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 waren 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