De gouden ratio toepassen in moderne ontwerpen

De ideale webpagina is functioneel en harmonieus, maar zelfs de meest ervaren webontwerpers kunnen moeite hebben om u te vertellen wat een ontwerp een natuurlijke stroom geeft. Ondanks kleur- en navigatietheorieën die er zijn, lijkt soms het meest cruciale aspect van de esthetiek van een perfecte webpagina onuitsprekelijk. We weten niet waarom het werkt, maar soms doet het dat gewoon. Het kan allemaal vanwege een eenvoudig concept zijn.

Door het ontwerp van uw website te onderbouwen met een letterlijk natuurlijke volgorde, kunnen kijkers uw ontwerp interessanter en persoonlijker vinden. Dit concept wordt het gouden ratio, een wiskundig concept dat de natuur gehoorzaamt en dat wij mensen onbewust erkennen als een uitdrukking van perfectie.

The Golden What?

In eenvoudige termen, de gulden snede (ook bekend als de goddelijke proportie of de gouden bedoelingen), is een wiskundige constante die herhaaldelijk in de natuur en in het kunstwerk voorkomt.

Uitgedrukt als een vergelijking, wanneer een is groter dan b, (a + b) gedeeld door een is gelijk aan een gedeeld door b (kijk maar naar de afbeelding hieronder), die gelijk is aan ongeveer 1,618033987. Dat aantal, vaak vertegenwoordigd door het Griekse karakter "phi", is het gouden ratio.

(Afbeeldingsbron: mathsisfun.com)

Dezelfde theorie kan worden gebruikt om een ​​rechthoek te construeren, genaamd de gouden rechthoek. Een afbeelding die de gulden snede volgt, kan netjes in een rechthoek worden geplaatst die aan de ratio voldoet.

(Afbeeldingsbron: creativeautomaton.com)

Als u een gouden rechthoek wilt construeren, kiest u een getal dat de lengte van de korte zijde van de rechthoek is. Laten we voor het gemak 500 pixels noemen. Vermenigvuldig dat met 1.618. Het resultaat, 809 pixels, is de lengte van de lange zijde van uw rechthoek. Daarom is een rechthoek van 500 pixels bij 809 pixels een gouden rechthoek. Het gehoorzaamt de gulden snede.

Natuurlijke schoonheid

In werkelijkheid weten wetenschappers niet wat de verhouding is die mensen zo leuk vinden. Waar ze zeker van zijn, is hoeveel we ervan houden. Onderzoeken suggereren dat zelfs kleine veranderingen in een afbeelding waardoor het waarheidsgetrouwer is naar de gulden snede grote impact hebben op de hersenen van degenen die eruitzien.

Het menselijke gezicht volgt ook de ratio en we vinden mensen wiens gezichten waarachtiger zijn naar de verhouding aantrekkelijker. Schelpen, klassieke meesterwerken uit de Renaissance, architectuur uit de oudheid en zelfs menselijke lichaamsdelen zijn geproportioneerd op basis van de verhouding tot de vingers zelf.

(Afbeeldingsbron: in2visualdesign)

Iets diep in de kern van onze geest registreert de gulden snede als mooi, een feit dat kunstenaars en architecten al duizenden jaren bewust of onbewust gebruiken. Het is de oertaal in beeldtaal. Het resultaat is organisch, intuïtief en voelt gewoon goed.

Goddelijke compositie

Hoe gebruik je dit magische nummer in de samenstelling van je webpagina? De wiskunde lijkt misschien een verstikkende doos waar je creativiteit moeite mee zal hebben, maar de gulden snede is gewoon een nuttige richtlijn. Als je een basisrichtlijn hebt om uit te bouwen, krijg je uiteindelijk meer creatieve ruimte door een deel van het giswerk uit proporties en plaatsing te halen.

Zie het als een hulpmiddel in plaats van een kooi. Op de meest eenvoudige manier kunt u de gulden snede gebruiken om de grootte en plaatsing van inhoudgebieden en zijbalken aan te geven. Een lay-out met vaste breedte is de gemakkelijkste toepassing. Bepaal de totale grootte van uw lay-out via de methode voor het maken van een gouden rechthoek.

Voor rasters / blokken

Het vierkant dat door de a-lijnen wordt gemaakt, zou je inhoudsblok zijn. De kleinere rechthoek zou een zij- of navigatiebalk zijn. Als je eenmaal de grootte van je rechthoek hebt bepaald, is het eenvoudig om uit te zoeken hoe breed je navigatiebalk moet zijn.

• In dit voorbeeld zeggen we dat uw rechthoek is 525 pixels door 850 pixels.
• 525 is een en 850 is (a + b), en b is de breedte van uw zijbalk.
• Vinden b, we trekken eenvoudigweg af van (a + b), dat is 325.
• Daarom is de breedte van uw zijbalk 325.

Vergeet niet dat je rechthoek kan worden omgedraaid om aan je doelen te voldoen, door de zijbalk bovenaan, onderaan of tegenovergesteld te plaatsen. Zolang de verhouding klopt, zal je ontwerp harmonieus aanvoelen.

Voor tekst

