Webdesign 101: Kleur bekennen

25 november 2008 om 21:57

Een van de eerste stappen bij het ontwerpen van een nieuwe website is het bepalen van een mooi kleurenschema (om er maar een anglicisme tegen aan te gooien).

Je hebt in elk geval drie verschillende kleuren nodig: een achtergrondkleur, een kleur voor je standaard tekst en een kleur van je links. Afhankelijk van je design kunnen dit er natuurlijk meer worden, maar over het algemeen zul je niet snel boven de 5 à 6 uit moeten komen: het moet geen kermis worden.

Dit artikel laat een aantal manieren en hulpmiddelen zien om een goed kleurenschema te bepalen.

Het kleurenschema van GeekSpeak.nl

Inspiratie

Een site waar ik altijd veel inspiratie vandaan haal is Smashing Magazine. Smashing Magazine is een afwisselend blog die zich voor richt op webdesign. Geregeld hebben ze showcases waarin ze bepaalde trends in webdesign laten zien. Erg inspirerend!

Mijn methode

Een methode die ik zelf vaak gebruik is uit posters, tekeningen of foto’s een palet halen. Ik browse willekeurig (bijvoorbeeld met StumbleUpon, de internet-zapservice) rond op het internet op zoek naar mooie plaatjes, het liefst met speciale kleurstellingen. Daar uit haal ik met bijvoorbeeld Photoshop de belangrijkste kleuren uit.

Het volgende plaatje kwam ik tegen op Design Shard, een site die in hetzelfde straatje als Smashing Magazine zit. Het kleurgebruik is eenvoudig, maar zeker niet saai. Daar is zonder veel moeite een kleurenschema van te maken.

Inspiratie + kleurenschema

Hoe zou een website met zo’n kleurenschema er uit kunnen zien? Een voorbeeldje op basis van het design van deze site:

Da’s wel wat heftig. Voor deze blog zou het toch wat teveel van het goede worden. Gelukkig is er genoeg inspiratiemateriaal. In een blogpost met filmposters kwam ik de volgende afbeelding tegen.

Inspiratie + kleurenschema

Weer een afbeelding met duidelijk, sprekend kleurgebruik, maar een stuk minder heftig dan de vorige afbeelding.

Dat ziet er prima uit!

Snelle methode

Tja, en als je geen mooie plaatjes tegenkomt? Of elke keer dat je een palet uit een plaatje hebt gehaald blijken de kleuren er in een website schrikbarend uit te zien?

Gelukkig zijn er ook snellere methodes:

  • colr.org is in wezen dezelfde methode, maar dan geautomatiseerd. Ik heb liever meer controle, maar het is zeker een nuttige tool.
  • kuler van Adobe en COLOURlovers zijn twee sites waar gebruikers kleurenschema’s kunnen toevoegen. Sorteer ze op rating en je ziet in een oogopslag de mooiste kleurenschema’s.
  • ColorSchemer is een programma waarmee je kleurenschema’s kunt maken. Het is niet gratis, maar de kleurenschema’s die de gebruikers uploaden op de site zijn wel zichtbaar.

Tips

  • De hoeveelheid tekst op je site bepaald ook hoe je je kleuren het beste kan gebruiken. Heb je bijvoorbeeld veel tekst? Gebruik dan een lichte achtergrondkleur met daarop donkere, contrastrerende kleuren voor de tekst en links.
  • Test voor je je kleuren definitief kiest op meerdere monitoren. Afhankelijk van de instellingen en kwaliteit van een monitor kunnen kleuren er heel anders uit zien. Probeer in elk geval sowieos je kleuren te zien op een flatscreen monitor en een ouderwetse CRT monitor, aangezien die flink kunnen verschillen.
  • Veel proberen! Ik probeer vaak verschillende kleurenschema’s uit voor ik een definitieve kies. Vraag mensen om commentaar. Bekijk je kleuren eens een paar dagen niet, zodat je met een frisse blik er tegen aan kijkt.

Hoe kies jij de kleuren als je een website ontwerpt?

9 reacties op “Webdesign 101: Kleur bekennen”

  1. Het moeilijke van een kleurenschema is dat je ook vaak afhankelijk bent van een bestaande huisstijl en een bepaalde layout die je wil gaan gebruiken voor een website. Heel vaak is wit de basis en ga je van daaruit verder.

    Maar vaak gebruik ik ook plaatjes en pallet sites.

  2. Ik heb nog nooit een eigen ontwerp gemaakt zonder (al is het maar een klein detail!) #ff3366. Gewoon, zomaar. Verder haal ik altijd uit mijn eigen foto-archief een foto die ik gebruik in mijn ontwerp. Daar vloeien dan bijna automatisch de ontwerpkleuren uit voort. Eigenlijk niet zo heel anders dan jij hierboven beschrijft, eigenlijk ;-)

  3. Ik ben dan toch geek genoeg om dat kleurtje even uit te proberen. :)

    Heftig kleurtje!

    Je blog ziet er goed uit trouwens, die #ff3366 komt goed uit als accentkleur.

  4. Dank voor het compliment! Ik hou wel van een beetje ‘retro’, en harde kleuren zijn vooral als accenten erg vrolijk :-)

  5. Nog een leuk kleurenhulpmiddeltje is Multitool. Kun je foto’s op Flickr zoeken op kleur.

    http://waslijn.com/flickr-krijgt-kleur/30/10/2008/

  6. Bedankt, Mies.

    Inderdaad een leuk tooltje!

  7. […] kleur gebruik van Rob Cunningham is heel sterk. Zeer felle kleuren en het verveelt niet. Als je een kleurenschema voor je website nodig hebt, dan zou ik die uit één van deze platen […]

  8. Hier een video van From The Couch:

    http://www.from-the-couch.com/post.cfm/title/picking-colors-for-your-design

    Een goede video tutorial over het samenstellen van een kleurenpalette.

  9. BEdankt voor je artikel…

    Leuke methode die je gebruikt zal m zeker is proberen.

Plaats een reactie