Anvendelse af den gyldne ratio i moderne design

Den ideelle webside er både funktionel og harmonisk, men selv de mest erfarne webdesignere kan have problemer med at fortælle dig, hvad der giver et design naturligt flow. På trods af farve- og navigationsteorier derude, forekommer det mest afgørende aspekt af en perfekt webside æstetik uundgåelig. Vi ved ikke, hvorfor det virker, men nogle gange gør det bare. Det kunne alle være på grund af et simpelt koncept.

Ved at understøtte udformningen af ​​dit websted med en bogstavelig naturlig orden kan seerne måske finde dit design mere interessant og behageligt. Dette begreb hedder gyldne forhold, et matematisk koncept naturen adlyder, og at vi mennesker ubevidst genkender som udtryk for perfektion.

The Golden What?

Simpelthen er det gyldne forhold (også kendt som guddommelig andel eller den gyldne middel), er en matematisk konstant, der vises gentagne gange i natur og kunst.

Udtrykt som en ligning, hvornår -en er større end b, (a + b) divideret med -en er lig med -en divideret med b (se bare billedet nedenfor), hvilket svarer til ca. 1,618033987. Det tal, der ofte er repræsenteret af den græske karakter "phi", er den gyldne forhold.

(Billedkilde: mathsisfun.com)

Den samme teori kan bruges til at konstruere et rektangel, kaldet gyldent rektangel. Et billede, der følger det gyldne forhold, kan placeres pænt inde i et rektangel, der overholder forholdet.

(Billedkilde: creativeautomaton.com)

For at konstruere et gyldent rektangel, vælg et tal, der vil være længden af ​​rektangelets korte side. For argumentets skyld lad os sige 500 pixels. Multiplicér det med 1.618. Resultatet, 809 pixels, er længden af ​​den lange side af dit rektangel. Derfor er et rektangel, der er 500 pixels ved 809 pixels, et gyldent rektangel. Det overholder det gyldne forhold.

Naturlige skønhed

I sandhed er videnskabsmænd ikke sikre på, hvad det handler om forholdet, som mennesker ligner så meget. Hvad de er sikre på, er hvor meget vi kan lide det. Undersøgelser tyder på, at selv små ændringer i et billede, der gør det mere truende til det gyldne forhold, har stor indflydelse på hjernen hos dem, der ser.

Det menneskelige ansigt følger også forholdet, og vi finder folk, hvis ansigter er mere troværdige for forholdet mere attraktivt. Skalleskaller, klassiske renæssance mesterværker, arkitektur fra antikviteter og lige menneskelige legemsdele er proportioneret baseret på forholdet ned til fingrene selv.

(Billedkilde: in2visualdesign)

Noget dybt i kernen i vores sind registrerer guldforholdet så smukt, en kendsgerning kunstnere og arkitekter har brugt i tusindvis af år, bevidst eller ej. Det er primalsprog i billeder. Resultatet er organisk, intuitivt og føles bare rigtigt.

Guddommelig sammensætning

Hvordan bruger du så dette magiske nummer i sammensætningen af ​​din webside? Matematikken kan virke som en kvælende kasse, som din kreativitet vil kæmpe for, men det gyldne forhold er simpelthen en nyttig retningslinje. At have en grundlæggende retningslinje at bygge fra kan ende med at give dig mere kreative rum ved at tage nogle af guesswork ud af proportioner og placering.

Tænk på det som et værktøj i stedet for et bur. På sit mest grundlæggende kan du bruge det gyldne forhold til at angive størrelsen og placeringen af ​​indholdsområder og sidebjælker. Et fast breddelayout er det nemmeste program. Bestem den samlede størrelse af dit layout via metoden til oprettelse af et gyldent rektangel.

Til gitter / blokke

Firkanten oprettet af en linjer ville være din indholdsblok. Det mindre rektangel ville være en side eller navigeringslinje. Når du har fundet ud af størrelsen af ​​dit rektangel, finder du ud af, hvor stor din navigationslinje skal være, er let matematik.

• For dette eksempel siger vi, at dit rektangel er 525 pixels af 850 pixel.
• 525 er -en og 850 er (a + b), og b vil være bredden af ​​din side bar.
• At finde b, vi trækker simpelthen fra (a + b), som er 325.
• Derfor er sidebjælkens bredde 325.

Husk at dit rektangel kan vendes rundt for at passe til dine formål, og sæt sidebjælken øverst, nederst eller modsat side. Så længe forholdet holder, vil dit design føle sig harmonisk.

Til tekst

Der er en hurtigere måde at få de mål, du har brug for, og den kan anvendes med tekstindhold.

