Akció jelenjmeg.hu 20% kedvezményt biztosít a weboldal készítésre, weboldal tervezésre, logo tervezésre!

Az aranymetszés és a felhasználói felület kialakítása azaz a weboldal tervezés

Összefoglaló: Bár hagyományosan a művészetben és az építészetben használják, az aranymetszés az esztétikailag kellemes felhasználói felületek tervezésénél is alkalmazható.

Az arányrendszerek arányokon alapulnak, és évszázadok óta használják őket az építészetben és a művészetben. Az aranymetszést már Kr. e. 500 körül Phidiász, Platón, majd Eukleidész említette először. Joggal feltételezhető, hogy ezt az arányt a történelem során többször is felfedezték - innen ered számos elnevezése, többek között arany középút, aranymetszés, aranymetszés, aranymetszés, isteni arányosság (Leonardo Da Vinci találmánya) és a görög φ szimbólum.

A pontos matematikai definíció a következő (a Wikipedia szerint):

Aranyarány: Két a és b mennyiség (a>b) akkor van φ aranymetszésben, ha arányuk megegyezik összegük és a két mennyiség közül a nagyobbik arányával:

arany metszés a weboldal tervezésben

weboldal tervezés

Két szegmens az aranymetszésben (a/b = φ).
A φ aranymetszésnek van egy különleges tulajdonsága:

grafikai tervezés

és egyenlő 1,618033... (irracionális szám). (Ellenőrizhetjük, hogy 1/0,618=1,618.)

Giacomo Rizzolatti és Cinzia Di Dio tanulmánya szerint az emberi agy arra van beprogramozva, hogy az aranymetszéses arányú emberi testeket részesítse előnyben. A vizsgálatban művészeti háttérrel nem rendelkező résztvevőknek egy eredeti képet és egy szobor torzított változatát mutatták meg. Az eredeti szobor arányai az aranymetszést tükrözték. Az eredeti kép erősen aktiválta az agysejtek egy csoportját, míg a torzított képek nem, ami arra utal, hogy a szépség részben veleszületett tulajdonság.

Az aranymetszést a természetben, az építészetben, a festészetben és a zenében található mennyiségek elemzésére használták. Használatakor gyakran feltételezik, hogy organikus, kiegyensúlyozott és esztétikailag kellemes kompozíciót hoz létre, amelyről úgy gondolják, hogy az emberi szem kedveli.

Az aranymetszés arányait alkalmazó épületek és műalkotások példái közé tartoznak a gízai piramisok, az athéni Parthenon és Da Vinci Mona Lisája.

webshop készítés

Leonardo Da Vinci Mona Lisája: A fej hossza és szélessége (a1 és b1 szegmensek), valamint a törzs hossza és szélessége (a szem vonalától a kezekig - a2 és b2 szegmensek) aranymetszésben van.

Az arany négyszög és a spirál – a weboldal készítés alapja

Az aranytéglalap egyszerűen egy olyan téglalap, amelynek oldalai az aranymetszés arányában vannak.

céges weboldal készítés

Az aranytéglalap oldalai az aranymetszésben vannak (a/b = φ).
Az aranytéglalapnak van egy érdekes tulajdonsága: ha egy négyzetre osztjuk, amelynek oldala megegyezik a téglalap rövidebbik dimenziójával, és egy másik téglalapra (mint az alábbi képen),

reszponzív weboldal

akkor kiderül, hogy a kisebbik téglalap is aranytéglalap. (Ez a tulajdonság azonnal levezethető az előző részben ismertetett aranymetszés-tulajdonságból).

Ha egy arany téglalapot négyzetre és kisebb téglalapra osztunk, mint a fenti képen, a kisebb téglalap is arany téglalap lesz.
A folyamatot a végtelenségig megismételheted, ha minden egyes arany téglalapot négyzetre és egy másik arany téglalapra osztasz. Az eredmény egy arany spirál lesz - ezt úgy kapjuk meg, hogy az egyes négyzetek ellentétes sarkait összekötjük.

weboldal készítés

Az arany spirál előállításához kezdjük azzal, hogy egy ABCD arany téglalapot egy ABEF négyzetre és egy kisebb EFDC arany téglalapra osztunk. Ezután ismételjük meg a folyamatot a kisebb arany téglalap EFDC-vel. Az arany spirál az így kapott négyzetek ellentétes sarkainak összekapcsolásával jön létre.

