Landig page – 12 fontos elem és jobban fog konvertálni az érkező oldalad

Mi az a landing page?

A digitális marketingben a céloldal/landing page önálló weboldal, amelyet kifejezetten egy marketing- vagy reklámkampány céljára hoztak létre. Ez egy olyan hely, ahol egy látogató “földet ért”, amikor rákattint egy Google Ads, Facebook vagy hasonló internetes hirdetésre.

A landing oldalakat egyetlen cél – egy úgynevezett Call to Action (CTA) – elérésére tervezték.
Emiatt az egyszerűség miatt működnek jól a landing oldalak és érik el a Google Ads kampányok konverziós arányainak növelését.

Annak érdekében, hogy teljes mértékben megértsük a céloldal és a hozzá tartozó fő weboldalon található egyéb oldalak, például a kezdőlap közötti különbséget, fontos figyelembe venni az organikus és a fizetett keresési forgalom közötti különbségeket.

A magasan konvertáló landing page megszerkesztése már nagyobb szakértelmet kíván, mintha egy bemutatkozó oldalt készítenénk.
Több tucatnyi különböző összetevőre van szükség ahhoz, felkeltse a figyelmet: pszichológia, marketing és egy csipetnyi abból, “amit az ügyfél akar”.
Ez azt jelenti, hogy egy hatékony oldal létrehozása többet jelent, mint hogy ” szuperjól néz ki”.

Azért mielőtt elkezdenénk, fontos megjegyezni, hogy nincs egységes kézikönyv, amely leírja, hogy milyen a tökéletes landing oldal és azt hogyan készítsd el. Én trükköket mutatok, amelyeket jó, ha követsz!
Fontos tudnod, hogy van, ami az egyik landingen működik, de talán egy másik témájú oldalon már egyáltalán nem fog!

Ez azért van, mert a célközönség, a szándék, a termék, az ipar, a költség, az üzenet, az értékteremtés és minden más oldalanként változik.

De hát nem mindenkire jó ugyanaz a méretű cipő sem, ugye?

De vannak olyan elemek, amelyek a sikeres landing page-eket jellemzik.
Éppen ezért ebben a bejegyzésben 12 elemről írok, amelyeket fel tudsz használni a saját oldaladon is.

1. Landing Page Alapvető Eleme: Utős Főcím

A címsor az, ahol minden kezdődik – az érdeklődés, a figyelem és a megértés.
Ez arra ösztönzi a felhasználót, hogy maradjon, és többet tudjon meg arról, hogy mit kínálsz – vagy inkább azonnal el is hagyja az oldalt.
Az erős címsor kritikus fontosságú a sikeres céloldalak létrehozásához.

Íme, mit kell elérnie:

– A címsornak meg kell ragadnia az olvasó figyelmét.
– A címsorban meg kell tudnia a felhasználónak, hogy mi a pontos termék vagy a szolgáltatás.
– A címsornak rövidnek kell lennie. Soha ne legyen több, mint húsz szót, de lehetőleg inkább tízre korlátozódjon.

Érdemes megjegyezni azt is, hogy ha a címsor mögött vagy mellett egy olyan fotó van, amely megmutatja a terméket vagy a szolgáltatást, akkor a szövegnek már nem kell annyira részletesnek lennie.

2. Landing Page Alapvető Eleme: Meggyőző Alcím

A következő elem, amire hatékony landing oldal létrehozásakor figyelnünk kell, az az alcím.
Ha a címsor megragadja a felhasználót, akkor az alcímnek az a feladata, hogy a látogatót az oldalon tartsa. Együtt, ez a két elem alkotja a teljes landing lelkét.

Íme, mit kell szem előtt tartani létrehozáskor:

– Általában a meggyőző alcím közvetlenül a főcím alatt helyezkedik el.
– Az alcímnek meg kell erősíteni a látogatót az elköteleződési folyamatban.
– Az alcím már lehet hosszabb és részletesebb, mint a főcím.

3. Landing Page Alapvető Eleme: Képek

A vizuális tartalom a landing oldalak másik alapvető eleme.
Valójában az agy a képeket dolgozza 60 000-szer gyorsabban fel, mint a szöveget. Ez azt jelenti, hogy a landingen található képek AZONNAL hatással lesznek a felhasználókra.

