A webdesign szakmában sokan sokféleképpen magyarázták már, hogy az emberek mit és miért tartanak szépnek, harmónikusnak és arányosnak.
Fontosak a felhasznált színek, betűtípusok, grafikai hatások és a keltett hangulat, de összhatását tekintve ugyanolyan fontos (ha nem fontosabb) a térelosztás, az alkalmazott arányok és a tartalom tagolása is.
Ennek kialakítására remek segítség az aranymetszés arányait figyelembe venni.
Miért jó az aranymetszés?
Harmóniát és tökéletességet sugall, ráadásul nem is csak a webdesignban, hanem az élet minden területén.
Ha megnézed a napraforgó magok elrendeződését, egy szabályos csigaházat vagy egy tökéletes tojás formát, akkor olyan érzésed támad, hogy ez így van rendben.
De megnézhetsz görög szobrokat, vagy híres festményeket, amelyek tagolásukban követik az aranymetszést, akkor valahol mélyen érzed ezt az egységet.
Csakúgy, mint a fenti Mona Lisa képen, ahol az aranymetszés szinte egyenlő a renddel, harmóniával.
Nem lenne rossz dolog ugyanezt üzenni egy weboldallal is, ugye?
Mi is az az aranymetszés
Az aranymetszés egy arányszám, ami két szám viszonyát fejezi ki és a végtelen tizedes jegyig pontosítható, kb. 1,61803398
A Fibonacci számsorozattal is összefügg, aminek az első két tagja a 0 és az 1, utána pedig a sorozat következő száma mindig az azt megelőző két szám összege. Tehát
0+1 = 1
1+1 = 2
1+2 = 3
5, 8, 13, 21, 34, 55… És így tovább. Természetesen a végtelenségig folytatható, de az az érdekes, hogy ha a számokat elosztod, akkor az egymást követő tagok aránya közelít az aranymetszéshez.
2/1 = 2,0
3/2 = 1,5
5/3 = 1,67
8/5 = 1,6
13/8 = 1,625
21/13 = 1,615
34/21 = 1,619
55/34 = 1,6176
Ez egy módszer a sok közül az aranymetszés kiszámolására.
Hogyan használd a webdesignban?
Vegyünk például egy 960 pixel széles webdesignt. Ha ezt fel akarod osztani két részre (oldalsáv + tartalom), akkor a 960-at elosztod 1,618-cal. Végeredményben a fő tartalom 593 pixeles lesz, az oldalsáv pedig 367 pixeles.
Alkalmazhatod ezeket az arányokat még a különböző funkciók, menüpontok és egyéb tartalmi egységek elhelyezésénél, vagy képarányok meghatározására.
Jó példa az alkalmazásra a Twitter egyik régebbi design-ja a lenti képen.
Kép forrása: http://www.neatorama.com/2010/09/29/twitters-new-design-is-based-on-the-golden-ratio/#!pi9mA
Ha pedig reszponzív webdesignt szeretnél, akkor egy hozzáértő designer beállíthatja neked, hogy az oldal fontos elemei az aranymetszés arányait megtartva méretezzék át magukat.
Hogyan használd logó tervezéshez?
Logók tervezésekkor is előszeretettel alkalmazzák ezeket az arányokat. Például az Apple-nél:
Kép forrása: http://akwos.com/download/1266/apple-logo-and-golden-ratio-mathematics-and-multimedia/960×400/
De ha rákeresel az interneten, akkor több nyomot találhatsz arra vonatkozóan, hogy a Toyota, a Honda és a Mercedes logóinak tervezésekor is figyelembe vették ezeket az arányokat.
Használd a szövegekben
A webdesign része a szöveg is.
A design tagolásán túl (a designtól is függ, hogy mekkora szöveghasábokkal dolgozhatsz) játszhatunk a betűméretekkel, a sormagassággal és a sorok szélességével. Hogy még bonyolultabb legyen, a különbözőképp kiemelt szövegek méretét (főcím, alcím) is beállíthatjuk úgy, hogy az aranymetszés arányát kapjuk a törzsszöveghez viszonyítva.
Vegyük az eddigi példánkból azt, hogy a fő tartalom 593 pixeles.
Ekkor a 12 pontos betűtípussal a főcímek (h1) legyenek 19 vagy 20 pontosak, a sormagasság pedig 22 pixeles, és akkor az arányuk közelít az aranymetszéshez. (12-t szorozd be 1,618-cal, és 19,416-ot kapsz.) Így viszont egy sorban 112 karakter lesz átlagosan, ami sok. És hiába lenne szép, ha az olvashatóságot rontja.
Vegyük fel 14 pontosra a betűméretet (ez ajánlott, talán a legelterjedtebb betűméret az interneten). 23 pixeles sormagasságot és 22-23 pontos főcímet kapunk. Az átlagos karakterszám egy sorban 91 körül lesz.
Eszközök a számoláshoz/tervezéshez
A megfelelő arányok egyszerű kiszámolására hasznos eszköz lehet ez a Golden Ratio Calculator.
Vagy ha inkább mobilon terveznél, akkor remek App lehet számodra a goldenRATIO – The tool for every designer and developer.
A szövegméretek arányos tervezéséhez pedig itt a tuti segítség www.pearsonified.com/typography
Azért ne vidd túlzásba!
Szép kis káoszt hozhatsz létre azonban, ha mondjuk a blogod designjában a fejlécet és a fő tartalmat próbálod 1,618-as aránnyal beállítani. A blog egy tartalomról szóló műfaj, és általában sok-sok bejegyzést jelenítesz meg a főoldalon. Így viszont elnagyolt lenne, hogy a fejléc óriási, a tartalomnak szánt rész meg relatíve kicsi.
Szóval csak mértékkel, mert jóból is megárt a sok. Az aranymetszés egy vonzó arány, de ez is csak egy eszköz a kelléktárban. Használd ésszel és ízlésesen.
