Barion Pixel
Ez itt a lifelong learning

Sosem tudhatsz eleget!

Blog

Inspiráció

Hogyan és miért készíts egyoldalas weblapot?

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

# # # # # # #

Mindenki tudja, hogyan néz ki egy weboldal, bármilyen témáról is szól: egy nyitóoldal, rajta néhány link, amik a különböző aloldalakra vezetnek, legyenek azok bejegyzések, szolgáltatások, bemutatkozók, galériák, árucikkek, akármi. A web lényege, hogy minden lapon linkek vannak, amik más lapokra mutatnak. Mégis, az összes rutinunk és beidegződésünk ellenére néha az a legcélravezetőbb, ha egy website összességében egyetlen oldalból áll. A webdesigner részére persze fontos kérdés, hogy mikor érdemes ilyet alkalmazni, mikor lehet érdemes egy ügyfél számára egyoldalas weblapot javasolni, vagy hogyan érdemes viszonyulni hozzá, ha az ügyfél ilyen javaslattal áll elő. Azután, persze, ha megszületett a döntés, nem árt végiggondolni azt is, hogyan érdemes megközelíteni egy ilyen oldal felépítését?

Mikor érdemes egyoldalas lapban gondolkozni?

Különböző helyzetekben vehetünk egy egyoldalas lapot számításba. A legklasszikusabb természetesen egy „Coming Soon” jellegű oldal lehet, amikor jelezzük a felhasználó számára, hogy itt hamarosan egy nagyobb szabású honlap lesz elérhető. Ez persze kicsit csalás, hiszen a „Coming Soon” vagy „Under Construction” oldal lényegében csak egy helyfoglaló a „rendesen” megkonstruált weboldal helyén – de azért ne gondoljuk azt, hogy egy ilyen oldalt kisebb gonddal kellene elkészíteni, mint a nagy testvérét, aminek az eljövetelét hirdetni hivatott! Már itt is nagyon fontos a képviselt cég vizuális megjelenése, a paletta és a branding elemek következetes használata, és az sem árt, ha az ideiglenes oldal már ugyanazt a látvány- és hangulatvilágot jeleníti meg, mint a végleges nagy oldal.

Forrás: Wishpond Blog

A következő csoport a portfólió oldalaké, itt is érdemes a tervezési folyamatban elgondolkodni rajta, feltétlenül szükséges-e aloldalakra bontani a tartalmat, vagy elég, ha oda-vissza lépkedés nélkül minden egy helyen megtalálható? Esetleg minden lényeges információt el tudsz helyezni egyetlen desktop oldalon? Nemrég írtunk a minimalista portfólió oldalak készítéséről, ott is találhatsz néhány megszívelendő tanácsot a tervezéshez.

A brosúra weboldalak egy nagyon hasonló kategória, ez lényegében ugyanaz a koncepció, mint a portfóliók, csak éppen egy személy helyett egy cég, termék vagy szolgáltatás bemutatására összpontosít. Ugyanakkor itt is ugyanazok az alapelvek érvényesülnek: az oldal legyen megragadóan kreatív, de világosan átlátható; ne terhelje túl a látogatót túlságosan sok információval, koncentráljon a lényeg átadására, és persze legyen ott világosan a számunkra és a látogató számára legideálisabb kapcsolatfelvételi lehetőség.

Az a csoport, ahol talán a leginkább bevett az egyoldalas felépítés alkalmazása a webdesignban, a meghívó-honlapok alkalmazása. Rendezvény millióféle van: koncertek, workshopok, konferenciák, termékbemutatók, de szóba jöhetnek akár családi események is. Ezek alkalmi, és a legtöbb esetben csak egy korlátozott ideig aktív honlapok, de nagyon fontos képviselői a kapcsolódó eseménynek, így szintén nagyon nagy gondot érdemes fordítani az elkészítésükre. Érdemes megfontolni, hogy egy-egy esetleg meghívó a rendezvény lefolyása után is elérhető maradjon, mementót állítva a programnak, meg persze növelve az adott szervezet webes jelenlétét. A meghívók egyik fontos alkategóriája az esküvői meghívók csoportja, itt is szép emlék lehet esetleg, ha néhány évvel később még ugyanúgy fellelhető marad a legboldogabb nap beharangozása.

