Afbeelding vis die uit computer springt
VISW3B is een buro voor webdesign in Amsterdam. Jeroen Visbeek ontwerpt en bouwt websites voor een voordelige prijs.

Egentijds vormgeven

De vormgeving evolueert met het internet. De laatste trend is om de pagina's rustiger vorm te geven. De lay-out wordt geschikt op een een grid in combinatie met veel witruimte. De typografie en tekstkleuren worden subtieler.

Kleuren geven de sfeer

kleurencirkel Een veel toegepaste kleurcombinatie zijn twee tegenovergestelde kleuren in de kleurencirkel. De zogenoemde complementaire kleuren passen goed bij elkaar.

Kleurgebruik is een van de belangrijkste factoren bij grafische vormgeving en kan verschillende uitwerkingen hebben op je ontwerp. Wil je opvallen, dan gebruik je bijvoorbeeld fel oranje of rood. Deze kleuren geven veel kracht en vallen daarom erg op. Denk bijvoorbeeld aan Media Markt of EasyJet, zij gebruiken de kleuren om vooral te communiceren dat ze goedkoop zijn.

Voor deze website heb ik meer blauw- en grijstinten gebruikt. Dat geeft meer rust en vertrouwen. Door de rust vallen de gekleurde kopjes en afbeeldingen goed op.

Vaak wordt er naast de primaire kleur ook een secundaire kleur gebruikt om accenten te leggen. Veel ontwerpers kiezen voor complementaire kleuren. Deze kleuren liggen tegenover elkaar in de kleurencirkel en zorgen voor een versterkende kleurcombinatie. De blauwe kleur van de tekst op deze website is complementair met de oranje kleur van de kopjes, wat ook weer terugkomt in de 3 van het logo en de goudvis.

Beperk het aantal verschillende kleuren tot maximaal vier. En maak ook het contrast tussen de letterkleur en achtergrondkleur niet te groot. Een spierwitte achtergrond met pikzwarte letters leest niet prettig.

icoon artikel Lees meer over het leiden van het oog. icoon link open nieuw venster

Typografie geeft karakter

standaard lettertypen voor het internetLange tijd was de keuze voor de lettertypes beperkt tot ongeveer 20 omdat men afhankelijk was van de geïnstalleerde letters op de computer van de bezoeker. Tegenwoordig kunnen lettertypes worden 'meegestuurd' vanaf de server.

Naast kleur doet typografie ook veel voor het design. Kies je voor een letter met een schreef (denk aan Times of Georgia) dan geeft dit al een hele ander indruk, dan wanneer je kiest voor een moderne tijdloze Helvetica. Beide stralen wel kwaliteit uit, maar op een ander manier. De schreef in Times heeft gelijk ook iets authentieks, terwijl Helvetia juist een strak en moderne indruk geeft. Kies je daarnaast voor een schriftletter (een handgeschreven lettertype) dan komt het ineens een heel stuk persoonlijker en warmer over, doordat het lijkt of iemand het daadwerkelijk geschreven heeft. Mede door de komst van @font-face, voor het embedden van fonts, is het gebruik van afwijkende lettertype's toegenomen. Eindelijk kunnen veel organisaties hun eigen huisstijl ook op dit gebied online doorvoeren.

Typografie behelst veel meer dan alleen het kiezen van een lettertype. Zonder zelfs maar van lettertype te veranderen kun je twee teksten subtiel van elkaar laten verschillen door een andere regelafstand, een andere grijs toon, een andere dikte, grootte of hellingshoek.

Het gebruik van verschillende grijstinten is een eenvoudige manier om twee teksten van elkaar te onderscheiden, en als je je dan ook nog beperkt tot een of twee kleuren dan heb je de formule voor een mooie maar rustige site al bijna te pakken. Vooral Flickr blijft een goed voorbeeld voor de grijstint liefhebber.

Foto van jongen met ijs
Met foto’s kan je de kijker onbewust manipuleren. Onze hersenen zijn geprogrammeerd om andere mensen snel te observeren. Een foto van een mens trekt meteen onze aandacht. Ook hebben wij (mensen) de neiging om ons te spiegelen in een ander mens. We kunnen ons invoelen wat de ander beleeft. Op deze manier worden producten en diensten vaak met een passende foto aangeprezen. Het werkt vooral goed, wanneer gebruik wordt gemaakt van foto’s van personen, waarmee de bezoeker zich kan identificeren.

Een afbeelding zegt meer dan duizend woorden

Uiteraard is geen website compleet zonder ondersteunend beeldmateriaal. Afbeeldingen maken de informatie direct 'verteerbaar'. Met een visualisatie zet je namelijk gelijk een hele sfeer neer. Dit kan een humoristische tekening zijn, een verhelderend figuur of een sfeervolle foto. Vooral foto's van mensen zijn 'magneten' voor onze ogen.