Er is een snellere manier om de benodigde metingen te krijgen en deze kan worden toegepast met tekstinhoud.

• Laten we zeggen dat uw contexttekst maat 12 is.
• Vermenigvuldig 12 met 1.618, de gulden snede, en je krijgt 19.416.
• Een koptekstgrootte van 19 of 20 zou de gulden snede nauwlettend volgen.

De gulden snede is een taal die je verstand begrijpt, en door ermee te communiceren, zullen je ideeën effectiever overkomen. U hoeft het niet precies na te leven; het basisprincipe is genoeg. Als u de verhouding op afbeeldinggrootte toepast, zijn de relatie tussen tekst en plaatsing van afbeeldingen en het maken van onderverdelingen binnen zijbalken alle mogelijke concepten.

Grid Work: The Rule of Thirds

Als wiskunde niet jouw ding is, kan het concept van de gulden snede worden vereenvoudigd. De regel van derden regelt de plaatsing van interessante punten in een scène. Verdeel elk gegeven beeld in derden, zowel horizontaal als verticaal. Je krijgt 9 rasters.

(Afbeeldingsbron: digital-photography-school.com)

Volgens de regel van derden zijn de hoekpunten van die lijnen (waar de lijnen elkaar kruisen) de ideale plaatsing voor aandachtspunten. Mensen die de pagina scannen, zullen eerder dingen in de buurt van de punten waarnemen en de indeling is comfortabel om te bekijken. Complexer ontwerp is mogelijk door die derden op te splitsen in nog meer derde.

(Afbeeldingsbron: net.tutsplus.com)

Kortom, het oog kan lui zijn en hoeft niet te zoeken naar belangrijke details. Onze hersenen als deze. Grote afbeeldingen, nieuwsbakken, zoekbalken en andere interessante plaatsen kunnen zich op of in de buurt van de hoekpunten bevinden. Deze nette kleine snelkoppeling geeft je een ontwerp dat zowel ogenblikkelijk is als mensen laat trekken naar belangrijke stukjes data.

Kolommen en lettergroottes: Fibonacci-reeksen

Een andere eenvoudige tool voor webdesign gekoppeld aan de gulden snede is Fibonacci-nummers. Een Fibonacci-reeks begint met 0 en 1. De vorige twee nummers worden bij elkaar opgeteld om het volgende nummer in de reeks te produceren: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34 ... enzovoorts.

Een beetje wiskunde vertelt ons dat de relatie tussen sequentiële Fibonacci-reeksnummers verrassend dicht bij de gulden snede ligt - deel het nummer in de reeks door het aantal ervoor en je krijgt het - je raadt het al - 1.618.

Net als bij de gulden snede kunnen Fibonacci-getallen worden gebruikt om de relatie tussen koptekst- en inhoudstekstgroottes te dicteren. Het kan ook worden gebruikt om de breedte van kolommen aan te geven en is vooral effectief in blogs en andere tekst-dichte lay-outs. Compositie kan ook worden gebouwd op het concept van Fibonacci-betegeling, waarbij de tegelafmetingen zijn gebaseerd op het gebruik van de Fibonacci-reeks.

(Afbeeldingsbron: Wikipedia.org)

Golden Spirals en Content Clustering

Een andere mogelijke methode om zowel de gulden snede als de Fibonacci-getallen te gebruiken zijn de gouden spiralen en Fibonacci-spiralen. Gouden spiralen worden breder met een factor die gelijk is aan de gulden snede voor elke kwartdraai die ze maken, en Fibonacci-spiralen worden gevormd met behulp van Fibonacci-tegels.

De spiralen zijn al zolang gebruikt als in de cijfers en verhoudingen zelf. De theorie is dat gebieden met negatieve ruimte en visueel belang binnen de spiraal moeten passen. Binnen deze sierlijke lay-out, zoals bij de regel van derden, wordt het oog op natuurlijke wijze naar het midden van de spiraal getrokken om naar details te zoeken.

(Afbeeldingsbron: fabiovisentin.com)

De spiralen kunnen dienen als richtlijn voor inhouddichtheid en clustering. Ze kunnen dienen als basis voor de verhouding tussen de afbeeldingen van uw websitekopbal, zoekbalken en werkbalken.

Wanneer u het ideale beeld kiest voor een voorpagina die is opgebouwd rond grote afbeeldingen, zoals thuispagina's van winkels en websites met foto's, kunt u ook profiteren van de gouden en Fibonacci-spiralen.

Krachtige berichten zijn vaak subliminaal en de gulden snede is een van de meest productieve subliminale advertenties van de natuur. Door gebruik te maken van de goddelijke proportie, geef je jezelf een voorsprong van natuurlijke logica en organische gratie waar alle mensen een onderbewuste aantrekkingskracht op hebben. De gulden snede is nog een andere tool voor je creatieve beschikking.

Meer lezen:

• De gulden snede toepassen op weblay-outs en -objecten

Opmerking van de uitgever: Dit bericht is geschreven door Chris Pentago voor Hongkiat.com. Chris is een ervaren webontwikkelaar, ontwerper en internetmarketeer die geïnteresseerd is in sleuteltechnologieën om uw online business te laten presteren. U kunt hem vinden op Twitter.