B e e ld s c h e r m v o r m g e v in g & We b d e s ig n Doelstelling & Doelgroepverkenning Kijk naar verschillende websites om je doelgroep te verkennen. Ze hebben allemaal een andere doelstelling en roepen een bepaalde groep mensen aan. Nieuws sites hebben een “krantachtige” vormgeving; de informatie staat voorop.
Product sites laten het product zien als gebruiksvoorwerp en dit is onderdeel van hun campagne.
Merk sites geven het product weer van een bepaald merk. Dit merk heeft een bepaalde gevoelswaarde.
Micro sites (Actie sites kortlopend). Aan de hand van een reclamecampagne van een bepaald merk wordt er een opvallende vorm-geving neergezet met als doel het merk op een nieuwe manier te promoten. Hier wordt meestal Flash voor gebruikt. (bijv. Nivea, automerken, films)
Experience sites Deze sites zijn onderdeel van een merk of een product en het gaat hierbij meer om de gevoelswaarde en beleving dan om informatie aan te bieden. Dit kan losstaan van een kortlopende actie. (het huis KPN)
Webshops maken gebruik van databases en de sites zijn makkelijk toegankelijk voor iedereen; herkenbaarheid en navigatie staan voorop. Veiligheid is het allerbelangrijkste onderdeel, omdat er financiële transacties plaatsvinden!
Presentatie sites tonen een kleurrijk, avant-gardistisch uiterlijk. Jezelf onderscheiden is hier het belangrijkste. Denk hierbij aan portfolioʼs, visitekaartjes van bedrijven, artiesten e.d.)
Weblogs en communities zijn op interactie gebaseerd. Men moet de informatie goed kunnen lezen. Het is dus belangrijk dat de site vooral goed leesbaar is, maar kan verder zeer persoonlijk worden vormgegeven. Ook kan er een presentatie site van gemaakt worden, waarin het nieuwste ontwerp, film, e.d. erin wordt opgenomen. Deze site moet goed onderhouden worden en is voorzien van databases.
2
User generated content sites. Hier wordt de inhoud geproduceerd door de gebruiker en de vormgeving is hiervan afhankelijk.
Checklist Hieronder volgen een opsomming waaraan gedacht moet worden als je een website gaat maken. Diverse onderdelen worden nogmaals in het kort neergezet, zodat je een checklist hebt als je gaat ontwerpen. Kleurengebruik Denk bij het maken van een website aan je kleurencombinaties. Gebruik niet meer dan 4 kleuren; Achtergrond; Kolommen; Titels; Platte (brood) tekst. Lettertype gebruik Gebruik niet meer dan 2 lettertypes. Titels & Platte tekst. Gebruik voor je Titels een apart eigenzinnig lettertype, maar voor de platte tekst een voor webbrowsers hanteerbaar lettertype. Lay-out Werk in kolommen en blokjes, die per pagina dezelfde lay-out hebben. Varieer dit door je Homepage als visitekaartje te maken en de lay-out anders te doen. Lijngebruik Werk in lijnen (diagonaal, vertikaal en horizontaal), door middel van het gebruik van hulplijnen in Photoshop, Flash of Illustrator. Als je in lagen werkt zal je heel vaak alleen maar een aantal elementen hoeven te veranderen.
3
Ty p o g r a fie v o o r h e t We b Een eerste leidraad voor een ontwerper van een website zou de inhoud van de informatie moeten zijn. Mensen willen geen lange teksten lezen op het beeldscherm, dus is het belangrijk dat je de tekst overzichtelijk neerzet. Gebruik kolommen en beperk je tekst tot de informatie die nodig is om je boodschap over te brengen. Lettertype keuze De meest simpele oplossing is om hetzelfde lettertype voor de titel als voor de tekst te gebruiken. Het is wat creatiever om een ander lettertype te kiezen. Technisch gezien is de makkelijkste keuze om een standaard font te kiezen dat ondersteund wordt door de meeste browsers. Maar het is zeker niet onmogelijk om hier van af te wijken. Op een beeldscherm wordt vooral gebruik gemaakt van schreefloze lettertypen. Omdat het beeld op een scherm bestaat uit een aantal puntjes wordt een lettertype in een kleine grootte (bijvoorbeeld 8 op 9 punten hoog) snel erg onduidelijk. De schreven storen hierbij. Daarom zijn kleinere letters op beeldschermen vaak beter leesbaar in een schreefloos lettertype. Zoek twee of meer lettertypes die goed bij elkaar passen, experimenteer wat en volg je gevoel. Het enige wat waar je aan moet denken is dat bepaalde lettertypes zich goed lenen voor het plaatsen van grote stukken tekst op een beeldscherm. Bijvoorbeeld Arial of Verdana. Deze lettertypen zijn speciaal ontwikkeld voor het beeldscherm. Andere lettertypes zijn beter voor het plaatsen van titels en subtitels. Je kunt ervoor kiezen om hier plaatjes van te maken, zodat je zeker weet dat ze worden getoond zoals jij bedoelt. Kleur De kleur van je tekst moet altijd makkelijk te lezen zijn. Vooral bij de grote lappen is dit belangrijk. Bij de titels kun je wat gemakkelijker afwijken. Juist doordat titels vaak groter en/of vet worden geplaatst is het minder belangrijk dat het kleurgebruik duidelijk is. Ze zijn namelijk toch wel goed te lezen. Kies voor een titel dus een andere kleur. De keuze van de kleur zelf is afhankelijk van de vormgeving van de rest van de website. Probeer een kleur te gebruiken die ergens anders op de website ook voorkomt. Het beste is, om vooraf te bepalen welke onderdelen in een website je een kleur wilt geven. Hou dan die structuur aan voor de hele website. Probeer nooit te veel opvallende kleuren te plaatsen. Twee of drie kleuren (met verschillende variaties daarop) is voor een website meestal meer dan voldoende. 4
Er zijn een aantal regels waar op gelet moet worden met betrekking tot het gebruiken van kleuren op een beeldscherm. Wit vergroot en zwart verkleint. Een zwarte achtergrond kan rustgevend lijken, maar als dit gecombineerd gaat met een felle blauwe kleur als tekst, is het voor de lezer van de tekst op een beeldscherm moeilijk om zich te concentreren. Omdat een LED scherm licht geeft, komen felle kleurvlakken snel dominant over. Het gebruik van teveel contrasten geeft het oog geen rust en nodigt niet uit tot het bekijken van de website. Contrast gebruiken is goed, maar dus niet teveel! Daarentegen, als je kleuren gebruikt die teveel op elkaar lijkt de tekst te vervagen en de lijnen worden met de achtergrond versmolten. Dit kan moeilijkheden veroorzaken bij het lezen. Op het plaatje kun je zien dat een juiste balans belangrijk is. Dus probeer de kleur van je tekst af te stemmen op de bekijker van je website. Door met kleuren te spelen zijn ook een aantal leuke effecten te gebruiken. Door bijvoorbeeld alleen het eerste woord of de eerste letter steeds een afwijkende kleur te geven krijg je een erg speels uiterlijk. Hoofdletters Ook door wel of geen CAPITALEN oftewel HOOFDLETTERS te gebruiken kun je een duidelijk verschil aangeven tussen je titels, subtitels en tekst. Uitlijning Door een titel of juist de tekst in te laten springen kun je een leuk effect bereiken. Ook kun je een titel juist aan de andere kant uitlijnen dan de tekst. Witruimte Door tussen woorden witruimte groter of juist kleiner te maken krijgt een titel en een hele tekst een compleet andere uitstraling.
5
Grafische elementen Door een balkje, een cirkeltje, een pijltje of juist iets heel anders voor, achter, boven of onder een titel te plaatsen kun je extra aandacht naar de titel trekken. Je hebt ook een extra mogelijkheid om kleur te gebruiken.
Het is ook mogelijk om een onderdeel van je logo te gebruiken. Zodoende komt je huisstijl over je hele pagina weer terug.
Plaatsing subtitel Het creatief plaatsen van een subtitel kan ook een wereld van verschil betekenen voor het uiterlijk van je pagina. Meestal wordt een subtitel recht onder de titel geplaatst. Maar op het moment dat je een goed onderscheid maakt tussen titel en subtitel kunnen ze ook op een andere manier bij elkaar geplaatst worden.
Mouse-over effecten Bij een weblog zie je vaak dat titels ook links kunnen zijn. Door een Mouse-over effect hier op toe te passen lijkt de titel meer op een link en heb je tevens een extra mogelijkheid om de titel van de rest van de tekst te onderscheiden. Het is een leuk idee om één van eerder genoemde elementen toe te voegen of weg te laten tijdens het Mouse-over effect.
6
