Webshark Blog

A hatékony webdesign kialakításához különféle technikákat és eljárásokat vetnek be a tervezők a művészettudománytól az alapvető matematika elméletekig. Az egyik leggyakoribb eszköz egy jó design létrehozásánál egy matematikai arány, az aranymetszés alkalmazása. De mi a lényege a használatának, és hogyan tudod Te alkalmazni a weboldaladnál? (2020.06.18. – Egy új fejezettel bővítettünk: Hol tudod használni az aranymetszést a webdesignban?)

A hatékony design egyik ismérve a világos és átlátható felhasználói felület. Ehhez a weboldalelemeket egyensúlyba kell hoznod a weboldalkészítés során. Ezáltal lesznek képesek a felhasználók könnyen hozzájutni az információkhoz, valamint erőfeszítés nélkül kapcsolatba lépni a termékeddel. Az egyensúly azonban nem csak szimmetriával érhető el, hanem a megfelelő asszimetriával. Az aranymetszés egy ilyen egyensúlyt kínál, valamint segít abban, hogy felhívd a legfontosabb dolgokra a figyelmet az aranymetszés szerinti elhelyezéssel.

Mi az az aranymetszés?

A világon minden harmóniára és egyensúlyra törekszik. A természet is közel tökéletes dolgokat hozott létre. Ezért is kedvelnek az emberek annyira mindent, mely a természet érintését hordozza magán, miközben próbálják megismételni a természet által kialakított mintákat és formákat az alkotásaikban. Amikor a matematikusok a természet titkai után kutattak, felfedeztek egy képletet, mely a legtöbb dologra igaz.

Ez az aranymetszés aránya, mely egy speciális, matematikai arány különböző méretű elemek között, és amely az emberi szem számára igen kellemesnek hat. Lényege, hogy a kisebbik rész úgy aránylik a nagyobbikhoz, mint a nagyobbik rész az egészhez. Ez az arány így írható le: 1:1,618033987, és egy kagyló-szerű spirállal szokták általában ábrázolni a weben, amit Te is láthattál már sokszor.

De az aranymetszés nem csak a spirálformát jelenti, hiszen más alakzatokkal is lehet ábrázolni: kört vagy háromszöget alapul véve. Négyszögekből áll össze a jól ismert Fibonacci spirál. Az ehhez kapcsolódó számsor a 0,1,1,2,3,5,8,13,21,34, 55 stb., amikor mindig az utolsó két szám összeadásával jön ki a következő érték.

Ez alapján hogyan lehet kialakítani a tökéletes asszimetriát? Úgy, hogy ha veszed a kisebb méretű elemed hosszát, majd azt megszorzod 1,618-cal, akkor megkapod a nagyobb elem tökéletes hosszát. Ennek az aránynak már évezredek óta tudatában van az emberiség, ezért találkozhatunk ókori épületeknél is az aranymetszés használatával. Ma is sokan használják az építészetben, de a művészetekben, a fotóknál és a designban is.

Aranymetszés a webdesignban

Egy hatékony elrendezés minden design lényegi része. Az elemek mindegyikének együtt kell működniük a jó felhasználói élményért. Ráadásul, minden egyes elemnek – még a legapróbbnak is, mint például egy ikon – önmagán belül is harmóniát kell teremtenie. Az aranymetszésnek pozitív hatása van a vizuális észlelésnél, ezért is alkalmazza sok tervező a munkája során.

Az aranymetszés révén olyan logók, ikonok, illusztrációk hozhatók létre, melyek harmóniában vannak a többi weboldalelemmel a többiekhez viszonyított optimális méretük miatt. Az aranymetszés használata révén vonzóvá tehető egy céges logó, ami azért is fontos, mert a logó a cég lényegét van hivatva kifejezni.

Hol tudod használni az aranymetszést a webdesignban?

