Így lesz kiegyensúlyozott a webdesignod

Szerző: Jakus Dóra,
Tökéletes webdesign - designer vs developer

Egy szép és logikusan felépített honlap minden vállalkozás alapját jelenti. A vizuális elemek és a tartalom arányát azonban nem könnyű eltalálni, pedig egy túlszövegezett vagy éppen túldíszített céges oldal sem kelt igazán jó benyomást. A kiegyensúlyozott szimmetriának hála a lapunk elemei viszont szépen, csoportokba rendeződnek, így könnyű eligazodni a látvány- és a tartalmi elemek között. Az alábbiakban erre mutatok be néhány példát.

Fontos kiemelni azt is, hogy az új trendek kedvelői szeretnek kitűnni, amire jó eszköz lehet az asszimetria bevetése, de egy ízlésesen elrendezett asszimetrikus layout kialakítása talán még nagyobb fejtörést okozhat a honlapkészítés során, mint az egyensúly kialakítása. Lássuk tehát, hogy mik azok a tényezők, amiket szem előtt tartva és a szimmetriára törekedve, a tökéleteshez közeli webdesignra tehetsz szert:

1. Fejléc

Kétségtelen, hogy a fejléc a honlapok legfontosabb területe. Amikor új látogatók érkeznek, ez alapján jön létre az első benyomás. Persze ezután szorosan a teljes elrendezés következik, de tény, hogy a fejléc a legelső, már itt eldönti a látogató, hogy tovább fog-e görgetni. Egy jól felépített fejléc segíti a további böngészést, így növeli a felhasználói élményt és nem mellesleg összeszedettebbnek érződik a lap úgy, ahogy van, ez pedig kivetül annak tulajdonosára is.

Tökéletes webdesign - Neversink

Vessünk csak egy pillantásst a Neversink navigációjára! A központi logó úgy viselkedik, mintha csak a fejléc rögzítési pontja lenne, míg a navigációs linkek ehhez képest helyezkednek el szép szimmetrikusan, hála a színeknek, a betűtípusoknak és az egyenlő távolságoknak. Az elrendezés egyszerű, de nagyszerű. Könnyű rajta kiigazodni és bárhonnan is térsz vissza, biztos nem fogod magad elveszettnek érezni.

Tökéletes webdesign - 1minus1

Az 1minus1 honlapján a vízszintes és a függőleges szimmetria is maximálisan adott. A fejléc szépen díszített és átlátható, a navigációban ráadásul az is segít, hogy a lefelé görgetés folyamán jobbra, illetve balra egy-egy magyarázó rész található, ami a design és a developer folyamatokat érinti. A szimmetria egyfajta befejezettséget sugároz, azt érezhetjük, hogy a honlap egy teljes egész. Remek munka!

2. Oldalelemek

A honlapok fontos elemei a funkció gombok is, amik lehetnek call-to-action gombok, a szolgáltatások listázása vagy a tartalommal kapcsolatos bármilyen grafikai elem. A szimmetria segít ezeket is egyensúlyba hozni, méghozzá úgy, hogy az üres terek se tűnjenek kihasználatlannak.

Tökéletes webdesign - Adham Dannaway

Adham Dannaway weblapja kiváló példa erre, amit egy képpel szimmetrikusan két részre osztott, mégpedig annak érdekében, hogy minél érzékletesebben szemléltesse a designer és coder képsségeit. Az egyik kreatív és színes, a másik inkább analitikus szemléletű. Külön érdekesség, hogy a kép két oldala kattintással a vonatkozó aloldalakra vezet, így oldalelemként is funkcionál a vizuális érvényesülés mellett. Ha van tökéletes egyensúly, ez az!

Tökéletes Webdesign - Quastionable Characters

Az előbbihez hasonlóan viselkedik a Quastionable Characters oldalának felső része is: a kép a szerzők személyének leírásához vezet, és bár nem két külön oldalra, viszont egy tökéletesen szimmetrikusan elrendezett egylapos page-re.

3. Tipográfiai beállítás

A különböző betűtípusok alkalmazása a tartalommegosztás gerincét képezik, amióta az emberiség papírra veti a gondolatait. Designerként ma már külön tudománynak számít az, hogy megtaláld a helyes egyensúlyt a fejezetek, bekezdések és hivatkozások kinézete között.

Tökéletes Webdesign - Quastionable Characters2

Az imént említett Quastionable Characters remek példa a tipográfiai tagolásra is. Első pillantásra meg lehet különböztetni az egyes részeket, mégsem kelti az összeszedetlenség hatását.

Tökéletes Webdesign - Things for Mac

Egy másik remek példa a Things for Mac landing page-e. A funkciók horizontális helyezkednek el, felváltva jobbra és balra, így téve átláthatóbbá a felületet. Az egyébként könnyen olvasható és jól követhető tipográfiai szimmetriát pedig éppen a grafikus elemek használatával teszik teljessé.

4. Lábléc

Jó láblécet tervezni nehéz, ráadásul nem is mondanám kifejezetten igazságosnak, hiszen míg egyes cégeknek elég 4-5 linket szépen elhelyezni, másoknak egy tucattal kell ugyanezt összehozni.

Tökéletes Webdesign - The Black List

Ezt oldotta meg remekül a The Black List oldala, ahol a fejlesztőknek három tucatnál is több linket kellett rendszerezniük. A meglehetősen nagy láblécet horizontálisan elhelyezett oszlopok alkotják, ezek biztosítják a szimmetriát, amit az üres terek még biztosabbá tesznek.

Ezeket kiegészítve azt tanácsolom, hogy nyugodtan kísérletezz a különböző betűtípusokkal és más szövegformázási lehetőségekkel, hogy minél látványosabb, de egyben átláthatóbb is legyen a honlapod.

Forrás:
How To Use Balanced Symmetry In Web Design


Ajánlott bejegyzések