Jelle lugten design study

Travellu DESIGNSTUDY CRIA VSD

Travellu Designstudy Naam: Jelle Lugten Studentnummer: 514331 Klas: CRIA -md Datum: 21/09/2013

INLEIDING Opdrachtgever Travellu wil een website aanbieden voor back-

Alle states zullen worden toegelicht (kleuren, fonts, iconen en

packers. Om een uniek concept neer te zetten voor Travellu zal

teksten).

eerst research gedaan moeten worden en een concept wordt uitgedacht.

Voortvloeiend uit voorafgaand onderzoek zal een kleurenpalet voor Travellu getoond worden.

In dit Design -document zal de casus van Travellu verder bekeken worden.

2

Uiteindelijk zal er worden bekeken hoe het ontwerp kan worden verbeterd door het toepassen van de “Gestalttheorie�.

Navigatiepatronen voor de applicatie worden onderzocht.

Daarna wordt toegelicht waar en hoe de gestalttheorie wordt

Hierbij maak ik onderscheid tussen hoofdnavigatie, subnavi-

toegepast.

gatie en eventuele secundaire navigatie patronen. Daarnaast wordt de navigatie voor een rijke interface ontworpen. Bij deze

Er zal een beeld concept getoond worden. Hoe kan er

ontwerpen van de navigatie zal ik alle dynamische onderdelen

omgegaan worden met verschillende beelden op een pagina?

van Travellu omschrijven. Er zal rekening worden gehouden met button-states, mouse-states, feedforward en feedback.

INHOUD Opdracht ................................................................................................... 4

Idneon.ch ......................................................................................... 50/51

Doelstelling .............................................................................................. 5 GESTALT NAVIGATIE

Windows 8 ....................................................................................... 54/55

Newquest.fr ......................................................................................... 8/9

Costumersuccess.org ................................................................... 56/57

Costumersuccess............................................................................... 10/11 Schuifpuzzel ...................................................................................... 12/13

BEELD

Proto.io ................................................................................................ 14/15

Idneon.ch ......................................................................................... 60/61

Nscs.org ............................................................................................... 16/17

Bulo.com .......................................................................................... 62/63

PAGINA -ONTWERP

ICONEN

Modernline.sk .................................................................................... 20/21

Top 9 at 99, infographic .............................................................. 66

Psd2html.com ................................................................................... 22/23

Uitgewerte iconen ........................................................................ 68/69

De Volkskrant, artikel; Rechts door zee .................................... 24/25 FEEDBACK FORMULIEREN

Feedback docent ............................................................................ 70

Travelta.nl .........................................................................................28/29

Feedback studiegenoten ............................................................. 71

Klm.nl .................................................................................................30/31

Feedback Raymond ....................................................................... 72

Schuifpuzzel -navigatie .............................................................. 32/33 SLOT KLEUR

Reflectie ............................................................................................. 73

Kleurenpaletten ............................................................................ 36/37

Bronnen ............................................................................................. 74/75

Loewydesign .................................................................................. 38/39

Bijlagen .............................................................................................. 76/77

TYPOGRAFIE What is your type ......................................................................... 42/43 Beelinereader.com ....................................................................... 44/45 Make killer e -mail designs ....................................................... 46/47 Koningaap.nl ................................................................................. 48/49

3

OPDRACHT Alle verzamelde informatie verzamel je in je digitale werkboek.

Een template voor dit werkboek vind je op online.han.nl. Je

Onderdeel 2 – Kleur en Typografie

noteert hierbij waarom en wat je interessant vindt aan het

Stel op basis van je concept, de in de les behandelde theorie

voorbeeld en vervolgens bekijk je op basis van je inspiratie

en eigen onderzoek een aantal mogelijke kleurpaletten samen

wat de mogelijkheden zijn voor jouw ontwerp. We gaan er van

voor Travellu. Geef aan hoe je de kleurpaletten wilt gebruiken

uit dat je meerdere opties uitprobeert en uitwerkt. Tijdens de

in je ontwerp. Denk hierbij o.a. aan onderscheid tussen

Designstudie ben je nog aan het divergeren!

primaire kleuren en steunkleuren.

Je legt je werkboek wekelijks voor aan of je docent ofwel je

Vanzelfsprekend licht je beide paletten toe met behulp van

designpanel.

onderzoek en inspiratie. Voeg de gebruikte inspiratie toe in de bijlage.

Onderdeel 1 – Navigatie, Paginaontwerp en Formulieren

4

Ga op zoek naar navigatiepatronen voor je applicatie. Hierbij

Stel op basis van je concept, de in de les behandelde theorie

maak je onderscheid tussen hoofdnavigatie, subnavigatie en

en eigen onderzoek mogelijke lettertypen samen voor

eventuele secundaire navigatie patronen. Daarnaast ontwerp

Travellu. Ga op zoek naar een font voor de bodytekst, headers

je de navigatie voor de rijke interface. Bij het ontwerpen van

en grafische elementen. Beschrijf alle unieke typografische

de navigatie beschrijf je alle dynamische onderdelen van

elementen; Hoe ziet een Titel er altijd uit? Hoe ziet een

Travellu. Houd rekening met button-states, mouse-states,

paragraaf er altijd uit? etc. Let hierbij op grootte, kerning,

feedforward en feedback. Alle states dienen te worden

leading etc.

toegelicht (kleuren, fonts, iconen en teksten).

Vanzelfsprekend licht je de lettertypen toe met behulp van je onderzoek. Denk aan de bronvermelding!

Maak voor alle te ontwerpen pagina’s minstens 1 alternatief conceptontwerp. Om een goed beeld te krijgen van je

Onderdeel 3 – Gestalt, Beeld en Iconen.

ontwerpen voeg je headers en bodytekst toe (werkelijke tekst,

Bekijk hoe je je ontwerp kan verbeteren door het toepassen

dus geen lorem ipsum).

van de “Gestalttheorie”. Licht toe waar en hoe je de

Bij elk ontwerp geef je een toelichting op de pagina en de

gestalttheorie toepast en motiveer je keuzes.

specifieke functionaliteit. Waar nodig onderbouw je je keuzes met onderzoek.

Maak een beeld concept. Hoe ga je om met beeld op een pagina? Verzamel een beeldreeks (stock of eigen beeld)

Ontwerp een rijke zoek en boek functionaliteit als onderdeel

en licht toe hoe de beelden kunnen worden toegepast en

van je interface. Houd hierbij rekening met de in de les

waaraan beeld dient te voldoen.

behandelde theorie en onderbouw je keuzes. Voor de formulier-elementen dien je ook een foutafhandeling te

Ontwerp een ondersteunende iconenreeks voor je Travellu

ontwerpen (of beter nog; ontwerp het zodat fouten niet

concept. Je maakt een samenhangende reeks van minimaal

mogelijk zijn).

3 iconen en werkt deze tot in detail uit. Je ontwerp begint op papier! De iconenreeks verwerk je uiteindelijke pagina

*Met alternatief doelen we op een fundamenteel ander ontwerp. Dus niet slechts een kleurtje of een tekst wijzigen.

ontwerp.

DOELSTELLING De doelstelling van deze designstudie is om een beter beeld te krijgen van het huidige gebruik in de opmaak en navigatie van websites.

Door van inspiratiebronnen verder eigen uitwerkingen te maken zal er uit eindelijk een mooi eigen design neergezet kunnen worden waarin inspiratiebronnen in terug te vinden zijn.

5

Navigatie

DESIGNSTUDIE 6

Navigatie

Navigatie 7

Navigatie

Inspiratie: http://www.newquest.fr/

Deze website geeft als eerst link bovenaan de keuze hoe men de mogelijke navigaties kan benutten. Er is ‘traditional’ en ‘clavier’.

8

Het complete hoofdmenu bestaat uit donkergrijze blokken met afgeronde hoeken. In deze blokken staan allemaal figuren in de kleuren wit en rood. Het betreffende plaatje gaat over waar het klikken op deze koppeling naar leidt. Onder de plaatjes staat in een witte schreefloze typegrafie ook het onderwerp nog netjes geschreven. Bij mouse -over op de blokken komt de betreffende afbeelding het zwarte blok invliegen.