Az aranyspirál számos természetben előforduló elemben, például a növényekben és az időjárási mintákban, például a hurrikánokban is megtalálható.

Példák az aranymetszésre a felhasználói felület tervezésében (– weboldal készítés). Hogyan használják a weboldal aranymetszését az interfésztervezésben? Nézzünk néhány gyakori példát:

Szövegméretek – reszponzív weboldalak

A különböző betűméretek is lehetnek a weboldalon aranymetszésben. Tegyük fel, hogy a webhelyén a body-font mérete 16px. A fejléc betűmérete lehet a testméret aranyarányú többszöröse - azaz lehet 16 φ = 16 x 1,618 = 25,88 vagy nagyjából 26px.

Egyesek a weboldal aranymetszésté arra is használják, hogy meghatározzák az adott betűmérethez szükséges sormagasságot, hogy az aranymetszésben legyen. (A sormagasság a betűmagasság és a szövegsorok közötti fehér tér - alapvetően azt szabályozza, hogy a szövegsorok milyen sűrűn vannak elrendezve egy bekezdésben.) Például, ha a törzsszöveg betűmérete 16px lenne, a sorköz magassága 16 φ = 16 x 1,618 = 25,88, vagyis nagyjából 26px.

vállalkozás megjelenése

Fent: A fejléc és a főszöveg mérete az aranymetszésben van. A sorközök magassága szintén aranyarányban van a betűmérettel. A sormagasság növelése megkönnyíti az olvasást. Alul: Ez a szövegblokk nem használja az aranymetszést.

Kiderül azonban, hogy a dolgok egy kicsit bonyolultabbak, mert ahogy a sorok hossza hosszabbodik, a sorközök magasságának is növekednie kell az olvashatóság fenntartása érdekében. A Readingi Egyetem 2004-es tanulmánya például arra a következtetésre jutott, hogy a hosszú sorhosszú soroknál nagyobb sortávolságra van szükség, hogy a szem könnyen megtalálja a következő sort. Ha valóban az aranymetszést szem előtt tartva szeretné megtervezni a tipográfiát, használhat egy aranymetszéses tipográfiai kalkulátort, amely megadja az ideális sormagasságot egy adott betűmérethez és sorközhöz.

Képvágás – weboldal grafikai tervezése

A kompozíció fontos a meggyőző képek létrehozásakor. A képkivágás és az erős kompozíció létrehozásának gyors és egyszerű módja, ha a kép fókuszpontja fölött alkalmazza az aranymetszés spirált.

marketing

Erős kompozíciót hozhatunk létre, ha a spirált a kép fókuszpontjára helyezzük, majd a képet ennek megfelelően vágjuk ki, mint a bal oldali példában.

Weboldal elrendezése - grafikai tervezés

A 2 oszlopos elrendezés természetesen akkor jön létre, ha az arany téglalapot négyzetre és egy kisebb arany téglalapra osztja. Az így kapott elrendezés tökéletes egy fő tartalmi terület és egy oldalsáv számára. Ennek az elrendezésnek a laza követése struktúrát és egyensúlyt teremt egy felületen. A mai reszponzív webhelyeken azonban nehéz lesz az aranymetszés teljes körű támogatása minden nézetablakméretben. Ha az arányon alapuló alaprács létrehozására összpontosít, és az összetevőket ehhez igazítja, akkor legalább bizonyos képernyőméreteken képes lesz az arány alapvető előnyeit kihasználni.

Keresőoptimalizálás

Egy alapvető webes rácsszerkezet, amely az aranymetszést használja a bal oldalon.

Hogyan hozzunk létre egy laza oldalrácsot az aranymetszés használatával .

Következtetés:
Néhány tervezőt lenyűgöz az aranymetszés, és mindenféle felülettervezési elem létrehozásához és szerkesztéséhez használják. Mások úgy vélik, hogy az aranymetszés semmivel sem érvényesebb, mint bármely más, a méretek és arányok levezetésére használt módszer. Ettől függetlenül az aranymetszés hasznos referencia lehet az új vizuális tervezők vagy a készségeiket konkrét, matematikai megközelítéssel fejleszteni kívánó tervezők számára.

Megosztom a cikket