Barion Pixel
Segédletek

Instant aranymetszés a honlapodra

2021. március 21. | Bognár Péter

# # #

Nemrég írtam egy hosszabb cikket az aranymetszés, az „isteni arányok” használatáról a webdesignban. Emlékeztetőül: az aranymetszés matematikailag nagyon pontosan leírható arányrendszere jelenik meg számtalan természeti formában, többek között az emberi test belső arányaiban is, és emiatt az egymáshoz képest az ilyen módon viszonyuló elemeket – aszimmetriájuk ellenére is – arányosnak, harmonikusnak érzékeljük. Gyakorlatban felhasználva pedig ez a titokzatos 1 : 1,618 aránypár, vagy a csodás csigákat rajzoló Fibonacci számsor (1, 1, 2, 3, 5, 8, 13, 21…) segíthet elegánsabbá, kiegyensúlyozattabbá tenni a műveinket, legyen szó web- vagy UX designról, az oldalunk tipográfiájáról vagy a logók, grafikai elemek belső szerkezetéről.

blank
Forrás Elegant Themes

A mai cikkben egy olyan eszközt szeretnék bemutatni, ami, ha lehet, még egyszerűbbé teszi az aranymetszés bevezetését a honlaptervünkbe. Ez a GRT, azaz Golden Ratio Typography Calculator, egy online webalkalmazás, amivel gyerekjáték elvégezni a megfelelő számításokat, és ráadásul még egy titkos fegyvert is tartogat a tarsolyában, amivel rengeteg webdesigner szívébe azonnal belophatja magát.

blank

Lássuk, hogyan is kell használni!

Az oldalt megnyitva egy nagyon egyszerű interfésszel találkozhatunk, három mezőt kell kitölteni, azaz összesen három dolgot kell előre tudnunk:

  • melyik betűkészletet szeretnénk használni (az elérhető fontok listája egy legördülő menüben választható),
  • mi legyen az alap folyószöveg betűmérete,
  • hány képpont széles legyen a tartalom, amit éppen be szeretnénk rendezni a layoutban.

Ha mindezt eldöntöttük és bevittük az adatokat a menübe, egy gombnyomás, és megkapjuk az összes számot, amire szükségünk lehet, azaz a H1, H2, stb. betűméreteket, és a hozzájuk tartozó sorközöket.

blank

Az összes lényeges számot a bal oldali oldalsávon láthatjuk, de a jobb oldali szöveges mezőben (ami azonnal a beállított fontra és betűméretre vált) is rejlenek meglepetések: a + jelekre bökve kibomlik egy demo layout, ahol az összes lényegi elemet akcióban láthatjuk, majd a második fülön jön a meglepetés, itt ugyanis a megtervezett design teljes reszponzív CSS kódját is legenerálja nekünk a GRT kalkulátor.

blank

A kapott CSS kód egy .grt osztály alá van berendezve, ezt innentől szabadon használhatja bárki a saját webdesignjában. Nagyon kényelmes és roppant hasznos eszköz, adott helyzetben okos használata sok fejfájást és számológépezgetést megspórolhat az egyszeri webdesignernek.

Iratkozz fel 7 napos ingyenes, alapozó webdesign kurzusunkra!

Kipróbálom

blog

Motiváció A szabadúszó webdesignerek egyik rémálma: az árazás

A szabadúszó webdesignerek egyik rémálma: az árazás

2021. április 12.

Mennyit ér, amit megtanultál? Nos, amennyit fizetnek érte! Uhh, ez elég anyagiasan hangzik mi? Úgy vagyunk kondicionálva, hogy az ilyen megközelítést ne tartsuk helyesnek, mert az a társadalmilag PC, hogy igazából az elismerésért dolgozunk és távol áll tőlünk Mammon minden földi java és hiúsága. De ugye ez nem így van, mert sem elismerésért, sem lájkért […]

Tovább a cikkre