A Guide in to Web Design by infosjoerd

P.C.R.

Voorwoord Om te beginnen wil ik graag vertellen dat mijn 2jd op de Hogeschool van Amsterdam een zeer aangename uitbreiding van mijn kennis hee< opgeleverd. Nadat ik een valse start had gemaakt in het eerste jaar van mijn studie ben ik gaan kijken naar wat hulpmiddelen. Deze hulpmiddelen hebben mij op weg geholpen om als een soort van springplank te fungeren naar de capaciteiten van mijn kunnen. Ik ben nu aangeland op een moment waar ik mijn leven tot zover kan beoordelen. Ik neem hierin ook mijn scrip2e mee, dit vind ik een mooie aangelegenheid om enkele mensen te bedanken en om alles af te ronden zodat ik verder kan gaan met het volgende hoofdstuk van mijn leven. Allereerst wil alle leraren en medewerkers van de Hogeschool van Amsterdam bedanken voor de kennis, de wijsheid en de inspira2e die ik heb mogen oppikken 2jdens mijn vier jaar in Amsterdam. Daarnaast wil ik in het bijzonder mijn familie, Pauline en haar familie bedanken voor de steun de afgelopen 2jd. Zoals in elk proces, heb ik dieptepunten en hoogtepunten beleefd en jullie stonden al2jd klaar om mij op te vangen en met mij de vreugde te delen. Ik zal dat nooit vergeten en voor al2jd meenemen waar ik ook heen ga. Mijn digitale leven Het was 1998, het jaar waarin het Nederlands el<al eigenlijk wereldkampioen zou moeten worden, waarin mijn broer verhuisde naar Maastricht voor zijn studie en waarin ik verhuisde van de eerste etage naar de zolder. De zolder zou een waar digitaal paleis voor mij worden. Hier heb ik namelijk mijn talenten ontdekt op het gebied van elektronica. Op dat moment waande ik me in een wereld waarin ik bewust bezig was met computers. Waren het eerst de veJe spelcomputers, al snel verlegde mijn crea2eve geest zich naar de PC. Mijn ouders hadden een PC staan in de woonkamer, maar deze werd al snel door een jong jochie van 15 jaar naar de zolder mee verhuisd, naar het o zo bekende zolderkamertje. Op deze PC ontdekte ik het programma PAINT. Dit zou mijn eerste contact worden met een digitaal ar2s2ek programma. Het staat mij nog goed bij dat ik mee deed aan een Donald Duck teken-‐wedstrijd en dat er bij mij de inspira2e kwam om een tekening in PAINT te maken en deze uit te printen en op te sturen. Ik leerde tegelijk een belangrijke taak bij het werken op de computer, namelijk: OPSLAAN. Helaas crashte mijn PC en was ik mijn eerste digitale kunstwerk kwijt. Dit was dan ook mijn eerste teleurstelling in Windows. afb 1 ToyStory, Disney ,Pixar

Maar ik was niet uit veld geslagen en ging al snel aan de slag met andere digitale kunstwerkjes. Naar mate de jaren verstreken werd ik steeds nieuwsgieriger naar de computer en wat je er mee kon. Inmiddels was Toy Story uitgebracht en zag ik een nieuwe wereld voor mij openen. Een digitaal speelveld waarin de mogelijkheden oneindig waren. Toy Story sprak mij op meerdere fronten aan. Natuurlijk waren de ﬁguren ontzeJend goed gemaakt en was het voor het eerst dat kinderen werden aangesproken door een verhaal, dat door 3

middel van computers werd verteld. En dit wilde ik ook. Ik wilde meester worden over de computer en aangezien ik als de wizzkid van de familie werd beschouwd , was die stap rela2ef klein. Na mijn carrière op de middelbare school waar alleen het vak Tekenen op het examen als uitblinker op mijn lijst stond, kon ik mij gaan focussen op een Grafische school. Daar waar ik het vak grafische vormgeving ging leren vanuit de hoek van digitale media. Ik leerde hier mijn eerste serieuze pakkeJen, zoals Photoshop en leerde ik hoe ik daar mee kon manipuleren. Ik leerde de basis en deelde kennis met mijn klasgenoten. Mijn passie kent daar zijn oorsprong omdat ik was omgeven door vele talenten, die mij de fijne kneepjes van het vak konden uitleggen. Na het succesvol afronden van mijn 2jd op het Grafisch Lyceum Utrecht, wilde ik meer gaan doen met de kennis die ik op dat moment in mijn rugzakje had. Ik wilde het kunnen toe passen en er meer mee kunnen doen. Zodoende ben ik beland op de Hogeschool van Amsterdam en volg ik de studie Interac2ve Media. Tijd om serieus te worden. Ik heb hier ontzeJend veel geleerd en nu ben ik zo ver dat ik mij kan gaan specialiseren. Het is 2jd om Interac2ve Designer te worden. Het is 2jd om een scrip2e te schrijven over het vak waarin ik wil gaan werken. Het is nu 2jd voor: A Guide into Webdesign.

INHOUDSOPGAVE Hoofdstuk 1. Inleiding, mijn probleem met webdesign

Hoofdstuk 2. Webdesign

• 2.1 Het landschap van webdesign

• 2.2 Van webdesign naar interac9on design

• 2.3 Content is King

• 2.4 Webdesign

Hoofdstuk 3. Onderzoek

• 3.1 Inspira9ebronnen

• 3.2 De theore9sche onderbouwing

• 3.3.1 Websites binnen het Crea9on Model

• 3.3.2 Onderzoek Design / Produc9on Studio’s websites

• 3.3.3 Onderzoek Fashion-‐websites

• 3.3.4 Onderzoek Fotograﬁe-‐websites

• 3.3.5 Onderzoek Game-‐websites

• 3.3.6 Onderzoek Film-‐websites

• 3.3.7 Onderzoek Video-‐websites

• 3.3.8 Bevindingen Crea9on Model

• 3.4.1 Websites binnen het Business Model

• 3.4.2 Onderzoek Bank-‐websites

• 3.4.3 Onderzoek Shop-‐websites

• 3.4.4 Bevindingen Business Model

• 3.5.1 Websites binnen het Communica9on Model

• 3.5.2 Onderzoek Social Media-‐websites

• 3.5.3 Bevindingen Communica9on Model

Hoofdstuk 4. Conclusie

Hoofdstuk 5. Aanbevelingen

Hoofdstuk 6. Literatuurlijst/bronvermeldingen:

• Deze website zijn geraadpleegd in de periode van oktober 2009 tot mei 2010:

• Literatuur:

• Video:

Samenva,ng Dresscodes Mijn scrip2e is benaderd uit de fascina2e voor webdesign. Tot voor het afronden van mijn scrip2e was deze wereld voor mij een grote warboel. Ik had geen idee waar de wereld van webdesign uit bestond of welke kant het opging. Mijn onderzoek was dus een ware puzzeltocht naar de ingrediënten van websites, of zoals ik ze noem, de dresscodes. Zoals er voor elke gelegenheid een passende dresscode bestaat, moet er ook voor een website hetzelfde bestaan, toch? Ik ben dus op zoek gegaan naar de belangrijke elementen van websites en heb deze dan ook blootgelegd in mijn onderzoek waardoor ik een heldere kijk op de wereld van webdesign heb gekregen. TheFWA.com In het afgelopen half jaar heb ik de designs van websites onderzocht zoals zij op dat moment online stonden. Om dit onderzoek in goede banen te leiden heb ik gekozen om een selec2e van websites te organiseren in verschillende categorieën. Aan de hand van de indeling van TheFWA.com ( The Favorite Website Awards) heb ik drie modellen aangebracht, namelijk het Crea2on Model, Business Model en de Communica2on Model. Deze modellen vormen een raamwerk waarbinnen websites beter georganiseerd en bestudeerd kunnen worden. Ik heb gekozen voor de indeling van TheFWA.com omdat zij naar mijn mening de beste categorisering hebben gemaakt met het oog op design. Resultaat Dus welke elementen zijn belangrijk voor deze categorieën en hoe belangrijk is webdesign voor de boodschap die je wilt overbrengen? Wat zijn de func2es van webdesign en waaraan moeten verschillende soorten websites voldoen om goed over te komen? Al deze vragen zijn inmiddels beantwoord en hebben een mooi resultaat opgeleverd voor zowel de wereld van webdesign als voor mijzelf als professionele designer.

