goldenratio

In de ban van de ‘Golden Ratio’

Als ontwerper ben je steeds opzoek naar datgene dat een ontwerp mooier, overzichtelijker, hipper en intergalactischer maakt. Erg leuk, want er verandert nogal wat in de webdesign wereld. Zo zijn er elk jaar weer specifieke layout-stijlen, nieuwe technieken en ander kleurgebruik die beter aanslaan en meer gebruikt worden dan andere. Ik ga het in deze post echter niet over veranderingen hebben, maar eigenlijk juist over een fenomeen dat al decennia lang precies hetzelfde is gebleven:

De ‘Gulden Snede’, of het mooier klinkende ‘Golden Ratio’.

Een goddelijk getal dat terug te vinden is in zowel kunst, architectuur en natuur (zoals bijvoorbeeld de proporties in ons gezicht en ons lichaam).

Inleiding

Voordat ik ga beschrijven wat dit ogenschijnlijk saaie getal nou zo boeiend maakt, zal ik eerst een mooi citaat van Wikipedia geven waarin de overkoepelende formule wordt gegeven:

De gulden snede, ook wel de verdeling in uiterste en middelste reden genaamd, is de verdeling van een lijnstuk in twee delen in een speciale verhouding. Bij de gulden snede verhoudt het grootste van de twee delen zich tot het kleinste, zoals het gehele lijnstuk zich verhoudt tot het grootste. Geven we het grootste deel aan met a en het kleinste deel met b, dan is de verhouding van beide zo dat a : b = (a+b) : a.

\varphi = \frac{1+\sqrt{5}}{2} \approx 1{,}618

(Bron: http://nl.wikipedia.org/wiki/Gulden_snede)

De formule verscheen voor het eerst in het oude Griekenland, waarbij wiskundigen als eersten op wetenschappelijke wijze gingen kijken naar het veelvoorkomende getal. Het wiskundige getal werd echter pas massaal in allerlei kunstvormen toegepast ten tijde van de Renaissance. De kunstenaars zagen de ratio hierbij als een magisch getal met mystieke krachten, welke zou zorgen voor perfectie in een kunstwerk, mits juist toegepast.

Een getal dat zijn oorsprong dus kent in kunstvormen als architectuur en schilderijen, en tegenwoordig ook zijn entree heeft gemaakt in de wereld van ‘nulletjes en enen’.

Gebruik in webdesign

Om het gebruik in websites te verduidelijken zal ik 2 voorbeelden geven.

Het eerste voorbeeld is het nieuwe design van Twitter:

(bron: http://www.flickr.com/photos/twitteroffice/5034817688/)

In het design is gebruik gemaakt van de zogenaamde Golden Rectangle: een grafische vorm van de ratio in de vorm van een ‘rechthoekige spiraal’. Het getal ‘verschijnt’ als de totale breedte van de website door de breedte van de grootste kolom wordt gedeeld. Uiteraard hoef je de ratio niet voor elk rechthoekig element te gebruiken, maar een goede toepassing zal zorgen voor een esthetischer en  geheel.

Het tweede voorbeeld is de website die je in vol ornaat voor je hebt staan…Jawel: de Internetmannen website! Om de spanning en afwisseling erin te houden zal ik de ratio niet tonen met een afbeelding, maar met bovenstaande berekening. De totale breedte van deze website is 955 pixels. Om erachter te komen hoe breed het grootste deel van de website ‘moet’ zijn, moet 955 gedeeld worden door 1,62, wat uitkomt op 590 pixels. De breedte van het kleinere gedeelte is dus (955 – 590 =) 365, en da’s TOEVALLIG net zoveel als het aantal dagen in een jaar!

Kijk maar eens naar de websites en wordt overspoeld door de grote mate van rust en kalmte die ze veroorzaken. Het getal kan overigens niet enkel gebruikt worden voor de berekening van de juiste breedte, maar ook van de juiste hoogte. En ja, dit gaat ook weer precies hetzelfde.

Handige Tools voor implementatie:

Inmiddels zijn er al vele leuke tools op het interweb verschenen die het toepassen van de ‘Golden Ratio’ in webdesign erg makkelijk maken:

  1. Allereerst is er de Golden Ratio Calculator, waarbij een ingevuld getal leidt tot de juiste proportionele maten.
  2. Een tweede is het Blueprint CSS-grid (te vinden op http://www.blueprintcss.org/), waarbij de grids in het systeem allemaal de juiste proportie bevatten.
  3. Een derde hulpmiddel is hier te vinden en is een afbeelding welke gebruikt kan worden in je favoriete beeldbewerkings-programma om te kijken of de 1) de proporties goed zijn en 2) de juiste elementen de juiste aandacht krijgen.

Video’s

En nu nog even wat bewegende beelden voor de kinders:

YouTube Preview Image YouTube Preview Image YouTube Preview Image
  • http://www.christophermarks.nl Onderzoeker

    Okay cool, maar wat maakt het dan dan het getal zo effectief is? Is het de ultieme manier van kijken naar producties? Ik snap wel dat het al eeuwen word gebruikt e.d. en hoe je het kan berekenen. Maar is het bijv. bewezen dat als je dit gebruikt je productie (website,foto, video) een stuk beter eruit ziet? Je schrijft dat er vroeger werd gedacht dat het getal mystieke krachten heeft e.d. maar wat zien we daar van terug in het heden?

    • Ontwerper

      Mijn god, wat een kritische blik! Wat ik zou zeggen is ten eerste (als je geïnteresseerd bent) te kijken naar zowel http://en.wikipedia.org/wiki/Golden_ratio als http://mathworld.wolfram.com/GoldenRatio.html.
      Ik wil voorop stellen dat het niet zozeer het interessantst is dat de mens het tegenwoordig zoveel toepast, maar eerder dat het ook is verweven in de wereld van de natuur (waar de mens geen invloed op heeft gehad in de creatie ervan). Het is een overkoepelend getal, dat in dit geval zorgt voor een natuurlijke en positieve esthetiek. Hoe en waarom? Dat weet niemand denk ik :D!