Barion Pixel
Ez itt a lifelong learning

Sosem tudhatsz eleget!

Blog

Segédlet

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.

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.

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.

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.

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 YouTube csatornákra!

blog

Díjazottak lettünk az Év honlapja versenyen E-learning kategóriában!

Díjazottak lettünk az Év honlapja versenyen E-learning kategóriában!

2021. december 27.

2021 nagyon sűrű év volt. Nem csak azért, mert idén voltunk 10 évesek, hanem mert az év elején kívül-belül megújultunk, egy igazán naprakész és interaktív tanfolyam várja a tanulni vágyókat. A vírushelyzet okán hétköznapivá vált online kapcsolattartási eszközök beépültek a tanmenetbe, így a tanfolyami anyagot idén sok-sok Facebook és Zoom Live óra keretezte, amelyek kiegészítő […]

Tovább a cikkre
Secured By miniOrange