Hoofdstuk 1. Inleiding, mijn probleem met webdesign Mijn inspira2e komt voort uit een hele mooie hoek, namelijk de fashion wereld. Door de jaren heen is het mij opgevallen dat er voor elke loca2e en elk evenement een bepaalde dresscode bestaat. Als we naar het strand gaan trekken we allemaal strandkleding aan en als u wordt gevraagd om naar een zakelijk diner te komen dan weet men dat een pak voor een man een vereiste is. Ons lichaam kan op vele manieren worden aangekleed en zich perfect ‘camouﬂeren’ in zijn omgeving middels de dresscodes. Deze dresscodes hebben mij geïnspireerd om op dezelfde manier naar websites te kijken. Websites zijn in eerste instan2e informa2ebronnen voor het opzoeken over bepaalde onderwerpen. Het skelet van een website bestaat uit informa2e die door de spieren o<ewel de naviga2e worden geleid. Daaromheen moet nog wat huid komen, het wereld wijde web, waarmee we dus eigenlijk een levend object hebben. Maar een levend object wat zoveel gelijkenissen met de mens hee< moet zich wel op de juiste manier aankleden. Hier komt webdesign om de hoek kijken. Voor het aankleden van onze website nodigen wij een ontwerper uit. Iemand die veel verstand hee< van de juiste kleding voor de juiste boodschap. Zie hier de link tussen fashion en webdesign. Beiden zijn gericht op het overbrengen van een bepaalde sfeer, toon, boodschap en gevoel. De reden waarom ik deze link leg is om duidelijk te maken welke kant ik op wil met deze scrip2e. Ik wil, wat veel mensen voor onmogelijk houden, erachter zien te komen wat de dresscodes zijn voor bepaalde websites. Websites, deze zoals we allemaal weten, komen in allerlei vormen en maten op ons beeldscherm voorbij, sommigen zijn groot, klein, func2oneel en waar andere weer totaal geen func2e lijken te vertonen. Maar als er zoveel websites zijn en dus ook veel opdrachtgevers, is het dan nu niet zover dat we mogen spreken van een bepaalde code onder websites? Immers, veel websites worden gemaakt naar aanleiding van een andere website. We inspireren elkaar en zorgen zelf voor bepaalde afspraken binnen het vakgebied van websdesign. Maar hier ligt gelijk het probleem. Nergens wordt het onderdeel webdesign uitgelicht en op verklarende wijze uitgelegd. Het probleem ligt hem in het feit dat we in een snelle wereld werken en leven. Vaak worden er boeken uitgebracht over webdesign maar nergens worden de designs onder de loep genomen. Want welke elementen zijn belangrijk voor bepaalde type websites? Op het moment van schrijven, zijn er meer dan 200 miljoen sites ac2ef aanwezig op het internet. Dus het is nog al wat om alles binnen bepaalde propor2es terug te brengen. Ook de vrijheid van het web is een moeilijk punt. Door de vrijheid lopen de patronen erg uiteen. Nu sta ik op het einde van mijn schoolcarrière en wil ik graag met een frisse blik het wereldje van webdesign instappen. Het probleem is om een duidelijk overzicht te verkrijgen. Voor de meeste van ons, zit het ergens tussen de oren. Dit document maak ik voor anderen en natuurlijk ook voor mijzelf om meer overzicht te verkrijgen in het landschap van websites, wat ik nu wil gaan ontdekken. Voor mijn scrip2e ga ik hier onderzoek in doen en zal mijn onderzoeksvraag als volgt luiden:

Wat zijn de dresscodes voor websites? Om dit te kunnen begrijpen is het van belang om een aantal deelvragen te beantwoorden: -‐ wat is het webdesign landschap en hoe is het ontstaan? -‐ wat is de interac2e tussen webdesign en interac2on design? -‐ wat is de rela2e tussen content in webdesign? -‐ waar bestaat webdesign uit? 7

Door deze vragen te beantwoorden in hoofdstuk 2 krijgen we een beter inzicht in de wereld van webdesign. Om tot een uiteindelijk antwoord op de hoofdvraag te komen heb ik een onderzoek gedaan naar de belangrijkste elementen op verschillende websites die samen de ingrediënten vormen voor de dresscodes. Als raamwerk voor dit onderzoek heb ik een onderverdeling in drie modellen gebruikt waarbinnen de meest belangrijke website categorieën te vangen zijn. Dit onderzoek en de drie modellen staan beschreven in hoofdstuk 3. Ten sloJe zal ik in hoofdstuk 4 terugkomen op de hoofdvraag. In hoofdstuk 5 rond ik af met aanbevelingen voor verder onderzoek.

Hoofdstuk 2. Webdesign 2.1 Het landschap van webdesign

a%.2. Screenshot Logorama

Waar komt webdesign nu eigenlijk vandaan? Zoals velen weten kent het internet een snelle ontwikkeling. Al snel na de ontdekking van de mogelijkheden van het internet, kwamen de bedrijven af op deze ontwikkeling. De ontwikkeling van het internet luidde een nieuw 2jdperk in. Deze nieuwe technologie van het samenbrengen van verschillende netwerken zorgden ervoor dat er nieuwe mogelijkheden kwamen voor de commerciële wereld. Bedrijven zagen in dat deze nieuwe wereld een mogelijkheid was om te gebruiken als verlenging van hun business. Voorheen werd internet door bedrijven gebruikt als een communica2emiddel voor marke2ng, inmiddels bestaan er hele marke2ngstrategieën die draaien om websites van bedrijven. De websites vormen tegenwoordig een cruciaal onderdeel voor de uitstraling van een bedrijf of idee waarvoor je een website bouwt. Websites vinden we in allerlei vormen en maten in eerste instan2e werd internet vooral gebruikt door commerciële bedrijven. Zij zagen in internet een interessant communica2emiddel voor commerciële doeleinden. Er is hierdoor een explosie ontstaan van allerlei verschillende bedrijven die online ac2ef willen zijn waardoor de wereld van webdesign een enorme groei mee maakt. Met als gevolg dat het huidige landschap van webdesign uit allerlei verschillende merken bestaat (zie aheelding 2.) en hierdoor onoverzichtelijk is geworden. Internet is een nieuwe communica2e vorm waarin alle vormen van interac2e mogelijk zijn. Maar het is las2g om als bedrijf op te vallen in deze wereld. Met alleen een website kom je er tegenwoordig niet meer zo makkelijk van af. Een goede online en oﬄine strategie is des te meer gewenst om je website tot een succes te laten worden, er moet een soort van promo2e zijn om een ‘ﬂow’ naar je website te creëren. Maar deze marke2ng tools zeJen we even opzij. We weten nu dat ze van ontzeJend grote waarde zijn en dat ze al voor een groot deel je boodschap verkondigen, maar dat is een ander onderdeel waar ik mij nu niet op ga focussen. Hiervoor is de grooJe van mijn scrip2e niet toereikend. Dit is wellicht interessant voor een vervolgonderzoek.

Een complex landschap De wereld van het web was vroeger overzichtelijker. Hoofdzakelijk bestond de wereld uit informa2e zoeken en het vinden van bedrijven die onderling een groot netwerk vormde. Interac2e met de gebruiker stond niet centraal. Het landschap is tegenwoordig meer complex en is bezaaid met verschillende bedrijven die door middel van hun logo of imago de wereld van tegenwoordig kleur geven. Het minifilmpje Logorama (zie aheelding 2.) is een goed voorbeeld om dit weer te geven. Hoewel dit een filmpje betre< op internet en ik dit niet kan laten zien in mijn scrip2e wil ik het wel als voorbeeld gebruiken omdat het goed illustreert hoe het landschap van webdesign er tegenwoordig uitziet. Door het gebruik van marke2ng proberen bedrijven onderling verschil te maken. Deze verscheidenheid is terug te vinden in de wereld van webdesign. het landschap is inmiddels overvol en verzadigd met logo’s, merknamen, brands en imago’s. Naast de overvloed aan logo’s en merken is de wereld van het internet ook steeds meer naar elkaar toe aan het groeien. Voorheen hadden alle websites geen rela2e met andere websites en bestonden deze onajankelijk van elkaar. Daarentegen zie je tegenwoordig dat steeds meer elementen van andere websites te vinden zijn op een ander website. Zo kun je via een website van een autofabrikant een interac2ef element terugvinden die je direct linked met je eigen facebook-‐profiel. Hierdoor vloeien websites als het ware in elkaar over en lijkt het voor de gebruiker alsof de wereld van het web steeds meer één wereld aan het worden is. De wereld van webdesign is een complexe wereld. Niet alleen is het moeilijk om alles in bepaalde hokken te plaatsen om zo toch een redelijk overzicht te krijgen, daarnaast is het ook nog las2g om het overzicht te behouden. Want op het moment van schrijven ontwikkelt de markt zich steeds meer waardoor sommige onderwerpen zich steeds in andere hokken lijken te manoeuvreren. Daarnaast is het ook las2g om erachter te komen waarom bepaalde websites aantrekkelijk worden gevonden en waarom websites nu wel werken en waarom niet? In deze complexe en ingewikkelde wereld is er dringend behoe<e aan een raamwerk die ertoe dient om te weten wat een website tot een succes maakt. Een ‘roadmap to success’ gebaseerd op duidelijke dresscodes. Een dresscode die gebruikt kan worden om sneller in te springen op trends en innova2es.