Tehát a képek kiválasztása és elhelyezése közben ne feledd:

– A képeknek nagynak kell lenniük.
– A képeknek relevánsaknak kell lenniük az termék vagy szolgáltatás szempontjából. Ha egy fizikai terméket értékesítesz, fontos, hogy a landing page tartalmazzon egy képet a termékről.
– Ha szolgáltatást nyújtasz, akkor a kép elsődleges célja, hogy megragadja a figyelmet és biztosítsa a felhasználót, hogy jó helyen jár.

A képeknek kiváló minőségűnek kell lenniük.
Tekintettel a vizuális tartalom fontosságára, nem szabad figyelmen kívül hagyni a fontosságát. A fotók, grafikák és egyéb látványok a kezdetektől fogva a tervezési folyamat részét képezik akár a landing oldalon, akár a weboldalon.

4.Landing Page Alapvető Eleme: A Magyarázat

A landing oldalnak tökéletesen el kell magyaráznia azt, hogy mit kínálsz.
Végtére is, ha a látogató nem érti, mi a termék vagy szolgáltatás, akkor azonnal kilépnek és elvesztetted őket. Tehát az egyértelmű magyarázat nagyon fontos.

– Lehet, hogy a címsor folytatása a magyarázat, de úgy is megoldható, hogy teljesen elkülönülnek egymástól az elemek.
– A magyarázatnak egyértelműnek kell lennie. Mindenképp úgy írd meg, hogy a látogatóid megértsék.

Ezért a legtöbb landing oldal esetében a legjobb megoldás az, hogy a dolgokat egyszerűen jelenjenek meg. Lehet, hogy te egy “szórakoztató” és “egyedi” landinget szeretnél elkészíteni – ez rendben is van. De a legfontosabb mindig az, hogy egyértelmű legyen az információ, amit át akarsz adni.

A magyarázó szöveg helyett tehetsz fotókat is, ez sokszor könnyebben emészthető, mint egy szövegalapú magyarázat, és a legtöbb felhasználó számára sokkal érdekesebb is.

5. Landing Page Alapvető Elem: A Előnyök

Az értékteremtés olyan “innováció, szolgáltatás vagy szolgáltatás, amelynek célja egy vállalat vagy termék vonzóvá tétele az ügyfelek számára”.

Lényegében a felhasználó kérdéseire válaszol: “Mi az, amire nekem most szükségem van?”

És amikor a landing oldalra érkezik valaki, akkor az erre adott választ ki kell hangsúlyozni.
Mint ahogy a magyarázat, az „előnyök” sem feltétlen egy önálló elem. Ehelyett integrálható az oldal többi eleme közé.

Mit kell szem előtt tartani:

– Az értékteremtés egyik legjobb módja az előnyök listája. Számos magas konvertáló céloldal használ listát, hogy megmagyarázhassa termékének vagy szolgáltatásának előnyeit.
– Az előnyöknek egyértelműen a felhasználóra kell összpontosítaniuk. Ne kezdj el magadról vagy a márkádról beszélni! A cél nem az, hogy büszkélkedj a cégeddel, ez nem fogja lenyűgözni a látogatót.

Ehelyett írd le, hogy miért lesz elégedett a látogató a termékkel, szolgáltatással, miért jó neki, ha téged választ.

6. –Landing Page Alapvető Eleme: A Logikus felépítés

Fontos nagyon, hogy az elemek logikusan legyenek rendezve a landing oldalon.
A landing logikai áramlása ugyanolyan fontos, mint a maga tényleges tartalom.
A valóban érdeklődő vásárló elolvassa a tartalmat és követi a gondolkodási folyamatot.

De ha azt szeretnéd, hogy logikus és meggyőző legyen a folyamat, melyen keresztül bemutatod a terméked, úgy kell elrendezni az oldalt, hogy

– Kezdd a magyarázattal
– Folytasd az előnyőkkel
– Tégy fel a beszámolókat
– Végén legyen a CTA (call-to-acton gomb)

Egyes marketingesek kerülik a hosszú landing oldalakat, mert nem akarják elveszíteni a látogatók figyelmét. A hosszú landingek azonban hatékonyak lehetnek, amennyiben igen jól szervezettek.

