Tillämpa det gyllene förhållandet i moderna mönster

Den ideala webbsidan är både funktionell och harmonisk, men även de mest erfarna webbdesignerna kan ha problem med att berätta för dig vad som ger ett naturligt flöde av designen. Trots färg- och navigationsteorier där ute, verkar det ibland den mest avgörande aspekten av en perfekt webbsidans estetik oändlig. Vi vet inte varför det fungerar men ibland gör det bara. Det kan alla vara på grund av ett enkelt koncept.

Genom att underlätta utformningen av din webbplats med en bokstavligen naturlig ordning kan tittarna hitta din design mer intressant och meditativt tilltalande. Detta begrepp kallas gyllene snittet, en matematisk koncept natur lyder och att vi människor känner omedvetet som ett uttryck för perfektion.

The Golden What?

Enkelt uttryckt är det guldförhållande (även känt som gudomlig andel eller den gyllene medelvärde), är en matematisk konstant som upprepas i naturen och konstverk.

Uttryckt som en ekvation, när en är större än b, (a + b) delat med en är lika med en delat med b (titta bara på bilden nedan), vilket är lika med ungefär 1,618033987. Det numret, som ofta representeras av den grekiska karaktären "phi", är den gyllene snittet.

(Bildkälla: mathsisfun.com)

Samma teori kan användas för att konstruera en rektangel, kallad gyllene rektangel. En bild som följer det gyllene förhållandet kan placeras snyggt i en rektangel som lyder i förhållandet.

(Bildkälla: creativeautomaton.com)

För att konstruera en gyllene rektangel, välj ett tal som kommer att vara längden på rektangelens korta sida. För argumentets skull, låt oss säga 500 pixlar. Multiplicera det med 1.618. Resultatet, 809 pixlar, är längden på den långa sidan av din rektangel. Därför är en rektangel som är 500 pixlar med 809 pixlar en gyllene rektangel. Det lyder det gyllene förhållandet.

Naturlig skönhet

I själva verket är forskare inte säker på vad det handlar om förhållandet som människor gillar så mycket. Vad de är säkra på är hur mycket vi gillar det. Studier tyder på att även små förändringar på en bild som gör det snabbare mot det guldförhållande har stor inverkan på hjärnorna hos de som ser.

Det mänskliga ansiktet följer också förhållandet, och vi hittar personer vars ansikter är trure mot förhållandet mer attraktivt. Snäckskal, klassiska renässansmästerverk, arkitektur från antiken och jämn kroppsdelar är proportionerade utifrån förhållandet ner till fingrarna själva.

(Bildkälla: in2visualdesign)

Något som är djupt i kärnan i vårt sinne registrerar guldförhållandet så vackert, faktum artister och arkitekter har utnyttjat i tusentals år, medvetet eller inte. Det är primalspråk i bildspråk. Resultatet är organiskt, intuitivt och känns bara rätt.

Gudomlig sammansättning

Hur använder du då detta magiska nummer i kompositionen på din webbsida? Matematiken kan verka som en kvävande låda som din kreativitet kommer att kämpa i, men det gyllene förhållandet är helt enkelt en användbar riktlinje. Att ha en grundläggande riktlinje att bygga från kan sluta ge dig mer kreativa rum genom att ta lite av gissningen ur proportioner och placering.

Tänk på det som ett verktyg istället för en bur. Vid det mest grundläggande kan du använda det gyllene förhållandet för att ange storleken och placeringen av innehållsområden och sidostänger. En layout med fast bredd är det enklaste programmet. Bestäm den totala storleken på din layout med metoden för att skapa en gyllene rektangel.

För galler / block

Torget som skapats av en rad skulle vara ditt innehållsblock. Den mindre rektangeln skulle vara en sida eller navigeringsfältet. När du har räknat ut storleken på din rektangel, ta reda på hur bred din navigeringsfält behöver vara lätt matte.

För det här exemplet säger vi att din rektangel är 525 pixlar med 850 pixlar.
525 är en och 850 är (a + b), och b kommer att vara bredden på din sidofält.
Att hitta b, vi subtraherar helt enkelt från (a + b), vilket är 325.
Därför är sidobalkens bredd 325.

Kom ihåg att din rektangel kan vändas runt för att passa dina ändamål, och placera sidofältet längst upp, längst ner eller motsatt sida. Så länge förhållandet håller, kommer din design att känna sig harmonisk.

För text

Det finns ett snabbare sätt att få de mätningar du behöver och det kan användas med textinnehåll.