2.2 Van webdesign naar interac4on design Voorheen zag je dat met name alleen bedrijven gebruik maakten van het internet als communica2emiddel. Naast de interac2e met de mensen die we al hadden zoals het afspreken in een kroeg of andere mee2ng points, is de interac2e op het internet erbij gekomen en tegenwoordig vormt het zelfs een belangrijk sociaal aspect in het sociale leven van mensen tegenwoordig, zie de impact van onder andere TwiJer en Facebook in het dagelijks leven. Daarnaast is het ontbreken van een e-‐mailadres of zelfs een eigen website tegenwoordig een belemmering voor je dagelijks leven aangezien de communica2e vaak via het internet plaatsvindt. Zonder e-‐mailverkeer lopen veel contacten belangrijke afspraken mis en als bedrijf kan je het niet maken dat je geen e-‐mailadres of website hebt. Immers, als je niet op het internet ac2ef aanwezig bent, lijkt het tegenwoordig wel dat je niet meer bestaat in het echte leven. Deze ontwikkeling hee< invloed gehad op het ontwerpen van webdesigns. De gebruiker staat nu centraal in dit proces. De toegenomen behoe<e aan interac2e wordt gebruikt op andere websites. Websites hebben zich ontwikkeld van eenzijdig communica2e middel naar een interac2eve vorm van communica2e. Belangrijker nog is de vraag die 10

webdesigners zichzelf zouden moeten stellen bij ieder nieuw ontwerp: Wie is mijn publiek? Hoe vervul ik hun wensen? Wat is daarvoor de beste manier van communiceren? Twee soorten ‘bouwers’ Deze transi2e van eenzijdige communica2e naar interac2eve vorm van communiceren zie je ook terug in de ontwikkeling van de webdesigner zelf. Het webdesign hee< de laatste 2en jaar een hevige ontwikkeling doorgemaakt we kunnen grofweg twee soorten webdesigners onderscheiden: 1. de ‘tradi2onele’ webdesigner. Dit zijn webdesigners die ervaring en kennis hebben opgedaan gedurende de (pre-‐ internet) drukperiode en deze kennis toepassen in de digitale periode. De kennis van graﬁsch design werd overgeplaatst naar het web en veel mensen die groot zijn geworden in het vak, hebben nog al2jd deze kennis als basis. De technieken die ze gebruiken zijn vooral gebaseerd op een éénzijdige communica2e. ( posters, reclameﬁlmpjes etc.) 2. de ‘wizzkid’. Webdesigners opgegroeid in de digitale periode. Deze mensen hebben niet de kennis van de drukperiode meegekregen maar de kunst van de digitale periode. Deze kennis is geheel anders van aard en weet zich nu steeds meer te manifesteren in de wereld van webdesign. Daar waar vroeger webdesign werd gezien als het vormgeven van een website, is nu die opvalng aan het veranderen. Webdesign is meer dan design, het is een interac2e geworden tussen gebruiker en website. De gebruiker is ook met de 2jd mee gegaan en hee< tegenwoordig een verwach2ngspatroon en daar moet de webdesigner rekening mee houden. Je zou dus kunnen zeggen dat een ‘tradi2onele’ webdesigner niet meer voldoet, want er moet steeds meer rekening gehouden worden met de interac2e tussen website en gebruiker. De webdesigner is de afgelopen 2en jaar veranderd in een interac2on designer. Het vormgeven van de interac2e tussen gebruiker en website is het terrein van de ‘wizzkid’ geworden.

2.3 Content is King In het proces van webdesign is ‘content’ onlosmakelijk verbonden met webdesign. Het is een wandeling waar geen van tweeën de handen los mogen laten. Het is dan ook belangrijk als webdesigner om je te oriënteren op de markt van je opdrachtgever. Deze markt bepaalt namelijk met welke tools je aan de gang kunt gaan. Het zijn namelijk de dresscodes waar je naar op zoek bent. Je kunt als webdesigner natuurlijk je fantasie de vrije loop laten gaan maar een website wordt voor een groot deel gemaakt om een bepaalde target te halen. Deze targets lopen heel erg uitéén maar deﬁniëren gelijk een groot deel van het webdesign. Het is dus voor een groot deel al bepaald door de opdrachtgever waar jij als designer voor werkt wat het design uiteindelijk zal worden. Naast het design bestaat er ook een technisch aspect. Het is namelijk zo dat de wereld van webdesign ook hand in hand gaat met de technische mogelijkheden. Een webdesigner laat zijn crea2ef product grotedeels bij de techneut achter. Het is aan de webdesigner om te weten wat er mogelijk is en aan de techneut om deze mogelijkheden uit te voeren. Twee voorbeelden uit de prak2jk: -‐ Op het moment dat KLM bij een webdesign-‐agency aanklopt om hun website te gaan ontwerpen moet er rekening worden gehouden met de huiss2jl van KLM. Ook het feit dat het om een travel-‐website gaat, gee< al aan dat er een interac2ef element voor het boeken van vluchten in verwerkt moet ziJen.

-‐ Dit geldt ook voor Volkswagen. Het belangrijkste is dat het beeldmerk van Volkswagen, de VW, terugkomt. Daarnaast moet er een innova2eve manier worden gevonden om zowel de buitenkant als wat er aan de binnenkant van de auto zit, uit te lichten. Al eeuwen speelt deze spanning tussen ‘content’ en design een rol. Ik neem als voorbeeld, Michaelangelo en de Six2jnse Kapel. Zijn grenzen waren de muren waar het plafond bereikt werd, en de zwaartekracht maakte het er ook niet makkelijker op. Wat overbleef na een paar jaar hard werken, waren 300 ﬁguren waar hij in eerste instan2e er maar 12 moest schilderen, het was een meesterwerk geworden. Ondanks zijn grenzen wist hij toch een baanbrekend resultaat neer te zeJen. De technieken die werden gebruikt worden vandaag de dag nog steeds gebruikt. Dit gee< aan hoe een kunstenaar

afb. 3. Sixtijnse Kapel, Michaelangelo

met zijn grenzen om moet gaan en wat er bereikt kan worden, ook al lijkt het onmogelijk. Binnen de lijnen moet er een crea2viteit opgeroepen worden. De inhoud van een website bepaalt het denkbeeldige kader van een webdesign.

2.4 Webdesign Waar bestaat webdesign uit? Belangrijke elementen van webdesign die al2jd terugkomen zijn naviga2e en look & feel. Naviga2e is de manier waarop je door de website heen gaat, dit zijn de knoppen die ook gelijk de onderwerpen van een website aangeven. Zij bepalen namelijk de structuur van de website. Daarnaast is er de look & feel die inhaakt op de interac2e van de website. Deze deken van kleurcodes wordt over alle elementen heen gelegd. Vaak zijn deze kleurcodes terug te vinden in de huiss2jl van het product waarvoor de website wordt gemaakt. Een website hee< de func2e om meer informa2e te verschaﬀen. Dat is de belangrijkste taak en moet terug te vinden zijn in alle func2es. Een func2e die geen informa2e verscha< is overbodig. Er kan op verschillende manieren informa2e verscha< worden via tekst, video, of illustra2es. Deze drie manieren worden op elke website gebruikt en komen al2jd terug. Zolang wij geen ander medium verzinnen zullen deze drie al2jd worden gebruikt. Door de look & feel te combineren met de drie elementen, tekst , video en illustra2es kan men verschillende designs creëren die worden ondersteund door anima2e, interac2e en ‘usability’. De balans Het gaat om de balans tussen tekst, video en illustra2es. Zoals al eerder verteld, gaat het bij een website om het verschaﬀen van de juiste informa2e. De nadruk moet al2jd liggen op het verhaal wat je wilt vertellen. Je zou kunnen zeggen dat een website een zwaartepunt hee<. Daar waar alles om draait, een soort van zwaartekracht, waar alles naar toe verwijst. Als webdesigner moet je daar al2jd rekening mee houden. Design ‘an sich’ is niet genoeg. Het moet func2oneel design zijn waarbij alle punten op een website verwijzen naar de grote boodschap.

Hoofdstuk 3. Onderzoek 3.1 Inspira4ebronnen Gedurende mijn voorbereiding op dit onderzoek, kwam ik enkele boeken tegen die mijn scrip2e een ﬂink eind in de goede rich2ng hebben geholpen. ‘Why we Love or Hate everyday things’ en de boekenserie ‘Webdesign Index’ hebben mij geïnspireerd. De boekenserie ‘Webdesign Index’ volg ik al heel wat jaren en het hee< gaandeweg wat transforma2es ondergaan in het ordenen van websites. Deze transforma2e staat de laatste jaren symbool voor de veranderingen van het benaderen van webdesign. In de vroegere edi2es werden de websites gerangschikt op kleur. Een bepaalde kleur kan een impact hebben op het onderbewustzijn, zoals de kleur blauw wordt geassocieerd met kalmte en rust. Deze kleur werd vroeger vaak gebruikt bij zakelijke websites om een onbewuste toon mee te geven. De kleur rood riep een spor2eve en compe22eve emo2e op in het onderbewustzijn, en werd vaak gebruikt bij compe22e websites. In de huidige edi2es van de ‘Webdesign Index’ wordt er gerangschikt aan de hand van content. De inhoud bepaalt nu de manier waarop we tegen de websites aankijken. Een trend die al eerder in hoofdstuk 2 is beschreven. Nog meer dan vroeger worden we als observerende onderzoekers gedwongen om afb 4. Learnsomethingeveryday.com

alles in de juiste hokjes te plaatsen.