Az aranymetszést gyakran alkalmazzák a designerek akkor, ha az egyes elemek elhelyezéséről van szó. Nagyon jól használható például egy drótváznál. Megtervezhető a segítségével egy olyan felépítés, ahol a méretek és az elhelyezés követi az aranyarányt. Ráadásul az aranymetszés abban is segít a tervezőknek, hogy megfelelően vágják meg a képeket, azaz a kompozíció ne veszítse el az egyensúlyát.

Az elrendezés kialakításánál

Ez már a fenti példákból is jól látszik. A gyakorlatban úgy néz ki, hogy ha mondjuk tudni akarod, hogy mekkora legyen a fő tartalmi hasáb szélessége, illetve az oldalsáv, akkor veszed a teljes szélességet pixelben, majd elosztod 1,62-vel. Ezzel megkapod a fő tartalmi hasábot szélességét.

A tartalomnál és a vizuális hierarchiánál

Ahogy azt már fentebb is láttad, ugyanígy kell számolni a tartalom strukturálásánál, ami aztán megadja a megfelelő vizuális hierarchiát is.

Logóknál

A logóknál gyakran használnak háromszögeket, négyszögeket, köröket, spirálokat, melyek – mint fentebb már látható volt – kialakíthatók, feloszthatók az aranymetszés szabálya szerint. Egy későbbi fejezetben részletesebben is beszélünk az aranymetszés alkalmazásáról a logók tervezésénél.

Tipográfiánál

A tipográfia esetében ugyanúgy lehet alkalmazni az aranymetszés szabályait, mint bárhol a designban: figyelembe kell venni a sor szélességét, illetve a betűtípus méretét, és ezek alapján érdemes meghatározni a magasságot.

Persze a webdesign gyakorlatiasan közelít az aranymetszéshez, és nem a 1,618033987 számot használják, hanem kerekítik ezt, mert azzal könnyebb dolgozni. Így hoznak létre például rácsszerkezeteket a weboldalakon. Ha nincs kedved a számolgatáshoz, akkor itt egy online kalkulátor, mely kidobja neked a megfelelő számokat, vagy itt egy másik, ahol az aránynak megfelelő négyszögek oldalméreteit határozhatod meg gyorsan.

Sokan úgy vélik azonban, hogy nem érdemes számolhatni, mert ösztönösen is tisztában vannak vele, hogy mikor éri el az egyensúlyt a weboldalt. Tehát már mérés nélkül, a gyakorlati tapasztalat segítségével az aranymetszésnek megfelelő design hozható létre. Az persze soha nem árt, ha ez ellenőrzésre kerül.

A lényeg tehát, hogy olyan részeket alkossunk egy designban, mely megfelel ennek az ideális aránynak. Lehet ez egy logó, a fejléc vagy egy megvágott fotó. De erre épülhet a weboldal rácsszerkezete, vagy akár a betűméreteknél is figyelembe vehető.

Mivel segítheti az aranymetszés a weboldalad?

A matematika számítgatások unalmasak és időt rablónak tűnhetnek, ezért kérdésként merül fel, hogy egyáltalán megéri-e a használata? Mit és miként tehet hozzá a designhoz az aranymetszés?

Kiegyensúlyozott tartalom

A designereknek gyakran kell szembenézniük azzal a helyzettel, hogy egy termékben nagy mennyiségű tartalmat kell elhelyezniük. Ráadásul minden része fontos és nem kihagyható, helyettesíthető. Ahhoz, hogy minden elemet egy elfogadható elrendezésbe helyezz, érdemes bevetni az aranymetszést.

Ehhez fel kell osztani a felületet az 1:1,618 arány alapján létrehozott részekre, és a tartalmat a fontosságuknak megfelelő részekre kell elhelyezniük. Egy ilyen elrendezés segíti a felhasználói befogadást az elemek optimális elrendezésével.

Az aranymetszés aránya remekül használható, amikor egy alap weboldal-rácsot hozol létre.

Hatékony vizuális hierarchia

