Det här kan känna sig som en matematiklektion men hänga in där. Den gyllene kvoten kombinerar lite mat, lite natur och mycket praktisk tillämpning för designers. Låt oss ta en titt på vad det gyllene förhållandet innebär för design, och några tips för att använda det i dina designprojekt.
Det gyllene förhållandet har använts under historien för att skapa designelement som har en idealisk visuell överklagning. Eftersom formen är rotad i natur och matematik är den den perfekta kombinationen av balans och harmoni. Och det är ett utmärkt verktyg för att ta upp ärmen som designer.
Vad är det gyllene förhållandet?
Helt enkelt är den gyllene kvoten (även kallad den gyllene rektangeln och gyllene medelvärdet) en form med en andel av 1 till 1.618.
Mer komplicerat kan matematiken beskrivas så här som förklaras av Interaction Design Foundation:
Varje nummer i Fibonacci-sekvensen är helt enkelt summan av de två siffrorna före den. Den börjar med 1, 1 (dvs 1 + osynlig 0 = 1) och de första 10 medlemmarna i sekvensen är 1, 1, 2, 3, 5, 8, 13, 21, 34, 55. Den fortsätter oändligt .
Beräkna matematiskt förhållandet med hjälp av formeln för Phi: A / B = (A + B) / A = 1,618033987 =?
Ansökningarna för tryck och webbdesign är ofta mindre exakta än 1 till 1.618. Många designers kommer att runda siffror när man skapar ett matematiskt guldförhållande för nät som är enklare att arbeta med.
När det gäller att tillämpa konceptet, representeras det ofta med hjälp av en spiral, cirklar eller trianglar.
Och det är inte bara en design sak.? Det gyllene förhållandet finns i naturen (nautilus skal), konst (Mona Lisa), arkitektur (Eiffeltornet) samt design.
Hur använder du det?
När det gäller att tillämpa det gyllene förhållandet finns olika tankegångar:
- Ställ in konstruktionen med hjälp av ett rutnät baserat på förhållandet för att skapa harmoni
- Gör ingenting för att det gäller om du gör det med vilje eller inte
Den bästa lösningen kan vara någonstans i mitten. Med all sannolikhet är ditt öga troligen utbildat för att skapa och luta sig mot mönster som inkluderar denna teori, men det kan aldrig skadas för att se om du faktiskt tillämpar det bra.
Och duken kan orsaka alla slags problem när det gäller det gyllene förhållandet. Du vet inte vilken webbläsarstorlek någon kan använda, eller förhållandet kanske inte överensstämmer med en viss utskriftsstorlek.
Målet är att skapa delar inom designen som passar den här idealiska formen. Tänk på det för en logotyp eller en bildgrödor. Använd den för att skapa en rubrik eller en viss del av en design. Använd begreppen för att skapa ett basnät eller hierarkisk skala för typografi.
Galler och mallar
Om du är något som jag, är idén om komplicerad matematik att lösa ett designproblem lite skrämmande. Det är där att ha några bra verktyg kan hjälpa till.
Här är några mallar och miniräknare som gör det enklare att använda det gyllene förhållandet.
- Phiculator: Ange ett tal och få motsvarande guldförhållande värde
- Golden Ratio Typography Calculator: Skapa en skala baserad på en basfont och storlek
- Golden Ratio Mall: Gratis nedladdningsbar vektor mall
- Golden Ration Wireframing Mall: Med lager för en kurva, cirklar eller fyrkant
- Guld Ratio Calculator: Beräkna förhållandet med en uppsättning siffror
- Gyllene rektangelkalkylator: Få dimensioner för yttre och inre gyllene rektanglar för valfritt antal (det här är grunden för många webbgrids med förhållandet)
3 tips för att använda det gyllene förhållandet
Så hur sätter du all denna information till praktisk användning? (Vi vill inte att du ska överväga designprojekt och bli överväldigad av matematik.)
Här är tre tips för att använda det gyllene förhållandet i designprojekt.
- Använd förhållandet för att skapa en grundwebbplats för huvudinnehåll och sidofält. Enligt W3Schools är den vanligaste webbläsarupplösningen i början av 2018 1366 med 768 pixlar. Applicera det gyllene förhållandet för ett innehållsområde på 846 pixlar bredt med ett sidofält som är 520 pixlar bred. När man beaktar förhållandet för detta ändamål är höjden inte viktig.
- Använd förhållandet för att skapa en guide för avstånd i designen. Prototypr.io har följande råd: • Använd större rutor som enhet 8 och 13 för att definiera layouter. Använd mindre rutor av enhet 1, 2 eller 3 för att definiera rännor och innehållsavstånd? baserat på gyllene rektanglar.
- Använd förhållandet för att skapa varaktiga element som ikoner eller logotyper: Att ha ett bestående element med stark harmoni kan skapa strukturen för pågående projekt. Exemplet ovan innehåller en mall som du kan ladda ner och försöka.
Varför handlar gyllene förhållandet i design?
Så varför betyder det gyllene förhållandet verkligen designers?
Det är ett annat verktyg som hjälper dig att skapa något som skapar rätt emotionell och visuell ton med användare. Denna teori existerar om du tillämpar det med vilje eller inte. Så det som är viktigt är att du förstår och erkänner det i ett försök att skapa den bästa och mest användbara designen möjlig.
Vad det gyllene förhållandet gör är att du kommer in i fokalområden där användaren sannolikt kommer att fokusera och se utifrån naturen. Det hjälper till att skapa balans och skala, även när det inte är helt avsiktligt.
Här är några väl utformade webbplatser med guldförhållande mallen överlagd på dem för att se exakt hur det hänför sig till de enskilda mönster.
Slutsats
Så här är din nyckel för att förstå och använda det gyllene förhållandet: Det är där om du tänker på det eller inte. Så varför inte överväga hur denna tidtestade designteori kan fungera för dig och göra projekt bättre?
Ladda ner mallen som vi använde här och poppa på några av dina mönster för att se hur nära du har kommit utan att ens tänka på det.
Gyllene förhållandet överlag utformat av Eightonesix