Een ander boek wat mijn kijk op design voor een groot deel hee< verrijkt is het boek van Donald A. Norman ge2teld: “Why we Love or Hate everyday things”. Het is interessant om je te verdiepen in de vraag waarom mensen überhaupt iets mooi vinden. Want wat maakt een website zodanig aantrekkelijk? Een moeilijk onderwerp maar één die we zeker niet moeten laten liggen bij het bespreken van webdesign. Want het aanwijzen van de wereld van webdesign is één, maar het kunnen verklaren waarom die wereld er nu zo uit ziet is een andere. Norman hee< in zijn boek geconcludeerd dat we met een bepaalde onbewuste manier naar alles om ons heen kijken. Dit geldt ook voor de manier waarop we naar websites aankijken. Norman maakt een onderscheid tussen drie manieren van benaderen van voorwerpen namelijk, Visceral, je eerste reac2e, Behavioural, hoe je het gebruikt en Emo?onal, welke emo2es het oproept. Deze vorm van benadering kan ook toegespitst worden op de wereld van webdesign. Het internet is een dagelijkse gebruiksvoorwerp geworden. Tegenwoordig wordt het intensiever gebruikt dan welke voorwerpen dan ook. Het wint zelfs aan populariteit bij de vaste TV kijkers. Ook het boek ‘Guideline for success’ hee< mij geïnspireerd. In dit boek worden de volgende belangrijke vragen behandeld met betrekking tot webdesign. Vragen die iedere webdesigner zichzelf moet stellen bij het ontwerpen van een website: -‐ Audience; Voor wie is het? -‐ Site Func2on; Wat doet het voor het publiek? -‐ Interac2on; Welk verhaal proberen we te vertellen? en Welke conversa2es proberen we op gang te brengen? 13

3.2 De theore4sche onderbouwing Wat nu volgt is het onderzoek dat moet leiden tot meer inzicht in de wereld van webdesign en tot een bepaalde dresscode voor websites. Hoe kunnen we nu het onderzoek vormgeven, er is zoveel te bespreken en er zijn zoveel websites te bezich2gen. Gelukkig zijn er een veel websites die andere websites beoordelen. Als grote leidraad heb ik www.TheFWA.com aangehouden. De laatste 2en jaar houdt TheFWA een overzicht bij van nieuwe innova2eve websites die op hun beurt weer bepaalde trends in kaart brengen. Op basis van crea2viteit, originaliteit, design, content en persoonlijkheid, verdienen de websites een erevermelding. Vervolgens worden de websites gecategoriseerd naar type opdrachtgever. Zo worden bijvoorbeeld de websites die onder de autobranche vallen bij elkaar gesorteerd.. Met meer dan 90 miljoen hits in 10 jaar 2jd geldt vermelding bij TheFWA als één van de meest pres2gieuze prijzen die je als design-‐agency kan binnen halen. Ik heb ervoor gekozen om de categorisering van TheFWA te gebruiken als basis van mijn eigen theorie. Om een volledige analyse te kunnen maken van de websites volgens de TheFWA indexering, moet er een overzicht gecreëerd worden door de websites te categoriseren. De TheFWA hee< in eerste instan2e gekeken naar wat voor opdrachtgever achter de website zit en welk product er op de website getoond wordt. Het woord product kan heel ruim worden opgevat, dit kan een auto maar ook een dienst of so<ware zijn. Als deze waarden zijn bepaald kunnen we een rij van verschillende websites rangschikken. Deze worden dan verdeeld over drie modellen die er als volgt uitzien: -‐ Crea2on Model: bevat websites die een crea2eve ui2ng wil overbrengen. Dit model is heel breed genomen en veel van de onderzochte websites vallen dan ook onder dit model. Voorbeelden zijn art, photography, and fashion-‐sites. -‐ Business Model: bevat websites die gericht zijn op commercie, verkoop en business-‐to-‐business. Voorbeelden zijn e-‐commerce and travel sites. -‐ Communica2on Model: bevat websites die gericht zijn op interac2e. Voorbeelden zijn TwiJer en Facebook. Ik heb gekozen voor deze drie modellen omdat deze drie modellen alle soorten websites bevaJen zoals gebruikt in de TheFWA-‐index. Zoals eerder vermeld is het onmogelijk om alle websites in hokjes te plaatsen, maar door deze indeling kan ik websites beter beoordelen en een helder beeld verschaﬀen van het landschap van webdesign. Om een antwoord te kunnen geven op mijn onderzoeksvraag, namelijk “Wat zijn de dresscodes voor websites?” heb ik websites met elkaar vergeleken. Ik ben begonnen met het deﬁniëren van de belangrijkste elementen van een website. Ik heb een top vijf van elementen gemaakt die op elke website van iedere categorie te vinden is. Ik heb gekozen voor de volgende elementen: -‐ Naviga?e; Naviga2e bepaalt de structuur van iedere website. -‐ Techniek; welke techniek is gebruikt om de website te bouwen. Techniek bepaalt de func2onele mogelijkheden van de website -‐ Design; hoe worden foto’s, illustra2es en video gebruikt op de website -‐ Gevoel; welke emo2e probeert de website over te brengen -‐ Interac?e; is de inten2e eenzijdige communica2e of interac2e uitlokken

Bij het vergelijken van de websites heb ik eerst gekeken binnen welke model de website valt en binnen welke categorie. Vervolgens heb ik per website de belangrijkste elementen geanalyseerd en uitgelegd. Vervolgens heb ik gekeken of de gevonden elementen terugkwamen op andere websites binnen de categorie. Het zijn namelijk de elementen die de dresscodes bepalen.

3.3.1 Websites binnen het Crea4on Model Al sinds het begin van het ontstaan van de mensheid, weet de mens zich op een crea2eve manier te uiten. Laten we de grot-‐tekeningen als een begin nemen. Op een crea2eve manier wisten de mensen van toen, hun verhalen uit te beelden. Door de 2jd heen hebben we de Egyptenaren gehad met hiërogliefen, de Maya bevolking tot aan de Renaissance met onder aanvoering van Leonardo Da Vinci die het beeld tot in perfec2e op het doek kon zeJen. Het zit dus in ons genen om met de middelen die voor handen zijn ons verhaal te kunnen uiten op de communica2e middelen van de 2jd die ons tegemoet komt. Vanuit deze gedachte heb ik de Crea2on Model in het leven geroepen. Onder het Crea2on Model vallen de websites die een crea2eve ui2ng willen over brengen. Dit model is heel breed genomen en veel van de onderzochte websites vallen dan ook onder dit model. Het model laat tegelijker2jd zien dat de mens nog al2jd crea2ef is in zijn ui2ngen. We kunnen zeggen dat de mens het meest crea2eve wezen op aarde is, en die crea2viteit gaat met de 2jd mee. Het Crea2on Model zie ik als het kloppend hart van de webdesign wereld. Uit dit model komen de meest unieke oplossingen voor webdesign. Het zijn de kunstenaars van tegenwoordig die weten met hun digitale penselen steeds weer nieuwe invalshoeken te vinden voor het web. Het is dan ook niet heel vreemd dat dit model de grootste is van de drie modellen die ik heb aangemaakt. Nogmaals, het is een natuurlijke drang om ons te uiten via de wegen die we vinden of uitvinden. Maar laten we nu gaan focussen op de dresscodes van het Crea2on model. Dit model bevat vele verschillende websites. Doordat ik veel van de categorieën heb geplaatst in dit model, zien we veel uitéénlopende types voorbij komen.

Categorieën die binnen dit model vallen: • anima2on & cartoon • art, illustra2on & exhibi2on • design/produc2ons studios • games playable -‐ games promo2onal • ﬁlm/movies • ﬁlm-‐tv-‐video produc2on • experimental • entertainment game -‐ entertainment music • personal /porxolio • photography • architecture & interior design • automo2ve cars -‐ automo2ve other • fashion • fashion clothes & footwear • fashion (cosme2cs ) hair&beauty

3.3.2 Onderzoek Design / Produc4on Studio’s websites Bij design / produc2on studios-‐websites, staat éénvoud voorop. De websites ogen allemaal clean en overzichtelijk vanwege de vele projecten die worden getoond. Als bedrijf wil je dat jouw werk en filosofie naar voren komt. Om duidelijk je verhaal te kunnen vertellen aan de gebruiker moet je wel met een overzichtelijke vormgeving komen. Je hebt veel te vertellen dus moet je de informa2e helder en aangenaam overbrengen. Hoe professioneler de agency is, hoe cleaner de look-‐and-‐feel van de website. NavigaLe: Klanten -‐ Work -‐ Staff -‐ Filosofie Technisch: Fullscreen Flash Design: Veel gebruik van heldere graphics tegen een simpele achtergrond met een heldere opbouw. Video’s worden veel gebruikt. Gevoel: De heldere opbouw van de website gee< een ‘vrij’ gevoel van ruimtelijkheid waarbij de kernboodschap van het scherm knalt InteracLe: De interac2e kenmerkt zich door originaliteit. Zo is bijvoorbeeld het laadelement geen simpele zandloper maar het beeldmerk van het bedrijf, worden 2jdsbalken geïntegreerd met het hoofdmenu en worden filmpjes naadloos verwerkt in de website. Geen simpel ‘klikwerk’ maar unieke, originele en vaak ook simpele elementen staan voorop. De interac2e en het gevoel zijn de belangrijkste factoren voor design / produc2on studio-‐websites.