Habár kisebb hierarchikus szigorúságot igényelnek, mint rövidebb társaik, a hatékony áramlás létrehozása maximálisan lehetséges.

7. Landing Page Alapvető Eleme: Írj valamit a veszteségről, fájdalomról

Vedd elő a pszichológia ismereteidet! Minden termék azért készül, hogy a használó, vásárló hiányérzetét, fájdalmát csökkentse! Ha a látogatód már az oldaladon van, akkor egy bizonyos problémájára keresett megoldást. Beszélj neki erről a problémáról és mondd el, mit veszít, ha nem téged választ!

A következőképpen érheted el ezt:

Mondd el, mit veszít a látogató, ne csak azt, hogy mit fog nyerni. A veszteségelkerülés elmélete szerint nagyobb valószínűséggel veszünk meg valami olyat, ami a fájdalmunkra gyógyír, mint olyasmit, ami szimplán örömet okoz vagy szükséges…

Mivel a fájdalom erőteljes emberi elem, a valódi emberi beszámolók gyakran nagyon hatékonyak ahhoz, hogy megbízhatóan közvetítsék ezt a fájdalmat.

Ügyelj arra, hogy enyhítsd a fájdalmat. A termék vagy szolgáltatás legyen a fájdalom ellenszere. Lényegében illusztrálnia kell egy fájdalompontot, amelyet az olvasó tapasztalhat. Ezután vond le azt a következtetést, hogy a terméked vagy szolgáltatásod adja a választ a fájdalomra.

8. Landing Page Alapvető Eleme: Írj valamit az örömről is!

Ahogy az embereknek a fájdalomcsillapítóra szükségük van, úgy kell nekünk az öröm is. Minden embert az örömszerzés vágya motivál és ez különféle formákban nyilvánulhat meg.

Kétféleképp szőheted bele a landing oldaladba:

– Mutasd meg, hogy az öröm lesz a termék vagy szolgáltatás megszerzésének a mellékhatása.
– Mutasd meg, hogy éri el a termék az érzelmi szükségletet funkcionális szerepén túl.

Annak szemléltetésére, hogy ez hogyan működik, képzeld el, hogy ízületi fájdalomcsillapító gyógyszert árulsz. Igazából csak egy tablettát árulsz, ugye?

De nem, mégsem csak egy tablettát árulsz. Szabadságot, megkönnyebbülést és örömöt értékesítesz valójában.

Ugyanez az elv alkalmazható számos különböző termékre.

Ha pl. Adidas sportcipőt adsz el, akkor nem csak olyan dolgokat árulsz, ami a vásárló lábán lesz. Tiszteletet, trendet, biztonságot, élettartamot is eladsz a cipővel együtt.

A legfontosabb úgy bemutatni a terméket, hogy érezzék, hogy pozitív érzelmi élményt is nyújt egyben.

9. Landing Page Alapvető Eleme: Vásárlói vélemények megosztása

A vásárlók szeretik tudni, hogy mások is bíznak a termékben vagy szolgáltatásban, és ezt meg is osztják egymással.
Valódi véleményeket tegyél ki a langing oldaladra! A hírességek és szakértők nagyszerűek, de nem feltétlenül szükséges, hogy ők ajánlják a terméked!

Válassz olyan ajánlókat, akik a célközönség szempontjából leginkább relevánsak.

Használj fotókat is, ha van rá mód. Fontos, hogy minden bemutatott vásárlói vélemény mellett valódi személy fotója legyen!

A véleménynek konkrétnak kell lennie. Ha csak általánosságokat írnak,az nem igazi vélemény, nem épít bizalmat! Lehetőleg legyenek benne valós számok, valódi adatok és konkrét esetek.

10. Landing Page Alapvető Eleme: Kapcsolatfelvételi módszerek megválasztása

Sok landing page, amelyet menéztem, többféle kapcsolatfelvételi móddal is rendelkezik, beleértve a telefonszámot, postacímet, az e-mail címet és a kapcsolatfelvételi űrlapot.

Néhányon még chat popupok is vannak, ahol az ügyfélszolgálati képviselő megkérdezi, hogy segítenek-e nekik.

