Een gids voor de Gulden Snede voor ontwerpers

Goed ontwerp is al onderwerp van discussie zolang we al ontwerpen. Er zijn eindeloze forums, discussies op sociale media en persoonlijke gesprekken over wat een goed ontwerp is, waarbij iedereen zijn eigen visie geeft.

Dat is het mooie van ontwerp, toch? Iedereen kan het anders interpreteren.

Hoewel er nooit een pasklare benadering voor design zal zijn, is er wel een concrete, wiskundige benadering die ons een stap dichter bij het creëren van verbazingwekkende designervaringen kan brengen: de Gulden Snede.

De Gulden Snede is een wiskundige verhouding die je bijna overal tegenkomt, zoals in de natuur, architectuur, de schilderkunst en muziek. Wanneer je het specifiek toepast op ontwerp, ontstaat een organische, evenwichtige en esthetisch aantrekkelijke compositie.

In dit artikel gaan we in op wat de Gulden Snede is, hoe je deze kunt berekenen en hoe je deze kunt gebruiken in ontwerp – inclusief een handige lijst met hulpmiddelen.

Wat is de Gulden Snede?

Ook bekend als Gulden Snede, Gulden Gemiddelde, Goddelijke Verhouding, of de Griekse letter Phi, de Gulden Snede is een speciaal getal dat ongeveer gelijk is aan 1,618. De verhouding zelf komt van de Fibonacci-reeks, een natuurlijk voorkomende getallenreeks die overal terug te vinden is, van het aantal bladeren aan een boom tot de vorm van een zeeschelp.

De Fibonacci-reeks is de som van de twee getallen ervoor. Het gaat als volgt: 0, 1,1, 2, 3, 5, 8, 13, 21, enzovoort, tot in het oneindige. Op basis van dit patroon ontwikkelden de Grieken de Gulden Snede om het verschil tussen twee willekeurige getallen in de reeks beter uit te drukken.

Hoe verhoudt zich dit tot ontwerpen? Je vindt de Gulden Snede als je een lijn in tweeën deelt en het lange deel (a) gedeeld door het kleine deel (b) is gelijk aan de som van (a) + (b) gedeeld door (a), die beide gelijk zijn aan 1,618. Deze formule kan je helpen bij het maken van vormen, logo’s, lay-outs, en meer.

Je kunt dit idee ook gebruiken om een gouden rechthoek te maken. Neem een vierkant en vermenigvuldig één zijde met 1,618 om een nieuwe vorm te krijgen: een rechthoek met harmonieuze verhoudingen.

Als je het vierkant over de rechthoek legt, geeft de verhouding tussen de twee vormen je de Gulden Snede.

Als je de Gulden Snede-formule blijft toepassen op de nieuwe rechthoek uiterst rechts, krijg je een afbeelding die uit steeds kleinere vierkantjes bestaat.

Als je over elk vierkant een spiraal tekent, beginnend in de ene hoek en eindigend in de tegenoverliggende, creëer je de eerste kromming van de Fibonacci-reeks (ook bekend als de Gulden Spiraal).

Hoe gebruik je de Gulden Snede in design

Nu de wiskundeles voorbij is, hoe kun je deze kennis nu toepassen in het werk dat je dagelijks doet?

Hier zijn vier manieren om de Gulden Snede in ontwerp te gebruiken:

Typografie en hiërarchie

De Gulden Snede kan je helpen om te bepalen welke lettergrootte je moet gebruiken voor kopteksten en body copy op een website, landingspagina, blog post, of zelfs print campagne.

Let op: je body copy is 12px. Als je 12 vermenigvuldigt met 1.618, krijg je 19.416, wat betekent dat een koptekstgrootte van 19px of 20px de Gulden Snede volgt en de 12px lettergrootte in evenwicht brengt.

