Share
Matematikk er overalt, selv hvor du ikke ville forvente det. Du kan finne matematiske forhold og konstanter i arkitektur, men også i instrumentene vi bruker til å lage musikk. Du kan finne matte i visse spill vi spiller, og derfor bør det ikke overraske deg at matematikk spiller en viktig rolle i webdesign også. Men hva er denne rollen? Og hvordan kan vi bruke disse forholdene, konstanter og teorier for å gjøre vår webdesign mer vakker?
Walt Disney en gang laget en film om Donald Duck i Mathmagicland. I denne videoen - tilgjengelig på YouTube - introduserer de barn til matematikk og hva den brukes til. Det viser at et matematisk forhold brukes til å definere notatene på våre instrumenter, og at et matematisk rektangel finnes i både gammel og moderne arkitektur. Også, vi kan finne akkurat det samme rektangel i noen renessanse kunst ved for eksempel den berømte Leonardo da Vinci.
Den generelle leksjonen er enkel: Du kan bruke noen grunnleggende matematiske prinsipper for å designe orden og skjønnhet i dine egne kreasjoner.
I det gamle Hellas var det en elitegruppe av matematikere som kalte seg pythagoreerne. Pythagoreerne hadde pentagrammet som deres emblem. De valgte denne formen på grunn av sin matematiske perfeksjon: Den lineære formen på pentagramet inneholder allerede det gyldne forholdet tre ganger allerede! Også, det er tonnevis av gylne rektangler gjemt i form også, disse er de samme gylne rektanglene som er til stede i Mona Lisa.
En stund etter det, i 12th og 13th århundre, levde en talentfull italiensk matematiker. Han het Leonardo Pisano Bigollo, selv om du kanskje kjenner ham bedre som fibonacci. For sin bok Liber Aci, han observert den naturlige avlen av kaniner. I denne ideelle verden av ham, hvor ingen kanin ville dø, og hver enkelt kanin ville begynne å reprodusere så snart som mulig, fant han ut at denne syklusen inneholdt en spesiell sekvens av tall. Denne sekvensen ble senere kjent som Fibonacci Numbers.
Det som er så spesielt med denne sekvensen er at hvis du deler et valgt nummer med nummeret som er tidligere i sekvensen, vil du (omtrent) få samme nummer hver gang. Dette tallet er omtrentlig 1.618, bedre kjent som Phi. Jo lenger du går i sekvensen, jo nærmere kommer resultatet av divisjonen til Phi. Fibonacci har også funnet ut at denne sekvensen ikke bare finnes i avl av kaniner, men også i andre ting i naturen, slik som arrangering av frø i en solsikke.
Som du kanskje allerede vet, er Phi også en meget fremtredende konstant i design; Dette skyldes at et forhold på 1 til 1.618 er bedre kjent som Golden Ratio - ofte referert til som Golden Section, Gylne snitt eller Divine Ratio. Hvis du lager et rektangel i henhold til dette forholdet, får du en form som kalles Gylden rektangel.
Den gyldne forholdet og det gyldne rektangel brukes i mange former for kunst og design. I renessanseperioden delte mange kunstnere sine kunstverk i henhold til dette forholdet og rektangelet. I antikkens Hellas brukte arkitekter dette rektangelet i utformingen av bygningene; Parthenon er et godt eksempel på dette. Selv i moderne arkitektur har det gylne rektangel en sterk tilstedeværelse.
Men hva er det som gjør dette forholdet så spesielt? Fordi dette nummeret, Phi, finner sin opprinnelse i naturen, befinner vi mennesker seg selv oss godt med dette forholdet. Fordi vi er så kjent med dette forholdet, utløser det naturlig en følelse av balanse og harmoni. Derfor kan du bruke dette forholdet til å sikre deg en balansert sammensetning av elementene dine.
Før vi begynner å tenke på å bruke forholdet til våre design, må vi først se på noen få eksempler som bruker forholdet allerede.
Et godt eksempel er dette nettstedet, da designen huser flere tilfeller av forholdet. I bildet nedenfor kan du se et skjermbilde av dette nettstedet. Som du kan se, har jeg brukt to farger for å markere de forskjellige kolonnene. Bredden på hovedkolonnen med blogginnleggene i den er mer eller mindre 1.618 ganger så stor som sidebjelken med annonsene. En rask beregning på bunnen viser dette.
Men dette nettstedet bruker ikke den gyldne ratioen på sin totale bredde, den brukes også til noen av de mindre delene av nettstedet.
La oss ta en rask titt på hovedkolonnen, og deretter innholdet inni. Som du ser nedenfor, er det inneholdende elementet ca 1.618 ganger så stort som innholdet som skal leses inne i dette elementet.
Et annet godt eksempel er den berømte Smashing Magazine bloggen. Hovedkolonnen har en total bredde på litt over 700 piksler. Når du deler dette nummeret med 1.618, er omtrent 435 resultatet: Den eksakte bredden på sidefeltet.
Lerret av et maleri og bredden på en bygning har alle en fast bredde, monitorene som viser arbeidet varierer i størrelse. Derfor - og spesielt i væskedesigner - er det en ekstra variabel som bør tas i betraktning ved beregning av det gyldne forholdet.
Det er imidlertid en enkel måte å overvinne dette problemet på. Når du vil beregne bredden på et element i henhold til forholdet, trenger du bare å ta bredden på det opprinnelige elementet, så det inneholdende elementet. I vårt første og siste eksempel var dette hele bredden på et nettsted. I det andre eksemplet var dette bare bredden av en mindre del: deres hovedkolonne.
Uansett, når du har bestemt bredden på det inneholdende elementet, bør du nå dele denne verdien av Phi. Resultatet gir deg bredden på hovedelementet. Nå er alt som er igjen å gjøre, å trekke resultatet fra hovedelementet fra den opprinnelige bredden, dette gir deg bredden på den sekundære kolonnen.
Hvis du har problemer med å huske Phi, eller når du bare er lat for å fylle ut noen tall på en kalkulator, foreslår jeg at du bruker Phiculator. Denne lille applikasjonen krever at du fyller ut en verdi (bredden på det inneholdende elementet som er) og det beregner automatisk den tilsvarende bredden. Du kan til og med be om å beregne med heltall, så du trenger ikke å bekymre deg for desimaltall heller.
En annen kjent matematisk divisjon er regelen av tredjedeler. Denne regelen kan hjelpe deg med å skape en balansert sammensetning ved å dele lerretet i ni like deler. Regelen er litt lik Golden Ratio, da divisjonen med 0,62 er nøyaktig lik 0,67 - som tilsvarer to tredjedeler.
En form for kunst der regelen for tredjedeler brukes svært ofte, er i fotografi som det er enkelt og raskt guide for å få deg en god sammensetning. Det er derfor du sannsynligvis vil finne en funksjon på digitalkameraet som deler sin LCD-skjerm i ni deler, ved hjelp av tredjedelsregel. Selv noen dSLR har denne funksjonen, da de plantet noen få lyspunkter i søkeren når de fokuserer.
Ved hjelp av tredjedelsregelen deler du lerretet ditt horisontalt og vertikalt inn av tre. Denne divisjonen gir deg ni like rektangler, fire linjer og fire skjæringspunkter. Du kan skape en interessant og balansert sammensetning ved å bruke disse linjene og skjæringspunktene.
Nøkkelen i en god sammensetning ligger selvsagt i å plassere elementene dine riktig. Når du bruker regelen for tredjedeler, er det to ting du kan plassere med.
Den første er linjene som brukes til å dele lerretet. I fotografering er ting med lang og rett form ofte justert på disse linjene. I design kan ting med samme form - som et sidebar - også justeres til disse linjene.
Den andre tingen å justere seg til er poengene der dine delelinjer krysser. Du må sette ett eller to objekter på disse punktene, for for mye vil fortsatt drepe komposisjonen din.
Et godt eksempel på dette fant jeg på Photography-website Flickr. Som du ser nedenfor, justerte fotografen radene med topplinjen, og i øvre høyre krysspunkt finner du et hus som skiller seg ut mest på grunn av fargen. Fordi det er et fokuspunkt i seg selv, tilpasser det seg med krysspunktet en god sammensetning og en balansert følelse.
Flickr fotografi funnet her Vi har sett regelen for tredjedeler brukt på fotografering, men hva med å bruke den til webdesign, kan vi finne eksempler på det?
Et godt eksempel på regelen som brukes på webdesign er igjen dette nettstedet. Jeg har laget et bilde som du kan se nedenfor. Det viser at sidelinjen på høyre side er rettet veldig nært til den vertikale linjen til høyre. Til venstre kan du se at artiklene er plassert på skjæringspunktene.
De to tilpasningene du ser ovenfor gir en følelse av harmoni i utformingen av dette nettstedet.
Så hvordan kan regelen for tredjedeler brukes på nettstedet ditt? Igjen kan den varierende bredden av "lerretet" gi oss noen problemer. Når vi bruker den samme teknikken som vi gjorde med det gyldne forholdet, skjønner vi det bra.
For å bruke divisjonen må du ta hele bredden av det inneholdende elementet og dele det med tre. Du må da tegne en linje - eller en guide som passer best for deg - to ganger på verdien du får som et resultat (multipliser dem med to for å få posisjonen til den andre linjen).
Den andre delen av divisjonen kan imidlertid gi deg noen problemer. Høyden på lerretet vårt er også variabelt, og derfor deler vi denne variabelen med tre vil gi oss noen problemer. Måten jeg bruker til å arbeide rundt dette, er å beregne divisjonens høyde med et 16: 9 (widescreen) forhold, eller bare bruk høyden til det inneholdende elementet. Del bredden av det inneholdende elementet med 16 og multipliser det tallet med 9, og du har fått deg en høyde. Du kan nå dele dette tallet med 3 igjen, og tegne linjene / støttelinjene.
Når du har satt opp støttelinjene, kan du nå plassere elementene dine i henhold til disse veiledningene. Juster elementene dine med linjene, og du må sette noen elementer av interesse og kontrast på skjæringspunktene.
Du kan kanskje ikke tenke på nett som matematisk, men de er. Du deler din lerret i forskjellige kolonner og takrenner, denne divisjonen med to, tre - og jeg har sett opp til seksten - er virkelig matematisk.
Mange argumenterer for at rutenettet begrenser din kreativitet, fordi du begrenser din frihet med et rutenett system. Jeg tror ikke dette er sant, som boken heter Vormator, lærte meg at begrensninger faktisk øker din kreativitet. Dette skyldes at du tenker på løsninger med disse grensene i tankene, mens disse ideene aldri ville vært tenkt på hvis du ikke har disse restriksjonene.
Grunnsystemets 'arbeid' er at de kan veilede deg i dimensjonering, posisjonering og tilrettelegging av webdesign. De kan hjelpe deg med å organisere og fjerne rot av innhold. Men viktigst av alt er de enkle å bruke.
En annen god grunn til å bruke nett er at reglene er ment å være ødelagte, ikke sant? Hvis du bryter nettverket ditt en gang imellom, er det ikke dårlig. Tvert imot! "Breaking" -nettverket ditt kan skape spesiell interesse for et bestemt element på siden, fordi det er i kontrast til resten. Dette kan hjelpe deg med å oppnå bestemte mål, som en oppfordring til handling som skiller seg ut på grunn av dette.
Det er ingen reell sett måte å konstruere et godt gridsystem på, ettersom de dreier seg om innhold og intet innhold er virkelig det samme. Men for det skyldes jeg en enkel prosess i hvordan man bygger et 6-kolonne rutenett i et 960-pixel bredt miljø.
Først vil vi dele vår totale lerretbredde med 6 slik at vi har den totale bredden på hver kolonne. Resultatet av denne delen er 160 piksler, som du kan se nedenfor i bildet.
For det andre lager vi et bilde av en kolonne, vi kopierer dette senere. På denne måten er det enklere å lage vårt komplette grid etterpå, da vi ikke trenger å gjenta dette trinnet for hver kolonne.
Vi bestemmer størrelsen på vår renner, jeg tror at 20 piksler er nok. Gutten skal legges til begge sider av kolonnen, så vi må dele det med to. Hvis vi ikke gjør dette, vil vår renner være 40 piksler bred. Som du kan se på bildet nedenfor, har vi lagt til en 10-pixel renner på hver side.
Nå kan vi kopiere dette bildet til vi når totalt 960 piksler igjen, og vi har opprettet et (grunnleggende) rutenett.
Ikke bekymre deg; selv om du er lat må du ikke leve uten rister. Det er mange fine - og frittstående nettverkssystemer på internett på internett. Min favoritt, og jeg er sikker på at du har hørt om det før, er det berømte 960.gs rutenettet, som har et CSS-rammeverk og en PSD-fil med alle guider installert.
Jeg håper jeg har vist deg at matematikk kan være vakker når den brukes på design, og at jeg har gitt deg nok teknikker til bruk i ditt neste design. Vær imidlertid oppmerksom på at det er mange andre ting som kreves for å gjøre et design til en suksess, og derfor bruker du disse triksene ingen garanti for en god design, men de kan sikkert hjelpe deg og veilede deg i ferd med å lage en.
Takk for at du leste!
Accentsconagua