Ezek fontos adatok ahhoz, hogy az ügyfelek megbízzanak a cégben és vásároljanak is tőled.

Íme, mit kell szem előtt tartani, ha kapcsolatfelvételi adatokat adunk hozzá a landing oldalhoz:

Biztosítsd a landing látogatót, hogy valódi vagy. Általában ez egy postacím és egy telefonszám erre pont elég.

A popupban megjelenített élő beszélgetések hasznosak lehetnek, de nem feltétlenül szükségesek. Ha szükségesnek látod, használd, de annak sincs hátránya, ha nem használsz ilyet.

A kapcsolati űrlap elemeiről itt írtam bővebben, éremes ezt a listát is átnézni.

11. Landing Page Alapvető Eleme: Garanciavállalás

Az ügyfelek szeretik a garanciákat. Garancia, függetlenül attól, hogy mi az, és hogyan jelenik meg, segíthet abban, hogy az emberek nyugodtan vásároljanak tőled.

Egyszerűen maga a szó javítja a konverzió valószínűségét:

– A garanciák sokféle formát ölthetnek. Válassz egy olyan típusú garanciát, amely a te vállalkozásodnak megfelelően működik, és írj is róla a landing oldaladom.

– A kifejezett termékgarancia (pl. Elégedettség, pénzvisszatérítés stb.) hiányában másfajta garanciát is nyújthat: például “100% nem spam garancia”.

Helyezd el a garancia szövegét a CTA közelében. Ez a közelség segíti a felhasználót abban, hogy megkapja a végső bizonyosságot, és feliratkozzon, vásároljon vagy igénybe vegye a szolgáltatásodat.

12. Landing Page Alapvető Eleme: Hatékony cselekvésre ösztönző gomb – CTA

Az utolsó dolog, hogy magas konverziós arányú landing oldalt hozzunk létre, mindenki számára legfontosabb elem: a cselekvésre való felhívás (CTA-call to action).

A cikkben felsorolt elemek egyike sem annyira fontos, mint a cselekvésre való felhívás. Végül is ez az az elem, amely arra szolgál, hogy a látogatók figyelmét felhívja.

Ez az, ami végső soron a felhasználókat az ügyfelekké alakítja át.

Tehát ezeket szem előtt tartva, itt van néhány CTA-ötlet:

  • Legyen nagy a gomb. Általában véve, minél nagyobb, annál jobb.
  • Lehetőleg ne használd a “küldés/elküldöm” szót, hanem inkább valami izgalmas, meggyőző formulát ehelyett.
  • Használj egy gombot. A felhasználókat felkészítették arra, hogy a CTA gomb legyen. Ne menj vissza az időben, amikor még szövegeket is lehetett nyomkodni. Ragaszkodj a kipróbált és bevált módszerhez. Az emberek tudják, mit kell tenniük, ha látnak egy gombot.
  • Használj egy kontrasztos színt. A nyitóoldal, a céged, a stílusjegyed és a tervezők mindegyike rendelkezik bizonyos színekkel, amelyeket használnak. A landing oldalnak is színsémája van, a gomb jelenítse ezt meg.
  • Függetlenül attól, hogy milyen színt használsz a CTA-ra, tedd azt különlegessé, láthatóvá, kiemelkedővé. Annak érdekében, hogy kiemelkedjen, a színnek ellentétesnek kell lennie a képernyő többi színével. A kontrasztos színek vonzzák a szemet, és kényszerítik a kattintást.

Összegzés

A nagy konverziós landing oldal olyan hely, ahol az ügyfelek kattintanak, az emberek vásárolnak, és a létrehozójának bevételt termel.
Tehát ne vedd félvállról!

Szerencsére egy erőteljes és nagy konverziós landing oldal létrehozása nem annyira bonyolult.

Kezdd azzal, hogy végrehajtod mind a 12 lépést amiről írtam, és máris jó úton haladsz, hogy látogatóidból ügyfelek váljanak.

10 legjobb ingyenes WordPress sablon lelőhely

Ha úgy döntöttél, hogy nekiállsz egy WordPress alapú weboldalt létrehozni, mi is az első probléma amivel szembetalálod magad?

Egyből az első kérdés az, hogy hol találsz ingyenes WordPress sablonokat.

