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.

Webdesign webináriumok minden hónapban!

Feliratkozom!
Iratkozz fel YouTube csatornákra!

blog

Inspiráció Webdesign trendek 2022

Webdesign trendek 2022

2021. október 20.

Vajon ugyanazokat a grafikai irányvonalakat ismételjük, mint az elmúlt években? Vagy a pandémia okozta felhasználói viselkedés változások erre a területre is kihatnak? Az biztos, hogy a mobil forgalom emelkedés töretlen, tehát a weboldalak megjelenésének is kikerülhetetlenül alkalmazkodnia kell a 60-70%-os, sőt sokszor ennél sokkal magasabb arányú mobil forgalomhoz. Az első tehát a betöltési sebesség mindenek […]

Tovább a cikkre
Secured By miniOrange