3.3.3 Onderzoek Fashion-‐websites Er zouden geen fashion-‐websites bestaan zonder fotografie. Het vastleggen van de kledingstukken is een essen2eel onderdeel van de fashion wereld en het is daarom ook niet verwonderlijk dat veel fashion-‐websites veel weg hebben van foto-‐websites. Fashion draait puur om het overbrengen van een gevoel. Dat gevoel zit hem in de vormgeving en interac2e maar uiteindelijk dragen de kledingstukken de hele website. Fashion-‐websites worden gekenmerkt door de mogelijkheid om naast een volledige collec2e in te zoomen op de details van specifieke kledingstukken. De stoffen worden besproken en ook de look waarin je de kleding het beste kunt dragen. Fashion bestaat uit vele kleuren, smaken en trends, hierdoor vind je veel websites die qua vormgeving ontzeJend uitéénlopen. Om het gevoel zo goed mogelijk over te laten komen wordt er vaak gebruik gemaakt van fullscreen. Je hele browser wordt overgenomen door de wereld van fashion. NavigaLe: Collec2on -‐ Where to buy -‐ Filosofie -‐ Winter -‐ Summer -‐ Stores Locators Technisch: Fullscreen Flash Design: Veel gebruik van fotografie en witruimtes. Alles draait om de foto’s en de kledingstukken. Gevoel: Veel gebruik van inzoom mogelijkheden, je krijgt het gevoel dat je de kleding kan aanraken InteracLe: Klein en verfijnd. De interac2e met de website zit verwerkt in de design. De interac2e verder is simpel, meestal gericht op het navigeren tussen verschillende schermen.

3.3.4 Onderzoek Fotografie-‐websites Fotografen hebben meerdere plekken op het internet waar ze hun foto’s kunnen delen met de rest van wereld. Het kost ze vaak niks en het is een leuke en snelle manier van sharen. Een eigen website valt meer op tussen de standaard websites. Je gee< de gebruiker tevens de kans om alles te beleven zoals jij wilt dat jouw foto’s worden bekeken. Opvallend bij fotografie -‐websites, is het gebruik van fullscreen. Door de toename van het aantal pixels in de camera’s, zijn foto’s vaak te groot voor een beeldscherm. Foto’s moeten op groot formaat afgedrukt kunnen worden om de kwaliteit te kunnen waarborgen. Door de totale grote van de foto’s te implementeren in je website, kan de gebruiker een gedetailleerd beeld van de foto’s zien. Hierdoor wordt de gebruiker ‘overwhelmed’ door de schoonheid van de foto, maar is er ook een mogelijkheid om tot in in detail de foto te bestuderen. De foto’s staan centraal en kunnen dus weinig storing in het beeld gebruiken. Naviga2e wordt dan al2jd op een slimme manier blind weggewerkt. Als er naviga2e te zien is, dan wordt dit al2jd sub2el toegepast zodat het niet afleidt. Fotografie websites rusten zwaar op het beleven van de websites, dat wil zeggen dat het ontzeJend belangrijk is wat voor gevoel de gebruiker krijgt bij het bekijken van de foto’s Door slimme naviga2e gee< de fotograaf de gebruiker de gelegenheid om zijn foto’s op2maal te kunnen bekijken. NavigaLe: Fotoshoot -‐ Categorie -‐ Bio -‐Contact -‐ About Technisch: Fullscreen Flash Design: Veel gebruik van fullscreen foto’s. Weinig elementen zoals video en tekst. Tekst is ondersteunend voor foto’s, Illustra2es zorgen voor de juiste sfeer bij foto’s, maar vormen geen hoofdrol. Gevoel: Het gevoel wordt door middel van foto’s neergezet. De websites zelf bevaJen een overzichtelijk gevoel. InteracLe: De interac2e is gericht op makkelijk navigeren door foto’s en fotoseries heen.

3.3.5 Onderzoek Game-‐websites Game-‐websites komen heel dicht in de buurt van ﬁlm-‐websites als het gaat om de ingrediënten. Dezelfde waarden worden aangehaald omdat het bij games vaak gaat om de beleving. Het worden steeds meer interac2eve ﬁlms waarin je zelf de hoofdpersoon bent. Je speelt met bepaalde karakters en gaat ook de interac2e aan met deze karakters. De karakters worden breed uitgelicht en het verhaal wordt uitgebeeld door de gehele website. Je komt gelijk als gebruiker in de wereld terecht van de game en wordt meegezogen door de interac2e. Meestal ligt de interac2e dicht bij het spel waardoor je een beeld kunt vormen over hoe het spel gespeeld gaat worden. Interac2e en gevoel zijn ontzeJend belangrijk en worden ingevuld door de game vormgeving zelf. Het komt nooit voor dat de vormgeving van een game-‐ website anders is qua opzet dan die van de game zelf. NavigaLe: Story -‐ Characters -‐ Video -‐ Screenshots -‐ Downloads -‐ Gameplay Technisch: Fullscreen Flash Design: Veel gebruik van ingewikkelde graphics en afgestemd op de game. Bevat al2jd elementen van de game en al die elementen worden rijkelijk gebruikt. Uiteindelijk is er veel gebruik van video, tekst en graphics. Tot ‘over the top’ aan toe. Gevoel: Het gevoel zit hem in het overbrengen van de juiste sfeer. Een website is een totaal ander medium dan games, dus hier zit wel een verschil tussen. Gamewebsites zijn gericht op het overbrengen van het gevoel door middel van zoveel mogelijk te lijken op de game. InteracLe: De website vertoont gelijkenis met de game, maar is website gericht. Dus het bevat niet de game elementen maar elementen voor webdesign. Vaak wordt er gebruik gemaakt van simpel overzicht wat je kunt gebruiken om snel naar verschillende onderdelen van de website kunt gaan.

3.3.6 Onderzoek Film-‐websites Bij film-‐websites is het grootste gedeelte eigenlijk al gegeven, namelijk de huiss2jl. Het is aan de interac2on-‐designer. nu de taak om het gevoel van de film over te brengen naar de gebruiker. Je moet als het ware gezogen worden in het verhaal en alles mee krijgen waar de film over gaat. De website van een film vertegenwoordigt de film dus ben je als interac2on-‐designer geheel vrij over bepaalde elementen die je gebruikt binnen de volgende kaders. Bij alle film-‐websites is het duidelijk dat er vaak wordt gekozen voor fullscreen. Je hele browser is gevuld met de film of wat met direct met de film te maken hee<. NaviagLe: Trailer -‐ Synopsis -‐ Characters -‐ Photo’s -‐ Games -‐ Downloads -‐ Soundtrack -‐ Buy Technisch: Fullscreen Flash Design: Veel gebruk van video, en illustra2es. De websites zijn ontworpen om het beeld van de film zo goed mogelijk weer te geven en zijn meestal ook ‘over the top’. Gevoel: Het gevoel zit hem in het overbrengen van de juiste sfeer. Websites zoals Alice in Wonderland zijn helemaal gemaakt om de sfeer van Alice in Wonderland over te kunnen brengen. InteracLe: Interac2e is simpel en bevat de bekende knoppen en verwijzingen. Hoewel de interac2e wordt ‘verstopt’ in het design, is het al2jd overzichtelijk, want er is veel aan te bieden op film-‐websites. De gebruiker moet er snel achter kunnen komen waar de film overgaat. Men hoe< niet uren ac2ef te zijn, omdat alles op de website over de film gaat, en dus niet over de website zelf. De website staat in dienst van de film en is een slechts een hulpmiddel om de film te promoten.

3.3.7 Onderzoek Video-‐websites Youtube, Vimeo en DailyMo2on om maar een paar websites te noemen hebben allemaal een krach2ge posi2e ingenomen op de markt van videostreaming. Alle drie de websites tonen qua construc2e hetzelfde, namelijk de videos links uitlijnen, op2e tot fullscreen modus, gerelateerde video’s en een overzicht van andere video’s. Het is duidelijk dat de video centraal staat en dat alles wat direct gerelateerd is met de video in hetzelfde gebied geplaatst wordt, zoals commentaar, aantal views en de controls om de video te kunnen controleren. NavigaLe: Upload -‐ Proﬁle -‐ Favorites -‐ Overview -‐ Search -‐ Sort -‐ Recommended Technisch: Flash Players en HTML 5 players -‐ HTML Design: Veel gebruik van kolommen, tekst en video. Kleine aheeldingen geven een preview aan van de video. Een kleine beschrijving gee< direct aan om welke video het gaat. Gevoel: Het is overzichtelijkheid en geordend. Je kunt snel een video terug vinden door overzichtelijke kolomindelingen de plaatsing van groepen. InteracLe: Simpele interac2es, je kunt database ac2e uitvoeren , zoals het uploaden, verwijderen, maar ook toevoegen van beschrijvingen. Uiteindelijk kan je ook commentaar toevoegen aan een video. Deze vorm van interac2e is klassiek te noemen en kent geen verrassingen voor de gebruiker.