Először is nézzük meg, hogy mi alapján kell sablont választatni, mik azok a szempontok, amelyeket mindenképp vegyél figyelembe, mielőtt sablont választasz.

HA NEM ÉRDEKELNEK A TANÁCSOK, UGORJ EGYBŐL A LISTÁRA!

1. Specifikusan, kulcsszavakra keress!

Gondold át, hogy a te üzleti tevékenységed alapján mi az aminek meg kell felelnie egy weboldalnak. Akár kinézet, dizájn, színek, betűtípusok, akár elrendezés, átláthatóság és hatékonyság terén.

Készíts egy listát a funkciókról, amikre szükséged lesz a weboldalon és ezek alapján válassz!
Mit jelent ez a gyakorlatban?

Azt, hogy írd össze, hogy mit tudjon a WordPress weboldalad. Kell-e hozzá pl.: kapcsolati űrlap, galéria, foglalási rendszer, regisztrációs dokumentumletöltés, stb…
Ezekre keress rá, mert ha csak úgy nekiindulsz, akkor elveszel a sablonok közt és nem lesz hatékony a munkád.

2. Ha nincs benne elsőre minden számodra fontos funkció az ingyenes WordPress sablonban

Ebben az esetben plugint, vagyis bővítményt kell hozzá keresned. Az igények 90%-a kielégíthető ezekkel a bővítményekkel.

3. Nézd meg a sablon (és a plugin) értékelését és azt is, hogy mikor frissítették legutóbb.

Én 4 csillag alatt (5-ből, nem 10-ből) nem töltök le semmit és mazochista módon mindig a legrosszabb értékelések elolvasásával kezdem. Ha ezek már régiek vagy úgy tűnik, hogy nem volt nagy a gond, akkor letöltöm, különben inkább tovább állok és másikat választok.

4. Jó, ha van hozzájuk support is, de ez az ingyenes sablonoknál viszonylag ritka.

A prémium sablonokhoz 99%-ban adnak 6-12 hónapos online segítséget, ha elakadnál. Néhány ingyenes WordPress sablon készítője is jófej és segít, de sajnos ez nem nagyon jellemző.

5. Legyen mobilbarát vagyis reszponzív a sablon

Az egyik olyan funkció, amelynek szükségessége 2018-ban már nem kérdéses. Lehet, hogy te is épp mobilról olvasod ezt a cikket. Én kimondottan utálom az olyan weboldalakat, amelyek olvasásához nagyítani, forgatni kell a telefonom. Általában gyorsan be is zárom őket. Még ha úgy is gondolod, hogy a te témád csak idősebbeknek szól és ők úgysem mobiloznak, akkor se! Nálunk a 91 éves dédpapának 3 mobilja van… És nem mindegy az sem, hogy a Google találati listában is hátrébb kerülnek a nem mobilbarát weboldalak

A Google még ingyenes mobilbarát tesztelési eszközt is kínál annak ellenőrzésére, hogy a választott téma reszponzív-e. 

A legnagyobb témaszolgáltató oldalak, például a Template Monster példul csak mobilra is optimalizált témákat árul már.

6. Fontos a kompatibilitás a böngészők között

Érdemes több böngészőben megnézni a választott sablont. Mivel a felhasználók különböző eszközöket használnak, más böngésző beállításokkal is rendelkeznek az eszközeik. Lehet, hogy az általad választott sablon gyönyörűen megjelenik Safari-n, de Firefox-ban már szétesik. Ne azt válaszd!

A WordPress témák fejlesztői általában tesztelik a témáikat, de ha ezt nem említik a téma leírásában, akkor mindenképp próbáld ki különböző böngészőkkel, mint például Google Chrome, az Opera, a Safari, az Internet Explorer vagy a Firefox.

7. Legyen egyszerűen testreszabható, módosítható a sablon kinézete

A dizájn beállítások sablononként eltérhetnek, és néhány funkció megváltoztatásával különféle elrendezéseket tudsz te magad is létrehozni css vagy kódolási ismeretek nélkül.

Teszteld le az alapvető megjelenést funkciókat, mielőtt egy ingyenes WordPress sablont feltelepítenél. Szinte minden esetben elérhető egy demó verzió, azt nézegesd, próbálgasd.

