Share
Guldförhållandet används i grafiska layouter av alla slag, speciellt för att balansera innehåll som är tungt text. Det kan hjälpa designers att skapa hierarki och dra användarnas ögon till specifika områden. Kolla in följande hemsida exempel och se hur designers använder sig av det!
Guldförhållandet är ett matematiskt förhållande som vanligtvis finns i naturen och används i klassisk designteori för att skapa balanserade kompositioner. Den är ungefär lika med 1.6180, kallas också "Golden Mean", "Golden Section", och hänvisas till av grekiska bokstaven Phi "φ".
En "Gyllene rektangel" är en rektangel vars längd är 1.6180 gånger dess bredd. Till exempel a div som har en sida på 300px och en annan av 300 * 1.6180 ≈ 485px kan sägas vara en gyllene rektangel.
Om du hugger av en perfekt kvadrat från den här gyllene rektangeln kommer du att lämnas med en annan gyllene rektangel.
Du kan göra samma till den mindre rektangeln, då samma igen, obestämt, vilket ger dig den här kända bilden:
Fibonacci-sekvensen liknar det gyllene förhållandet, men inte exakt det. Det är en serie av tal där nästa nummer i sekvensen är summan av de föregående två. Till exempel: 0, 1, 1, 2, 3, 5, 8
Om vi börjar med en perfekt kvadrat, lägg sedan till den en annan får vi en rektangel:
Fortsätt lägga till rutor längs den längsta längdenSedan lägger vi till en annan kvadrat, lika med den längsta längden av den totala formen:
Då igen och igen:
Detta kan gå på obestämd tid, vilket ger oss samma effekt som vår gyllene rektangel, men den här tiden byggs upp istället för att hugga ner. Både Golden Ratio och Fibonacci Sequence ger oss lika tilltalande proportioner.
Låt oss nu analysera några webbplatser där vi kan se dem i aktion.
yourlocalstudio.dk"Din Lokala Studio" är en design- och utvecklingsstudio baserad i Köpenhamn, Danmark. De specialiserar sig på att arbeta med visuella koncept i vilken form som helst för att skapa erfarenheter som förbättrar omgivningen.
Webbplatsen här använder den gyllene medelvärdet för två av sina tre sidor. Hemsidan är en konceptuell översikt över viktiga delar av arbetet. Men när du besöker studiosidan blandar den lite av den traditionella webblayouten med gyllene medelrektangulära former när du rullar ner sidan.
Vill du sticka ut i mängden? Yourlocalstudio (YLS) har gjort det genom att använda det gyllene förhållandet i deras webbdesign. Designen har ett progressivt utseende med ett bestämt rutsystem. Du kan argumentera att dessa dagar emycket ser ut som bootstrap... hålla ett öga på fler och fler webbplatser som vill ta del av uppmärksamhet med en mer strukturellt dynamisk layout.
mashable.comMashable är en nyhetswebbplats; en källa till information, kunskap och resurser för "ansluten generation".
Jag har använt Golden Ratio-testet från UX Triggers för att visa hur Mashable använder Fibonacci-sekvensen i sin layout. Innehållslayouten är flexibel, med rubriken till vänster och länkar till fler nyheter till höger, åtskilda av gallret.
Guldförhållandet är effektivt här, eftersom det tillåter en mycket innehållsriktad webbplats att ge typografi andningsutrymme. Liknande webbplatser kan visas mer tätt packade med innehåll, med traditionella rutnätlayouter, men Mashable visar att Golden Ratio kan vara effektivt även när det är osynligt.
www.jandk.frJackson & Kent är ett webbproduktbyrå från Frankrike. De specialiserar sig på digitala tjänster som HTML5, CSS3, Drupal, Wordpress, PHP / MySQL, Flash etc.
Skärmbilden ovan visar hur layouten huvudsakligen består av tidigare klientarbete. Den innehåller också ett innehållsblock om byrån själv och en navigeringsfält i mitten av skärmen. Kontaktknappen, som visas nedan, använder också det gyllene medelvärdet som ett nätsystem för att organisera layouten på ett unikt sätt.
Exemplet här uppmuntrar dig att panorera via webbplatsen och utforska innehållet horisontellt. Den griddade vyn och blockformat av olika storlek gör innehållet mer visuellt intressant. Eftersom användare sannolikt kommer att titta på innehållet på ett skrivbord (såväl som på surfplattan) finns det paginationsnummer på navigeringsnavigeringen. Detta är ett innovativt sätt att se varje innehåll, men också hela användargränssnittet.
Det guldförhållande leder naturligtvis användarnas öga till specifika punkter inom ett användargränssnitt. Som ett koncept kan det hjälpa dig att tänka på placering av innehåll och använda hierarkin effektivt. Kombinationen av layout, typografi, färg och övergripande principer hjälper till att ta dina mönster till nästa nivå.
Accentsconagua