3.3.8 Bevindingen Crea4on Model Om te beginnen bij het Crea2on model, kunnen we concluderen dat de vaste elementen van de websites allemaal gericht zijn op het overbrengen van een gevoel. Kijken we bijvoorbeeld naar film-‐websites, dan zien we daarin dat elementen als techniek en design een belangrijke rol spelen in de overdracht van gevoel en dat de structuur in de naviga2e vastligt en éénheid brengt in alle websites. Het gebruik van deze vaste naviga2estructuur gee< aan wat de dresscode is voor filmswebsites. Er wordt zoveel mogelijk op emo2e gespeeld en alle manieren om emo2es aan te spreken worden aangehaald om dat effect teweeg te brengen. Het zijn de websites die door middel van hun dresscodes je gevoel willen aanspreken. Als bijvoorbeeld bij films zijn de dresscodes de naviga2e, dus de structuur van de website, met als doel het tonen van trailers en het bespreken van karakters en het verhaal, vervolgens is het mogelijk om wallpapers en icons te downloaden. Als de film op DVD of Blu-‐Ray is uitgebracht, kan men deze aanschaffen via de website. Men wordt helemaal omgeven door de wereld van de film, het is terug te vinden op je desktop, je msn-‐aheelding is afgeleid van de film, je kunt zelfs tegelijker2jd de muziek van de film draaien terwijl je aan het werk bent. Al deze gegevens zorgen ervoor dat je het gevoel van de film meekrijgt. Bij fashion wordt je ook gezogen in de wereld van dat bepaalde merk. Je kunt niet om de inhoud heen, namelijk de collec2e is het belangrijkste, en zal dan ook fullscreen op je af komen. Deze dresscodes zorgen er dus voor dat je wordt opgezogen in de wereld van crea2on, waardoor je dus een gevoel krijgt dat moet leiden tot het herkenning van het merk. Wat duidelijk is bij de ontwerpen van de websites die onder deze categorie vallen, is dat de focus vooral ligt op het overbrengen van een gevoel. Crea2on Model bevat alleen maar webites die het gevoel willen overbrengen vaak door middel van overdaad. Het is al2jd veel en al2jd vol aanwezig, je kan niet om de website heen en je kan niet negeren waar het om draait. Daarnaast zijn voor elke categorie weer andere vaste ingrediënten zoals de invulling van de naviga2e structuur. Alle elementen op de website zorgen ervoor dat de boodschap, in dit geval gevoel, over wordt gebracht. Door het innova2eve karakter en de unieke oplossingen die zijn doorgevoerd in alle elementen van de website wordt de gebruiker in een eigen wereld gezogen. Deze werelden zijn allemaal uniek in hun soort.

3.4.1 Websites binnen het Business Model Het internet is een mooi speelveld voor het bedrijfsleven. Veel contacten worden gelegd via het internet. Het is tegenwoordig ‘not-‐done’ als je als bedrijf geen website hebt. Onze sociale contacten gaan via de digitale snelweg, omdat het sneller en gemakkelijker is. Als sinds het begin van het ontstaan van internet, hebben bedrijven een belangrijk aandeel gehad in de ontwikkeling van webdesign. Daar waar steeds meer innova2evere websites een he<ige ontwikkeling hebben doorgemaakt, zijn de zakelijke websites meer gaan focussen op het overbrengen van een dienst of product. De websites die onder dit model vallen, hebben de gemeenschappelijke factor dat ze gemaakt zijn om een bepaalde rust uit te stralen. De focus ligt op het overhalen van de gebruiker door middel van het vertellen van een verhaal of ﬁlosoﬁe. De websites zijn er niet om de gebruiker te entertainen maar om in dienst te staan van de gebruiker. Het is dus belangrijk dat deze websites hun focus leggen op de gebruiksvriendelijkheid, om zo de gebruiker voor zich te winnen. De gebruiksvriendelijkheid van de website bepaald hoeveel gebruikers op je website blijven. Categorieën die binnen dit model vallen: • commercial/corporate • e-‐commerce • educa2on • food&drink • mobile communica2on • recrea2onal • travel&tourism • resource&community • sports& leisure • shops

3.4.2 Onderzoek Bank-‐websites Een bank biedt ﬁnanciële service zoals sparen, lenen, internetbankieren en verzekeren. In dit geval valt de website onder het business model. Het is dus noodzakelijk om alles kwijt te kunnen op jouw website. De truc zit hem in het goed plaatsen van alle informa2e op de juiste plekken. Vaak is een wijde indeling terug te vinden en is de opzet simpel en overzichtelijk. De gebruiksvriendelijkheid is hier zeer belangrijk. De dresscodes van bank-‐websites zit hem in de strakke indeling van de kolommen. Elke onderdeel krijgt door middel van witruimten zijn eigen focuspunt. NavigaLe: Zakelijk -‐ Par2culier -‐ Internetbankieren -‐ Verzekeren -‐ Sparen -‐ Lenen -‐ Hypotheken -‐ Inlog Technisch: HTML Design: Veel gebruik openheid en simpele graphics die nog net de iden2teit van de bank weergeven. Gevoel: Het uiterlijk van de website is clean en tracht een gevoel van overzichtelijkheid te creëren. InteracLe: Simpele interac2e waarbij de gebruiker het gevoel hee< de volledige controle te hebben over de website. De interac2e is herkenbaar en werkt snel. Er wordt gebruikt gemaakt standaard knoppen systeem en naviga2e.

3.4.3 Onderzoek Shop-‐websites Belangrijk bij een webshops is het aanbieden van je producten en als het er veel zijn, moet je wel met rasters en kolommen gaan werken. Kolommen maken het overzichtelijk voor de gebruiker en geven direct aan hoeveel producten er zijn. Naast het aanbieden van het complete aanbod is het gewenst om per product te laten zien wat de mogelijkheden zijn. In het geval van bijvoorbeeld Nike Store is het mogelijk om verschillende kleuren te gebruiken en verder te versieren met eigen inbreng zoals je naam of illustra2es. Deze elementen vind je terug in de webshops. NavigaLe: Zoeken -‐ Filter -‐ Shopping Cart -‐ Inlog -‐ Account Technisch: HTML -‐ DATABASE -‐ PHP Design: Veel gebruik openheid en kolommen. Design komt alleen maar terug in de func2onele elementen. Gevoel: De online shops geven het gevoel dat fysiek winkelen overbodig is geworden. InteracLe: Er is veel interac2e mogelijk in de stores online. Door de mogelijkheid om producten naar eigen smaak te kunnen ontwerpen, krijgt de gebruiker een breed scala aan interac2e elementen voorgeschoteld. Deze elementen zijn allemaal ontworpen om het product in zoveel mogelijke manier te kunnen bekijken.

3.4.4 Bevindingen Business Model Belangrijke elementen voor het vinden van de dresscodes die binnen het Business model vallen, is het kijken naar hoe de websites worden vormgegeven en welke interac2e de websites aangaan. De websites zijn puur gemaakt om de gebruiker over te halen om tot ac2e over te gaan. De websites worden opgemaakt om een helder beeld te vormen over wat je kunt doen als gebruiker op de website. Helderheid wordt weer terugvertaald naar witruimtes. Door het gebruik van veel witruimtes, die overigens niet per sé wit hoeven te zijn maar puur de leegte tussen ruimtes aan gee<, krijgt een website al snel een overzichtelijk en rus2g gevoel. Alle dresscodes verwijzen terug naar het gebruiksgemak. Gebruik van design wordt zo min mogelijk gedaan, waardoor er ruimte overblij< voor een goede interac2e. Deze interac2e is bedoeld tot het overhalen, tot handelen. Zoals bij bankenwebsites, kan je zien dat belangrijke ac2es op een duidelijke plek worden gezet. De plaatsing is belangrijker dan het design, de focus ligt op een soepele en overzichtelijke interac2e met de gebruiker. Gebruikers moet kunnen vinden waar ze naar op zoek zijn. Bij dit soort website moet je de gebruiker niet verrassen maar tegemoet komen. Het sleutelwoord is gebruiksvriendelijkheid. De gebruiker wordt vriendelijk te woord gestaan en wordt geholpen met wat hij of zij zoekt op die website. De website staat in dienst van de gebruiker. Design staat in func2e van interac2e. Er wordt dan ook vaak gekozen voor een centrale uitlijning en niet meer dan een vier kolomindeling. Deze kolomindeling is een grote factor bij het opzeJen van de webdesign. Ook het plaatsen van interac2eve elementen zijn een belangrijke element. De gebruiker moet het gevoel hebben dat er gelijk een interac2e kan worden aangegaan die echt nodig is. De websites die onder het Business Model vallen hebben allemaal de focus op het overbrengen van informa2e dus moeten hun focus liggen op gebruiksvriendelijkheid.