Uitgelicht item Bij het klikken op een blok volgt er een pop-up. Binnen bijna al deze pop -up kaders reageren items op mouse -over.

De ene keer veranderd er iets van kleur, de andere keer verschijnt er een klein tekstkader met betreffende info waar men naartoe gaat wanneer er op deze koppeling geklikt wordt.

Het kader wat is geopend verdwijnd weer als er op escape wordt gedrukt, of op het kruisje klikken kan ook maar dit vind ik minder efficient voelen.

Navigatie

Eigen verwerking optie 1

In deze eigen verwerking heb ik het plaatsen van informatie en figuren in vierkanten blokken overgenomen. In deze versie gebruik ik twee verschillende tinten kleur, licht en donkerder -groen. Dit heb ik gedaan omdat ik dit meer vond passen om een moderne maar toch natuurlijke uitstraling voor de backpack -site te kunnen behouden. Ik heb onder de icoontjes in de groene blokken ook het kernwoord waar het over gaat onder gezet. Uit onderzoek blijkt namelijk dat wanneer er alleen een icoon geplaatst is, slechts 30% van de mensen begrijpt wat er bedoelt wordt. De overige 70% weet dit dit niet direct en zal er minder snel op klikken.

Eigen verwerking optie 2

Hierboven staat de eigen uitwerking van het pop-up scherm. Deze heeft geen afgeronden maar rechte hoeken. Het hoekje rechts -boven waar men de pop-up kan sluiten is in eigen kleuren gekopieerd. De mogelijkheid naar de volgende stap en volgende pop -up staat rechts onderin. Men kan, terugkijkend naar de schuifpuzzel -navigatie, het woordje “schuif” naar “Volgende stuk” verplaatsen zodat het weer een nette zin vormt. De titel staat in dit geval nog links boven in het zwart. Dit zal ook nog toegepast kunnen worden in de merkkleuren licht -groen en in het midden bovenaan.

9

Navigatie

Inspiratie: http://customersuccess.org/

Costumersuccess is een website die aan de zijkant een navigatiebalk gebruikt. Deze neemt weinig ruimte in beslag maar valt toch goed op. Deze navigatiebalk bestaat uit iconen. Bij mouse -over verschijnt ook het onderwerp van de pagina die deze koppeling bevat waarbij de mouse -over plaatsvind. De pagina heeft een grote achtergrond afbeelding van een blauwe lucht met witte wolk. D.m.v. de persoon op de linker kant van de pagina wordt ook het Gestalt -principe gebruikt, waarvan het onderdeel continuity wordt benut. De persoon kijkt naar de header en het logo van het bedrijf.

10

Uitgelicht item

Deze navigatie -balk heeft gebruik gemaakt van monochromane kleuren. Deze tinten zijn grijs. Binnen deze navigatie zijn in donkergrijze cirkels iconen geplaatst. De iconen binnen deze donkergrijze cirkel zijn wit, dit geeft een hoog contrast. Bij mouse -over verschijnt het onderwerp van de pagina die deze koppeling bevat. Eenmaal geklikt op een icoon navigeerd de website naar deze pagina. Het kernwoord van deze pagina blijft nu aanwezig naas de navigatiebalk een schreefloos zwart lettertype.

Deze is in Kapitalen geschreven.

Navigatie

Eigen verwerking optie 1

Eigen verwerking optie 2

De navigatie -structuur die costumersuccess. org heeft gebruikt binnen hun site heb ik hier in kleurenverhoudingen aangepast. Wanneer ik in dit geval terugval op de standaard merk -kleuren die ik wil toepassen, dan ontstaat er een minder sterk contrast dan wanneer ik de eerste uitwerking zou gebruiken.

Ik denk dat het kleurgebruik op enkele vlakken wel zou kunnen/mogen varieren zodat de context en de importancy duidelijk worden. Deze navigatiebalk zou langs de kant van een website komen te staan als interactieve navigatie. Hiervoor vind ik een ander kleurgebruik om contrast te krijgen een juiste beslissing.

11

Navigatie

Inspiratie: spel: schuifpuzzel.

Voortkomend uit feedback docent Emiel Ruis

Al redelijk vlug in dit semester kwam ik tot een uitwerking van mijn eerste ontwerp. De inspiratie die ik tot dan toe had opgedaan

12

bestond vooral uit een pagina’s ontwerp waarin blokken een hoofdrol speelde. In een feedback -gesprek met docent Emiel Ruis kwam het idee om het principe van de schuifpuzzel ook in mijn uitwerking toe te passen. Het zal gebruikte kunnen worden in het hoofdmenu als navigatie of als een interactief invul -formulier.

Uitgelicht item Na het zien van de blokken bovenaan de pagina schoot het idee over een schuifpuzzel voorbij. Door het schuiven van de blokken op de site zou de interactieve navigatie plaatsvinden op een originele manier. Dit zou bij het hoofdmenu kunnen worden toegepast, bij het formulier zou het goed kunnen (Bij het verschuiven van elk vierkantje komt er een nieuw invulveld tevoorschijn. Wanneer de puzzel op een eenvoudige/niet tijdrovende manier is opgelost zullen de vierkanten verdwijnen en het ingevulde blad laten zien, dit om de klant gelegenheid tot correctie te geven. een bevestigingsbutton zal verschijnen)en nog vele andere vormen van navigatie zouden in deze toepassing gebruikt kunnen worden.

Navigatie

Eigen verwerking optie 1

13

Hierboven is te zien dat er een blok/puzzelstuk verschoven moet worden om verder te lezen. Met een interface element op het betreffende puzzelstuk wordt duidelijk aangegeven wat er gedaan moet worden om verder te gaan.

Ik had over deze vorm van navigatie om feedback gevraagd bij enkele willekeurige personen. Uiteindelijk bleek dat het schuifpuzzel systeem erg leuk gevonden werd in een stappen -proces zoals het boeken van een reis. Maar bij het openen van een artikel of blog werd de meerwaarde er niet van gezien. Men wil simpel het stuk lezen en niet een puzzel oplossen.

Navigatie

Inspiratie: www.proto.io

Deze website biedt een online programma aan om werkende prototypes te maken van apllicaties voor smartfone en/of tablet.

14 Uitgelicht item

Bij een mouse -over van een blok draait deze om en toon verdere info over wat deze koppeling bevat.

Dit is met een wit lettertype op een transparant zwart vak gedaan. Door de transparatie zie je de voorkant van deze koppeling nog.

Navigatie

Eigen verwerking optie 1

Bij een mouse -over draiit het betreffende blok op een soepele manier om. Als men de muis erop houdt blijft de afbeelding zo staan dat de achterzijde met tekst naar de kijker toe staat. Ik heb abstracte kleuren gebruikt. Dit omdat het om informatie over de koppeling gaat. Dit moet zo duidelijk mogelijk zijn en gemakkelijk te lezen. De broadtekst staat in een zwart blok, deze is transparant waardoor men er nog licht doorheen kan kijken en ziet dat het het topic blogs is waar ze op staan. Hieronder staat in een witte rechthoek met zwart font HECTOR nogmaals het onderdeel wat de kijker met zijn/haar muis momenteel op staat.

Eigen verwerking optie 2

In de verwerking die ik het meest bij mijn ontwerp vind passen wordt de blok bij mouse -over weer op een soepele manier omgekeerd. Deze keer staat er geen korte inleiding over wat men achter deze koppeling kan vinden. Nee, er wordt alleen duidelijk weergegeven hoe deze koppeling werkt om de volgende pagina te betreden. Ik denk dat dit een hele goede minimalistische oplossing is om de sliding-puzzle-navigation ook toe te passen op de homepage van de Travellu -website.

15

Navigatie

Inspiratie: http://www.nscs.org/