Lehetőleg amellett dönts, aminek a szerkesztéséhez nem kell 4 monitor, egy full stack és egy backend fejlesztő.

8. Figyelj a betöltési sebességre is

A honlapok gyorsasága ma az egyik legfontosabb tényező, amely befolyásolja a konverziós arányt. A legtöbb ember nem fogja elpazarolni az idejét egy olyan weboldalon, amelyik évek alatt töltődik be. Jó, itt persze másodpercekre gondolok, de lehetőleg 3 másodperc alatti legyen a betöltési sebesség.

9. Fontos, hogy a sablon támogassa az összes alapvető bővítményt

A WordPress népszerűsége az irtózatosan nagy mennyiségben elérhető bővítményekből is adódik. Néhányuk minden weboldalhoz szükséges, ezért ne felejtsük el ellenőrizni, hogy a téma támogatja-e az összes olyan bővítményt, amelyet a jövőben használni fogsz.

10. Egyszerű design

A felhasználóbarát kialakítás azt jelenti, hogy az emberek jól érzik magukat a weboldaladon. Sok téma tele van színekkel, elrendezésekkel és funkciókkal, amelyek hasznosak lehetnek, de én mégis a minimalizmust, az átláthatóságot javaslom.

Nincs tökéletes WordPress sablon, inkább válassz ki egyet és azt optimalizáld. Maximum később letörlöd és másikat választasz, ha nagyon nem azt kapod, amire számítottál!

És akkor a 10-es lista, ahol a legtöbb és legjobban használható ingyenes WordPress sablon fellelhető: 

1.  Lehet, hogy fura, de első és legfontosabb lelőhely maga a WordPress hivatalos weboldala. Ha feltelepíted, már találsz is kb. 6500 ingyenes sablont!

2.  https://justfreetemplates.com/wordpress-themes

Itt is nézelődhetsz, én már több sablont használtam erről az oldalról.

3.  Én imádom a Theme Forest-et. Tudtad, hogy itt is akad néhány ingyenes, de prémium kinézetű sablon? https://themeforest.net/free/wordpress-themes

4. 300+ ingyenes sablon: https://justfreethemes.com/

5. 30+ wordpress sablon, itt van sok prémium sablon is: https://raratheme.com/theme/free-wordpress-themes/

6. 15+ sablon: https://themegrill.com/wordpress-themes/free/

7. 30+ ingyenes wordpress sablon https://themeisle.com/wordpress-themes/free/
8. 50+ wordpress téma: https://colorlib.com/wp/free-wordpress-themes/

9. 80+ ingyenes sablon: https://www.sktthemes.net/product-category/free-wordpress-themes/

10. És az utolsó, ha még nem lenne meg a tökéletes sablon: https://gracethemes.com/product-category/free-wordpress-themes/

Ha ebben a listában nem találnál neked és a vállalkozásodnak megfelelőt vagy elakadnál a weboldal készítés közben, akkor vedd fel velem a kapcsolatot!  

Webdesign tippek – mire figyelj a készülő weboldalad kialakításakor

ADOK NÉHÁNY ÖTLETET, HOGY MIRE FIGYELJ ODA KÉSZÜLŐ WEBOLDALAD TERVEZÉSE KÖZBEN

Ha most készül a weboldalad és nem vagy biztos abban, hogy mitől lesz jó a design, akkor nézd végig az általam készített képeket!

A weboldalad színei passzoljanak a márkádhoz! Fontos, hogy bizonyos színek bizonyos érzésekhez kapcsolódnak. Ezek kövesség a már meglévő logót is. Ha nem tudod, merre indulj el, nézegess színpalettákat vagy használd az Adobe színtervezőjét.

A negatív tér sokkal jobban megragadja a figyelmet, mintha minden egy oldalra lenne zsúfolva. Szöveg esetén nagyobb térközöket érdemes hagyni. Minél kevesebb az objektum, annál figyelemfelkeltőbb maga a tartalom.

A legfontosabb tartalom a weboldaladon mindig tűnjön ki! Ne engedd, hogy elvesszen a sok információ közt, hisz akkor a látogatók sem találják meg és sok-sok megrendelőt, vevőt vagy olvasót fogsz veszíteni.

