Beter ontwerpen met basisprincipes

Het ontwerpen van websites kent andere mogelijkheden en problemen dan het maken van drukwerk, foto's, schilderijen of 3d-objecten. Allemaal hebben ze echter ook een hoop met elkaar gemeen. Die overeenkomstige elementen vormen de basisprincipes van ontwerpen. Dit is een set van algehele natuurlijke voorkeuren die in de mens zitten ingebakken. Als je met ontwerpen bezig bent, pas je dan ook al automatisch een deel van deze principes toe, maar het kan nooit kwaad om hier af en toe even bewust bij stil te staan.

Elementen

Om te kunnen ontwerpen heb je verschillende elementen nodig. Voorbeelden hiervan zijn: lijnen, vlakken, texturen en witruimte. In het geval van een website komt daar ook tekst bij, en nog veel ingewikkelder: kleuren.

Witruimte

Witruimte is een element waar je misschien niet zo snel bij stilstaat. Maar alles waar niks staat heeft ook een vorm. Het ontstaan ervan is het gevolg van beslissingen over andere vlakken of kleuren. Maar door juist wél heel bewust om te gaan met de witruimte zelf, kan een ontwerp veel beter worden.

Iemand die dat beter kan demonstreren dan ik is John Mcwade, in het filmpje "How to design without graphics"

Balans

Balans, op papier of op het scherm, heeft te maken met het gevoel van massa, dat we kennen uit de wereld om ons heen. Als twee vlakken even groot en op gelijke afstand van het midden zijn geplaatst is het beeld in balans. Maar als elementen van grootte of plaats gaan veranderen, raakt dit uit balans. Door te spelen met de plaatsing kun je elementen gevoelsmatig weer terug in balans brengen.

Ritme

Ritme in beeld is op verschillende manieren te bereiken. Bijvoorbeeld door letterlijke herhaling, waarbij eenzelfde vorm steeds opnieuw terugkomt. Een andere vorm van ritme is 'flow': een element wordt steeds iets aangepast, waardoor een continue, logische verandering ontstaat.

Eenheid

Eenheid is op een hoop verschillende manieren te creëren. Dit is nodig om elementen die anders niet bij elkaar zouden passen, toch bij elkaar te laten horen. Dit kan op verschillende manieren: bijvoorbeeld door ze te omkaderen, ze dezelfde kleur te geven, dezelfde hoekjes, of andere manieren van hetzelfde.

Focus

Als je alle bovenstaande principes volgt, ontstaat er een samenhangend geheel. Dit is echter zo samenhangend dat het voor de toeschouwer onduidelijk wordt waar hij (als eerste) naar moet kijken. Het is gewoon 'een hele hoop …' Door juist één element te benadrukken of eruit te lichten (door één of meerdere van bovenstaande principes juist niet toe te passen op dat element) wordt het oog geleid naar dat punt. Dit zorgt voor duidelijkheid, ofwel 'focus'.

Proporties

Proportie is de verhouding in grootte tussen elementen. Door te spelen met verschillende proporties kun je een andere balans creëren, eenheid scheppen of kun je ervoor zorgen dat dingen meer opvallen.

Kleinere elementen 'verdwijnen' altijd naar de achtergrond, terwijl grote elementen meer 'naar de voren komen'. Ook zijn er verschillende verhoudingen waarvan gebruik gemaakt kan worden (waarvan de meeste toepasbaar zijn bij ontwerpen in het algemeen en een paar ervan bij webdesign in het bijzonder): de ‘Gulden Snede’, een verhouding van 1,618… : 1 of de 'Rule of thirds' kan gebruikt worden om een mooie vlakverdeling te krijgen. Voor websites is er dan ook nog het zogenoemde ‘960 Grid System’, bedacht om web development te stroomlijnen. Dit wordt vaak gebruikt om alle onderdelen mooi op elkaar uit te lijnen.

Tot slot

Het toepassen van alle bovengenoemde principes garandeert niet automatisch een ‘mooi’ ontwerp; door 'verkeerde' combinaties te maken kan het nog steeds een rommeltje worden. Maar… een mooi ontwerp kan wel nóg beter worden door deze principes nog eens langs te lopen.

Labels:

Plaats een reactie

Italic en bold

*Dit is italic*, en _dit ook_.
**Dit is bold**, en __dit ook__.

Links

Dit is een link naar [Procurios](http://www.procurios.nl).

Lijsten

Een lijst met bullets kan worden gemaakt met:
- Min-tekens,
+ Plus-tekens,
* Of een asterisk.

Een genummerde lijst kan worden gemaakt met:
1. Lijst-item nummer 1.
2. Lijst-item nummer 2.

Quote

Onderstaande tekst vormt een quote:
> Dit is de eerste regel.
> Dit is de tweede regel.

Code

Er kan een blok met code worden geplaatst. Door voor de tekst vier spaties te plaatsen, ontstaat een code-block.

Kars.jpg

Kars Kremers

Wil het gebruik van internet zo fijn mogelijk maken. Front-end Designer, Scrum Master, Aquascaper en MINI rijder.

Voordat je verder gaat ...

Met onze nieuwsbrief houden we je maandelijks op de hoogte van de mogelijkheden van het Procurios Platform en de ontwikkelingen in de markt.

Schrijf je in op de nieuwsbrief

Lees ook

  1. 01 oktober 2010Webrichtlijnen zijn overrated48 reacties
  2. 03 maart 2011Nepal en de aantasting van mijn wereldbeeld12 reacties
  3. 06 september 2010Social Media Monitoring in de praktijk6 reacties
  4. 09 april 2013Google+ bij Procurios2 reacties
  5. 24 januari 2011Oorspronkelijke gegevens nu!2 reacties