Forrás: One Page Love

Egy céges, üzleti webes jelenlét szolgálatában felbecsülhetetlen érték lehet egy ügyes webes reklámkampányhoz bekötött Landing Page is – itt is érdemes fontolóra venni az egyoldalas felépítést. Az online marketing persze egy külön művészet, de egy egyoldalas weblapot jóval egyszerűbb tökéletesen a Google és a többi hirdető algoritmusai szájíze szerint tölteni meg tartalommal.

Ugyanakkor más szempontól is meg lehet közelíteni a kérdést, és azt vizsgálni, a tervezett weblapunk megfelel-e azoknak a szempontoknak, amik egy egyoldalas honlapon előnyösen érvényesülhetnek (avagy éppen hogy nem tenne-e jót neki, ha a lenti szempontok alapján terveznénk meg):

  • A fő üzeneted világos és lényegre törő.
  • Kitűzött cél, hogy a látogató ne kalandozzon el különböző linkekre kattintgatva, hanem lehetőleg az általad kijelölt ösvényt járja be.
  • Szeretnéd, ha a látogató gyorsan át tudná tekinteni vagy végigolvasni az üzenetedet vagy a lényeges tudnivalókat.
  • A tervezett oldal alapvetően egyetlen termék, szolgáltatás vagy ötlet promócióját szolgálja.
  • Az oldal egyetlen, jól meghatározott Call to Action (cselekvésre felhívás) köré összpontosul.
  • Járulékos előny lehet még az egyoldalas weblapoknál a gépház felőli egyszerűbb átláthatóság és karbantarthatóság – sok ügyfél számára ez is fontos szempont lehet.

Hogyan épül fel egy egyoldalas weblap?

Természetesen nincsen kötelező recept egy weblap felépítésére, ha egy webdesigner kötelező sablonokban kezd gondolkozni, könnyen unalmassá, egysíkúvá válhatnak a keze alól kikerülő oldalak. Érdemes viszont odafigyelni, hogy néhány fő vonal érvényesüljön az oldalunkban, vagy éppenséggel jó okunk legyen rá, hogy eltérjünk a bevett útiránytól.

Határozott Call to Action

A Felhívás Cselekvésre a legfőbb célja az egész honlapnak, így nyilván prominens helyen kell, hogy megjelenjen: általában nem jó ötlet, ha a CTA csak az oldal alja felé jelenik meg, amikor már mindent elmondtunk. Az „akció”, amire rá szeretnénk bírni a felhasználót, legtöbb esetben egy feliratkozás, megrendelés, ajánlatkérés vagy egyszerű kapcsolatfelvétel.

Egy „rólunk” szekció

Röviden érdemes bemutatkozni, kivéve, ha abszolút biztos vagy benne, hogy a látogató már eleve tudja, hogy ki is vagy te vagy a megbízód, de akkor is érdemes lehet pontosítani, vagy valami konkrétabb megvilágításba helyezni a cégről vagy megbízóról szóló alapinformációkat.

Branding

Természetesen minden honlapterv alapvető kiindulási pontja a látványterv, céges honlapok esetében itt is erőteljesen meg kell jelenni a céges arculat fő elemeinek, beleértve az esetleges fő szlogeneket is.

A termék

Az oldalon természetesen tömören be kell mutatni a terméket vagy szolgáltatást is. Törekedni kell a lényegre törő megfogalmazásra, de mindenképpen kell valami a bemutatóban (legyen az szöveges vagy inkább vizuális), ami megragadja a látogatót és cselekvésre ösztönzi.

Kifele mutató linkek