Vaak zijn de zelfgemaakte kiekjes niet geschikt voor een website. Foto's van een professionele fotograaf zijn echter duur. Een vormgever of reclamebureau heeft meestal een beeldbank waar je gebruik van kunt maken voor het webdesign. Ook kun je eventueel gebruik maken van goedkope (maar zeer professionele) stockfoto's via internet: met name een website zoals istockphoto.com icoon link open nieuw venster of Shutterstock icoon link open nieuw venster levert goedkope en goede foto's op voor je webdesign.

Witruimte en uitlijning

Een vaak vergeten factor is witruimte, terwijl dit eigenlijk de factor is die een ontwerp juist structuur en rust geeft. Witruimte is als stilte. In een toespraak kan je met een kleine stilte soms meer zeggen dan met woorden. Met een flinke dosis witruimte hoeft een belangrijk onderdeel niet in felgekleurde chocoladeletters te schreeuwen om aandacht. Opvallen kan ook subtiel.

Voorbeeld grid 960 Voorbeeld grid 1140
Boven een voorbeeld van het 960-pixles-grid (de kolommen van het grid zijn hier zichtbaar gemaakt), onder is te zien hoe een website bij het 1140-pixels-grid zich automatisch aanpast aan de schermbreedte.

Het is momenteel een trend om websites wat minimaler op te zetten. Hierin is witruimte een zeer belangrijke factor. Met witruimte kun je aangeven welke elementen bij elkaar horen en door het toevoegen van witruimte laat je de site ‘ademen’. Wanneer er twee elementen naast elkaar worden geplaatst, krijg je de indruk dat deze twee een verband hebben. Als de afstand groter wordt verliezen ze op een gegeven moment hun verbinding. Dit kan belangrijk zijn bij het opzetten van een gebruikersinterface (knoppen) of andere informatieve elementen.

Om te zorgen dat het ontwerp niet gaat ‘dansen’ wordt er vaak gebruik gemaakt van een grid. Ontwerp je site met mathematische precisie, maak een grid, waarbij iedere kolom een bepaalde breedte heeft, en hou je aan dat grid. Een bekend en vaak gebruikt grid is het 960 Grid system icoon link open nieuw venster dat ideaal is voor een schermresolutie van 1024 bij 768 pixels. Je kunt ook kiezen voor het flexibele 1140 Grid system icoon link open nieuw venster dat zich automatisch aanpast aan de breedte van het scherm (Deze website is gemaakt met het 1140-Grid Systeem). Daardoor is het ideaal als de website ook geoptimaliseerd moet worden voor mobiele apparaten. Beide gridsystemen bestaan uit een aantal kolommen, waarop de diverse elementen worden uitgelijnd. Hierdoor oogt het niet alleen strak maar is het voor het oog ook prettiger om te zien en worden verbanden tussen elementen sneller gelegd.

Denk aan de leesrichting

Zorg ervoor dat de opzet van de webpagina niet te veel afwijkt van wat gebruikelijk is in het webdesign. De voorkeur voor een menu is aan de linkerkant of de bovenkant. In het Westen beginnen we linksboven met lezen. Uit kijkonderzoek is gebleken dat westerse bezoekers de website bekijken in een F of Z patroon (beginnen linksboven en scannen zo de website): de belangrijkste informatie moet dus binnen dat patroon vallen.

Vermijd dat bezoekers belangrijke informatie missen als ze om wat voor reden dan ook de schuifbalk(en) niet gebruiken. Geef alle belangrijke informatie direct in het beeld.

De valkuilen

Er zijn heel veel slechte websites. De lijst met don'ts is groot.

  • De vormgeving moet ten dienste staan van de inhoud en niet andersom;
  • Met veel kleuren en lettertypen wordt het al snel rommelig.
  • Dingen die constant bewegen of flikkeren zijn erg onrustig. Het leidt de aandacht af van de inhoud.
  • Zelfstartende achtergrondmuziek is even irritant als de muzak in een winkelcentrum.
  • Pas op met flitsende diashows en oogstrelende animaties. De computer wordt er traag van, de bezoeker zit er vaak niet op te wachten en als alle opsmuk overbodig is, komt het gekunsteld over waarmee de presentatie irritant wordt en zelfs averechts werkt.

icoon artikel Bekijk een website met veel amusante informatie over hoe het niet moet: About Web Pages That Suck icoon link open nieuw venster

naar boven

Contactgegevens

VISW3B | Eerste Oosterparkstraat 36A | 1091 HC Amsterdam | 020 6163145 | info@visw3b.nl
BTW-nummer: 132447125B01

SITEMAP

Website bijgewerkt: 3 december 2014
Aan de inhoud van deze website kunnen geen rechten worden ontleend.
Alle prijzen onder voorbehoud
VISW3B is een startende onderneming en is nog niet ingeschreven bij de Kamer van Koophandel.
Algemene Voorwaarden