Deze website heeft een hoofdmenu over de gehele breedte van de pagina uitgestrekt. Hierin staan koppelingen naar eigen pagina’s, maar ook koppelingen naar externe pagina’s van social media. Link van het hoofdmenu staan enkele foto’s gerangschikt onder elkaar met een kleine ruimte ertussen. Elke foto heeft een dunne witte lijn om zich heen. Bij een klik op de foto verschijnt er een drop -down tekstkader, schuivend vanuit de linker hoek. De grote achtergrond -afbeelding veranderd per aangeklikte foto. Onderaan de pagina is er de footer waarin services staan en andere onderwerpen. Deze beslaat de gehele breedte om alle onderwerpen te tonen, maar in de hoogte neemt het echter weinig ruimte in beslag vanwege het roll -over systeem.

16 Uitgelicht item Bij een mouse -over klapt de footer per onderwerp verder uit en toont de sub -onderwerpen van het hoofd item.

Navigatie

Eigen verwerking optie 1

Zoals hierboven te zien is neemt de footer van Travellu niet veel ruimte in beslag. Daarom zal de footer ook op elke pagina op deze manier getoond kunnen worden. Om wel van de matrix -structuur van de website gebruik te kunnen maken zal er bij een mouse -over bij de footer de complete footer tevoorschijn komen met alle onderwerpen en koppelingen van de website. Ook zullen hier rechts -onderin de footer externe koppelingen worden geplaatst die lijden naar de pagina’s van social media, de community van Travellu.

17

Pagina -ontwerp

DESIGNSTUDIE 18

Pagina -ontwerp

Pagina -ontwerp 19

Pagina -ontwerp

Inspiratie: www.modernline.sk

De website van modernline.sk bestaat uit twee verschillende kleuren blokken. In deze gekleurde blokken staat witte tekst. Er

20

wordt met deze blokken een stappenplan getoond, dit staat echter niet recht onder elkaar. De gekleurde blokken met witte tekst zijn omgeven met sfeerfoto’s van bepaalde ruimtes. Bij een mouse -over bij het blokkengedeelte blijft het stuk waar de muis zich bevindt zijn kleur behouden. De rest daaromheen wordt transparant en veel minder zichtbaar.

Uitgelicht item Bij een mouse -over op het geblokte gedeelte op de homepage blijft het gedeelte waar de muis op staat dezelfde kleur behouden. De rest daaromheen wordt wit transparant.

Pagina -ontwerp

Eigen verwerking optie 1

Transformeer je inspiratie naar een eigen stijl. Beschrijf hier de overwegingen die je hebt gemaakt.

Nullace stotate mpore, simus et faces verchitatis earum rest quibusdae prem iunt ullisci odis et pa nullorest, cum quiatis aute possin rerspic tem quam, occati quibus est ut voluptur adisinitio. Nam et, qui as aut que prem si sequi offictore earchil imaionecto totatiunt pratem apel inullor resti cumquibus sim int voloriosae. Itatqua ssuntiantur? Sedis ea dignis erio ommolor erruntio quam quamendaecab ide erciis voles is aut id ut voloren ectectio consenditint audicta tissitiunt mod quatur reperspe nobis re

21

Pagina -ontwerp

Inspiratie: http://www.psd2html.com/?utm_source=awwwards.com&utm_ medium=banner&utm_campaign=new-p2h

Korte omschrijving van de website,

22

PSD2HTML is een organisatie die mensen/organisaties helpt bij het ontwikkelen van website en applicaties. De hoofdkleuren zijn wit en grijs met een accentkleur blauw in het hoofdmenu bij een mouse -over. Gecentreerd op de pagina staan enkele 6-hoeken dicht tegen elkaar geplaatst als een bijenkorf. In de vormen staan merknamen/logo’s.

Uitgelicht item Op deze site inspireerde voornamelijk de 6-hoeken mij. Het is een originele vorm die ik niet vaak ben tegen gekomen op het net. Ik heb hier qua vorm een kleine aanpassing in gedaan in de eigen verwerking, namelijk een acht -hoek. Ik vind het stoer en toch ook natuurlijk overkomen. Dit omdat ik deze vorm associeer met een bijenkorf. Bij het gebruik van iconen heb ik ook gekeken naar de achtergrondkleur van de 6-hoeken (grijs) die op de niet gevulde delen van de iconen weer verschijnen. Dit houdt het naar mijn mening rustig door het gebruik van deze twee onbonte kleuren..

Pagina -ontwerp

Eigen verwerking optie 1

23 Ik heb het vormgegeven voor het gebruik van mijn Travellu -concept. Ik vind de vorm erg eigen en origineel. Dit zou ik goed kunnen gebruiken voor segmentatie binnen de website van Travellu.

Met een kleine ruimte tussen alle acht -hoeken vind ik dat de website rustiger overkomt. Bij het gebruik van vierkanten worden deze kleine ruimtes echter wel sneller gelinkd met een puzzel dan wanneer er stukken acht -hoeken zijn.

Pagina -ontwerp

Inspiratie: De Volkskrant, artikel: Rechts door zee

We zien hier een foto van een persoon in de Volkskrant. Deze foto is opgedeeld in blokken die licht van elkaar gescheiden zijn.

24

In deze scheidingslijnen is de achtergrondkleur van de pagina te zien. In dit geval wit. Enkele stukken links -onderaan de foto ontbreken.

Uitgelicht item Toen ik de volkskrant las en deze foto zag vond ik een kleine scheidingsruimte bij de schuifpuzzel navigatie beter passen dan dat alle stukken direct op elkaar zouden staan. Wanneer alle blokken binnen de site dicht op elkaar zouden staan zal er veel minder snel geassocieerd worden met een puzzel.

Pagina -ontwerp

Eigen verwerking optie 1

25 Hier heb ik de ruimtes gelaten in een van mijn eigen afbeeldingen. Deze blokken -structuur wordt sneller geassocieerd met een puzzel dan wanneer de delen van de foto direct op elkaar aansluiten. Ook is dit blokkensysteem handig binnen het gebruik van je grid van een website.

Formulieren

DESIGNSTUDIE 26

Formulieren

Formulieren 27

Formulieren

Inspiratie: http://www.travelta.nl/

Het formulier van Travelta laat bovenaan het formulier netjes in genummerde stappen zien welk proces moet worden doorlopen.

28

Achter elk nummer staat het onderwerp gevolgd door een dropdown -list. Wanneer alle dropdown -lists zijn ingevuld krijgt de gebruiker een lijst te zien met data en hoeveelheden van dagen. Bij mogelijke kruisingen worden er prijzen getoond. De kijker kan nu vlug zien hoe hij/zij de voordeligste reis boekt.

Uitgelicht item Het overzicht dat men krijgt na het invullen van alle dropdown -lists vind ik er klantvriendelijk en efficient. Men hoeft niet elke keer zelf te zoeken hoeveel iets wanneer kost. Dit wordt direct na het invullen op dezelfde pagina onderaan getoond in een tabel. Hieronder wordt in grafieken weergeven wat de dure en minder dure periodes zijn.

Formulieren

Eigen verwerking optie 1

Transformeer je inspiratie naar een eigen alternatieve stijl. Beschrijf hier de overwegingen die je hebt gemaakt.

Nullace stotate mpore, simus et faces verchitatis earum rest quibusdae prem iunt ullisci odis et pa nullorest, cum quiatis aute possin rerspic tem quam, occati quibus est ut voluptur adisinitio. Nam et, qui as aut que prem si sequi offictore earchil imaionecto totatiunt pratem apel inullor resti cumquibus sim int voloriosae. Itatqua ssuntiantur? Sedis ea dignis erio ommolor erruntio quam quamendaecab ide erciis voles is aut id ut voloren ectectio consenditint audicta tissitiunt mod quatur reperspe nobis re

Eigen verwerking optie 2

29

Formulieren

Inspiratie: www.klm.nl

Bovenaan dit formulier van KLM staan 3 onderwerpen in het hoofdmenu voor dit formulier. We bekijken nu het formulier “vlucht

30