Három, de inkább csak kétféle font legyen egy dizájnon belül. Ez épp úgy érvényes a weboldalra, mint az arculati elemekre. Mindenképp győződj meg, hogy nem üti egymást a két font típus, mert akkor sem fognak jól mutatni. Keress font-párokat, ha nem tudod, mit mivel lehet párosítani. Érdemes kipróbálni azt is, hogy egy font különböző vastagságait használod. Pl. a cím lehet bold, a kenyérszöveg regular és az apróbetűs rész light – egy azon font családból.

Az információ jól tagolható a kontraszt alkalmazásával is. Az olvasót lehet irányítani, megmutatni neki, merre szeretnénk, hogy tovább haladjon a weboldalunk böngészésben. Sötét háttér-világos tartalom vagy fordítva. Mindkettő ugyanolyan jó!

A fotók minősége nagyon fontos. Mindeképp kerüld a rossz minőségű, pixleles, homályos fotóak, mert nem mutatnak jól a weboldaladon. Törekedj, az éles, nagy méretű, jó minőségű képek használatára! ITT is talász ingyenes fotólelőhelyeket, ha nem lenne elegedő saját kép a weboldalra.

A lassú, nehezen betöltődő weboldalakat senki sem szereti. Ha lassabb a betöltési sebessége, mint 2mp, akkor optimalizálni kell a tartalmat. Sebességmérőt itt találsz: tools.pingdom.com

Weboldal készítés trendek 2018-ban

MEGMUTATOM A LEGÚJABB IRÁNYZATOKAT A WEBDESIGN-BAN!

Ha még nincs elképzelésed, nézz szét a listában, biztosan megtetszik valami!

1. ÁRNYÉKOLÁS – MÉLYSÉG

Az árnyékok használata nem újdonság, de akkor miért is emlíem meg? Bár az árnyékok már jó ideje a webes tervezés egyik legfontosabb elemei, a böngészők fejlődésének köszönhetően néhány izgalmas változatot láthatunk manapság. A rácsokkal és a parallax elrendezésekkel a webdesignerek az árnyékokkal jobban játszanak, mint valaha. Mélységet hoznak létre és a képernyőn túlmutató világ illúzióját keltik.

Az árnyékolás meglepően sok hatással jár, nemcsak a weboldal esztétikáját emeli, hanem a felhasználói élményt (UX) is fokozza. Például a lágy, finom árnyékok használata a hivatkozások megadásához nem új ötlet! De ötvözetük élénk színátmenetekkel (gradient) – mint a fenti példákon is láthatod – javítja a régi árnyékok háromdimenziós hatását.

2. VIBRÁLÓ, TELÍTETT SZÍNEK

2018. a weben határozottan az élnénk színek éve lesz. Míg régebben számos márka és tervező ragaszkodott a webes színekhez, a tervezők ma már sokkal bátrabban választanak színeket – beleértve a túltelítettséget és a vibráló árnyalatokat is, amelyekkel csodálatos látványt lehet elérni.

Ezt segíti a technológiai fejlődés is, amelyen a monitorok és a képernyők mentek át, így alkalmasabbak a gazdagabb színek reprodukálására is. Az élénk, sőt a nagyon merész színek hasznosak lehetnek az újabb márkák számára, remélve, hogy azonnal felhívják látogatóik figyelmét. De akár tökéletesek azoknak a márkáknak is, akik el akarják választani magukat a “web safe”-től és a hagyományostól.

3. MOZGÓ HÁTTEREK

Ezek az animációk olyan kis javascriptek vagy gif-ek, amelyek lehetővé teszik a mozgást a háttér részeként. Mindezt anélkül, hogy túl hosszú ideig tartanának, azzal elvonva a felhasználó figyelmét a tartalomról. Azt mondják, hogy egy kép többet mond ezer szónál, és ha még mozog is, akkor főleg. Hasonlóképpen az effajta mozgó hátterek vonzzák a felhasználó figyelmét, így a márka már néhány másodperc alatt is képese emlékezetes benyomást kelteni. Emellett az ilyen mozgóképek egyre népszerűbbek lesznek a közösségi médiában, és így a szemet gyönyörködtető reklámok is elvezetnek a weboldalunkra.

