Een stijl voor je site

Wanneer oogt een site professioneel? Zeker niet enkel als hij technisch goed is opgebouwd. Een webdesigner moet ook rekening houden met een heleboel andere aspecten:

  • Indeling van de informatie (de 'content').
  • Degelijke teksten.
  • SEO 
  • ...

  • Eenheid van stijl

Een zeer onderschat aspect is de opmaak of lay-out. Het volstaat niet enkel een goede kennis te hebben van CSS. Een eenheid van stijl is bijzonder belangrijk. Je klutst niet zo maar lukraak wat kleuren en lettertypes bij elkaar. 

Een site voor een bakker zal er helemaal anders uitzien dan de site van een kapsalon. Maar een site voor een heel hip kapsalon zal er bovendien ook totaal anders uitzien dan die van een kapper die zich vooral richt op bejaarden. 

Inspiratie nodig?

Inspiratie nodig? Je kan rijkelijk putten uit de grafische stijlen uit de twintigste (en eenentwintigste) eeuw. De consumptiemaatschappij bracht met zich mee dat er veel reclame werd gemaakt. Voor de vormgeving deden een hoop grafici inspiratie op uit de kunststijlen van hun periode of van eerdere periodes. Het kan geen kwaad om je voor je eigen site eveneens te laten inspireren. 


Denkoefening

Welke stijl zou goed passen bij reclame voor luiers of reclame voor parfum? Welke lettertypes zou je in beide gevallen gebruiken? Vermoedelijk andere dan wanneer je een site zou maken voor een speelgoedfabrikant of een "country&western"-artiest. Niet enkel de lettertypes zouden in al die gevallen het verschil maken, maar ook de keuze van de kleuren en de gehele vormgeving. 

Een kleurenpalet samenstellen

Over kleuren en smaken kan je niet discussiëren hoor je vaak. Dat is inderdaad zo. Maar je kan wel mathematisch berekenen welke kleuren samen passen, en welke niet. Kleuren hebben bovendien een symbolische waarde en/of culturele lading. Wat roept de kleur "rood" op als je er aan denkt? Niet voor niets vertegenwoordigt de "rode planeet" Mars, de Romeinse oorlogsgod (bloedvergieten).

1. Je kan "berekenen" welke kleuren samengaan.
2. Kleuren hebben een culturele symbolische lading.

Daarnaast zijn niet alle kleuren even geschikt voor weergave op een scherm. Als het logo van het bedrijf waarvoor je werkt heel veel blauw bevat, betekent dit niet dat je dat blauw moet gebruiken als achtergrondkleur van je website. Immers, wat goed oogt op een "bestelwagen" of "muur", oogt niet noodzakelijk ok op een scherm. Een scherm zendt immers licht uit, terwijl verf licht weerkaatst. Dit houdt in dat je goed moet nadenken vooraleer je de bedrijfskleuren zonder meer zou gaan inzetten voor de achtergrondkleur van je website. 

Een kleur die goed staat op een muur, past niet noodzakelijk op een "scherm".

Kleuren voor online gebruik: RGB-waardes

Een beeldscherm dat uitstaat, is ZWART. Het zendt immers geen licht uit. Papier is standaard wit.  Papier zendt immers geen licht uit, maar weerkaatst het enkel maar, net zoals een muur of auto. Als je zwarte letters op je papier wil, dan zal je er zwart moeten op drukken of spuiten. Wil je zwart op een scherm, dan volstaat het om het scherm uit te doen :-)

Zoals je vermoedelijk wel ooit geleerd hebt, kan je licht splitsen in alle kleuren van de "regenboog". Wit licht bevat alle kleuren. Zwart daarentegen is het "ontbreken van kleuren". Dat geldt voor alles wat licht uitzendt, van de zon tot een smartphonescherm. Wil je een scherm wit laten oplichten, dan moet je alle kleuren tegelijk mengen. Simpel toch? Een beeldscherm is opgebouwd uit een raster van kleine vakjes, die we kennen als "picture elements" of pixels. Elk van die pixels kan licht uitzenden door de drie basiskleuren ROOD, GREEN en BLAUW te mengen. 