Als je wilt weten hoe groot je koptekst moet zijn, kun je het tegenovergestelde doen. Als je koptekst 25px is, kun je die delen door 1.618 om de grootte van de bodytekst te vinden (15 of 16 px).

Afbeeldingen bijsnijden en de grootte aanpassen

Bij het bijsnijden van afbeeldingen is het makkelijk om de witte ruimte te vinden die je weg moet snijden. Maar hoe zorg je ervoor dat de afbeelding nog steeds in balans is nadat je het formaat hebt aangepast? U kunt de Gulden Spiraal gebruiken als leidraad voor de compositie van de afbeelding.

Als u bijvoorbeeld de Gulden Spiraal over een afbeelding legt, kunt u ervoor zorgen dat het brandpunt in het midden van de spiraal ligt.

Lay-out

Het gebruik van de Gulden Snede kan u helpen een visueel aantrekkelijke UI te ontwerpen die de aandacht van de gebruiker vestigt op wat het belangrijkst is. Zo kan een pagina met een breed blok links en een smallere kolom rechts de verhoudingen van de Gulden Snede volgen en je helpen te bepalen waar je de belangrijkste content plaatst.

Logo ontwikkeling

Als je een nieuw logo ontwerpt en je zit vast, gebruik dan de Gulden Snede om je te helpen de verhoudingen en vormen te schetsen. Veel populaire logo’s volgen de Gulden Snede, zoals Twitter, Apple en Pepsi.

Ontwerper Kazi Mohammed Erfan daagde zichzelf zelfs uit om 25 nieuwe logo’s te ontwerpen die volledig op de Gulden Snede waren gebaseerd. Het resultaat? Eenvoudige, evenwichtige en prachtige pictogrammen.

Hulpmiddelen om de Gulden Snede te gebruiken

U hoeft geen potlood en papier te pakken om de Gulden Snede uit te rekenen – er zijn een aantal apps die dat voor u kunnen doen.

Hier zijn vijf tools om je te helpen de Gulden Snede verhouding in je ontwerpen te gebruiken:

• Gulden Snede verhouding calculator: Bereken de kortere zijde, langere zijde en gecombineerde lengte van de twee zijden om de Gulden Snede te berekenen.
• goldenRATIO: Deze app is gemaakt voor ontwerpers en ontwikkelaars en biedt je een eenvoudige manier om websites, interfaces, lay-outs en meer te ontwerpen volgens de Gulden Snede verhouding. Het bevat een ingebouwde rekenmachine met visuele feedback en functies om schermpositie en instellingen op te slaan, zodat u de Gulden Snede niet voor elke taak opnieuw hoeft in te stellen.
• Gulden Snede Typografie Calculator: Ontdek de perfecte typografie voor uw website door uw lettergrootte en -breedte in te voeren. U kunt optimaliseren op basis van lettergrootte, regelhoogte, breedte, en tekens per regel.
• PhiMatrix: Deze Golden Ratio ontwerp en analyse software komt aanpasbare rasters en sjablonen die u kunt overlay op elke afbeelding. Het kan worden gebruikt voor ontwerp en samenstelling, productontwerp, logo ontwikkeling, en nog veel meer.
• Gulden Snede Schets bron: Download een gratis Sketch-bestand van de Gulden Spiraal om te helpen bij het samenstellen van afbeeldingen en lay-outs.

Aan de slag met de Gulden Snede

Als je eenmaal weet waar je op moet letten, zul je de Gulden Snede overal beginnen op te merken. (Geloof je ons niet? Kijk naar je handen. Zelfs je vingers volgen de Gulden Snede). Het menselijk oog is gewend aan dit magische getal en we reageren er onbewust positief op.

Als ontwerpers kunnen we dit getal in ons voordeel gebruiken. Zelfs kleine aanpassingen in de manier waarop je een afbeelding bijsnijdt of een lay-out ontwikkelt, kunnen de manier waarop je gebruikers met je ontwerp omgaan, drastisch verbeteren.