Viszont figyeljünk a méretre, mert ha sok kis mozgó gif-et teszünk ki, az jelentősen meghosszabbítja a betöltési sebességet, mely látogatóvesztéshez vezet!

4. MOBILRA TERVEZÜNK ELŐSZÖR

Mint már többször is említettem, a mobil böngészés hivatalosan is megelőzte az asztali számítógépezést. Majdnem mindenki az okostelefonon intézi az üzleti és privát ügyeit. Eleinte nehéz volt a tervezők helyzete is. Sokszor felmerült a kérdés, hogy lehet annyi információt, menüt, képeket, stb. egy ilyen kis képernyőn megjeleníteni.

De 2018-ra a mobil design is beérett. A hamburger menü használatával minimálisra csökkent a kis képernyőn menü mérete. Előfordulhat, hogy a mobil verzióban ki kell hagynunk a nagy és gyönyörű fotókat. Cserébe az ikonokat sokkal többet használhatjuk, és mostanra már olyan gyakorivá váltak, hogy a felhasználók is könnyen megérteni őket.

5. ILLUSZTRÁCIÓK

Az illusztrációk a médiában sokoldalúan használható képek, játékos, barátságos és szórakoztató elemek. A tapasztalt művészek személyre szabott illusztrációkat készíthetnek, és a márka hangzásához igazodnak.  Mindazon a márkákhoz, amelyek minden évben az egyre zsúfoltabb piacon próbálnak feltörni.

6. NAGY, VASTAG BETŰS FŐCÍMEK

A tipográfia mindig is egy erőteljes vizuális eszköz volt, amely képes személyiséget teremteni, érzelmeket kiváltani és hangot adni a weboldalon, miközben fontos információkat szolgáltat. És 2018-ban, amikor minden eszköz felbontása egyre jobb és könnyebben olvashatóak a szövegek, az egyedi betűkészletek használatának előretörése várható. Az Internet Explorer böngészőjén kívül számos böngésző támogathatja a kézzel készített betűtípusokat is, nagy szabadságot adva a tervezőknek. A nagy betűk, a kontrasztos talpas és a talp nélküli fontok irányzata dinamikus párhuzamokat hoz létre. Javítja az UX-t és mindenek előtt a látogatókat ott tartja a weboldalon.

A weboldalak számára a fejlécek kulcsfontosságú SEO elemek, és segítenek az olvasóknak, hogy a tartalmat gyorsan átlássák. A 2018-as évek elején a tervezők teljes mértékben kihasználják ezt a weboldalakon, nagy és hatásos fejléceket készítve a kreatív betűtípusokból.

7. ASZIMMETRIKUS ELRENDEZÉSEK

A 2017-es év egyik nagy változása az aszimmetrikus és nem konvencionális elrendezések bevezetése volt. Ez a webes tendencia 2018-ban továbbra is erős lesz. Az aszimmetrikus elrendezés vonzereje az, hogy egyedülálló, megkülönböztető és kísérleti jellegű.

Bár a nagy mennyiségű tartalom továbbra is hagyományos grid-alapú struktúrákat igényel, mégis az interneten elterjedt nem szokványos elrendezések használatának növekedése várható. Ez annak köszönhető, hogy a márkák egyedi, feltűnő tulajdonságokkal szeretnének kitűnni a tömegből. A kisebb cégek általában nem érdekelnek ebben az esztétikai változtatásban. A nagyobb márkák viszont, amelyek megengedhetik maguknak, hogy egy kis kockázatot vállaljanak, elvárják a web dizájnereiktől is a különleges ötleteket.

8. SZÍNÁTMENETEK

Az elmúlt néhány év során a flat dizájn sokkal inkább pasztell és lágyabb színeket kínáló webdesign trend volt, de a színátmenetek 2018-ban nagy visszatérést mutatnak. Most, a színátmenetek nagyok, élénkek és telítettek. A legnépszerűbb új felfedezés egy gradiens szűrő fotókra – remek módja annak, hogy kevésbé érdekes képet mutassunk érdekesebbnek. Egy egyszerű gradiens háttér is lehet a tökéletesen trendi megoldás, ha nincs más képed, amivel dolgozhatsz.