Je kan elke pixel een bepaalde kleur geven door die drie kleuren in een bepaalde verhouding bij elkaar te mengen. Vermits een digitaal systeem (zoals een smartphone of een laptop) enkel maar cijfertjes "kent", zijn die kleurwaarden vertaalt in cijfercombinaties. Rood, groen en blauw kunnen elk afzonderlijk een waarde tussen de 0 en de 255 innemen. Dat zijn, als je goed kijkt, voor elke kleur 256 mogelijkheden. Het cijfer 0 is immers ook een mogelijkheid. 

 ZWART = 0 ROOD + 0 GROEN + 0 BLAUW 

 WIT = 255 ROOD + 255 GROEN + 255 BLAUW

Stel dat je in CSS de kleur zou instellen op color: rgb(255,0,0), dan krijg je "groen" als resultaat.   

Kleuren in CSS

Als je een kleur of achtergrondkleur wil geven aan een element, dan kan je die kleur op verschillende manieren ingeven in CSS:

  1. Met een Engelstalige benaming: black, white, red, deepskyblue... Uiteraard moet CSS die benaming kennen. ApplegreenSeablue zal CSS niet herkennen. 
  2. Je kan de waardes invoeren met de rgb-instructie zoals bijvoorbeeld rgb(0,0,0) zwart geeft. De drie getallen tussen de haakjes geven respectievelijk de verhouding rood, groen en blauw weer.
  3. Je kan de waarde ingeven met een HEXADECIMALE code. Die code is het meest gebruikt in computertoepassingen. #000000 geeft bijvoorbeeld zwart. Wit krijgt de hexadecimale waarde #FFFFFF. Zo'n hexadecimale code maakt geen gebruik van het decimale talstelsel, maar van het hexadecimale (of zestiendelige) talstelsel. Je hoeft dat niet zelf uit je hoeft te kunnen rekenen. Beeldbewerkingsprogramma's kunnen die code voor elke pixel uit een afbeelding ophalen. 
  4. Je kan een kleur ook gedeeltelijk transparant maken. De manier waarop je dit doet, is verwant met de RGB-instructie: de RGBA-instructie Je voert dan bijvoorbeeld rgba(0,0,0,0.4) in. De A-waarde staat hier op 0.4. Dit betekent dat de kleur (zwart in dit geval) aardig transparant is, alsof je ze met een combinatie van waterverf en veel water hebt geschilderd.

Een kleurenpalet op basis van een foto of logo

In een beeldbewerkingsprogramma zoals GIMP of Adobe Photoshop, kan je met het pipetgereedschap RGB-waardes (kleurcoderingen voor gebruik in webpagina's) uit een foto oppikken. 

Techniek 1: Kleuren oppikken in GIMP & palet samenstellen met RGB-Paletbouwer

  1. Een foto openen in GIMP.


  2. Klik op het pipetgereedschap.


  3. Klik op een bepaalde kleur in de afbeelding. 
  4. Klik op de "voorgrondkleur".


  5. Het venster van de kleuren opent. Selecteer en/of kopieer de RGB-waarde.


  6. Ga naar RGB-Paletbouwer.
  7. Plak uw kleur in het invoerveld.
  8. Klik op "Maak websitepalet".


  9. Gebruik die waardes in je CSS-document.

Techniek 2: Een kleurenpalet samenstellen met de "Schoolvoorbeeld Paletbouwer"

Met onze Paletbouwer kan je een heel kleurenpalet samenstellen aan de hand van één (of meerdere) foto's. Open de onderstaande link, sleep een foto naar het venster en de kleurcodes verschijnen onder de foto.

 Paletbouwer

Techniek 3: Een kleurenpalet samenstellen met Paletton

 Paletton

Geavanceerd: een kleurenpalet maken op basis van een RAL-kleur

Het RAL-kleursysteem is een manier om kleuren van verven en coatings te definiëren. Op die manier kan je bijvoorbeeld je muren in dezelfde kleur laten schilderen als je vensters en voordeur, om een voorbeeld te geven. Een RAL-kleurcode levert altijd exact dezelfde kleur op. Net zoals een RGB-kleurwaarde altijd precies dezelfde kleur zal opleveren. 
De meeste mensen voor wie je een website moet bouwen, zullen niet de RGB-kleurcodes van hun logo kennen. Vaak kennen ze wel de RAL-kleurcode van de verf waarmee de muren van hun bedrijfsruimte is geverfd. Als je de RAL-waarde kent, kan je met onze RAL-Paletbouwer een RGB-kleurenpalet samenstellen.

 RAL-paletbouwer


home