Algemene regels Stappenplan webdesign Kleurengebruik Denk bij het maken van een website aan je kleurencombinaties. Gebruik niet meer dan 4 kleuren; Achtergrond; Heading/ Subheading; Platte tekst; Links. Je kunt voor kleurtonen kiezen om te nuanceren (Tip) Gebruik de kleurencirkel om combinaties te maken die bij elkaar passen Lettertype gebruik Gebruik niet meer dan 2 lettertypes. Heading & Platte tekst. Gebruik voor je Heading een apart eigenzinnig lettertype, maar voor de platte tekst een voor webbrowsers hanteerbaar lettertype. 1
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. 2
Doelgroepverkenning Elke site heeft een doelstelling: WAT moet er worden bereikt? Elke site heeft een eigen doelgroep: WIE moet er worden bereikt? Sites kunnen daarom worden onderverdeeld per doelgroep. Hierdoor ontstaan verschillende soorten sites. 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. 3
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 vormgeving neergezet met als doel het merk op een nieuwe manier te promoten. Hier wordt meestal Flash voor gebruikt. (bijv. Nivea, automerken, films) 4
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! 5
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. 6
User generated content sites. Hier wordt de inhoud geproduceerd door de gebruiker en de vormgeving is hiervan afhankelijk. 7
Typografie voor het Web Hieronder staat in het artikel vermeld wat wel en niet gebruikt wordt bij de vormgeving van tekst in websites. http://netters.nl/vormgeving-van-titels-en-subtitels Het lijkt soms zo mooi, je hebt een website ontworpen. Een mooie header met een bijpassend logo. Een strak lettertype. Je navigatie is duidelijk en je hebt dit allemaal in een goed werkend systeem gegoten. De volgende stap is dat je de eerste pagina van je nieuwe website gaat vullen. Wanneer de pagina gevuld is merk je pas dat je eigenlijk iets mist. Vaak kan het goed vormgeven van je titels en subtitels een saaie tekst veranderen tot iets wat uitnodigt om te lezen. Lettertypes De eerste keuze die je moet maken is welk lettertype er gebruikt gaat worden. 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. Bijvoorbeeld door het gebruik van sifr kun je alle lettertypes gebruiken. Ook voor sommige grafische effecten en kleuren zijn hele mooie oplossingen te vinden maar met standaard HTML en CSS kom je ook een heel eind. De vraag blijft natuurlijk welke lettertypes kun je goed met elkaar combineren. Hierop is geen eenduidig antwoord te vinden. Zoek twee of meer lettertypes die goed bij elkaar passen, experimenteer wat en volg je gevoel. Het enige wat ik je mee kan geven is dat bepaalde lettertypes zich goed lenen voor het plaatsen van grote stukken tekst op een beeldscherm. Andere lettertypes zijn beter voor het plaatsen van titels en subtitels. 8
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. Probeer daarnaast nooit te veel opvallende kleuren te plaatsen. Twee of drie kleuren (met verschillende variaties daarop) is voor een website meestal meer 9
dan voldoende. 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. 10
Witruimte Door tussen woorden witruimte groter of juist kleiner te maken krijgt een titel en een hele tekst een compleet andere uitstraling. Persoonlijk vindt ik in veel gevallen een grotere witruimte dan standaard door een browser wordt meegegeven erg goed staan. 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 11
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. 12
Mouse-over effecten Bij een weblog zie je vaak dat titels tevens links 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. De conclusie die je kunt trekken uit dit verhaal is dat het gebruik van titels en subtitels je website een heel andere uitstraling kunnen geven. Titels zijn meer dan tekst, het is een onderdeel van je vormgeving en je huisstijl. Alle gebruikte voorbeelden komen uit de templates van Templatemonster. 13