Het maken van een website is helemaal niet moeilijk: er zijn genoeg websites van kinderen onder de 10 die dat bewijzen. Helaas kan lang niet iedereen die websites mooi vorm geven en dat is zonde. Daarom ga ik nu een aantal hulpgrepen uitleggen die waarschijnlijk erg handig zijn voor het ontwerpen van je site.
Het is bij het designen vaak handig om een ontwerp te maken en dat op alle pagina's die je hebt te gebruiken. Dat is ook het geval bij de site waar je nu naar zit te kijken: de header en het menu zijn (nagenoeg) overal hetzelfde. Daarbij veranderen de opmaak van links en kleuren niet. Het is belangrijk dat jij dat ook doet: kies een aantal kleuren voor een aantal toepassingen en wijk er zo min mogelijk van af. Als links normaal gesproken blauw zijn op jouw website is het verwarrend als er opeens een witte tussen zit. Het gebruik van CSS is daarom in dit geval erg handig: je kunt in 1 bestand dat overal geldt de kleurtjes opgeven.
Daarnaast is het vaak (niet bij alle sites) van belang dat je niet teveel verschillende kleuren gebruikt en dat de kleuren bij elkaar passen. Ik ben op deze website uit gegaan van een kleurtje (dat donkere blauw) en heb daar vervolgens lichtere en donkere varianten die er goed bij passen bij gemaakt. De andere kleuren (groen, rood, bruin etc) heb ik gemaakt door de tint van dat blauw te veranderen en daar op precies dezelfde manier helderheidvarianten op gemaakt.
Maar hoe maak je nu het beste een kleurpaletje waarvan de kleuren bij elkaar passen? Dat is vrij eenvoudig: ga naar een tekenprogramma (desnoods Paint) en ga naar een venster waarin je kleuren het kleurenpalet kunt veranderen. (in Paint is dat herhaaldelijk op een kleur onderin klikken) Vervolgens krijg je een venster voor je neus waarin je een aantal kleuren ziet. In Windows moet je meestal op een knop kliken waarmee je een venster tevoorschijn haalt waar een soort regenboogpatroon ziet dat naar beneden grijs wordt, en aan de zijkant steeds lichter. Onderaan zie je vakjes met waardes. Dat venster moet je hebben.
Nu moet je eerst een basiskleur kiezen die je mooi vindt. Vervolgens moet je varianten op die kleur maken. Dat moet met de vakjes met cijfers. Stel de basiskleur in. Vervolgens ga je een van de drie waardes (Tint, Verzadiging en Helderheid of in het Engels: Value, Hue en Brightness) veranderen. Let op: 1 van de 3 tegelijk. Als je bijvoorbeeld de tint veranderd kun je bijvoorbeeld van een blauwe kleur een rode kleur maken zonder dat de helderheid veranderd. Vervolgens moet je de basiskleur weer instellen voordat je met een van de andere waardes kunt gaan knoeien.
Vaak worden de waardes in de vakjes aangegeven door een getal tussen de 0 en de 255. Helaas moet je dat omrekenen naar een code zoals #aa0020. Hoe doe je dat? Start de Windows rekenmachine en kies in het menu de optie Wetenschappelijk. Links zie je een paar keuze rondjes met Dec, Hex, Oct en Bin. Zet die op Dec. Vul vervolgens de waarde achter Rood in (bijvoorbeeld 144). Klik vervolgens op het rondje Hex. Tadaa! Daar komt een waarde uitrollen. (90 om precies te zijn) Doe dat ook met groen en blauw. Zet vervolgens de waardes op de volgorde Rood, Groen en Blauw achter elkaar. Vervolgens krijg je een "getal" dat lijkt op 9005AA.
Moet dat nu met de Windows rekenmachine? Nee, het kan ook anders. Pak een willekeurige rekenmachine, en vul bijvoorbeeld het getal 167 in. Deel dit nu door 16. Splits nu de waardes voor en achter de komma. (10,4375 wordt dus 10 en 0,4375) Vermenigvuldig nu de laatste waarde met 16 (0,4375 * 16 = 7) Vervolgens heb je de waardes 10 en 7. Vervolgens moet je alle waardes hoger dan 9 omzetten in en letter. (10 wordt A, 11 wordt B, 12 wordt C, 13 wordt D, 14 wordt E, 15 wordt F) In dit geval maak je dus van 10 en 7 respectievelijk A en 7. Dat wordt dus A7. Doe ook dit 3 keer en zet de waardes Rood, Groen en Blauw achter elkaar.
Als je nu voor het "getal" een hekje zet (dan krijg je zoeits als #90A7FF) ben je helemaal klaar! Je hebt een kleur gecreerd! ;) Uiteraard kun je ook in het overzicht kleuren van ons kijken voor een aantal voorberekende kleuren.
Gelukkig kan het sneller: probeer gewoon op het oog wat kleurtje uit de lijst met kleuren te halen. Voor de mannen onder de lezers: vraag eens hulp aan oma, moeder, zus, vriendin, dochter of iets van die aard! Vrouwen zijn namelijk vaak veel beter in het uitzoeken van kleuren die bij elkaar passen.
Ook belangrijk: de indeling (engels: Lay-out) van je website. Een goede, duidelijke en universele indeling maakt het voor de lezer prettig. Gelukkig is er voldoende onderzoek gedaan om hier iets zinnigs over te zeggen.
De Lay-Out van een website is dus van groot belang, hoe interessant de informatie die je aanbiedt ook is. (helaas)
Het is ook belangrijk dat je site geen kopie is van een andere: je moet uniek zijn. Kopieer daarom zo weinig als mogelijk en laat je slechts inspireren door andere sites. Kies een "uniek" kleurenpalet, een unieke lay-out en nog veel belangrijke: voeg unieke plaatjes toe (tekeningen, foto's) en gebruik unieke accentueringen. (pijltjes, knopjes, hoekjes, randjes enzovoort) Het hele proces van het "uniek" maken wordt ook wel personalisering genoemd: je geeft je eigen pagina een "presoonlijkheid", een reeks herkenningspunten. Dat is trouwens niet alleen aantrekkelijk voor de gebruiker, het is ook nog eens extra overzichtelijk doordat de gebruiker je site sneller opnieuw herkend en langer onthoud.
Hopelijk heb je iets aan deze "tutorial" gehad. Veel succes met je website!