Az egyoldalas honlap persze nem azt jelenti, hogy tilos linkeket beépíteni, mint mindenhol, itt is fontos, hogy legyenek hivatkozások például a cég kapcsolódó termékeire, általános honlapjára, de manapság kikerülhetetlen a közösségi média oldalak belinkelése is.

Elérhetőség

Természetesen fontos, hogy elérhető legyen a terméket kínáló személy vagy cég, de ez sok esetben nem egyezik meg a Call to Action gombjával. A kapcsolat linkjeit általában hagyhatjuk az oldal végére is, a legtöbb felhasználó amúgy is ott fogja keresni. Ha lehetséges, érdemes többféle elérhetőséget megadni.

Ha az oldalunk hosszasabb görgetést igénylő, nagyobb, függőlegesen egymás alatt elhelyezkedő elemekből áll, érdemes lehet belső navigációs linkeket is beépíteni a gyorsabb lépkedés érdekében.

Ellenvélemények

Nem lenne teljes a kép, ha nem szólnánk az egyoldalas szerkesztés potenciális hátulütőiről is. Érdemes ezeket a szempontokat is alaposan fontolóra venni, mielőtt belevágsz a lap megtervezésébe, de legalábbis, mielőtt véglegesítenéd a designt.

Korlátozza a lehetőségeket

Tudatában kell lenni, hogy az egylapos weboldal egy célszerszám: sokoldalú felhasználása minimum nehézkes. Későbbi ötleteket, pl. cikkek beépítése, különböző részletek megosztása a közösségi médiában alapvetően nem jó ötlet beleintegrálni, ha ilyesmi van az asztalon, inkább érdemes a hagyományos formátumok felé kanyarodni.

Letörik a látogató ujja

Van, akit nem zavar, hogy kilométereket kell gyalogolni az oldal aljáig, van viszont, aki hülyét kap tőle. Ha sok információt, több nagy grafikát vagy hosszabb galériát is be szeretnél építeni, mindenképpen érdemes valamilyen ugrási lehetőséget elhelyezni az oldalon. Szóba jöhetnek még a tabokra (fülekre) kapcsolva váltható szöveg-, vagy információs panelek is, vagy más, a függőleges helykihasználást csökkentő trükkök.

Töltési idő

A sok grafika, esetleg multimédia tartalom, ravasz kód betöltése bizony több időt igényel, ez pedig a SEO egyik nagy ellensége. Érdemes számolni a nehézkes töltéssel és vagy valamilyen lazy loading megoldást használni (tehát csak sorjában tölteni be a képeket, amikor sorra kerülnek), vagy akár be is lehet dobni egy kreatív töltési számlálót, ami leköti a látogató híresen rövid figyelmét, amíg az oldal teljesen elkészül a háttérben.

SEO

Az általános SEO másik fontos szempontja a rengeteg kulcsszó beépítése a weboldalba, egy egyoldalas lapon pedig ez korlátokba ütközhet: egyfelől jó eséllyel egyszerűen nincsen annyi tartalom, amibe bele lehetne szerkeszteni az összes kulcsszót, amit az aktuális SEO eszköz javasol, másrészt jobban szemet szúrhat az olvasónak az ismétlődés a szövegben.

Elemzések

Ha az ügyfél a későbbiekben szeretne részletes elemzéseket kapni a látogatók viselkedéséről, jóval egyszerűbb lesz a jelentést készítő dolga, ha a különböző aloldalak látogatottságát és statisztikáit is mérni tudja. Egyetlen oldal esetében kevésbé látványos grafikonokkal kell számolnunk.

Ha mindezt alaposan átgondoltad és mérlegelted, megszülethet a felelős döntés, és készen állhatsz az egyoldalas weblapod megtervezésére. Milyen eszközök állhatnak ehhez a rendelkezésedre?