3.5.1 Websites binnen het Communica4on Model TwiJer, Facebook, Youtube, Google, om maar met enkele grote namen van tegenwoordig te beginnen, hebben voor een groot deel het internet doen veranderen. Deze namen zijn namelijk de voorlopers van wat een paar jaar geleden een heel populaire term was, WEB 2.0. Web 2.0 stond voor het aanpassen van het web naar eigen inrich2ng. De gebruikers kregen de macht om hun verhaal kwijt te kunnen op het web en daardoor een sociaal netwerk op te bouwen. Proﬁelwebsites kwamen als paddestoelen uit de digitale gronden en werden al snel populair. Hier in Nederland kwam Hyves, een website die zich richJe op de studenten die veelal op het web ac2ef waren. Immers, alle informa2e was beschikbaar op het net, het was ﬁjn om zelf ook een plek te kunnen creëren op het web. Een plek waar je beschikbaar bent en waar mensen met je kunnen communiceren, hetzij éénzijdig soms. Maar deze vorm van communiceren met elkaar werd al snel ontzeJend populair. Sterker nog, we zijn nu in een 2jd beland dat het zelfs iets zegt over ons bestaan, het is een verlengde van ons karakter geworden. Al is deze digitale versie soms wel een onscherp beeld, het zegt genoeg voor de mensen die gericht op zoek zijn en gericht gevonden willen worden op het web. De websites die vallen onder dit model zijn heel belangrijk in de interac2e met de gebruiker. Het gaat niet om het vertellen van een verhaal, maar het gaat om het overtuigen tot interac2e met elkaar. De volgende categorieën vallen onder het Communica2on Model:

Categorieën die binnen dit model vallen: • Communica2on • Social media

3.5.2 Onderzoek Social Media-‐websites De laatste jaren hee< social-‐media zijn deﬁni2eve intrede gedaan in ons leven. Complete proﬁelen kunnen worden aangemaakt waar alle feiten over een persoon te vinden zijn. Ons sociaal leven kent een tweede weg om elkaar te vinden en dat is via het web. Dezelfde waarden voor het dagelijks leven zijn terug te vinden op deze websites zoals de interac2e met elkaar. Doordat we veel willen communiceren worden we door applica2es geholpen om zo kort en bondig mogelijk houden. We hebben elke moment van de dag 140 tekens om onze emo2es en belevenissen met diegene te delen die daarin zijn geïnteresseerd. Ook kunnen we onze geschiednis vastleggen door het vermelden van opleidingen en/of werk daardoor ontstaat als het ware een CV. Je kunt er natuurlijk al2jd voor kiezen welke gegevens op straat komen te liggen, en welke niet. Maar door het gemak van de interac2e en de snelheid en het no-‐pressure gevoel, ontstaat er een website die ten alle 2jden voor jou ten dienst staat. Het kent geen druk van updaten of onderhouden, het is slechts de sociale druk die je steeds weer terug laat komen naar de websites zoals Hyves, Facebook en TwiJer. Door de ontwikkeling van het internet op mobiele apparaten is het nu ook mogelijk om deze soort websites te ontleden in applica2es. Het zijn de kleine onderdelen die de motor vormen voor deze soort websites en deze motortjes doen het uitstekend op kleinere schermen zodat de essen2e niet verloren gaat. De essen2e ligt in de interac2e en die hoe< alleen maar vorm te worden gegeven naar het medium waar de applica2e wordt gedraaid. Facebook hee< een bepaalde uitstraling. Het steunt op het zo vriendelijk mogelijk maken van een interac2e met de gebruiker. Die op zijn beurt de interac2e wil aangaan met zijn sociale netwerk. Doordat er een bepaald no-‐pressure gevoel wordt gehanteerd is het voor de gebruiker aangenaam om op deze website aanwezig te zijn. NaviagLe: Friends -‐ Search -‐ Media -‐ Berichten -‐ Wat doe je vandaag -‐ Groepen -‐ Nieuws -‐ Updates Technisch: HTML Design: Clean en zoveel mogelijk open. Duidelijke groepen tussen verschillende onderdelen. Gevoel: Veel gebruik van clean en overzichtelijkheid. Eigenlijk zit er weinig gevoel achter. Alleen het gevoel dat je hier je interac2e kwijt kunt. Dus alle design elementen zijn gemaakt om een soort kalmte en overzichtelijkheid met zich mee te brengen. Het is niet de bedoeling om de gebruiker af te leiden door teveel graphics of video elementen. InteracLe: Deze website zijn gemaakt voor de interac2e. Interac2e staat centraal en neemt een prominente rol in. Alles wat je kunt doen op de website is gericht op de interac2e met anderen. Zoals het plaatsen van berichten en het reageren hierop en het uploaden van foto’s en hier weer op kunnen reageren. Deze interac2es zijn overal te vinden.

3.5.3 Bevindingen Communica4on Model De dresscodes van de website binnen het Communica2on Model wijzen allemaal in de rich2ng van interac2e. Door het gebruik van slimme nieuwe technieken wordt de gebruiker in staat gesteld om een interac2e aan te gaan. Deze interac2e wordt gevoed door andere gebruikers die ook ac2ef zijn op de website. Opvallend is dat de dresscodes allemaal interac2eve elementen zijn. Deze elementen zorgen ervoor dat de gebruikers kunnen communiceren. Het idee van communiceren is niet uniek, maar de snelheid de manier waarop het wordt geordend en wat je kunt communiceren is wel uniek. Zoals op Facebook kunnen gebruikers de drie grote elementen gebruiken: video, tekst en anima2e. Door het toevoegen van een link die naar een andere plek op het internet verwijst, zijn ze in staat om met andere gebruikers iets te delen. Dit delen van je boodschap wordt ondersteund door alle websites binnen het Communica2on Model. De interac2e is vaak gericht op sociaal niveau, waarbij de website wordt gevoed door de feeds van de gebruiker. De interac2eve elementen op deze websites zijn al2jd prominent in beeld gebracht door de webdesigner. Op belangrijke plekken boven de onzichtbare vouwlijn, worden alle interac2eve elementen aangebracht. Het gaat er namelijk om dat de gebruiker in één oogopslag kan zien waar de website om draait. Onder deze elementen worden feedbacks getoond die rechtstreeks uit het interac2eve element voortkomen. Deze feedbacks kunnen reac2es zijn op weer andere feedbacks, waardoor er een ﬂow ontstaat die door de gebruikers gezamenlijk wordt gegenereerd. Deze ﬂow wordt keurig en overzichtelijk gepost op de website. Alle overige func2es die de gebruiker kan gebruiken hebben een aanzienlijk minder belangrijke rol gekregen, door deze func2es kleiner af te beelden. Ook de plaatsing is heel gegroepeerd aangepakt. Func2es worden bij elkaar gestopt om er voor te zorgen dat de gebruiker meteen door hee< dat het func2es zijn die op een zelfde manier invloed kunnen hebben op het interac2eve element van de website. Deze elementen zorgen ervoor dat alle websites die onder het Communica2on Model vallen, gefocust zijn op de interac2e. Het Communica2on Model staat voor de interac2e.

Hoofdstuk 4. Conclusie Het hee< even mogen duren maar we kunnen concluderen dat er ook voor websites een bepaalde dresscode bestaat. Bepaalde elementen zijn al2jd aanwezig en zullen voor een groot deel de dresscode bepalen voor een website. Het begint allemaal bij de content van een website. Als interac2on designer moet je eerst je gebieden ahakenen en kijken wat je binnen deze grenzen kunt bereiken. Daarnaast wordt er voor een groot deel door de opdrachtgever al bepaald in welke categorie je website valt. Dus welke kleren je website gaat dragen wordt bepaald door de inhoud van een website. De structuur zoals naviga2e en de manier van interac2e bepaald voor een groot deel de opbouw.Zoals bij de film website duidelijk is geworden, aan de hand van naviga2e kan de gebruiker zien dat het om een filmwebsite gaat en ook door het gebruik van fullscreen flash en dat er veel gebruik wordt gemaakt sfeer beelden zoals video en anima2es. Daarnaast heb je een technisch element die voor een groot deel de manier van interac2e bepaald. Met flash heb je meerdere mogelijkheden dan met ingewikkelde html scrip2ng. Naast de makkelijk aantoonbare elementen speelt de manier waarop je je gebruiker benaderd een grote rol. Opvallend was bij het onderzoek dat er eigenlijk drie modellen met drie verschillende benaderingen uit zijn voortgekomen. -‐ Het CreaLon Model, wat staat voor het gevoel overbrengen. -‐ Het Business Model, wat staat voor gebruikersvriendelijkheid. -‐ Het CommunicaLon Model, wat staat voor interac2e. Deze drie modellen vormen de basis van mijn conclusie voor het zoeken naar de dresscodes van websites. Het is nu niet de bedoeling om te zeggen dat je website binnen één van deze modellen valt, in tegendeel, veel van de besproken websites vallen binnen meerdere modellen. Je kunt een product met veel gevoel willen overbrengen maar het verkopen van je product, zoals nike.com dat doet, is net zo belangrijk. Bij het maken van je website moet je je goed afvragen wat je wilt bereiken met de website. Wil je een gevoel over brengen, moet het aangenaam overkomen of wil je een bepaalde interac2e uitlokken met je gebruiker? Naar mijn mening, bevat een goede website alle drie de elementen en weet de perfecte verhoudingen tussen deze drie terug te brengen naar een mooie balans. Uiteindelijk wil je als interac2on designer, dat je website het juiste gevoel overbrengt door middel van een gebruiksvriendelijke interac2e met je gebruiker. Het terugbrengen naar deze drie elementen is het moeilijkste wat er bestaat want er zijn zoveel elementen waar je uit kunt kiezen. De kunst zit hem in het vinden van de balans. Uiteindelijk kunnen we concluderen dat het zoeken naar dresscodes, eigenlijk het zoeken naar de perfecte balans van verschillende elementen is.

