Bruk av Golden Ratio i moderne design

Den ideelle nettsiden er både funksjonell og harmonisk, men selv de mest erfarne webdesignerne kan ha problemer med å fortelle deg hva som gir en naturlig design. Til tross for farge- og navigasjonsteorier der ute, virker det mest avgjørende aspektet til en perfekt nettsideens estetikk uunngåelig. Vi vet ikke hvorfor det fungerer, men noen ganger gjør det bare. Det kan alle være på grunn av et enkelt konsept.

Ved å underbygge utformingen av nettstedet ditt med en bokstavelig naturlig ordre, kan seere finne designet ditt mer interessant og innadtil behagelig. Dette konseptet kalles gullforhold, et matematisk konsept naturen adlyder og at vi mennesker underbevisst gjenkjenner som et uttrykk for perfeksjon.

The Golden What?

Enkelt sagt, det gyldne forholdet (også kjent som guddommelig andel eller gylne snitt), er en matematisk konstant som vises gjentatte ganger i natur og kunstverk.

Uttrykt som en ligning, når en er større enn b, (a + b) delt med en er lik en delt med b (bare se på bildet nedenfor), som er lik omtrent 1,618033987. Det nummeret, ofte representert av den greske karakteren "phi", er den gullforhold.

(Image Source: mathsisfun.com)

Samme teori kan brukes til å konstruere et rektangel, kalt gyldent rektangel. Et bilde som følger det gyldne forholdet kan plasseres pent inne i et rektangel som adlyser forholdet.

(Bildekilde: creativeautomaton.com)

For å konstruere et gyllent rektangel, velg et tall som vil være lengden på rektangelens korte side. For argumentets skyld, la oss si 500 piksler. Multipliser det med 1.618. Resultatet, 809 piksler, er lengden på den lange siden av rektangelet. Derfor er et rektangel som er 500 piksler med 809 piksler et gyldent rektangel. Den adlyder det gyldne forholdet.

Naturlig skjønnhet

I sannhet er forskere ikke sikker på hva det handler om forholdet som mennesker liker så mye. Det de er sikker på om, er hvor mye vi liker det. Studier tyder på at selv små endringer i et bilde som gjør det truer til det gyldne forholdet, har stor innvirkning på hjernen til de som ser.

Det menneskelige ansiktet følger også forholdet, og vi finner folk hvis ansikter er truer mot forholdet mer attraktivt. Snekkeskaller, klassiske renessanse mesterverk, arkitektur fra antikken, og til og med menneskelige kroppsdeler er proporsjonert basert på forholdet ned til fingrene selv.

(Image Source: in2visualdesign)

Noe dypt i kjernen i vårt sinn registrerer gullforholdet så vakkert, et faktum kunstnere og arkitekter har utnyttet i tusenvis av år, bevisst eller ikke. Det er primalspråk i bilder. Resultatet er organisk, intuitivt og bare føles riktig.

Guddommelig sammensetning

Hvordan bruker du dette magiske nummeret i sammensetningen av din nettside? Matematikken kan virke som en stifling boks som din kreativitet vil slite seg i, men det gyldne forholdet er bare en nyttig retningslinje. Å ha en grunnleggende retningslinje å bygge fra kan ende opp med å gi deg mer kreativt rom ved å ta noen av gjetningene ut av proporsjoner og plassering.

Tenk på det som et verktøy i stedet for et bur. På det mest grunnleggende, kan du bruke det gyldne forholdet til å angi størrelsen og plasseringen av innholdsområder og sidestenger. En fast breddeoppsett er det enkleste programmet. Bestem på den totale størrelsen på oppsettet ditt ved hjelp av metoden for å lage et gyldent rektangel.

For grids / blokker

Torget som er opprettet av linjene vil være innholdsblokken din. Det mindre rektangelet vil være en side eller navigeringslinje. Når du har funnet ut størrelsen på rektangelet, finner du ut hvor bred navigasjonslinjen din må være, er enkel matte.

For dette eksempelet vil vi si at rektangelet er 525 piksler ved 850 piksler.
525 er en og 850 er (a + b), og b vil være bredden på sidelinjen.
Å finne b, vi trekker bare fra (a + b), som er 325.
Derfor er sidebjeldets bredde 325.

Husk at rektangelet kan vendes rundt for å passe dine formål, og sette sidebjelken øverst, bunn eller motsatt side. Så lenge forholdet holder, vil designen føles harmonisk.

For tekst

Det er en raskere måte å få målingene du trenger, og det kan brukes med tekstinnhold.