Mi sem mutatja jobban az egyoldalas weblapok létjogosultságát, mint hogy számos remek WordPress sablont is találhatunk, amik direkt, hogy erre a területre szakosodtak. Nézzünk meg néhányat közülük a WordPress belső témaválasztójából!

Flexible Lite

Elegáns oldal kisebb cégek bemutatkozásához lehet alkalmas. Trendi módon egy nagyméretű parallax scrollozó hero image-dzsel indít.


Mise

A név senkit ne tévesszen meg, egyátalán nem vallásos témáról van szó, inkább illik hozzá a kockás flaneling, mint a reverenda. Elrendezésében sokban hasonlít a Flexible Lite-hoz, viszont néhány jó vizuális ötlettel feldobja az oldal elrendezését és vizuálisan sokkal egységesebb.

VW One Page Pro

Remek, színes téma, és nagy hangsúlyt helyez rá, hogy az információt kattintható fülek alá rendezze.

Flexible One

Csinos, levegős elrendezésű, szintén a parallax scrollra építő egyoldalas téma.


A WordPress persze nem az egész világ, bár tény, hogy a web túlnyomó részét manapság ez a motor hajtja. Kézművesebb hajlamú webdesignerek számára kiváló Bootstrap alapú sablonok is elérhetőek, amikre építve szuper egyoldalas weblapokat építhetnek. Néhány remek, ingyenes példa:

Bolt

Remek Coming Soon oldal beépített visszaszámlálóval (persze ehhez nem árt, ha olyan határidővel dolgozunk, amit valóban be tudunk így állítani).

QB Wedding

A név magáért beszél, csodás esküvői sablon, kellőképp habcsókos szín- és hangulatvilággal.

Proton Lite

Egy mobilalkalmazás és a fejlesztő stúdió bemutatkozó oldalának tervezett sablon.

Persze az egyoldalas weblapok sok lehetőséget nyújtanak a kreatív designeri munkára is, számos webes gyűjtemény válogat össze szebbnél szebb, és ötletesnél ötletesebb oldalakat. Ezeket mindig érdemes végigpörgetni, garantáltan akad közöttük egy-két olyan ötlet, ami nagy hatással lehet a soron következő munkádra.


Tiger Tells

Képeskönyv-szerű ismeretterjesztő oldal, ami a vudu világába vezet be. Valójában az alkotó képességeinek a bemutatója, csinos kis showcase oldal a végén egy szerény email-címmel. Izgalmas megoldás, hogy a normális görgetés mellett is az oldal hol függőlegesen, hol vízszintesen scrolloz.

Upstate Laundromat

Remek példa egy egyszerű szolgáltatást nyújtó cégre.

Bek Stone

Csodás designeri portfólió oldal.

94 Photography

Kreatív fotóügynökség honlapja, formabontó megoldásokkal (személy szerint engem a belassított görgetés irritál, de ez is lehet éppen a designer célja).

Jenny and Grayden

Esküvői meghívó oldal, a sok tartalomhoz képest viszonylag kevés görgetésből megoldva.

Café Frida

Nagyon ötletes kávéházi oldal (emlékeztek még a kávéházakra?) Kanadából.

Prerita and Jai

Egy újabb esküvői meghívó, imádnivalóan formabontó, kódolós megoldással.

Iratkozz fel YouTube csatornákra!

blog

Virtuális asszisztens legyél vagy webdesigner?

Virtuális asszisztens legyél vagy webdesigner?

2024. február 01.

Mindkettő fantasztikus lehetőség arra, hogy elhagyd a hagyományos kereteket, mint szoros, rugalmatlan munkaidő, helyhez kötöttség vagy akár a bérplafon. Egy ponton találkozik is a két munkakör, ahol a grafikai munka már az asszisztenciába hajlik – designerként is végezhetsz weboldal adminisztrációt, közösségi média tartalom készítést vagy felügyeletet és virtuális asszisztensként is sokszor találkozni már-már tervezői munkába […]

Tovább a cikkre
Secured By miniOrange