boeken”. Als eerst krijgt men twee radio -buttons te zien, voor een keuze tussen retour of enkele reis. Hierna volgt een textbox waar men bestemmingen van/naar kan invoeren. Hierachter staat in beide gevallen een vergrootglas om de optie tot zoeken aan te bieden. Daaronder volgt een zin “Terugvlucht vanaf een andere bestemming” die tegelijkertijd ook een koppeling vormt.

Vervolgens wordt gevraagd de data voor heen en -terugreis in te vullen. Dit is ook een textbox, hierachter staat een icoon van mini -kalender waar men optioneel ook een kalender kunnen open om hun data aan te klikken. Hieronder volgen nog enkele dropdown -lists.

Uitgelicht item Het toepassen van veel wit in de formulieren vind ik een sterk punt. Dit geeft naar mijn mening rust en leest makkelijker.

Verder is in dit formulier efficient gebruik gemaakt van radio -buttons, textbox en dropdown -lists. Ook de iconen achter de textboxes geven de gebruikers de kans een eigen, wellicht efficientere, manier van navigeren toe te passen.

Formulieren

Eigen verwerking optie 1

31

Bij deze eigen uitwerking heb ik geen afgeronde hoeken gemaakt van het kader waarin het formulier staat. De typografien zijn veranderd in een naar mijn mening modernere/jonge stijl. Verder lijkt het mij leuk voor de gebruikers wanneer er iconen worden gebruikt waarin zij zichzelf in kunnen herkennen. Dit zien we terug in de eigen uitwerking bij het invullen met hoeveel backpackers er gereisd zal worden. Er staat hier een poppetje met een rugzak ernaast.

Formulieren

Inspiratiebron: Zie Inspiratiebron hoofdstuk: navigatie. onderdeel: schuifpuzzel

32 Hierboven is de eerste uitwerking van het schuifpuzzel navigatie -systeem. Hierboven ziet u hoe het op een leuke manier gebruikt kan worden in een formulier. Er wordt een schuifpuzzel getoond. De elke stap wordt aangegeven door een transparante rechthoek op het betreffende plaatjes dat verplaatst moet worden. In de afbeelding hierboven is een wit vierkant te zien in de puzzel. Hierop staat in het zwart geschreven waar men heen wordt geleidt als het puzzelstuk hier overheen wordt geschoven.

Het eerste deel van de puzzel is hierbij dan ook opgelost. Boven de schuifpuzzel staat in vierkante blokken (sequential structure) welke stappen er nog zijn en/of waar men nog doorheen moet schuiven. Wanneer men wilt terugklikken of geen zin heeft de schuifpuzzel te gebruiken kan ook op deze blokken geklikt worden. Het nadeel hiervan wel is dat er een minder voldaan gevoel aan blijft overgehouden. Wanneer men d.m.v. de eenvoudige schuifpuzzel heengaat zal deze in de laatste voltooide stap zien dat de schuifpuzzel is opgelost!

Formulieren

33 Wanneer een blok verschoven is komt er een pop-up met vragen tevoorschijn. Wanneer deze is ingevuld kan men het woord “schuif” dat in een rechthoek staat tegen het vervolg van de zin “volgende stuk” aanschuiven. De pop -up verdwijnt weer. Een puzzelstuk is nu verschoven op deze plek komt dan weer een ruimte vrij. Deze wordt gevuld met weer een wit blok en het betreffende onderwerp. Het volgende puzzelstuk moet hierover schoven worden om de volgende stap te openen.

Kleur

DESIGNSTUDIE 34

Kleur

Kleur 35

Kleur

Inspiratie: Feedback klasgenoten Eigen verwerking optie 1 -> Monogromatic

Tijdens het bekijken van de kernwaarden die Travellu wou nastreven kwam ik als eerst op dit kleurenpalet uit. Groen staat voor mij voor natuur en buiten zijn zonder auto onder je kont. Doordat het voornaamste vervoer met je eigen benen gaat krijgt dit type reizen van mij ook een duurzaam label. De donkere kleur groen rechts op de aafbeelding had ik als eerst. Dit vond ik eigenlijk te donker en hierdoor vond ik de kans groot dat het te “donker” over zou komen. Ik maakte deze kleur groen een tint lichter en ik vond de lichtere kleur groen een toevoeging doen aan helderheid en de moderne uitstraling van de site.

36 Eigen verwerking optie 2 -> Monogromatic

Gedurende het feedback -moment van mijn studiegenoten kreeg ik een opmerking ook andere licht/donker kleurcombinaties moest proberen toe te passen. Dit om verschillende type reizen een eigen uitstraling te geven binnen de site. Dit licht/donker -bruine kleurenpalet zou goed toe te passen zijn in de echte “dirty” modderige backpack reizen. De kans zal groot zijn dat dit soort type reizen aan de groep ‘die-hards’ wordt toegewezen.

Kleur

Eigen verwerking optie 3 -> Monogromatic

Dit kleurenpalet zal gebruikt kunnen worden bij de reizen die veel langs kustgebieden gaan. De kleuren blauw binnen dit segment qua reizen moeten de site een eigen “maritieme� sfeer geven.

Eigen verwerking optie 4 -> Analogous

Als laatste kleurenpalet heb ik de warmere kleuren opgezocht. In dit geval gaat het om licht/donker oranje. Deze kleuren zullen goed toegepast kunnen worden binnen de backpack reizen waar de echte warme en droge gebieden worden opgezocht. Denk hierbij aan woestijnen.

37

Kleur

Inspiratie: Loewydesign, http://www.webdesignerdepot.com/2009/03/50-monochromaticwebsite-designs/

Loewydesign heeft een monochromatisch kleurenpalet gebruikt voor deze website. De typografie binnen deze kleuren zijn

38

hoofdzakelijk wit. Per blok van het hoofdmenu staat in een woord omschreven naar welk onderwerp je wordt geleidt zodra je op dit blok klikt. Er staat echter verder geen icoon in deze blokken. Links van de blokken staat de merknaam “Loewydesign� in wit en geel. Links van de merknaam staat het logo in zwart en wit, dit is dus ook een monochrome kleurgebruik.

Uitgelicht item De blokken op Loewydesign staan, met de hoeken elkaar nog rakend, tegen elkaar aan. Ze staan dus niet strak onder of naast elkaar. De strakke, of in dit geval zou het misschien zelfs saaie, lijn wordt doorbrokken door toepassing van deze structuur. Binnen de drie blokken wordt monochromatisch gebruikt gemaakt van de kleur blauw. Drie tinten blauw krijgt de kijker te zien.

Binnen de kaders zijn woorden gebruikt die het onderwerp aangeven waar de koppeling naartoe zal leiden. Er worden geen iconen verder gebruikt en het lettertype is schreefloos en wit.

Kleur

Eigen verwerking optie 1 In mijn eigen uitwerking heb ik mijn conceptuele kleuren gebruikt om te kijken of licht en -donkergroen hetzelfde effect hebben als de structuur in Loewydesign.

Uiteindelijk vind ik dit erg goed gelukt. De aanpassing van de kleur in het vierkant is goed verlopen en staat open voor meerdere kleuren. Dit zou handig kunnen zijn bij segementatie.

Om de vierkanten heb ik niet een andere tint van dezelfde kleur gezet, maar foto’s van leden van de community.

Dit zal het interactief en gevarieerd maken. Verder heb ik binnen de vierkanten niet alleen teksten gebruikt, maar ook iconen. Dit komt voor mij toch explicieter over dan enkel tekst -gebruik.

39

Typografie

DESIGNSTUDIE 40

Typografie

Typografie 41

Typografie

Inspiratie: http://99designs.com/designer-blog/2013/09/09/what-is-your-type/

42

Op de website van 99designs is er een vragenlijst opgesteld die uiteindelijk leiden naar het, volgens deze site, beste lettertype dat je kunt gebruiken. Enkele van deze voorstellen heb ik op de volgende pagina uitgewerkt.

Typografie

Eigen verwerking optie 1

Hector regular 48, Headers en hoofdslogans Helvetica neue regular, Subheaders Courier regular, Broadtekst

Travellu Optima broadtekst Garamond

Travellu Braggadocio broadtekst Optima