Nem feledkezhetünk meg a vizuális hierarchiáról sem, amikor a tartalom elrendezéséről van szó. A vizuális hierarchia egy olyan technika, melynek révén hatékonyan elrendezhetők a tartalom összetevői. Ha a vizuális hierarchia kialakításának elveihez hozzáadjuk az aranymetszést is, akkor szinte biztosra mehetünk abban, hogy hatékonyan sikerül összeállítani a weboldalunkat.

Erőteljes tipográfiai szintek

Az aranymetszés a tipográfiánál is használható, hiszen a designerek a szöveges tartalmat több szintre szokták felosztani: címsor, alcím, kenyérszöveg, képaláírás, stb. Az aranymetszés alkalmazásával gyorsan meghatározható a megfelelő arány az egyes tipográfiai szintek között. Például kiválasztasz egy méretet a címsorra, majd elosztod ezt 1,618-cal. Az eredmény megmutatja, hogy mi lesz az optimális mérete az alcímnek.

De van a tipográfiát tekintve is kalkulátor már a weben, amely a betű típusából és méretéből kiindulva meghatározza neked a sorok magasságát és a hasáb szélességét.

Kellemesebb első benyomás

Amikor a felhasználók először próbálnak ki egy terméket, vagy tévednek egy weboldalra, akkor először mindig átfutják, hogy eldönthessék: tetszik-e nekik, vagy sem. Az emberek néhány másodperc alatt határozzák meg azt, hogy szeretni fognak valami, vagy nem. Ez a folyamat gyorsabban lezajlik, mint hogy tudatosan felfognák mit is látnak a kijelzőn. Ezért különösen fontos biztosra menni az első benyomás kialakításánál. Egy olyan design esetében, ahol figyelembe veszik az aranyarányt, kellemesebb benyomásuk támad a felhasználóknak a termékről, és azt a későbbiekben is szívesebben fogják használni.

A megfelelő whitespace

Mint arról már írtunk: a whitespace az üres tér a weboldal egyes elemei között, melynek funkciója van. A tervezőknek mindig figyelniük kell a whitespace mennyiségére, amit azonban nem könnyű pontosan meghatározni. Ebben is segíthet az aranymetszés, ha a meghatározott arányokban alakítjuk ki a negatív tereket az egyes elemek között.

Aranymetszés a logótervezésnél

Ahogy a weboldaladnál, úgy a logódnál is érdemes használni az aranymetszést. Korábban ezt jellemzően csak a nagyobb és jól ismert márkák használták, de ma már egyre több designer gyakorlott a technika alkalmazásában. De miként lehet egy logónál bevetni? Branislav Vujaskovic egyik blogbejegyzésében jól bemutatta ezt ismert logók alapján.

Ha például a National Geographic logójára tekintesz, majd le is méred az abban szereplő négyszög oldalait, akkor kiderül, hogy ezek aránya az aranymetszés arányának felel meg.

Ha a Toyota logójára pillantasz rá, akkor három ellipszist látsz: az egyik alkotja a keretet, melybe belekerül egy fektetett és egy álló ellipszis, egy T betűt kirajzolva. A dolog azonban nem ilyen egyszerű. Ha megméred az egyes ellipsziseket, akkor kiderül, hogy azok az aranyarányt használják.

Ha lehet, a BP-nél még egyszerűbben bemutatható az arány alkalmazása, hiszen az egyes körök az aránynak megfelelő méretet vesznek fel.

De érdemes egy pillantást vetni a designjáról méltán híres Apple logójára is, ahol az alma görbéinek kialakítását szintén nem bízták a véletlenre. Az egyes körök arányai, melyek kiadják az alma görbületeit, megegyeznek az aranymetszésével.

Összességében tehát elmondható, hogy az aranymetszés képes harmóniát teremteni egy designban, és kellemesebbé teszi annak használatát az emberek számára. Ne félj tehát használni ezt az egyszerű matematikai képletet, annál is inkább, mert nem olyan bonyolult, mint amilyennek elsőre látszik!