A hat\u00e9kony design egyik ism\u00e9rve a vil\u00e1gos \u00e9s \u00e1tl\u00e1that\u00f3 felhaszn\u00e1l\u00f3i fel\u00fclet. Ehhez a weboldalelemeket egyens\u00falyba kell hoznod a weboldalk\u00e9sz\u00edt\u00e9s sor\u00e1n<\/a>. Ez\u00e1ltal lesznek k\u00e9pesek a felhaszn\u00e1l\u00f3k k\u00f6nnyen hozz\u00e1jutni az inform\u00e1ci\u00f3khoz, valamint er\u0151fesz\u00edt\u00e9s n\u00e9lk\u00fcl kapcsolatba l\u00e9pni a term\u00e9keddel. Az egyens\u00faly azonban nem csak szimmetri\u00e1val \u00e9rhet\u0151 el<\/a>, hanem a megfelel\u0151 asszimetri\u00e1val. Az aranymetsz\u00e9s egy ilyen egyens\u00falyt k\u00edn\u00e1l<\/strong>, valamint seg\u00edt abban, hogy felh\u00edvd a legfontosabb dolgokra a figyelmet<\/strong> az aranymetsz\u00e9s szerinti elhelyez\u00e9ssel.<\/p>\n\n\n\n A vil\u00e1gon minden harm\u00f3ni\u00e1ra \u00e9s egyens\u00falyra t\u00f6rekszik. A term\u00e9szet is k\u00f6zel t\u00f6k\u00e9letes dolgokat hozott l\u00e9tre. Ez\u00e9rt is kedvelnek az emberek annyira mindent, mely a term\u00e9szet \u00e9rint\u00e9s\u00e9t hordozza mag\u00e1n, mik\u00f6zben pr\u00f3b\u00e1lj\u00e1k megism\u00e9telni a term\u00e9szet \u00e1ltal kialak\u00edtott mint\u00e1kat \u00e9s form\u00e1kat az alkot\u00e1saikban. Amikor a matematikusok a term\u00e9szet titkai ut\u00e1n kutattak, felfedeztek egy k\u00e9pletet, mely a legt\u00f6bb dologra igaz.<\/p>\n\n\n\n Ez az aranymetsz\u00e9s ar\u00e1nya, mely egy speci\u00e1lis, matematikai ar\u00e1ny k\u00fcl\u00f6nb\u00f6z\u0151 m\u00e9ret\u0171 elemek k\u00f6z\u00f6tt, \u00e9s amely az emberi szem sz\u00e1m\u00e1ra igen kellemesnek hat. L\u00e9nyege, hogy a kisebbik r\u00e9sz \u00fagy ar\u00e1nylik a nagyobbikhoz, mint a nagyobbik r\u00e9sz az eg\u00e9szhez. Ez az ar\u00e1ny \u00edgy \u00edrhat\u00f3 le: 1:1,618033987, \u00e9s egy kagyl\u00f3-szer\u0171 spir\u00e1llal szokt\u00e1k \u00e1ltal\u00e1ban \u00e1br\u00e1zolni a weben, amit Te is l\u00e1thatt\u00e1l m\u00e1r sokszor.<\/p>\n\n\n\n De az aranymetsz\u00e9s nem csak a spir\u00e1lform\u00e1t jelenti, hiszen m\u00e1s alakzatokkal is lehet \u00e1br\u00e1zolni: k\u00f6rt vagy h\u00e1romsz\u00f6get alapul v\u00e9ve. N\u00e9gysz\u00f6gekb\u0151l \u00e1ll \u00f6ssze a j\u00f3l ismert Fibonacci spir\u00e1l. Az ehhez kapcsol\u00f3d\u00f3 sz\u00e1msor a 0,1,1,2,3,5,8,13,21,34, 55 stb., amikor mindig az utols\u00f3 k\u00e9t sz\u00e1m \u00f6sszead\u00e1s\u00e1val j\u00f6n ki a k\u00f6vetkez\u0151 \u00e9rt\u00e9k.<\/p>\n\n\n\n Ez alapj\u00e1n hogyan lehet kialak\u00edtani a t\u00f6k\u00e9letes asszimetri\u00e1t? \u00dagy, hogy ha veszed a kisebb m\u00e9ret\u0171 elemed hossz\u00e1t, majd azt megszorzod 1,618-cal, akkor megkapod a nagyobb elem t\u00f6k\u00e9letes hossz\u00e1t. Ennek az ar\u00e1nynak m\u00e1r \u00e9vezredek \u00f3ta tudat\u00e1ban van az emberis\u00e9g, ez\u00e9rt tal\u00e1lkozhatunk \u00f3kori \u00e9p\u00fcletekn\u00e9l is az aranymetsz\u00e9s haszn\u00e1lat\u00e1val. Ma is sokan haszn\u00e1lj\u00e1k az \u00e9p\u00edt\u00e9szetben, de a m\u0171v\u00e9szetekben, a fot\u00f3kn\u00e1l \u00e9s a designban is.<\/p>\n\n\n\n Egy hat\u00e9kony elrendez\u00e9s minden design l\u00e9nyegi r\u00e9sze. Az elemek mindegyik\u00e9nek egy\u00fctt kell m\u0171k\u00f6dni\u00fck a j\u00f3 felhaszn\u00e1l\u00f3i \u00e9lm\u00e9ny\u00e9rt. R\u00e1ad\u00e1sul, minden egyes elemnek – m\u00e9g a legapr\u00f3bbnak is, mint p\u00e9ld\u00e1ul egy ikon – \u00f6nmag\u00e1n bel\u00fcl is harm\u00f3ni\u00e1t kell teremtenie. Az aranymetsz\u00e9snek pozit\u00edv hat\u00e1sa van a vizu\u00e1lis \u00e9szlel\u00e9sn\u00e9l, ez\u00e9rt is alkalmazza sok tervez\u0151 a munk\u00e1ja sor\u00e1n.<\/p>\n\n\n\n Az aranymetsz\u00e9s r\u00e9v\u00e9n olyan log\u00f3k, ikonok, illusztr\u00e1ci\u00f3k hozhat\u00f3k l\u00e9tre, melyek harm\u00f3ni\u00e1ban vannak a t\u00f6bbi weboldalelemmel a t\u00f6bbiekhez viszony\u00edtott optim\u00e1lis m\u00e9ret\u00fck miatt. Az aranymetsz\u00e9s haszn\u00e1lata r\u00e9v\u00e9n vonz\u00f3v\u00e1 tehet\u0151 egy c\u00e9ges log\u00f3, ami az\u00e9rt is fontos, mert a log\u00f3 a c\u00e9g l\u00e9nyeg\u00e9t van hivatva kifejezni.<\/p>\n\n\n\n Az aranymetsz\u00e9st gyakran alkalmazz\u00e1k a designerek akkor, ha az egyes elemek elhelyez\u00e9s\u00e9r\u0151l van sz\u00f3. Nagyon j\u00f3l haszn\u00e1lhat\u00f3 p\u00e9ld\u00e1ul egy dr\u00f3tv\u00e1zn\u00e1l. Megtervezhet\u0151 a seg\u00edts\u00e9g\u00e9vel egy olyan fel\u00e9p\u00edt\u00e9s, ahol a m\u00e9retek \u00e9s az elhelyez\u00e9s k\u00f6veti az aranyar\u00e1nyt. R\u00e1ad\u00e1sul az aranymetsz\u00e9s abban is seg\u00edt a tervez\u0151knek, hogy megfelel\u0151en v\u00e1gj\u00e1k meg a k\u00e9peket, azaz a kompoz\u00edci\u00f3 ne vesz\u00edtse el az egyens\u00faly\u00e1t.<\/p>\n\n\n\n Ez m\u00e1r a fenti p\u00e9ld\u00e1kb\u00f3l is j\u00f3l l\u00e1tszik. A gyakorlatban \u00fagy n\u00e9z ki, hogy ha mondjuk tudni akarod, hogy mekkora legyen a f\u0151 tartalmi has\u00e1b sz\u00e9less\u00e9ge, illetve az oldals\u00e1v, akkor veszed a teljes sz\u00e9less\u00e9get pixelben, majd elosztod 1,62-vel. Ezzel megkapod a f\u0151 tartalmi has\u00e1bot sz\u00e9less\u00e9g\u00e9t.<\/p>\n\n\n\n Ahogy azt m\u00e1r fentebb is l\u00e1ttad, ugyan\u00edgy kell sz\u00e1molni a tartalom struktur\u00e1l\u00e1s\u00e1n\u00e1l, ami azt\u00e1n megadja a megfelel\u0151 vizu\u00e1lis hierarchi\u00e1t is. <\/p>\n\n\n\n A log\u00f3kn\u00e1l gyakran haszn\u00e1lnak h\u00e1romsz\u00f6geket, n\u00e9gysz\u00f6geket, k\u00f6r\u00f6ket, spir\u00e1lokat, melyek – mint fentebb m\u00e1r l\u00e1that\u00f3 volt – kialak\u00edthat\u00f3k, feloszthat\u00f3k az aranymetsz\u00e9s szab\u00e1lya szerint. Egy k\u00e9s\u0151bbi fejezetben r\u00e9szletesebben is besz\u00e9l\u00fcnk az aranymetsz\u00e9s alkalmaz\u00e1s\u00e1r\u00f3l a log\u00f3k tervez\u00e9s\u00e9n\u00e9l.<\/p>\n\n\n\n A tipogr\u00e1fia eset\u00e9ben ugyan\u00fagy lehet alkalmazni az aranymetsz\u00e9s szab\u00e1lyait, mint b\u00e1rhol a designban: figyelembe kell venni a sor sz\u00e9less\u00e9g\u00e9t, illetve a bet\u0171t\u00edpus m\u00e9ret\u00e9t, \u00e9s ezek alapj\u00e1n \u00e9rdemes meghat\u00e1rozni a magass\u00e1got.<\/p>\n\n\n\n Persze a webdesign gyakorlatiasan k\u00f6zel\u00edt az aranymetsz\u00e9shez, \u00e9s nem a 1,618033987 sz\u00e1mot haszn\u00e1lj\u00e1k, hanem kerek\u00edtik ezt, mert azzal k\u00f6nnyebb dolgozni. \u00cdgy hoznak l\u00e9tre p\u00e9ld\u00e1ul r\u00e1csszerkezeteket a weboldalakon. Ha nincs kedved a sz\u00e1molgat\u00e1shoz, akkor itt egy online kalkul\u00e1tor<\/a>, mely kidobja neked a megfelel\u0151 sz\u00e1mokat, vagy itt egy m\u00e1sik<\/a>, ahol az ar\u00e1nynak megfelel\u0151 n\u00e9gysz\u00f6gek oldalm\u00e9reteit hat\u00e1rozhatod meg gyorsan.<\/p>\n\n\n\n Sokan \u00fagy v\u00e9lik azonban, hogy nem \u00e9rdemes sz\u00e1molhatni, mert \u00f6szt\u00f6n\u00f6sen is tiszt\u00e1ban vannak vele, hogy mikor \u00e9ri el az egyens\u00falyt a weboldalt. Teh\u00e1t m\u00e1r m\u00e9r\u00e9s n\u00e9lk\u00fcl, a gyakorlati tapasztalat seg\u00edts\u00e9g\u00e9vel az aranymetsz\u00e9snek megfelel\u0151 design hozhat\u00f3 l\u00e9tre. Az persze soha nem \u00e1rt, ha ez ellen\u0151rz\u00e9sre ker\u00fcl.<\/p>\n\n\n\n A l\u00e9nyeg teh\u00e1t, hogy olyan r\u00e9szeket alkossunk egy designban, mely megfelel ennek az ide\u00e1lis ar\u00e1nynak. Lehet ez egy log\u00f3, a fejl\u00e9c vagy egy megv\u00e1gott fot\u00f3. De erre \u00e9p\u00fclhet a weboldal r\u00e1csszerkezete, vagy ak\u00e1r a bet\u0171m\u00e9retekn\u00e9l is figyelembe vehet\u0151.<\/p>\n\n\n\n A matematika sz\u00e1m\u00edtgat\u00e1sok unalmasak \u00e9s id\u0151t rabl\u00f3nak t\u0171nhetnek, ez\u00e9rt k\u00e9rd\u00e9sk\u00e9nt mer\u00fcl fel, hogy egy\u00e1ltal\u00e1n meg\u00e9ri-e a haszn\u00e1lata? Mit \u00e9s mik\u00e9nt tehet hozz\u00e1 a designhoz az aranymetsz\u00e9s?<\/p>\n\n\n\n A designereknek gyakran kell szemben\u00e9zni\u00fck azzal a helyzettel, hogy egy term\u00e9kben nagy mennyis\u00e9g\u0171 tartalmat kell elhelyezni\u00fck. R\u00e1ad\u00e1sul minden r\u00e9sze fontos \u00e9s nem kihagyhat\u00f3, helyettes\u00edthet\u0151. Ahhoz, hogy minden elemet egy elfogadhat\u00f3 elrendez\u00e9sbe helyezz, \u00e9rdemes bevetni az aranymetsz\u00e9st.<\/p>\n\n\n\n Ehhez fel kell osztani a fel\u00fcletet az 1:1,618 ar\u00e1ny alapj\u00e1n l\u00e9trehozott r\u00e9szekre, \u00e9s a tartalmat a fontoss\u00e1guknak megfelel\u0151 r\u00e9szekre kell elhelyezni\u00fck. Egy ilyen elrendez\u00e9s seg\u00edti a felhaszn\u00e1l\u00f3i befogad\u00e1st az elemek optim\u00e1lis elrendez\u00e9s\u00e9vel.<\/p>\n\n\n\n Az aranymetsz\u00e9s ar\u00e1nya remek\u00fcl haszn\u00e1lhat\u00f3, amikor egy alap weboldal-r\u00e1csot hozol l\u00e9tre.<\/p>\n\n\n\n Nem feledkezhet\u00fcnk meg a vizu\u00e1lis hierarchi\u00e1r\u00f3l sem, amikor a tartalom elrendez\u00e9s\u00e9r\u0151l van sz\u00f3. A vizu\u00e1lis hierarchia egy olyan technika, melynek r\u00e9v\u00e9n hat\u00e9konyan elrendezhet\u0151k a tartalom \u00f6sszetev\u0151i. Ha a vizu\u00e1lis hierarchia kialak\u00edt\u00e1s\u00e1nak elveihez<\/a> hozz\u00e1adjuk az aranymetsz\u00e9st is, akkor szinte biztosra mehet\u00fcnk abban, hogy hat\u00e9konyan siker\u00fcl \u00f6ssze\u00e1ll\u00edtani a weboldalunkat.<\/p>\n\n\n\n Az aranymetsz\u00e9s a tipogr\u00e1fi\u00e1n\u00e1l is haszn\u00e1lhat\u00f3, hiszen a designerek a sz\u00f6veges tartalmat t\u00f6bb szintre szokt\u00e1k felosztani: c\u00edmsor, alc\u00edm, keny\u00e9rsz\u00f6veg, k\u00e9pal\u00e1\u00edr\u00e1s, stb. Az aranymetsz\u00e9s alkalmaz\u00e1s\u00e1val gyorsan meghat\u00e1rozhat\u00f3 a megfelel\u0151 ar\u00e1ny az egyes tipogr\u00e1fiai szintek k\u00f6z\u00f6tt. P\u00e9ld\u00e1ul kiv\u00e1lasztasz egy m\u00e9retet a c\u00edmsorra, majd elosztod ezt 1,618-cal. Az eredm\u00e9ny megmutatja, hogy mi lesz az optim\u00e1lis m\u00e9rete az alc\u00edmnek.<\/p>\n\n\n\n De van a tipogr\u00e1fi\u00e1t tekintve is kalkul\u00e1tor<\/a> m\u00e1r a weben, amely a bet\u0171 t\u00edpus\u00e1b\u00f3l \u00e9s m\u00e9ret\u00e9b\u0151l kiindulva meghat\u00e1rozza neked a sorok magass\u00e1g\u00e1t \u00e9s a has\u00e1b sz\u00e9less\u00e9g\u00e9t.<\/p>\n\n\n\n Amikor a felhaszn\u00e1l\u00f3k el\u0151sz\u00f6r pr\u00f3b\u00e1lnak ki egy term\u00e9ket, vagy t\u00e9vednek egy weboldalra, akkor el\u0151sz\u00f6r mindig \u00e1tfutj\u00e1k<\/a>, hogy eld\u00f6nthess\u00e9k: tetszik-e nekik, vagy sem. Az emberek n\u00e9h\u00e1ny m\u00e1sodperc alatt hat\u00e1rozz\u00e1k meg azt, hogy szeretni fognak valami, vagy nem. Ez a folyamat gyorsabban lezajlik, mint hogy tudatosan felfogn\u00e1k mit is l\u00e1tnak a kijelz\u0151n. Ez\u00e9rt k\u00fcl\u00f6n\u00f6sen fontos biztosra menni az els\u0151 benyom\u00e1s kialak\u00edt\u00e1s\u00e1n\u00e1l. Egy olyan design eset\u00e9ben, ahol figyelembe veszik az aranyar\u00e1nyt, kellemesebb benyom\u00e1suk t\u00e1mad a felhaszn\u00e1l\u00f3knak a term\u00e9kr\u0151l, \u00e9s azt a k\u00e9s\u0151bbiekben is sz\u00edvesebben fogj\u00e1k haszn\u00e1lni.<\/p>\n\n\n\n Mint arr\u00f3l m\u00e1r \u00edrtunk: a whitespace az \u00fcres t\u00e9r<\/a> a weboldal egyes elemei k\u00f6z\u00f6tt, melynek funkci\u00f3ja van. A tervez\u0151knek mindig figyelni\u00fck kell a whitespace mennyis\u00e9g\u00e9re, amit azonban nem k\u00f6nny\u0171 pontosan meghat\u00e1rozni. Ebben is seg\u00edthet az aranymetsz\u00e9s, ha a meghat\u00e1rozott ar\u00e1nyokban alak\u00edtjuk ki a negat\u00edv tereket az egyes elemek k\u00f6z\u00f6tt.<\/p>\n\n\n\n Ahogy a weboldaladn\u00e1l, \u00fagy a log\u00f3dn\u00e1l is \u00e9rdemes haszn\u00e1lni az aranymetsz\u00e9st. Kor\u00e1bban ezt jellemz\u0151en csak a nagyobb \u00e9s j\u00f3l ismert m\u00e1rk\u00e1k haszn\u00e1lt\u00e1k, de ma m\u00e1r egyre t\u00f6bb designer gyakorlott a technika alkalmaz\u00e1s\u00e1ban. De mik\u00e9nt lehet egy log\u00f3n\u00e1l bevetni? Branislav Vujaskovic egyik blogbejegyz\u00e9s\u00e9ben<\/a> j\u00f3l bemutatta ezt ismert log\u00f3k alapj\u00e1n.<\/p>\n\n\n\n Ha p\u00e9ld\u00e1ul a National Geographic log\u00f3j\u00e1ra tekintesz, majd le is m\u00e9red az abban szerepl\u0151 n\u00e9gysz\u00f6g oldalait, akkor kider\u00fcl, hogy ezek ar\u00e1nya az aranymetsz\u00e9s ar\u00e1ny\u00e1nak felel meg.<\/p>\n\n\n\n Ha a Toyota log\u00f3j\u00e1ra pillantasz r\u00e1, akkor h\u00e1rom ellipszist l\u00e1tsz: az egyik alkotja a keretet, melybe beleker\u00fcl egy fektetett \u00e9s egy \u00e1ll\u00f3 ellipszis, egy T bet\u0171t kirajzolva. A dolog azonban nem ilyen egyszer\u0171. Ha megm\u00e9red az egyes ellipsziseket, akkor kider\u00fcl, hogy azok az aranyar\u00e1nyt haszn\u00e1lj\u00e1k.<\/p>\n\n\n\n Ha lehet, a BP-n\u00e9l m\u00e9g egyszer\u0171bben bemutathat\u00f3 az ar\u00e1ny alkalmaz\u00e1sa, hiszen az egyes k\u00f6r\u00f6k az ar\u00e1nynak megfelel\u0151 m\u00e9retet vesznek fel.<\/p>\n\n\n\n De \u00e9rdemes egy pillant\u00e1st vetni a designj\u00e1r\u00f3l m\u00e9lt\u00e1n h\u00edres Apple log\u00f3j\u00e1ra is, ahol az alma g\u00f6rb\u00e9inek kialak\u00edt\u00e1s\u00e1t szint\u00e9n nem b\u00edzt\u00e1k a v\u00e9letlenre. Az egyes k\u00f6r\u00f6k ar\u00e1nyai, melyek kiadj\u00e1k az alma g\u00f6rb\u00fcleteit, megegyeznek az aranymetsz\u00e9s\u00e9vel.<\/p>\n\n\n\n \u00d6sszess\u00e9g\u00e9ben teh\u00e1t elmondhat\u00f3, hogy az aranymetsz\u00e9s k\u00e9pes harm\u00f3ni\u00e1t teremteni egy designban, \u00e9s kellemesebb\u00e9 teszi annak haszn\u00e1lat\u00e1t az emberek sz\u00e1m\u00e1ra. Ne f\u00e9lj teh\u00e1t haszn\u00e1lni ezt az egyszer\u0171 matematikai k\u00e9pletet, ann\u00e1l is ink\u00e1bb, mert nem olyan bonyolult, mint amilyennek els\u0151re l\u00e1tszik!<\/p>\n\r\nMi az az aranymetsz\u00e9s?<\/h2>\n\n\n\n
![\"Aranymetsz\u00e9s\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2018\/01\/aranymetszes.png\")
<\/figure><\/div>\n\n\n\nAranymetsz\u00e9s a webdesignban<\/h2>\n\n\n\n
![\"Aranymetsz\u00e9s](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2018\/01\/aranymetszes-weboldalon.jpg\")
<\/figure><\/div>\n\n\n\nHol tudod haszn\u00e1lni az aranymetsz\u00e9st a webdesignban?<\/h3>\n\n\n\n
Az elrendez\u00e9s kialak\u00edt\u00e1s\u00e1n\u00e1l<\/h4>\n\n\n\n
A tartalomn\u00e1l \u00e9s a vizu\u00e1lis hierarchi\u00e1n\u00e1l<\/h4>\n\n\n\n
Log\u00f3kn\u00e1l<\/h4>\n\n\n\n
Tipogr\u00e1fi\u00e1n\u00e1l<\/h4>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2018\/01\/aranyaranyra-epitve.jpg\")
<\/figure><\/div>\n\n\n\nMivel seg\u00edtheti az aranymetsz\u00e9s a weboldalad?<\/h2>\n\n\n\n
Kiegyens\u00falyozott tartalom<\/h3>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2018\/01\/aranymetszes-webdesignban.jpg\")
<\/figure><\/div>\n\n\n\nHat\u00e9kony vizu\u00e1lis hierarchia<\/h3>\n\n\n\n
Er\u0151teljes tipogr\u00e1fiai szintek<\/h3>\n\n\n\n
Kellemesebb els\u0151 benyom\u00e1s<\/h3>\n\n\n\n
A megfelel\u0151 whitespace<\/h3>\n\n\n\n
Aranymetsz\u00e9s a log\u00f3tervez\u00e9sn\u00e9l<\/h2>\n\n\n\n
![\"Aranymetsz\u00e9s](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2018\/01\/aranymetszes-national-geographic-logo.png\"){kind=logo}
<\/figure><\/div>\n\n\n\n![\"Aranymetsz\u00e9s](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2018\/01\/aranymetszes-toyota-logo.png\"){kind=logo}
<\/figure><\/div>\n\n\n\n![\"Aranymetsz\u00e9s](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2018\/01\/aranymetszes-bp-logo.png\"){kind=logo}
<\/figure><\/div>\n\n\n\n![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2018\/01\/aranymetszes-apple-logo.png\"){kind=logo}
<\/figure><\/div>\n\n\n\n