Hoofdstuk 5. Aanbevelingen Terugkijkend op mijn scrip2e heb ik een voldaan gevoel. De opzet van het onderzoek brengt een duidelijk beeld met zich mee en zorgt voor een goede flow door de scrip2e heen. Daar waar het nog aangevuld kan worden zijn de randzaken die ik heel even heb aangeraakt maar verder niet heb behandeld, zoals de marke2ng effecten op websites. Dit is een belangrijk onderdeel wat zeker niet onaangetast hoe< te blijven. Ook het vervolg naar andere media zoals de portable devices, is een hoofdstuk wat zeker nog uitgewerkt kan worden, maar voor het kader van dit onderzoek teveel informa2e met zich mee brengt. “Vandaag is de toekomst van gisteren” De afgelopen jaren is er een nieuwe trend ontstaan op het gebied van nieuwe media. De draagbare computers hebben defini2ef hun intrede gedaan. Door deze apparaten is het mogelijk geworden om op verschillende plaxormen te verschijnen met je website, wat betekend dat er ook voor verschillende plaxormen ontworpen moet worden. Wat dan weer betekend dat er weer nieuwe defini2es moeten worden bepaald. Hier staan dus nieuwe uitdagingen voor ons klaar om als designer over te buigen. Het is dus een nieuwe toekomst voor designers dus zolang er media is, hoeven we nooit zonder werk te ziJen. Het is meer de manier waarop informa2e wordt aangeboden. Grote marktleiders van tegenwoordig heeJen Apple, Windows, Android, Google, HTC, Windows, Sony, LG. Allemaal fabrikanten die zich begeven op de markt van mobiele communica2e. Aangezien mijn scrip2e het niet toelaat om dieper op deze ontwikkeling in te gaan zou ik hier willen aans2ppen als evetuele mogelijkheid tot vervolgstudie. Deze ontwikkeling is namelijk een serieuze ontwikkeling maar staat buiten mijn onderwerp voor websites op de ouderwetse, tradi2onele computer. Door de komst van de smartphones is er een nieuwe media drager erbij gekomen. Deze smartphones zijn in staat om taken te verichten die je ook op de computer kunt uitvoeren. Nu zijn deze taken terug gebracht naar wat afgeslankte versies zodat ze ook op het mobieltje prima uit de voeten kunnen. Door de overstap naar mobiele media is het ontwerpen van content enigszins veranderd. Je moet rekening houden met andere onderdelen zoals touchscreens, informa2e verdeling, wel of geen flash en of het als een applica2e moet worden aangeboden of als een mobiele website? Deze factoren spelen een grote rol voor de design van de content van een website. Dit is de toekomst voor vandaag en zal nog meer een rol gaan spelen met de komst van de tablets die een serieuze stap in aangename mobiele communica2e zullen gaan zeJen.

Hoofdstuk 6. Literatuurlijst/bronvermeldingen: Deze website zijn geraadpleegd in de periode van oktober 2009 tot mei 2010: The Mo2ve Web Design Glossary -‐ web communica2on design terminology and defini2ons | Mo2ve Guides Web Design Industry Jargon: Glossary and Resources -‐ Smashing Magazine Web Design References: Glossary SitePoint: Glossary Web Design Glossary -‐ Jargon Terms Defined Web Design Glossary, Internet Marke2ng Glossary, Print Design Glossary The FWA: Favourite Website Awards -‐ Web awards at the culng edge PhotoshopDisasters Design Trends of Spa Websites | Build Internet! The Anatomy of a Corporate Site | Build Internet! Showcase of Web Design in Ireland -‐ Smashing Magazine Showcase of Web Design in Russia -‐ Smashing Magazine Search Results Design: Best Prac2ces and Design PaJerns -‐ Smashing Magazine Showcase of Case Studies in Design Porxolios -‐ Smashing Magazine TV Show Web Designs: Trends and Examples -‐ Smashing Magazine Corporate Blog Design: Trends And Examples -‐ Smashing Magazine 50 Fresh Porxolio Websites for Your Inspira2on -‐ Smashing Magazine Designing “Read More” And “Con2nue Reading” Links -‐ Smashing Magazine 69 Sexy Porxolio Designs To Inspire You -‐ Smashing Magazine Designing Websites for Kids: Trends and Best Prac2ces -‐ Smashing Magazine Smashing Magazine Modal Windows In Modern Web Design -‐ Smashing Magazine Backgrounds In Web Design: Examples And Best Prac2ces -‐ Smashing Magazine How To Support Internet Explorer and S2ll Be Culng Edge -‐ Smashing Magazine Complete Beginner’s Guide to Interac2on Design | UX Booth Pushing Your BuJons With Prac2cal CSS3 -‐ Smashing Magazine The ZURB Playground -‐ ZURB.com User experience: the future of web design: idsgn (a design blog) Design and branding news: idsgn (a design blog) Threadless catalog of tees Music guys t-‐shirts. Unique, cool and funny tees. Browsing graphic tees 25 Funny T-‐Shirts for Designers and Developers | Webdesigner Depot The Joy of Discovery in Web Design -‐ Inspect Element Inspect Element -‐ Web Design & Development Blog 10 Useful Bookmarklets for Web Designers and Developers -‐ Inspect Element The UnwriJen Rules of Web Design -‐ Inspect Element 10 Fantas2c and Crea2ve Web Design Styles -‐ Inspect Element The Smashing Network of Web Design Magazines -‐ Smashing Magazine The Unusable and Superficial World of Beer and Alcohol Websites -‐ Smashing Magazine An Idiot’s Guide To Accessible Website Design | Web Design Ledger Create an Animated “Call to Ac2on” BuJon Wikipedia Redesign: What’s in Store? | Webdesigner Depot Using Wireframes to Streamline Your Development Process | Webdesigner Depot Preparing and Planning for a Redesign | Webdesigner Depot How to Create an Organic Web Design (and Showcase) | Webdesigner Depot Minimalist Web Design: When Less is More | Webdesigner Depot The Best Designs -‐ The Best Flash and CSS Web Design Gallery The Css Awards | The best css gallery of the world Logo Of The Day -‐ Logo Design Inspira2on, Gallery & Award Scheme! How to Monitor Your Brand on Social Media | FreelanceFolder How To Explain To Clients That They Are Wrong -‐ Smashing Magazine 42

Smashing Magazine A Gold Mine of Adobe Illustrator Resources -‐ Noupe The LXD Myths & Misconcep2ons About Grid Systems • Blog Archive • AisleOne AisleOne Design an Ecommerce Website in Photoshop Factors That Aﬀect Usability Unveiling Photoshop Masks -‐ Smashing Magazine The Ul2mate List of the Top Best Logo Design Resources 10 Sources of Inspira2on for Designers | Inspired Magazine Uitlegparty: Downloaden via nieuwsgroepen | B R I G H T 65 Crea2ve And Stylish Footer Designs of 2009 | Graphic and Web Design Blog -‐Resources And Tutorials Service that Scales: Pricing Guidelines, Tips, and Strategies for Freelancers | Spyre Studios Showcase Of 50 Best Inspiring Gaming Websites | Graphic and Web Design Blog -‐Resources And Tutorials The Beau2ful Art of Japanese Web Design – woorkup.com Beau2ful Designs with Smoke Typography Showcase Of Modern Naviga2on Design Trends -‐ Smashing Magazine Self Taught vs. Formal Educa2on with Showcase of Design Schools | Onextrapixel -‐ Showcasing Web Treats Without Hitch iA » Web Trend Map 4 iA » What’s Next in Web Design? iA » Do We Really Need a Site Naviga2on? Web 2.0 how-‐to design style guide -‐ Web Design London Web Design is Dead! Introducing a much improved web design process. -‐ Web Design London hJp://developer.yahoo.com/ypaJerns/everything.html

Literatuur: Auteur: Donals A. Norman Uitgave: 2004 Titel: EmoLonal Design Why we Love ( or Hate ) Design, Edi2e: -‐ Uitgeverij: Basic Books Auteur: Tim Hauser Uitgave: 2009 Titel: The Pixar Story Edi2e: -‐ Uitgeverij: Tirion Uitgevers Auteur: Steve Krug Uitgave: 2006 Titel: DONT MAKE ME THINK Edi2e: 2de Uitgeverij: New Riders Auteur: Rob Ford Uitgave: 2008 Titel: Guidelines for Online Success Edi2e: -‐ Uitgeverij: TASHEN Auteur: Pepin van Roojen Uitgave: 2009 Titel: Web Design Index by Content .04 Edi2e: -‐ Uitgeverij: The Pepin Press Video: Paradox of Choices The Pixar Story -‐ Disney, Pixar Logorama

ScripLe Gegevens: Auteur: Sjoerd Derine Uitgave: 2010 Afstudeer begeleidster: Anne] Huijbregts Tweede Lezer: Marianne Meijer Externe Professional: Jordy van Meer ( Designer, Muse Agency )