Travellu Futura broadtekst Baskerville

Travellu Bauhaus 93 broadtekst Minion pro

Travellu Times New Roman broadtekst Candara

43

Typografie

Inspiratie: http://www.beelinereader.com/

44

Het programma van Beelinreader zorgt ervoor dat men sneller teksten kan lezen. Het enige wat daarvoor nodig blijkt te zijn is een constante aanpassing van kleur van de tekst. “ BeeLine Reader makes reading faster and easier by using a color gradient that guides your eyes from the end of one line to the beginning of the next. This gradient makes you less likely to skip or repeat lines, so you read faster. See it in action below, or install our extension now.

“

Typografie

Bron: http://www.nytimes.com/2013/10/16/us/politics/congress-budget-debate.html?hp

45

Ik zou deze manier graag willen toepassen binnen de Travellu website. Ik denk dan aan de broadteksten. Grote stukken tekst als blogs en omschrijvingen zullen op deze manier sneller gelezen kunnen worden. En wat wil een backpacker nou liever? Met zijn/ haar neus in de boeken, of om zich heen kijken en geen moment van de wereld om zich heen missen!

Maar wacht, na feedback van een studiegenoot kwam ik tot de conclusie dat het geen standaard lay -out moet worden van de broadteksten op de website. Hier zou voor sommigen het design teveel onder lijden. Daarom zal het ook als optie aangeboden kunnen worden door een knopje van Beeline -reader te plaatsen. Wanneer men deze aanklikt zullen de teksten in het Beeline -principe veranderen en klikt men hier nogmaals op dan zal deze gekleurde tekst weer de normale kleur terug krijgen.

Niet alleen navigatie binnen de website zelf wordt nu belicht, ook de navigatie van de hersenen wordt geholpen om sneller te lezen en dus tijd te besparen.

Typografie

Inspiratie: http://99designs.com/designer-blog/2013/10/04/make-killer-email-designs/?utm_ source=feedburner&utm_medium=email&utm_campaign=Feed:+99designsDesignerBlog+(D esigner+Blog)

46 “

Ah, that feeling when you pick the right font and your design just “clicks”.

Unfortunately, you’re not going to have a lot of these moments designing emails. As mentioned before, emails are HTML coded content that has to work with different browsers, email clients, desktop and mobile devices.

This means all of your text will be rendered using fonts from client’s computer — if the system cannot find the font you specified, it’s going to replace it with the closest match (which is, more often than not, something very ugly).

The challenge is to stick with web-safe fonts like Arial, Times New Roman, Courier New, Tahoma and Verdana. Almost all Mac and Windows machines have them installed.

”

Typografie

l a i r A u l l e v a r T l a i r A avellu

Tr

l a i r A u l l e v a Tr l a i r A u l l e v a r T

Tijdens de designstudy is mijn voorkeur tot nu toe uitgegaan voor “Hector” voor de headers en “Helvetica neue” voor de

subheaders. Dit omdat ik hiermee een moderne stijl wil nastreven met mijn ontwerp voor de Travellu -website. Bij computers die deze lettertypes niet hebben is dat jammer. In de html -code zal wel een tweede en zelfs derde lettertype worden neergezet waar de site dan gebruik van zal maken. Niet compatibele computers met mijn eigen gekozen lettertypes krijgen dus een “second opinion”. Hierdoor zal het systeem niet zelf een, wellicht lelijk, lettertype kiezen.

Over de keuzes van lettertypes in de second opinion zal ik terugkomen in het ontwerpdocument.

47

Typografie

Inspiratie: www.koningaap.nl

Koningaap is een reisorganisatie die verre reizen aanbiedt. Zij streven net als Travellu een volwassen en avontuurlijk uiterlijk na.

48

Het moet er dus niet te druk en kinderlijk uitzien. Op volle kleuren wordt het font voor de headers in het witte weergeven. Met een witte achtergrond wordt er voor dit font een heldere volle kleur bruin gebruikt.

Uitgelicht item Koningaap heeft voor de titel en headers een eigen lettertype gebruikt. Athans dat is mijn vermoede omdat ik het lettertype nergens exact kan terugvinden en er achter “font” in de html codering ‘inherit’ staat. De broadteksten zijn CPCompanyFlash Medium font. De subheaders boven deze stukken zijn onderstreept en in de bold versie.

De afstand tussen letters en zinnen onder elkaar is volgens de standaard normen gebruikt, 14pt.

Typografie

Eigen verwerking optie 1

Travellu Bauhaus 93 broadtekst Calibri regular

Travellu Bauhaus 93 broadtekst Calibri regular

Travellu Bauhaus 93 broadtekst Calibri regular

Met het lettertype voor de headers heb ik met “Bauhaus 93� het lettertype van Koningaap zo veel mogelijk proberen te benaderen. Ik heb gekeken welke kleur het meest opvallend/origineel is voor het gebruik van het merk Travellu. De broadteksten heb ik in een relatief standaard font gezet en deze ook bij elk kopje in kleur behouden.

49

Typografie

Inspiratie: http://www.idneon.ch/

Bij de website idneon is een duidelijk schreefloos lettertype gebruikt die altijd in kapitalen (hoofdletters) staan. Het kleurgebruik

50

is met de volle kleuren zwart, oranje en wit iets wat een sterk contrast geeft. In drie grote vierkanten staan onderwerpen geschreven. Bij een mouse -over veranderd dit blok van zwart naar oranje. De foto’s hebben een foto als achtergrond. Deze zijn ook opgestelde met de hoofdkleur zwart. Bij mouse -over blijft de afbeelding staan, maar veranderd dus ook van zwart naar oranje.

Het kleurgebruik binnen deze foto’s in de vierkanten is monochromatisch opgesteld.

Uitgelicht item Het gebruik van kleuren binnen vele elementen binnen deze site geeft een contrast. Dit komt op mij als sterk en duidelijk over.

De gebruikte typografie is schreefloos en altijd in kapitalen (blokletters) geschreven. Het gebruik van rechthoeken en vierkant zonder afgeronde hoeken vind ik het contrast die de kleuren geeft nog versterken.

Typografie

Eigen verwerking optie 1

In deze drie eigen uitwerkingen heb ik gekeken wat het effect zou zijn van kleurgebruik bij en om de typografie heen. Ook verschillende lettertypes zijn gebruikt om te kijken welke het meest expliciet naar voren komt in de afbeelding. De uitwerking van Blairmoito TT vind ik zelf het meest expliciet. Echter heeft deze niet mijn voorkeur omdat het te zakelijk en netjes overkomt. De uitwerking van Hector vind ik dan beter passen.

Eigen verwerking optie 2

51

Hieronder volgt een uitwerking van typografien en wat kleurgebruik eromheen doet. Het gebruik van drie verschillende kleuren geeft in het eerste kader een naar mijn mening wat onrustige uitdrukking. De twee kaders die daar rechts van volgend hebben veel meer rust en eigen stijl door het gebruik van twee kleuren in plaats van 3.

Gestalt

DESIGNSTUDIE 52

Gestalt

Gestalt 53

Gestalt

Inspiratie: Windows 8

Windows 8 is een nieuw besturingssysteem van Microsoft windows. Het design bestaat uit kleurrijke vierkanten en rechthoeken.

54

Deze figuren staan in volle kleuren en daarbinnen zijn vooral witte typografieen en figuren die goed zichtbaar zijn. Het gestalt -principe ‘Closure’ is in de grid van dit systeem niet gebruikt. Door het overduidelijke gebruik van de lijnen van de grid komt het systeem kalm en betrouwbaar op mij over. Door het gebruik van een korte uitleg in enkele kaders/koppelingen wordt er duidelijkheid gecreĂŤrd voor de bezoekers.

Uitgelicht item De les over het gestalt -principe vond ik erg interessant. Dit liet juist zien dat het helemaal niet nodig is in afgesloten kaders te werken omdat onze hersenen dit al voor ons doen.

