Keresés
Header Háttér

Webshark Blog

… jquery, ajax, design, psd, plugin, modul, web2, social, miegymás…

2020-07-150 komment

Kettéosztott weboldal: mikor és hogyan érdemes belevágni?

A kettéosztott weboldal már jó pár éve felkapott trendnek számít a webdesignban, így nem is jelent újdonságot, ennek ellenére egy jól kivitelezett megoldás még mindig eredetinek tűnik a weben. A kérdés az, hogy mikor érdemes elgondolkodnod rajta, és ha rászánod magad egy kettéosztott weboldal kialakítására, hogyan tedd?

A kettéosztott weboldalak 2015-ben kezdtek trendszerűen terjedni a weben (akkor született meg nálunk az első anyag a témában), és 2017-es, 2018-as designtrendeket bemutató bejegyzéseinkben is előkelő helyen szerepelt a téma, de teret szorított magának az általános webdesigntrendeket bemutató írásunkban is. Nincs tehát szó újdonságról, ennek ellenére talán hasznos lehet egy pillantást vetni arra, mikor, miért és hogyan érdemes kettéosztott weboldalakat alkalmazni.

Miért lett népszerű?

A kettéosztott weboldalak elsősorban újdonságuknak köszönhetik népszerűségüket, amihez persze hozzájárul az is, hogy ha kellő gondossággal vannak kivitelezve, akkor esztétikai élményt is nyújtanak a felhasználóknak.

Ugyanakkor nem szabad elfeledkezni arról, hogy a kettéosztott weboldalak nagyon jól illeszkednek a különböző méretű kijelzőkhöz, azaz nincs gond a reszponzivitással. Hiszen, ami monitoron egy horizontálisan kettéosztott megjelenést kap, az okostelefonon vertikális megosztásként jelenik meg.

Ráadásul akadnak olyan esetek, amikor a kettéosztás sokat segít a navigáción. Egy kettéosztott weboldal alkalmazásával felhívhatod a felhasználók figyelmét a kijelző egy bizonyos részére, egy témára, tartalomra, funkcióra, és arra ösztönzöd, hogy kattintson.

Mikor érdemes kettéosztott megjelenésre váltani?

Alapvetően akkor a legelőnyösebb a kettéosztott weboldal használata, amikor két olyan dolgot szeretnél bemutatni, ami egyaránt fontos, és mindkettőre azonos súllyal akarod felhívni a figyelmet. Tehát, ha a termékeid, szolgáltatásaid két csoportra bonthatók, akkor el lehet őket rendezni úgy, hogy egy kettéosztott főoldalról induljon el a látogató a lehetséges kettő közül az egyik úton.

Ez persze nem azt jelenti, hogy csak ilyen esetben lehet vagy szabad kettéosztani egy weboldalt, hiszen számtalan olyan példát látunk, amikor a weboldal egyik felét egy kép, a másik felét pedig egy szöveg teszi ki. Ilyen esetben gyakorlatilag ugyanannyi információ jelenik meg, mint ha egy hero image-re ráhelyeznél egy címsor, alcímet, CTA-t. Ugyanakkor némileg eredetibb módon történik a megjelenítés, és az sincs kizárva, hogy az elrendezés révén több figyelem jut mind a képre, mind a kapcsolódó szövegre.

Persze vannak olyan esetek, amikor nem igazán ajánlott kettéosztott megjelenést használni a weboldaladon. Ilyen az, amikor folyamatosan bővülő tartalom jelenik meg a weboldalon. Ezt ugyanis nem tudja követni, befogadni a kettéosztott megjelenés úgy, hogy ne romlana az esztétikuma. Ugyanígy, a túlságosan sok szöveges tartalommal bíró weboldalakon sem igazán lehet használni.

A kettéosztott megjelenésnél tehát fontos mindig észben tartani az egyszerűség fontosságát, mert egy tartalommal túlterhelt osztott weboldalnak felborulhat az egyensúlya, zsúfoltnak, kaotikusnak fog kinézni. Fontos tehát, hogy alapvetően az egyszerű, minimalista weboldalaknál javasolt a kettéosztott megjelenés használata.

Gondold tehát végig:

  • Passzol a tartalmadhoz a kettéosztott weboldal?
  • Elegendő negatív tér marad, hogy az elrendezés működjön?
  • A felhasználók érteni fogják, vagy zavarba hozza őket?
  • Segíti őket, ha megosztod a figyelmüket?