Låt oss säga att din kontexttext är storlek 12.
Multiplicera 12 med 1,618, det gyllene förhållandet, och du får 19.416.
En huvudtextstorlek på 19 eller 20 följer noggrant det gyllene förhållandet.

Det guldliga förhållandet är ett språk som ditt sinne förstår, och genom att kommunicera med det kommer dina idéer att komma överens mer effektivt. Du behöver inte hålla fast vid det exakt; Grundprincipen är nog. Att tillämpa förhållandet till bildstorlekar, förhållandet mellan text- och bildplacering och skapandet av underavdelningar inom sidofält är alla möjliga koncept.

Rutnätverk: Tredje regeln

Om matte inte är din kopp te kan konceptet med det gyllene förhållandet förenklas. De tredje stycket styr placeringen av intressepunkter i en scen. Dela en given bild i tredjedelar både horisontellt och vertikalt. Du får 9 rutor.

(Bildkälla: digital-photography-school.com)

Enligt regeln för tredjedelar är linjerna i dessa linjer (där linjerna korsar) den perfekta placeringen för intressanta platser. Människor som skannar sidan är mer benägna att märka saker som ligger nära punkterna, och divisionen är bekväm att visa. Mer komplex design är möjlig genom att bryta ner dessa tredjedelar till ytterligare tredjedelar.

(Bildkälla: net.tutsplus.com)

Kort sagt kan ögat vara lat och behöver inte leta efter viktiga detaljer. Våra hjärnor gillar det här. Stora bilder, nyhetslådor, sökfält och andra intressanta platser kan ligga på eller nära knutpunkterna. Denna snygga liten genväg ger dig en design som är både lätt på ögonen och gör att människor drack på viktiga data.

Kolumner och teckensnitt: Fibonacci-sekvenser

Ett annat enkelt verktyg för webbdesign kopplad till det gyllene förhållandet är Fibonacci-nummer. En Fibonacci-sekvens börjar med 0 och 1. De föregående två talen läggs till för att producera nästa nummer i sekvensen: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34 ... och så vidare.

Lite matematik berättar för oss att förhållandet mellan sekventiella Fibonacci-sekvensnummer är uppseendeväckande nära det gyllene förhållandet - dela upp något tal i sekvensen med numret före det och du kommer att få - du gissade det - 1,618.

Precis som med det gyllene förhållandet kan Fibonacci-nummer användas för att diktera förhållandet mellan textrubrikerna för rubrik och innehåll. Det kan också användas för att ange bredden på kolumnerna och är särskilt effektiv i bloggar och andra text-täta layouter. Sammansättningen kan också byggas på konceptet Fibonacci-kakel, där kakelstorlek bygger på användning av Fibonacci-sekvensen.

(Bildkälla: Wikipedia.org)

Golden Spirals and Content Clustering

En annan möjlig metod att använda både det gyllene förhållandet och Fibonacci tal är gyllene spiraler och Fibonacci spiraler. Gyllene spiraler blir bredare med en faktor som är lika med det gyllene förhållandet för varje kvarts vändning de gör, och Fibonacci-spiraler formas med hjälp av Fibonacci-kakel.

Spiralerna har använts i konstverk så länge som siffrorna och förhållandena själva. Teorin är att områden av negativt utrymme och visuell intresserad ska passa in i spiralen. Inom denna graciösa layout, som med tredjelandsregeln, är ögat naturligt ritat till spiralens centrum för att leta efter detaljer.

(Bildkälla: fabiovisentin.com)

Spiralerna kan tjäna som riktlinje för innehållstäthet och klustring. De kan tjäna som grunden för förhållandet mellan dina webbplatshuvudbilder, sökfält och verktygsfält.

När du väljer den idealiska bilden för en framsida som är byggd kring stor grafik, som till exempel butikssidor och fotograferingswebbplatser, kan du också dra nytta av de gyllene och Fibonacci-spiralerna.

Kraftfulla budskap är ofta subliminala, och guldförhållandet är en av naturens mest produktiva subliminala annonser. Genom att använda den gudomliga andelen ger du dig själv en naturlig logisk och organisk nåd som alla människor har en undermedveten attraktion för. Det gyllene förhållandet är ett annat verktyg till ditt kreativa förfogande.

Mer läsning:

Använda Guldförhållandet till Web Layouts och Objekt

Redaktörens anteckning: Det här inlägget är skrivet av Chris Pentago för Hongkiat.com. Chris är en erfaren webbutvecklare, designer och internet marknadsförare intresserad av nyckelteknik för att göra din online-verksamhet utföra. Du kan hitta honom på Twitter.