Toch dacht ik meteen aan windows8 die toch juist wel als grote organisatie hier tegenin durft te gaan. Ik kreeg een vertrouwd back-to-basic gevoel bij dit programma. Met de kleuren heb ik het gevoel dat je elke site een hele eigen sfeer kan geven.

Wat ik als inspiratie gebruikte was het gebruik van verschillende formaten vierkanten/rechthoeken. Dit zorgt ervoor dat het niet een eentonige blokkendoos wordt met alleen verschillende kleuren en onderwerpen, maar ook dat er afwisseling komt in de vormen van de blokken op de site.

Hierdoor kan ook importancy van onderwerpen worden weergeven door het formaat van het betreffende blok te vergroten.

Gestalt

Eigen verwerking optie 1

Er worden hier foto’s, inconen en tekst getoond. Het gaat hier in om een van mijn uitwerkingen die betrekking hebben tot de interactie tussen de reizigers. Hier worden foto’s (rechthoeken) getoond en koppelingen naar blogs van reizigers (vierkant) Bij de blogs is er een groene rechthoek onderaan geplaatst. Hierin staat de eerste regel/het onderwerp van de blog met links daarvan het incoontje dat voor blogs gebruikt wordt.

Eigen verwerking optie 2

Transformeer je inspiratie naar een eigen alternatieve stijl. Beschrijf hier de overwegingen die je hebt gemaakt.

Nullace stotate mpore, simus et faces verchitatis earum rest quibusdae prem iunt ullisci odis et pa nullorest, cum quiatis aute possin rerspic tem quam, occati quibus est ut voluptur adisinitio. Nam et, qui as aut que prem si sequi offictore earchil imaionecto totatiunt pratem apel inullorresticumquibussimintvoloriosae.Itatquassuntiantur?Sediseadigniserioommolorerruntioquamquamendaecabideerciisvolesis autidutvolorenectectioconsenditintaudictatissitiuntmodquaturreperspenobisrevoluptamvendaeidebitquiutvoluptaconsequidiipiet.

55

Gestalt

Inspiratie: http://customersuccess.org/

Costumerssuccess heeft grote afbeeldingen durven gebruiken. Ze gebruiken veel lengte in de homepage om deze grote

56

afbeeldingen kwijt te kunnen. Het scrollen door deze visuele informatie gaat gemakkelijk en elke afbeelding beslaat een groot gedeelte van het scherm. In het eerste beeld van de homepage wordt op een slimme manier het gestalt -principe ‘Continuity’ gebruikt. De vrouw in de afbeelding geeft met haar handen aan wat belangrijke informatie is.

Uitgelicht item In het eerste beeld van de homepage wordt op een slimme manier het gestalt -principe ‘Continuity’ gebruikt. De vrouw in de afbeelding geeft met haar handen aan wat belangrijke informatie is.

Gestalt

Eigen verwerking optie 1 Ook ik heb in een eigen ontwerp het gestalt -principe continuity gebruikt. Naast elke rij van menu -onderwerpen staat een icoon van een wandelaar. Deze loop de richting van een rij menu -opties op. Je volgt automatisch welke richting de wandelaar oploopt en zal zo de onderwerpen van het hoofdmenu zien.

Eigen verwerking optie 2 In de volgende uitwerking heb ik de wandel -iconen in het wit gezet. Dit omdat de tekst buiten de vakken ook wit is. Verder sluit de witte kleur een beter contrast af met de donkere achtergrond -foto.

57

Beeld

DESIGNSTUDIE 58

Beeld

Beeld 59

Beeld

Inspiratie: http://www.idneon.ch/

Bij de website idneon is een duidelijk schreefloos lettertype gebruikt die altijd in kapitalen (hoofdletters) staan. Het kleurgebruik

60

is met de volle kleuren zwart, oranje en wit iets wat een sterk contrast geeft. In drie grote vierkanten staan onderwerpen geschreven. Bij een mouse -over veranderd dit blok van zwart naar oranje. De foto’s hebben een foto als achtergrond. Deze zijn ook opgestelde met de hoofdkleur zwart. Bij mouse -over blijft de afbeelding staan, maar veranderd dus ook van zwart naar oranje.

Het kleurgebruik binnen deze foto’s in de vierkanten is monochromatisch opgesteld.

Uitgelicht item Het gebruik van kleuren binnen vele elementen binnen deze site geeft een contrast. Dit komt op mij als sterk en duidelijk over.

De gebruikte typografie is schreefloos en altijd in kapitalen (blokletters) geschreven. Het gebruik van rechthoeken en vierkant zonder afgeronde hoeken vind ik het contrast die de kleuren geeft nog versterken.

Beeld

Eigen verwerking optie 1 Bij deze eigen uitwerking heb ik alleen de foto’s binnen de blokken zwart/wit gemaakt. Ook heb ik het font voor de headers aangepast van “Hector” naar “BlairMdITC TT”. Het nieuwe font voor de headers vind ik zelf erg mooi, maar niet passen binnen de context van backpacken. Het is naar mijn mening te strak en gepolijst.

Eigen verwerking optie 2 In dit tweede ontwerp heb ik gekeken hoe het eruit zou zien wanneer ik niet alles in de merkkleuren licht en -donkergroen zou doen, maar juist zwart. Bij het incoon van een vliegtuig heb ik deze als element wel lichtgroen gelaten. Hierbij vind ik dat het contrast, dat bij zwart/ wit wel aanwezig is, niet blijft behouden. Daarnaast vind ik het blok dat ik rechts in het lichtgroen heb gelaten uit de toon vallen bij de overige donkere/sobere kleuren. En zoals ik al opmerk, sober, donker, zwart vind ik totaal niet passen bij een website die de natuur (groen, bruin, blauw) als podium nodig heeft. Als ik deze uitwerkingen bekijk gaat mijn voorkeur ernaar uit om de natuurlijke verzadigde kleuren te blijven gebruiken.

61

Beeld

Inspiratie:www.bulo.com

Op de website van Bulo.com is er totaal geen angst geweest wit te gebruiken binnen de site. Er worden kleuren rood en zwart gebruikt wat een mooi contrast geeft met de witte achtergrond en de grote ruimte tussen de elementen maakt dit contrast alleen maar grote. Het hoofdmenu scrolled mee naar beneden zodat er constant direct naar andere pagina’s genavigeerd kan worden. Dit is bij mijn eigen uitwerking niet nodig omdat het een one-screen page is. Op het wit is een zwart lettertype gebruikt.

Bij het Bulo -logo is alleen de “O” in de kleur rood. De geef de kleur van het merk Bulo goed weer.

62

Uitgelicht item Zoals hiernaast uitgelicht, wit. Om geen angst te hebben dit te gebruiken heb ik gekeken hoe dit in mijn eigen uitwerking zou overkomen. Ergens vond ik het wel iets hebben maar toch ontbrak er een visie, een boodschap.

Beeld

Eigen verwerking optie 1

63

Met een afbeelding als achtergrond kan de achterliggende visie en/of boodschap verteld worden.

In mijn geval een lange weg met een heuvelachtige zandvlakte. In mijn ogen geeft dit een boodschap van; niets houdt je tegen, ga erop uit!

Iconen

DESIGNSTUDIE 64

Iconen

Iconen 65

Iconen

Inspiratie: http://99designs.com/designer-blog/2013/10/10/top-9-at-99-results-september2013/?utm_source=feedburner&utm_medium=email&utm_campaign=Feed%3A+99designsD esignerBlog+%28Designer+Blog%29 In de studie naar design heb ik ook gekeken naar infographics. De kleuren, ruimtes en typografie waren dingen waar ik op heb gelet. Ook het gebruik van iconen binnen deze infographic vond ik interessant. Deze infographic was namelijk een winnende uitwerking op een website waar vele andere designers / uitwerkingen aan meededen.

De deelnemede uitwerkingen stonden in het klein onder elkaar. Wat mij meteen opviel was dat deze uitwerking hiernaast, ook al was deze klein, voor een groot deel al duidelijk was. Andere uitwerkingen hadden leuke vormen en wegen gebruikt, maar voor de uitleg van dit onderdeel maakt deze originaliteit alleen maar een belemmering. De designer van deze infographic had nog meer infographics -uitwerkingen ingestuurd. Deze had vrijwel dezelfde vormen en opbouw, alleen de kleuren waren anders. Uiteindelijk won de uitwerking met de meest logische basiskleuren die je bij dit onderwerrp ook verwacht.