Milyen típusai vannak a kettéosztott weboldalaknak?

Több megoldás is létezik azonban az osztott weboldalak kialakítására.

Klasszikus osztott weboldal design

Ebben az esetben két szimmetrikus panelről beszélhetünk, melyek egyszerűvé teszik a moduláris kialakítást.

Aszimmetrikus osztott weboldal

Egyre több esetben azonban most már nem fele-fele arányban osztják meg a designerek a kijelzőt, hanem aszimmetrikusan. Ehhez persze nagyon finoman kell kialakítani az egyensúlyt a weboldal két fele között, hogy egyik se kerüljön túlsúlyba. Jellemző, hogy a weboldal egyik felét a szöveg és a whitespace határozza meg, míg a másikat egy figyelem-felhívó kép. Ezen megjelenés mögött persze továbbra is a rácsszerkezet áll, mely rendezettséget biztosít a weboldalnak.

Minimalista irány

Míg az első osztott weboldalak viszonylag egyszerűek és szimmetrikusak voltak, itt nem állt meg a fejlődés. Egyes weboldalaknál megmaradt a szimmetria, másoknál változatos felosztások jelentek meg. Néhányan cikk-cakk mintában választották el a két részt, sokan minimalista irányba mozdultak tovább.

Az eredeti kettéosztott weboldalak egy kicsit súlyosak voltak, mivel arra lettek tervezve, hogy egy tartalmi csatornán elindítsák a felhasználók. Ehhez pedig kellett a tartalom segítsége. A választás lehetőségét azonban lehet egyszerűsíteni. Megjelentek az olyan osztott weboldalak, ahol már nincs is egyértelműen elmagyarázva a választási lehetőség.

Kettéosztott weboldal példa

Osztott weboldal több kattintható területtel

Az egyik érdekes irány az osztott weboldalaknál, amikor ugyan szimmetrikusan ketté van osztva a weboldal, az egyik felén azonban nem egy CTA, hanem több kattintható elem is található.

Nem nyilvánvaló osztott megjelenés

Ma már nem minden osztott weboldalon válik egyből nyilvánvalóvá, hogy osztott weboldalról van szó. Ha annyira minimalista a megjelenés, hogy nincsenek különböző színek vagy képek a két részen, akkor nem egyértelmű az elválasztás. Ilyenkor a két rész, akár egynek is tűnhet elsőre. Mobilon, illetve desktopon a görgetés során válik csak láthatóvá, hogy miként is gondolják az alkotók a felosztást.

Milyen design-technikákat érdemes használni kettéosztott weboldalon?

Erőteljes színek és tipográfia

Az erős színek mindig felkeltik az emberek figyelmét, míg a hangsúlyos tipográfia kiemeli a szöveges tartalmat. Ha a kettőt kombinálod, akkor biztos, hogy vizuálisan érdekes weboldalt sikerül kialakítanod.

Hangsúlyozd a CTA-t

Mint azt már korábban is említettük, egy kettéosztott weboldal a kettéosztottság révén vezeti rá a felhasználót valamilyen útra. Jó megoldás, ha még inkább fel akarod hívni a látogatók figyelmét az itt elhelyezett call to actionre. A kettéosztott oldalakra jellemző a nagy negatív tér, ami jól vezeti a tekintetet a fontosabb részekre.

Kapcsold össze a két felét!

Amikor a megosztott weboldal egyetlen dologról szól, akkor fontos megmutatni a kapcsolatot a két rész között. Az egyik lehetőség erre a színekkel történhet. Egyszerűen csak jelenítsd meg kétszer ugyanazt a színt, és már ki is alakul a kapcsolat. Ez különösen jól működik például a márkaszínekkel, vagy egy erős kontrasztú színnel. Egy másik lehetőség, hogy átvezeted a szöveget mindkét felén az oldalnak, ami ezáltal össze is kapcsolja őket. Ugyanakkor a megoldhatod a kettéosztást-összekapcsolást egy szín overlayjel is.

Kategória: Design | Címke: ,

Főleg írok. Főleg blogot és közösségi médiát, de tágabb perspektívában: online marketing, úgyhogy van benne bőven SEO, laza AdWords, webdesign-okoskodás, és még ami belefér.

Comments are closed.