• Lad os sige, at din kontexttekst er størrelse 12.
• Multiplicer 12 med 1,618, det gyldne forhold, og du får 19.416.
• En header tekststørrelse på 19 eller 20 vil nøje følge det gyldne forhold.

Det gyldne forhold er et sprog, som dit sind forstår, og ved at kommunikere med det, kommer dine ideer på tværs af mere effektivt. Du behøver ikke at overholde det nøjagtigt; det grundlæggende princip er nok. Anvendelsen af ​​forholdet til billedstørrelser, forholdet mellem tekst- og billedplacering og oprettelse af underopdelinger inden for sidebjælker er alle mulige begreber.

Gitterværk: Tredje regel

Hvis matematik ikke er din kop te, kan konceptet for det gyldne forhold forenkles. Det tredjedelsregel styrer placeringen af ​​interessepunkter i en scene. Opdel et givet billede i tredjedele både vandret og lodret. Du får 9 gitter.

(Billedkilde: digital-photography-school.com)

I henhold til tredjelandsregel er hjørnerne af disse linjer (hvor linjerne krydser) den ideelle placering for interessepunkter. Folk, der scanner siden, er mere tilbøjelige til at lægge mærke til ting, der ligger tæt på punkterne, og divisionen er behagelig at se. Mere komplekst design er muligt ved at nedbryde disse tredjedele i yderligere tredjedele.

(Billedkilde: net.tutsplus.com)

Kort sagt kan øjet være lat og ikke behøver at søge efter vigtige detaljer. Vores hjerner som denne. Store billeder, nyhedsbokse, søgelys og andre interessepunkter kan være anbragt på eller i nærheden af ​​hjørnerne. Denne pæne lille genvej vil give dig et design, som både er let på øjnene og gør folk trukket til vigtige data.

Kolonner og skriftstørrelser: Fibonacci Sequences

Et andet simpelt værktøj til webdesign forbundet med det gyldne forhold er Fibonacci numre. En Fibonacci-sekvens begynder med 0 og 1. De to foregående tal tilføjes sammen for at producere det næste tal i sekvensen: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34 ... og så videre.

En lille matematik fortæller os, at forholdet mellem sekventielle Fibonacci-sekvensnumre er startende tæt på det gyldne forhold - divider alle tal i sekvensen med nummeret før det, og du vil få - du gættede det - 1,618.

Som med det gyldne forhold kan Fibonacci-numre bruges til at diktere forholdet mellem overskrift og indholdsstørrelser. Det kan også bruges til at angive bredden af ​​kolonner og er særligt effektiv i blogs og andre tekstdækkede layouter. Sammensætning kunne også bygges på begrebet Fibonacci fliser, hvor flise størrelse er bygget op ved brug af Fibonacci sekvensen.

(Billedkilde: Wikipedia.org)

Golden Spirals og Content Clustering

En anden mulig metode til at bruge både det gyldne forhold og Fibonacci tal er gyldne spiraler og Fibonacci spiraler. Gyldne spiraler bliver bredere med en faktor, der svarer til det gyldne forhold for hvert kvart drejning de laver, og Fibonacci spiraler dannes ved hjælp af Fibonacci fliser.

Spiralerne er blevet brugt i kunstværket så længe tallene og forholdene selv. Teorien er, at områder af negativt rum og visuel interesseret skal passe i spiralen. Inden for dette yndefulde layout, som med tredjelandets regel, er øjet naturligt trukket til midten af ​​spiralen for at lede efter detaljer.

(Billedkilde: fabiovisentin.com)

Spiralerne kan tjene som en retningslinje for indholdstæthed og klyngning. De kan tjene som grundlaget for forholdet mellem dine webstedsoverskrifter, søgebjælker og værktøjslinjer.

Når du vælger det ideelle billede til en forside, der er bygget op omkring stor grafik, som f.eks. Butikssider og fotograferingswebsteder, kan du også drage fordel af de gyldne og Fibonacci spiraler.

Kraftige meddelelser er ofte subliminale, og det gyldne forhold er en af ​​naturens mest produktive subliminale reklamer. Ved at udnytte den guddommelige andel giver du dig selv en kant af naturlig logik og organisk nåde, at alle mennesker har en underbevidst attraktion til. Det gyldne forhold er endnu et værktøj til din kreative bortskaffelse.

Mere læsning:

• Anvendelse af den gyldne ratio til weblayouts og objekter

Redaktørens note: Dette indlæg er skrevet af Chris Pentago til Hongkiat.com. Chris er en erfaren webudvikler, designer og internet marketingmedarbejder interesseret i nøgle teknologier til at gøre din online forretning udføre. Du kan finde ham på Twitter.