Met het gebruik van iconen zie ik in dit ontwerp dat er echt heel weinig nodig is om iets infografisch weer te geven. Kijk naar het icoontje dat een telefoonboek is. Een geel blokje met een hoorn van een telefoon erin, meer niet.

Onderaan deze infographic zag ik ook dat iconen heel goed een gestalt kunnen weergeven. In dit geval geeft het wijzende icoontje onderaan de pagina aan dat er nog verder naar benenden gekeken moet worden. Het gestalt -principe “continuity�

66

is hierbij goed benut.

Iconen

67

Iconen

Zelf uitgewerkte iconen Met de vormgeving van de iconen heb ik, tegen de stijl in, wel afgeronde hoeken gebruikt. Dit om het vierkante toch ergens een beetje te doorbreken. Wanneer er alleen maar rechte hoeken zouden zijn zou het kunnen neigen naar te zakelijk.

Daarnaast heb ik voor alle iconen witte lijnen/ vormen gebruikt. Waar geen lijn zit van een icoon is de achtergrondkleur zichbaar van hetgene waar het icoon zich op bevindt.

Elk icoon heeft een kernwoord eronder staan. Deze is schreefloos en ook in het wit. Deze woorden geven het onderwerp aan waar naartoe gelinkd is binnen de koppeling.

Deze hiernaast is het icoon van de blogs. In eerste instantie had ik de witte tekstlijnen weggelaten. Dit bleek na feedback toch niet handig. Met de witte lijnen wordt er eerder naar tekst geassocieerd.

Hier volgen 4 uitgewerkte logo’s in eigen stijl.

Met de vormgeving van de iconen heb ik, tegen de stijl in, wel afgeronde hoeken gebruikt. Dit om het vierkante toch ergens een beetje te doorbreken. Wanneer er alleen maar rechte hoeken zouden zijn zou het kunnen neigen naar te zakelijk.

68

Daarnaast heb ik voor alle iconen witte lijnen/ vormen gebruikt. Waar geen lijn zit van een icoon is de achtergrondkleur zichbaar van hetgene waar het icoon zich op bevindt.

Elk icoon heeft een kernwoord eronder staan. Deze is schreefloos en ook in het wit. Deze woorden geven het onderwerp aan waar naartoe gelinkd is binnen de koppeling.

Hiernaast staat het icoon voor naar de pagina reizen te gaan.

Hier zullen verschillende reizen getoond worden met een interactieve booking -engine erbij.

Iconen

Met de vormgeving van de iconen heb ik, tegen de stijl in, wel afgeronde hoeken gebruikt. Dit om het vierkante toch ergens een beetje te doorbreken. Wanneer er alleen maar rechte hoeken zouden zijn zou het kunnen neigen naar te zakelijk.

Daarnaast heb ik voor alle iconen witte lijnen/ vormen gebruikt. Waar geen lijn zit van een icoon is de achtergrondkleur zichbaar van hetgene waar het icoon zich op bevindt.

Elk icoon heeft een kernwoord eronder staan. Deze is schreefloos en ook in het wit. Deze woorden geven het onderwerp aan waar naartoe gelinkd is binnen de koppeling.

Hiernaast staat het icoon voor services. Het lampje geeft aan wanneer die aangaat bij iemand vanwege ideeen, vragen of problemen dat deze altijd geholpen kan worden door op deze koppeling te klikken.

Met de vormgeving van de iconen heb ik, tegen de stijl in, wel afgeronde hoeken gebruikt. Dit om het vierkante toch ergens een beetje te doorbreken. Wanneer er alleen maar rechte hoeken zouden zijn zou het kunnen neigen naar te zakelijk.

Daarnaast heb ik voor alle iconen witte lijnen/ vormen gebruikt. Waar geen lijn zit van een icoon is de achtergrondkleur zichbaar van hetgene waar het icoon zich op bevindt.

Elk icoon heeft een kernwoord eronder staan. Deze is schreefloos en ook in het wit. Deze woorden geven het onderwerp aan waar naartoe gelinkd is binnen de koppeling.

Hiernaast staat het icoon om te zoeken binnen de website en in de toekomst misschien ook bij partners. Het vergrootglas is duidelijk en simpel.

69

FEEDBACK DOCENT In een feedback -moment met de docent van visual screen

inloggen heeft geklikt zal deze rechthoek weer onder het logo

design kwamen enkele ideeen langs. In de vroeg stadium

schuiven en naar de homepage voor ingelogde gebruikers

van dit semester had ik al veel inspiratie geput uit websites/

staan.

programma’s die gebaseerd waren op het gebruik van blokken. Hieruit volgde mijn eerste ontwerp (zie bijlage).

70

De Travellu -website was bij mijn eerste ontwerp vooral in de lengte gebouwd. Hierin gaf ik aan dat de sfeer van de site in

Na het zien van de blokken bovenaan de pagina schoot het

de lengte niet altijd goed behouden blijft. Hierna kwam de

idee over een schuifpuzzel voorbij. Door het schuiven van de

docent met het idee dat de site helemaal niet in de lengte

blokken op de site zou de interactieve navigatie plaatsvinden

hoeft te worden gebouwd. Wanneer er op het hoofdmenu in

op een originele manier. Dit zou bij het hoofdmenu kunnen

de blokken op een onderwerp wordt geklikt vliegt de huidige

worden toegepast, bij het formulier zou het goed kunnen

blokkenstructuur uit beeld en een nieuwe blokkenstructuur

(Bij het verschuiven van elk vierkantje komt er een nieuw

van het nieuwe onderwerp vlliegt in beeld.

invulveld tevoorschijn. Wanneer de puzzel op een eenvoudige/ niet tijdrovende manier is opgelost zullen de vierkanten verdwijnen en het ingevulde blad laten zien, dit om de klant gelegenheid tot correctie te geven. een bevestigingsbutton zal verschijnen)en nog vele andere vormen van navigatie zouden in deze toepassing gebruikt kunnen worden.

Het inloggen vonden wij allebei teveel op de voorgrond treden op de hoofdpagina. Ik kwam met het idee een klein item onder/aan de zijkant van het logo -vierkant linksboven te plaatsen. Wanneer hier op geklikt zou worden of mee geschoven zou worden zou er een invulkader vanonder het logo -vierkant vandaan schuiven. Wanneer de gebruiker op

FEEDBACK STUDIEGENOTEN Bij de feedback van enkele studiegenoten kreeg ik wat hand-

klant maar een keer zijn/haar gegevens in te vullen en bij het

ige tips die ik zou kunnen gaan toepassen in mijn uiteindelijke

boeken van een reis hoeft deze dus niet meer al zijn gegevens

ontwerp.

in te vullen. Slechts inloggen en de booking -engine heeft al een hele zwik aan informatie.

Na het tonen van enkele inspiratiebronnen liet ik mijn eerste ontwerp zien (zie bijlage). De volgende dingen werden

- Facebook koppelen optioneel houden. Bij koppelen van

gezegd:

account worden geschreven blogs ook op de pagina van de Facebook -community geplaatst.

- Het kleurgebruik/beeldgebruik aanpassen aan de klant. Wat heeft de klant geboekt? Is dit een tropische reis met stranden

- Checkbox plaatsen aan het einde van een bookings -for-

etc. verander dan de kleuren in bijv. Oranje/geel. Ook de foto

mulier. Dit geeft de optie je Facebook account te koppelen

op de achtergrond kan aangepast worden naar wat de klant

met je Travellu account. Men ziet in eerste instantie de total

beaamd. Voor de aanpassing op klant kunnen bij het eerste

prijs onderaan de form staan. Zodra de checkbox van het kop-

bezoek enkele abstracte vragen aan diegene worden gesteld.