La oss si at kontextteksten din er størrelse 12.
Multipliser 12 med 1.618, det gyldne forholdet, og du får 19.416.
En topptekststørrelse på 19 eller 20 vil følge den gyldne forholdet nøye.

Det gyldne forholdet er et språk som ditt sinn forstår, og ved å kommunisere med det, kommer dine ideer på en bedre måte. Du trenger ikke å overholde det nøyaktig; det grunnleggende prinsippet er nok. Ved å bruke forholdet til bildestørrelser, er forholdet mellom tekst og bildeplassering og opprettelse av underoppdelinger innenfor sidestrenger alle mulige konsepter.

Grid Work: The Rule of Thirds

Hvis matte ikke er din kopp te, kan konseptet med det gyldne forholdet forenkles. De regelen av tredjedeler styrer plasseringen av interessepunkter i en scene. Del et gitt bilde i tredjedeler både horisontalt og vertikalt. Du får 9 rister.

(Bildekilde: digital-photography-school.com)

I henhold til tredjedelsregel er toppunktene til disse linjene (hvor linjene krysser) den ideelle plasseringen for interessante steder. Folk som skanner siden, er mer sannsynlig å legge merke til ting som er plassert i nærheten av punktene, og divisjonen er behagelig å se. Mer komplisert design er mulig ved å bryte ned tredjedelene i ytterligere tredjedeler.

(Bildekilde: net.tutsplus.com)

Kort sagt, øyet kan være lat og ikke trenger å søke etter viktige detaljer. Våre hjerner liker dette. Store bilder, nyhetsbokser, søkestenger og andre interessepunkter kan være plassert på eller i nærheten av kryssene. Denne ryddige lille snarveien gir deg et design som er både lett på øynene og gjør folk trukket til viktige data-deler.

Kolonner og skriftstørrelser: Fibonacci Sequences

Et annet enkelt verktøy for webdesign knyttet til det gyldne forholdet er Fibonacci tall. En Fibonacci-sekvens begynner med 0 og 1. De to foregående tallene legges sammen for å produsere det neste nummeret i sekvensen: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34 ... og så videre.

En liten matte forteller oss at forholdet mellom sekvensielle Fibonacci-sekvensnumre er oppsiktsvekkende nær det gyldne forholdet - divisjon alle tall i sekvensen med tallet før det, og du vil få - du gjettet det - 1.618.

Som med det gyldne forholdet, kan Fibonacci-tall brukes til å diktere forholdet mellom overskrift og innholdsstørrelser. Det kan også brukes til å betegne bredden på kolonner og er spesielt effektiv i blogger og andre tekst-tette oppsett. Sammensetningen kan også bygges på konseptet Fibonacci-flislegging, hvor flisestørrelsen er bygget ved bruk av Fibonacci-sekvensen.

(Bilde Kilde: Wikipedia.org)

Golden Spirals og Content Clustering

En annen mulig metode for bruk av både det gyldne forholdet og Fibonacci tallene er gylne spiraler og Fibonacci spiraler. Gullspiraler blir bredere med en faktor som er lik den gyldne forholdet for hvert kvartall som de lager, og Fibonacci spiraler dannes ved hjelp av Fibonacci-fliser.

Spiralene har blitt brukt i kunstverk så lenge tallene og forholdene selv. Teorien er at områder av negativ plass og visuell interessert bør passe inn i spiralen. Innenfor denne grasiøse utformingen, som med tredjedelsregelen, er øyet naturlig trukket til sentrum av spiralen for å lete etter detaljer.

(Bildekilde: fabiovisentin.com)

Spiralene kan tjene som en retningslinje for innholdstetthet og clustering. De kan tjene som grunnlaget for forholdet mellom nettstedets headerbilder, søkestenger og verktøylinjer.

Når du velger det ideelle bildet for en forsiden som er bygget rundt stor grafikk, for eksempel å lagre hjemmesider og fotograferingsnettsteder, kan du også dra nytte av de gylne og Fibonacci spiraler.

Kraftige meldinger er ofte subliminale, og det gyldne forholdet er en av naturens mest produktive subliminale annonser. Ved å utnytte den guddommelige proporsjonen gir du deg selv en kanten av naturlig logikk og organisk nåde som alle mennesker har en underbevissthet til. Det gyldne forholdet er enda et verktøy på din kreative disposisjon.

Mer lesing:

Bruk av Golden Ratio til Web Layouts and Objects

Redaktørens notat: Dette innlegget er skrevet av Chris Pentago for Hongkiat.com. Chris er en erfaren webutvikler, designer og internett markedsfører interessert i viktige teknologier for å gjøre din online virksomhet utføre. Du kan finne ham på Twitter.