pelen wordt aangeklikt gaat er “poeff� 10% van de prijs af en

Bijv: Welke kleur ben jij? Ben jij een banaan of een framboos?

het oude bedrag vliegt steeds transparanter omhoog tot het

etc.

niet meer zichtbaar is.

Aan het einde van de form ook de suggestie plaatsen: Schrijf

- In het eerste beeld wordt je helemaal in een bepaalde sfeer

ook eens een blog!

getrokken. Deze sfeer verdwijnd bij het scrollen naar beneden.

Misschien kan je het scrollen door de site horizontaal laten

- Travellu account verplicht. Bezoek site openbaar, maar zodra

verlopen.

men een reis wil boeken zal er een pop -up verschijnen om een account aan te maken. Uitleg en voordelen volgen.

- Aanmelding minder expliciet op de homepage. Een eigen Travellu account zal worden gekoppeld met het Facebook account van de gebruiker. In dit Travellu account hoeft de

71

FEEDBACK RAYMOND Raymond Bouwman van Rabion consultancy heb ik de

72

schuifpuzzel -navigatie uitgelegd. Hij vond het gebruik van de

Bij de schuifpuzzel -navigatie in je uitwerking bij de blogs zie ik

schuifpuzzel in een formulier een leuke toepassing en ook een

de waarde van de schuifpuzzel veel minder. Wat maakt het uit

toegevoegde waarde geven aan de navigatie. Bij een formulier

om op lees verder te klikken of een puzzelstuk te verschuiven?

wil men over het algemeen niet meteen een enorme lijst voor

Men leest de intro en bepaald dan of ze deze verder willen

hun neus krijgen. Door het toepassen van de schuifpuzzel

lezen. Als ze eenmaal een alinea hebben gelezen en dan toch

wordt het formulier opgedeeld in onderwerpen. Door het

weer weg klikken heeft in mijn ogen de puzzel geen extra

gebruik van de puzzel kan je dus ook zien of je al bijna bij het

waarde gegeven aan de navigatie.

einde bent. Eenmaal bij het einde is de schuifpuzzel opgelost, dit vind ik leuk en geeft toch ergens een voldaan gevoel.

REFLECTIE Door het maken van dit designdocument heb ik geleerd op

designdocument kwam zag ik steeds meer aspecten van

een andere manier naar websites te kijken. Het design heeft

typografie, beeld, formulieren etc.

veel invloed op de navigatie en andersom. Het viel mij op dat de website die mij het meest aanspraken duidelijke vormen en

Na een goed feedback -moment kwam tot de schuifpuzzel

veel ruimte bevatte.

-navigatie als idee. Eerst zag ik dit als iets immens groot omdat ik het erg leuk vond en nog nergens online had aantroffen.

Mijn grootste inspiratiebron “Windows 8” gaat tegen alle

Na enkele weken dit te bestuderen en eigen uitwerkingen

gestalt principes in en gebruikt juist overduidelijk vierkant

gemaakt te hebben kwam ik erachter dat het beperkte

blokken in hun design. Het opvallende vond ik dat ik dit

mogelijkheden bleek te hebben om als toegevoegde waarde

eigenlijk heel fijn werken vond en heb het dus overgenomen

te dienen.

in mijn design.

Uiteindelijk heb ik zoals u in dit document kunt zien van Wat in het begin nog lastig was vond ik het ontdekken wat

inspiratiebronnen eigen uitwerkingen gemaakt. Veel hiervan

ik nou inspirerend vond aan een website. Vaak was de eerste

zal ik dan ook toepassen in het volgende ontwerp -document.

gedachte: “dit is gewoon mooi”. Naarmate ik verder in het

73

BRONNEN Werktijden.

Formulieren:

http://werktijden.nl/ Geraadpleegd op 09/22/2013

Sheets, Online.han.nl, VSD_forms_EN.pptx, Geraadpleegd op 09/20/2013

Paginaontwerp: Costumersuccess

Typografie:

http://customersuccess.org/ Geraadpleegd op 09/22/2013

Peter Vukovic, October 4, 2013 in Design Tips and Resources, http://99designs.com/designer-blog/2013/10/04/make-

THE LANGUAGE OF INTERFACES, ?/?/?

killer-email-designs/?utm_source=feedburner&utm_

http://contrast.ie/blog/

medium=email&utm_campaign=Feed:+99designsDesignerBlo

Geraadpleegd op 09/25/2013

g+(Designer+Blog)

74

Geraadokeegd op 05/10/2013

Iconen:

Yaniv, Sunday, March 28th, 2010

Jake Rocheleau, 19 juli 2013

http://www.openwebit.com/c/common-web-fonts-for-mac-

http://blog.teamtreehouse.com/50-homepage-website-lay-

and-windows/

outs-using-featured-details-icon-lists

Geraadpleegd op 06/10/2013

Geraadpleegd op 09/26/2013

What is your type? Selecting the right typeface for your logo

Top 9 at 99 results, Kaitlyn Ellison on October 10, 2013

designs. , By Floyd Hijada on September 9, 2013 in Design

http://99designs.com/designer-blog/2013/10/10/top-9-at-

Tips and Resources, geraadpleegd op 19/09/2013 van,

99-results-september-2013/?utm_source=feedburner&utm_

http://99designs.com/designer-blog/2013/09/09/what-is-your-

medium=email&utm_campaign=Feed%3A+99designsDesign

type/

erBlog+%28Designer+Blog%29 Geraadpleegd op 10/19/2013

Typography in Web Design, ?/?/?. http://www.awwwards.com/websites/typography/

Navigatie:

Graadpleegd op 07/10/2013 Costumersuccess

Gestalt:

http://customersuccess.org/ Geraadpleegd op 09/22/2013

Sheets, Online.han.nl, VSD_gestalt_EN.pptx, Geraadpleegd op 09/20/2013

Algemeen: 99designs

Colour:

http://99designs.nl/contests Geraadpleegd op 10/01/2013

Nancy Koornwinder, 17 mei 2011 http://kleurkleur.wordpress.com/tag/monochromatische-

THE LANGUAGE OF INTERFACES, ?/?/?

kleuren/

http://contrast.ie/blog/

Geraadpleegd op 09/21/2013

Geraadpleegd op 09/25/2013

Digitallife, 1998-2013 TNS, a Kantar Group Company. http://2010.tnsdigitallife.com/ Geraadpleegd op 10/02/2013 Egbert van Keulen, 01 oktober 2013 , http://www.emerce.nl/achtergrond/infographic-websiteklaar-mobiel?utm_source=rss&utm_medium=rss&utm_ campaign=infographic-website-klaar-mobiel Geraadpleegd op 10/06/2013 Get with the future blog, JUNE 10TH, 2013 http://socialdriver.com/2013/06/50-best-responsive-websitedesign-examples-of-2013/ Geraadpleegd op 10/07/2013 Boek: Jesse James Garret, The elements of user experience.

Geraadpleegd op 09/05/2013

75

BIJLAGEN

76

Inspiratie: The elements of user experience, Chapter 5 blz. 94, matrix structure

A matrix structure allows the user to move from node to node along two or more dimensions. Matrix structures are often use- ful for enabling users with different needs to navigate through the same content, because each user need can be associated with one axis of the matrix. For example, if some of your users really want to browse products by color, but others need to browse by size, a matrix can accommodate both groups. A matrix of more than three dimensions can cause problems, however, if you expect users to rely on it as their primary navigational tool. The human brain simply isn’t very well equipped to visualize

Inspiratie: The elements of user experience, Chapter 6 blz. 120, global navigation

Global navigation provides access to the broad sweep of the entire site. The use of the term global here doesn’t necessarily imply that this navigation appears on every page in the site—although that’s not a bad idea. (We use the term persistent to refer to navigation elements that appear throughout a site; again, keep in mind that persistent elements are not necessarily global.)

Instead, global navigation brings together the key set of access points that users might need to get from one end of the site to the other. Navigation bars linking to all the main sections of a site are a classic example of global navigation. Anywhere you might want to go, you can get there (eventually) with global navigation.

77