Szerencsére a web gyorsan fejlődik, és a modern böngészők nagy részében mostantól lehetőség van közvetlenül is használni a változókat. Ez azért jó, mert a használatukkal kevesebb lesz a kódismétlés, olvashatóbbá válik a kód, illetve nagyobb rugalmasságot érhetsz el a tulajdonságok kezelésénél.
Mi a különbség a CSS előfeldolgozókban használt változók és a CSS változók között?
A CSS előfeldolgozók, illetve ahogy angolul nevezzük, a CSS preprocessor-ok (a legnépszerűbbek a Less és a Sass), egy kibővített CSS szintaxissal jobban kezelhető kód írását teszik lehetővé, amelyben használhatunk változókat, különféle vezérlési szerkezeteket, pl. ciklusokat vagy elágazásokat. A program aztán elkészíti nekünk a böngészők által is értelmezhető hagyományos CSS kódokat. Az előfeldolgozók változói tehát semmit sem csinálnak a böngészőben, sőt a böngésző nem is tudja értelmezni ezeket. Nézzünk rá egy példát.
Sass kód
Fordítás utáni CSS kód
A példában a Sass kódban létrehozunk egy változót, amelynek adunk egy színt (értéket). Az elemeknél már ezt a változót használjuk, nem a direkt színt. Ezt a kódot fordítja le a compiler, amely a második blokkban látható CSS kimenetet adja és amit már a böngésző is tud értelmezni.
A CSS változóknál erre nincs szükség, mivel ezeket közvetlenül a CSS is képes feldolgozni és használni, fordítás nélkül is.
Hagyományosan így hozzuk létre a CSS kódban a színeket.
A változók használata esetén először is létre kell hoznunk egy változót a fenti vörös színhez, amelynek be kell állítanunk a hatókörét is. A lenti példában ezt a :root pszeudo-osztályra állítottuk be, amely megegyezik a dokumentum <html> elemével. A változót létrehozni mindig egy dupla kötőjellel kell, majd ezután a szokott módon adunk neki egy értéket.
–változó neve: változó értéke;
A használata esetén a var szóval vezetjük be, majd a zárójelpár közé beírjuk a használni kívánt változónk nevét.
tulajdonság: var(–változó neve);
Miért jó ha CSS változókat használunk?
- A CSS változókat használhatjuk előfeldolgozók nélkül is
- Lehetőségünk van ugyanazt a tulajdonságot a különböző szinteken meghatározni (felülbírálni) pl. a média lekérdezéseken belül is, amire az előfeldolgozók nem képesek. Ez azt jelenti, hogy a média lekérdezéseken belül az egyedi tulajdonságok jól használhatók a reszponzív tervezéshez.
- Hozzáférhetünk és módosíthatjuk őket a JavaScript-el
Amire figyelj
- A CSS változók, hasonlóan a programozási nyelvek változóihoz, globális és lokális hatókörrel rendelkeznek és az öröklés szabályait követik.
- A változók nevei kis és nagybetű érzékenyek, ezért az elnevezéseknél figyelj erre.
Nézzünk egy példát az öröklésre
Az alábbi kódban néhány elemhez definiáltunk színeket, mindet a –color változóra.
Ha megnézed ezt a HTML kódot, meg tudod mondani melyik elemnek milyen színe lesz?
Az első bekezdés (Milyen színű leszek?) kék lesz, mivel a sima bekezdésre nincs beállítva tulajdonság, ezért a kék színt örökölni fogja a :root elemtől.
:root { --color: blue; }
Az első div elem (És én?) zöld színű lesz, mivel a div elemekre beállítottuk a zöld színt.
div { --color: green; }
Az #alert azonosítójú div elem piros lesz, mivel erre beállítottuk közvetlenül a piros színt. Itt azért nem a div elemekre beállított zöld szín lesz a használt, mert az #alert azonosítóval (kiválasztóval) pontosabban határoztuk meg a tulajdonságot.
#alert { --color: red; }
Végül az #alert div-en belüli p bekezdés szintén piros lesz. Ugye a bekezdéselemen nincs változó deklarálva és mivel a CSS változók öröklődnek, a használt értéket a szülő elemtől örökölte. Ez pedig ebben az esetben az #alert div, mivel a bekezdés ezen belül helyezkedik el.
#alert { --color: red; }
Hol használhatod a CSS változókat?
A modern böngésző programok nagy része támogatja a CSS változók használatát és szerencsére egyre több felhasználó részesíti ezeket előnyben. Az alábbi ábrán megnézheted, milyen böngészőprogramok támogatják a használatukat.
The post Ismerd meg a CSS változókat mindössze 5 perc alatt first appeared on Webdesign tanfolyamok - D-kreatív Oktatás.]]>
A Landing Page marketinges és webfejlesztői körökben is gyakran előforduló fogalom, a kialakításával kapcsolatban viszont már megoszlanak a vélemények. Pedig ennek is megvannak a szabályai, illetve megvannak azok a lépések, amelyek segítségével egy jól teljesítő érkező oldalt hozhatsz létre. A lényeg, a tervezés és a marketing oldaláról is vannak szabályok, amelyeket érdemes betartani.
Egy weboldalt akkor nevezünk Landing Page-nek, érkező oldalnak vagy érkeztető oldalnak, ha arra egy külső hivatkozásról vagy linkről érkezik a látogató. Joggal mondhatod, hogy -Jó de ez lehet a webhely nyitó oldala is, viszont a Landing oldalaknak van még egy sajátossága. Mégpedig az, hogy az adott webhelytől elkülönülve, egy adott célt (konverziót) megvalósítva jelennek meg.
Mit is jelent ez? A feladatuk az, hogy a leggyakrabban egy hirdetésről ideérkező látogatót egy pontosan meghatározott cselekvéshez (konverzióhoz) vezessék el. Ez lehet egy termék bemutatása, amelynek a végén a vásárlás a cél, hogy iratkozzanak fel egy hírlevél listára, vagy adják meg az adataikat egy ajándék kedvezményért.
Nyitó oldal vs. Landing Page
A Landing Page két (három) típusa
Egy profin létrehozott Landing Page mindig egy pontosan meghatározott cél érdekében készül. Ez nagyon fontos. Egy, tiszta és világos célja legyen az oldalnak. Ha megpróbálod ezt alárendelni annak, hogy többféle funkciónak is megfeleljen, -Egy kicsit eladok és gyűjtök pár feliratkozót is, na akkor nem fogja hozni az eredményeket. Mindig mindennek külön érkező oldalt készíts!
A leggyakoribb két típusnak a vásárlást és a lead generálást hozzák fel, én kiegészíteném ezt az átkattintással is.
- Vásárlás – Ebben az esetben az eladni kívánt terméket vagy szolgáltatást mutatod be az oldalon, amelynek a végén ezt a látogató meg is vásárolhatja.
- Lead generálás – Ilyenkor az a cél, hogy a látogató elérhetőségeit megszerezzük és érdeklődőt csináljunk belőle, amiből aztán a későbbiekben vásárló is lehet
- Átkattintás – Ilyenkor nem a Landing oldalon van a végleges ajánlat, hanem itt csak a terméket, szolgáltatást mutatjuk be, a látogató pedig innen kattinthat tovább a konkrét termékhez.
Milyen legyen a Landing oldal?
Ez mindig attól függ, hogy mi az oldal célja, amire létrehoztad. Egy feliratkozáshoz nyilván nem kell ugyanolyan hosszú oldalt létrehozni, mint ha egy terméket mutatsz be és próbálsz meg értékesíteni.
Ebben a kérdésben egyébként szintén megoszlanak a vélemények, egyesek szerint nem kell hosszú szöveg, mivel úgysem olvassák el. Marketingesek viszont állítják, hogy a hosszabb, több információt nyújtó oldalak jobban teljesítenek. A lényeg az, hogy próbálj meg a látogató/vásárló fejével gondolkozni és minden lehetséges kérdésre megadni a választ. Tedd ezt úgy, hogy a látogató ne veszítse el az érdeklődését, míg el nem jut a bizonyos Call to Action gombig.
Vannak olyan elemek, amelyek mindenképpen szükségesek egy Landing oldalra. Illetve vannak olyan kritériumok, amelyeknek meg fontos, hogy megfeleljenek a használt elemek. Nézzünk meg ebből párat.
1. Kell egy frappáns és figyelemfelkeltő cím
Fontos, hogy ezt jól szerkeszd meg, mivel ez az első dolog, ami a látogatót az oldalon fogadja. Foglalja össze az ajánlatodat, illetve legyen kellően figyelemfelkeltő, ébresszen kíváncsiságot a látogatóban, így az nagy valószínűséggel tovább fog olvasni.
2. Szerepeljen a logód
Ne felejtsd el a logódat, mivel ez is nagyon fontos eleme a jó Landing oldalnak. Arra vigyázz azonban, hogy ez ne legyen túl tolakodó és ne uralja az egész oldal tetejét. Jelezze a látogatónak hogy hol jár, de ne ezen legyen a hangsúly.
3. Legyen egyértelmű a CTA
Ez a Landing Page legfontosabb eleme. A CTA a “Call to Action” kifejezés rövidítése, amit általában cselekvésre ösztönzésként szoktak fordítani. Ez nem más, mint egy jól megszövegezett, figyelemfelkeltő gomb, amire kattintva a látogató továbbmegy a következő lépésre.
Milyen legyen a CTA? Kellően nagy (feltűnő), kontrasztos (jól elkülönülő), és a szövege egyértelműen utaljon arra mi is fog történni.
Fontos tényező az is, hogy a CTA gomb elhelyezése mindig attól függ, hogy a látogató megkapott-e minden információt a döntéshez. Sokan vitatkoznak ezen is, mivel kétségtelen, hogy az oldal legfontosabb része az a terület, amelyet a látogató hajtás (görgetés) nélkül lát. A gomb elhelyezése viszont mégsem függhet ettől, ennek mindig a megfelelő konverzió elérését kell szolgálnia, hiszen ha a gombot idő előtt elhelyezed, akkor a konverziók elvesztését kockáztathatod. A hosszabb értékesítési oldalakon a CTA gombok addig nem kerülnek elő, míg a látogató nem ismeri megfelelően az ajánlatot.
4. Legyen világos az ajánlatod
Figyelj arra, hogy senki nem vesz zsákbamacskát, ezért az ajánlat szövegét mindig pontosan, világosan fogalmazd meg és úgy alakítsd ki, hogy az elsődleges célnak megfelelően tájékoztasson. Itt elsősorban nem a vállalkozásod vagy a terméked jellemzőit kell felsorolnod, hanem fejtsd ki a látogató lehetséges problémáját és kínálj erre egyből egy megoldást is. Lehetőleg használj képet vagy képeket is, mivel a vizuális üzenetet a látogató ötvenszer gyorsabban dolgozza fel, mint a szövegeset.
5. Navigációt lehetőleg ne
Mármint hogy ne használj a Landing Page-en navigációt. Egyébként ez a másik legtöbb vitára okot adó pont a témában. A marketinges szerint mivel ugye a konverzió a lényeg, nem szerencsés ha hagyod a látogatót elkóborolni az oldalról. Sokan azt mondják erre, -De van egy csomó más dolog is amire büszke vagyok és ezt is szeretném megmutatni. És ha ezt az utat követed, máris megbukott az első pont, miszerint egyetlen konverziós cél.
6. Használj kontrasztos színeket
Jó ha a Landing oldalad, bár különálló oldalként kezeled a webhelyedtől, de azért tükrözi a márkád színeit. Figyelj arra is, hogy a CTA gomb tényleg “kiugorjon” a képernyőről és legyen igazán figyelemfelkeltő. Ezt leginkább egy kontrasztos színválasztással tudod elérni. A színek kiválasztásánál fontos az a szempont is, hogy a Landing oldal minden eleme, a cím, az alcím, a képek, a kiemelések mind-mind egy irányba tereljék az oldal látogatóját.
7. Tesztelj
Jó technika, ha bizonyos időközönként megváltoztatod az oldal valamelyik elemét, egy képet, a színeket, vagy a CTA gombon levő szöveget és megnézed jobban teljesít- e az oldal ezután. Nem is gondolnád, de sokszor néhány apró változtatással is nagy konverzió növekedés érhető el.
Mivel ronthatod el a legkönnyebben?
Menüsort használsz
Erről már beszéltünk, nem szerencsés ha a látogatót hagyod elkószálni az ajánlattól, mivel ezzel nem csak konverziót veszítesz, de pénzt is dobsz ki, hiszen a látogató valószínűleg valamilyen fizetett hirdetésről érkezett a Landing oldaladra.
Túl sok lehetőséget kínálsz
A menü mellett a linkeket is távolítsd el az oldalról, (ha vannak ilyenek) hiszen ezek is eltéríthetik a látogatókat. A másik hiba, ha többféle dolgot is felajánlasz, tehát az oldalon többféle konverziót is szeretnél megvalósítani. Nem jó, ha lehetőség van feliratkozni, emellett ingyenes anyagot letölteni, esetleg vásárolni is. Egy oldal egy konverzió, ha több akciód is van ezeknek mindig készíts külön Landing oldalt.
Bonyolult űrlapokat használsz
Nagy valószínűséggel a Landing Page fontos része a feliratkozó form. Elkéred a látogató e-mail címét egy ingyenes anyagért cserébe, vagy a vásárláshoz, megrendeléshez kellenek az adatai. Figyelj arra, hogy minél bonyolultabb, hosszabb az űrlapod, annál inkább kockáztatod azt, hogy a látogató otthagyja az oldalt. Próbáld meg mindig a lehető legkevesebb adatot elkérni, tényleg csak azokat, amelyek feltétlenül szükségesek.
Nem köszönöd meg
Nemcsak maga a gesztus miatt fontos, hogy a feliratkozást, vagy a letöltésért cserébe megadott e-mail címet megköszönd, bár kétségkívül ez is növeli a bizalmat. A folyamatnak itt nem feltétlenül kell véget érnie, a marketingben ezt hívják upsell-nek. Az upsell azt jelenti, hogy valaki megrendel tőled valamit, amit aztán a köszönő oldalon megfejelsz egy másik, kedvezőbb ajánlattal. Ez így lehet, hogy túl nyomulósnak tűnhet, de egyes felmérések szerint a vevőid ebben a pillanatban a legfogékonyabbak a vásárlásra.
Például megrendel valamit, amit ekkor megfejelsz egy kiegészítő termékkel vagy szolgáltatással, amire ugyanúgy szüksége lehet. Ha erre mondjuk teszel egy kedvező csomagajánlatot, már nem is olyan biztos, hogy nem lesz kapható rá. Persze az, hogy ez mennyire hatékony, nagyban függ az upsell ajánlattól és a bizalomtól, amit kiépítettél a landing folyamat alatt.
Nem használod a keresőoptimalizálást
A Landing oldalnál ugyanolyan fontos, ha nem fontosabb a megfelelő keresőoptimalizálás. Ha a látogató egy hirdetés útján talál az oldaladra és jut el a CTA-ig, akkor a vásárlás/kattintás lehetséges bekövetkezése 1-2 %. Míg ha valamilyen keresőből, egy organikus találatról jut el ugyanide, ez az arány máris 30% felett is lehet. Nagyon nem mindegy ugyanis, hogy passzívan böngészve, vagy aktívan keresve jut el ugyanoda a látogató.
Checklist a Landing page-hez
Ha végigmész ezen a listán és a kérdések nagy részére igennel tudsz válaszolni, akkor nagy valószínűséggel egy elég jól teljesítő oldalt sikerült létrehoznod. A lista Oli Gardner tollából származik, aki társalapítója és kreatív igazgatója az Unbounce-nak, amely webes kampányokkal és különféle oldalelemzésekkel foglalkozik.
- A Landing oldal főcíme egyezik a hirdetésed üzenetével?
- A Landing oldalad egyetlen célra fókuszál?
- Bárki megérti a mondanivalót 5-10 másodperc alatt? (teszteld le!)
- Egyértelmű, hogy milyen cégről van szó és hogy a céged mit csinál? (logó és szlogen)
- Szerepel a főcím alatt olyan leírás, ami fokozza a főcím hatását?
- Használsz pontokba szedett listát, mely bemutatja a terméked/szolgáltatásod előnyeit?
- Az üzeneted eljut a célszemély(ek)hez 30mp alatt?
- A főcímed választ ad arra a kérdésre: „Miről szól ez az oldal?“
- Eltávolítottál minden az oldalról kifelé mutató linket (pl. navigáció)?
- Megmutatja a Landing oldalad, hogy a terméked/szolgáltatásod mitől egyedi?
- A szöveg elsősorban az előnyökre és nem a tulajdonságokra fókuszál?
- Meg tudod állni, hogy szükségtelen információt kérj az űrlapon?
- Közlöd a feliratkozóval, hogy mit kap, ha végigmegy a folyamaton? (kedvezmény, ajándék)
- Megjelenítesz vásárlói referenciát és véleményeket, melyek a terméket/szolgáltatást dícsérik?
- Több különböző kapcsolatba lépési lehetőséget kínálsz (telefon, email, élő chat)?
- Világos, hogy mit kapnak a látogatók, ha klikkelnek a CTA (Call to action – cselekvésre buzdítás) gombodon?
- Professzionális dizájnnal rendelkezik a Landing oldalad?
- Megegyezik a Landing oldal grafikai stílusa a hirdetés stílusával?
- Megegyezik a Landing oldal stílusa a web site-od, vagy a branded stílusával? (Akkor érdekes, ha a CTA után a látogató odakerül)
- Szerepeltetsz adatvédelem és felhasználási feltételek linkeket?
- Adsz bemutatót, mintát (pl. első fejezet, mint előnézet) az ajánlatodból, ha ez lehetséges?
- Tettél ki tanúsítvány, garancia, biztonságtechnikai, partner logókat?
- Kijelentéseid és állításaid ellenőrizhetők?
- Megismétled az ajánlatod az űrlapon, hogy hangsúlyozd mi a célja az űrlap kitöltésének?
- Használsz bármilyen vizuális trükköt, hogy felhívd a figyelmet a CTA gombodra? (pl. nyilak)
- Elég nagy a CTA gombod, ahhoz hogy akár 2 méterről is látható legyen?
- Használsz kontrasztot a CTA gombodnál, hogy elüssön az oldal többi elemétől?
- Feltünő helyen van a CTA gombod, közel az oldal tetejéhez?
- Tettél az adatvédelmi szabályzatodra mutató linket az űrlap email cím mezőjének közelébe?
- Az űrlap email cím mezőjénél tudatod a látogatóval, hogy nem fog kapni reklámot, spamet és nem adod ki harmadik félnek a címét? (már ha tényleg nem)
- Ha az ajánlatod időben korlátozott, egyértelmű a látogató számára, hogy sietnie kell?
- Ha videót használsz, akkor ugye nem indítod el a lejátszást automatikusan?
- A videód cselekvésre buzdítással (CTA) végződik?
- A videód első 10-15 másodpercéből kiderül miről szól és felkelti a figyelmet, hogy végig is nézzék azt?
- CTA gombból csak egyet használsz? (Ha hosszú az oldalad, akkor okés, ha ismétled)
- Ugye nem használsz bezáráskor megjelenő popup ablakot?
- Végzel A/B tesztelést az oldalakon?
- Ha több lépésből áll a folyamatod, egyértelműen kommunikálod azt a látogatók számára? (30 másodperc, 3 lépés, stb.)
- Külön Landing oldalt használsz minden promócióhoz, kampányhoz?
- A Landing oldalad követi az egységesség alapelvét, amikor az oldal minden eleme egy dolog bemutatására fókuszál?
- Követted Steve Krug utasítását? Távolítsd el a szöveg 50%-át, majd töröld ki a maradék felét, hogy elérd a maximális egyszerűséget és tisztaságot.
- Ugye a CTA gombod felirata nem „Kattints ide“ vagy „Elküld“?
- Az űrlapod egy kiemelt (pl. színes hátterű) dobozban helyezkedik el, és ezáltal kiemelkedik az oldalból, mint a legfontosabb elem?
Használj template-t
Ha végképp nem sikerül magadtól egy jó Landing oldalt tervezni vagy elkészíteni, még mindig használhatsz sablonokat vagy alkalmazásokat is ehhez. A Mailchimp-nek például a hírlevél szolgáltatás a mellett működik egy ilyen szolgáltatása is, ahol konkrétan Landing oldalakat készíthetsz. Ehhez többféle sablont kínálnak, közösségi média integrációval, statisztikákkal, ingyen, mindössze egy Mailchimp fiók szükséges hozzá. A szolgáltatás blogjában pedig rengeteg tippet illetve leírást találhatsz a témában.
A szerző: Gergely György
1998-ban kezdtem el komolyabban foglalkozni a számítástechnikával. Kezdetben hagyományos grafikát, reklám illetve dekoráció készítést, majd az informatika mellett webtervezést, animációt és programozást tanultam. 2004-től folyamatosan foglalkozom weboldalak tervezésével, programozásával, grafikai és arculattervezéssel, emellett digitális tananyag fejlesztésből diplomáztam. A web és a grafika ma már nem csak munka, hanem egyfajta szenvedély is lett. Emellett egyre többet foglalkozom új technológiák megismerésével, illetve multimédiás anyagok tervezésével és készítésével is.
Ha hasznosnak találtad ezt a bejegyzést, megköszönöm ha megosztod másokkal is!
The post Szükségem van Landing Page-re? És mi is az a Landing Page? first appeared on Webdesign tanfolyamok - D-kreatív Oktatás.]]>
Pedig tényleg nem annyira bonyolult dolog, főleg ha tudatosan, néhány alap dologra odafigyelve csinálod. A tartalom marketing alap meghatározása egyébként valahogy így hangzik:
… egy marketing stratégia, amely értékes, releváns és következetes tartalmak létrehozására és terjesztésére koncentrál, hogy ezáltal egy világosan meghatározott célközönséget irányítson az oldalra, ezt a célközönséget megtartsa, majd a rendszeres látogatókból egyfajta nyereséges ügyfélaktivitást váltson ki.
Magyarul csak úgy tudsz új látogatókat magadhoz csábítani, ha tartalmat készítesz. Olyan tartalmat, amely elég érdekes és hasznos ahhoz, hogy a célközönséget bevonzza, megtartsa és hogy ezekből a későbbiekben vásárló is legyen. Ezért van az, hogy a tartalom marketing egy hosszú távú stratégia , amely a célközönséggel való szoros kapcsolat kiépítésén alapul, magas színvonalú tartalmakat biztosítva a számukra.
És ezzel vissza is kanyarodtunk az alap felvetéshez. Jó, de mit és kinek?
Mi a megoldás?
Amikor a célközönségedet, ezen belül is új látogatókat szeretnél elérni, akkor olyan tartalmakat kell tálalnod, ami akkor is érdekes lehet az olvasónak, ha még sohasem hallott rólad vagy a vállalkozásodról. Ezt marketinges körökben úgy nevezik, hogy a látogatók problématudatára kell fókuszálnod. Olyan tartalmakat készíteni és azokat a témaköröket feldolgozni, ami megoldást jelenthet a látogatóid számára. Még akkor is, ha nem feltétlenül vannak tudatában annak, hogy ez a probléma őket is érinti. El kell ültetni a fejükben a gondolatot, vagy felhívni a figyelmüket valamire, amire máris megoldást kínálsz.
Ha például valamilyen egészséges élelmiszert árulsz, írj arról, hogy milyen káros hatásai vannak a hagyományos, cukorral teletömött élelmiszereknek. De a saját témánknál maradva, ha weboldalakat készítesz írj arról, mire kell figyelni egy oldal létrehozásánál, milyen kritériumai vannak egy jól teljesítő oldalnak. Miért nem elég, amit sok induló vállalkozás gondol, hogy “Elég ha csak fenn vagyunk a neten…”. Ezzel nem csak a problémára világítasz rá, hanem egyből a lehetséges megoldást is szállítod.
Néhány hasznos tipp
Mint minden más, valószínűleg ez is csak akkor fog működni, ha megtervezed. Legalább középtávra. Még mielőtt csalódottan hagynád az egészet a fenébe, gondold végig, mit is kell csinálnod ehhez?
Egyszerűen csak írj le néhány fontos pontot és határozd meg, mi tartozik ezekhez.
- Mi a cél? Mit szeretnél elérni a tartalom marketing segítségével? Mondjuk fél év alatt hány visszatérő olvasót szeretnél, és nekik milyen ajánlatod lesz.
- Ki a célcsoportod? Ezt minél jobban ismered, annál sikeresebben tudsz célozni.
- Milyen gyakran posztolj és milyen hosszú poszt a megfelelő? Van aki a mennyiségre esküszik ezért többször jelentet meg rövid kis bejegyzéseket. Szerintem egy jó poszt rendesen kidolgozott és körüljárja az adott témát, 5-7 perc alatt elolvasható és tömören érthetően van megírva. És ezekből nem feltétlenül kell (nem is lehet, ha nemcsak ezzel foglalkozol) két naponta kitenni újat.
Írj a termékedről, szolgáltatásodról
Ez alap, hiszen ezek a vállalkozásod alapjai. Próbáld meg ezeket egy kicsit más szemszögből bemutatni. Ne csak a termékedről írj, hanem annak esetleges használatáról, vagy a szolgáltatásod előnyeiről. Használhatsz itt akár rövid videókat (time-lapse) vagy infógrafikákat is. Ez bár feszegeti a határokat, ha jól csinálod nem tűnik feltétlenül reklámnak és eladás szagúnak, így kitűnik abból a hatalmas reklámzajból, amely körülvesz bennünket.
Keresd meg a szolgáltatásoddal kapcsolatos olyan problémákat, amelyeket feldolgozva nemcsak szakértőnek tűnsz az olvasóidnak, de még az előtt mutatsz rá egy problémára, mielőtt az olvasóban tudatosulna, hogy ez bizony az Ő problémája is.
Pl. írj arról, hogy a kisvállalkozások majdnem felének még mindig nincs weboldala. És miért hibás az a feltételezés, hogy ha egy weboldalt felteszünk a webre az már elég is. Fejtsd ki, hogy milyen jó, ha van ez mellé egy egységes arculati megjelenés is. Nem kell arculati kézikönyvvel riogatni a kisvállalkozót, de egy jó logó, egy névjegy, és egy árajánlat sablonra már fogékony lesz, főleg ha rávezeted, hogy ezzel a pár aprósággal nagyban növelheti a bizalmat a vállalkozása felé. Vagy állíts össze egy checklistát arról, milyen pontokat kell átgondolni és eldönteni az előtt, mielőtt akár egy egyszerű bemutatkozó weboldalt is elkészíttetnénk.
Hogyan írj posztot?
Találj időt arra, hogy írj
Az írás (feltéve, hogy te vagy az, aki az írást végzi) sok energiát igényelhet – különösen akkor, ha jól akarsz írni. A legjobb mód arra, hogy időt találjunk az írásra az, hogy minden témaprojektet apró feladatokra bontunk. Meghatározod, hogy mondjuk hétfőnként új blogbejegyzést jelentesz meg. Gyűjtöttél már néhány ötletet, amiket kidolgozhatsz, kiválasztod a megfelelőt, majd a készülő blogbejegyzést lebontod ezekre a lépésekre (nem feltétlenül mindig ebben a sorrendben).
- Kutatás
- Vázlat
- Vázlat kibővítése
- Átírni és befejezni a posztot
- Főcím
- SEO ellenőrzés
- Végleges szerkesztés, javítás
- Kiemelt kép és a bejegyzés képeinek kiválasztása (opcionális)
Tehát, van egy ötleted, amihez írtál már 2-3 sort mikor lejegyezted és amihez szerencsés esetben van pár blogbejegyzés vagy írás is, aminek a linkjét szintén mellé csatoltad. Szánj rá egy órát arra, hogy ezeket elolvasd, értelmezd, és egy kicsit jegyzetelj. A következő nap, vagy következő alkalommal írj egy nagyon alap vázlatot a kutatás alapján. A következő egy órát szánd rá a vázlat kibővítésére, emeld ki melyek a fontos mondanivalók és részek a bejegyzésben. A következő nap további egy órája után elvileg egy jó erős váznak és némi szövegnek kész kell lennie. Ezután megírod a bejegyzést, megtervezed a képek helyét, ezeket esetenként kiválasztod vagy elkészíted. Még nem posztolsz, ugyanis ha nagyon profi szeretnél lenni ellenőrzöd SEO szempontból is, hogy a megfelelő keresőszavak, kifejezések megvannak-e a szövegben. Átolvasod az egészet, kijavítod helyesírásilag is, elhelyezed a képeket és ha még nincs, kitalálsz az egésznek egy figyelemfelkeltő címet.
Ez azért működik, mert megfelelő időt hagysz az egyes részfeladatokra és míg mást csinálsz az agyad addig is foglalkozik a problémával. A másik fontos dolog pedig, hogy az elkészült tartalom újra és újra olvasva, tovább bővítve sokkal inkább összeáll egésszé, mivel van idő és lehetőség a módosításokra.
Egy jó eszköz az ötletek gyűjtéséhez (és a feladatokhoz)
Lehet hogy már hallottál a Trello alkalmazásról, lehet hogy már használod is. Ha még nem, javaslom kezd el, mivel nagy segítség lehet a mindennapi munkában. A Trello tulajdonképpen egy online feladatszervező, amelyet a tévhitekkel ellentétben nem csak projekt menedzserek használhatnak. A weboldal és a hozzá tartozó applikáció segítségével könnyen és átlátható módon tudod rendszerezni a feladataidat, amelyekhez akár időpontokat vagy határidőket is tudsz társítani. A projekteket készítheted magad is, illetve más felhasználókat is hozzáadhatsz, így akár többen is dolgozhattok rajta. Emellett az adott feladathoz tartozó összes információt, fájlt, képet, linket egy helyen tudod kezelni. Ja és nem utolsó sorban egy rövid regisztráció után az ingyenes verzió is kitűnően használható a mindennapi munkában.
A felépítése nagyon egyszerű, a különféle feladatoknak hozz létre csoportokat, amelyekhez rendelhetsz táblákat. A táblákon belül létrehozhatsz úgynevezett feladatlistákat, amiket az úgynevezett kártyákkal lehet jelölni. Ezekhez a kártyákhoz azután részekre bonthatjuk a feladatokat. A kártyák címkézhetők, a címkék színezhetők és elnevezhetők, ezáltal a tábláink átláthatóbbá válnak. A feladatokhoz mellékleteket is tudunk csatolni, a kész kártyákat mozgathatjuk, másolhatjuk, belehelyezhetjük más munkafolyamtokba. Azt már nem is mondom mivel alap, hogy a Trello szinkronizál egymással a mobilon és a webes alkalmazáson.
Összegzés
Igazából ha mindezeket végiggondolod és kipróbálod rájöhetsz arra, hogy nincs titok. Van akinek ez nehezebben megy, van akinek könnyebben. Mint minden más az életben. Viszont egy kis rendszerességgel, tudatos munkával és az időközben kialakuló kis rutinnal könnyebb lesz jó tartalmakat előállítani. Kezeld ezt is egy feladatként, állj hozzá kellő nyitottsággal és minél kevesebb görcsöléssel. És ne felejtsd el, hogy ez egy hosszabb távon megtérülő befektetés.
A szerző: Gergely György
1998-ban kezdtem el komolyabban foglalkozni a számítástechnikával. Kezdetben hagyományos grafikát, reklám illetve dekoráció készítést, majd az informatika mellett webtervezést, animációt és programozást tanultam. 2004-től folyamatosan foglalkozom weboldalak tervezésével, programozásával, grafikai és arculattervezéssel, emellett digitális tananyag fejlesztésből diplomáztam. A web és a grafika ma már nem csak munka, hanem egyfajta szenvedély is lett. Emellett egyre többet foglalkozom új technológiák megismerésével, illetve multimédiás anyagok tervezésével és készítésével is.
Ha hasznosnak találtad ezt a bejegyzést, megköszönöm ha megosztod másokkal is!
The post Tartalomírás a céges blogon – Hogyan csináljam? first appeared on Webdesign tanfolyamok - D-kreatív Oktatás.]]>
Ha valaki olyan kérdezi, aki nem annyira járatos a webes iparágban, én is gyakran azt válaszolom, hogy webdesigner vagyok. Ez egy jó és általános kifejezés arra, amivel az ember foglalkozik, így a laikusok is könnyebben a helyére tudják ezt tenni.
A tervezés és a fejlesztés két eltérő foglalkozás, amelyek más-más feladatokat és más-más digitális készségeket követelnek meg. Arra a kérdésre, hogy: – A tervező és a fejlesztő nem ugyanazt csinálja? – mégsem lehet egyértelműen nem a válasz. Mégpedig azért, mert bár eltérő feladatok tartoznak az egyik vagy a másik területhez, a határok ma már sokszor elmosódnak. A másik pedig az, hogy nem feltétlenül kell csak az egyik vagy a másik mellett dönteni, pusztán csak a tévhitekre hagyatkozva. Mielőtt azonban megszabadulnánk a kialakult sztereotípiáktól, nézzük meg mi a hivatalos.
Webdesigner
A webdesigner az az alak, aki egy ötletet vagy akár egy történetet kidolgozva, elmesélve, elkészíti a weboldal vizuális tervét. Teszi ezt úgy, hogy a látvány mellett ügyel az úgynevezett felhasználói élmény (UX) kialakítására is. Odafigyel arra, hogy az oldal könnyen használható, egyértelmű felépítésű és emellett a használójának szórakoztató is legyen. Kialakítja az arculati elemeket, mivel az arculat sokszor az új oldallal együtt változik, vagy még nincs is meg. Ezzel együtt természetesen az ehhez szükséges nyomdai anyagokat is elkészíti. Reklámokat tervez. Bannereket, hirdetési kampányok anyagait, hírleveleket készít, mivel minden az értékesítésről szól. A munkája során tanulmányozza és követi a trendeket, használja a különféle tervezési elveket és tervezési struktúrákat. Képes megcsinálni az alap sitebuild feladatokat is, mivel ért a HTML/CSS programozáshoz.
Amikhez jó, ha ért egy webdesigner:
- Grafikai szoftverek használata mint pl. az Adobe Photoshop, az Illustrator vagy az Affinity Photo és Designer
- vektorgrafika, logó és arculattervezés, nyomdai előkészítés
- Színelmélet
- Tipográfia
- Weboldal tervezési elvek
- Felhasználói élmény (UX) tervezés
- A legújabb tervezési trendek.
- Alap sitebuild (HTML/CSS)
- Marketing
Webfejlesztő
A webfejlesztő elsődleges feladata, hogy a webdesigner által megtervezett oldalt működő formába öntse, magyarul a vizuális terveket lekódolja. A fejlesztők két csoportba oszthatók Front-end és Back-end fejlesztőkre.
A Front-end fejlesztők a weboldal böngészőben megjelenő formáját készítik el a három fő webes programnyelvet használva, ezek a Hypertext Markup Language (HTML), a Cascading Style Sheets (CSS) és a JavaScript (JS). Ezekkel a nyelvekkel a fejlesztő egy teljes értékű webhelyet hozhat létre, amelynek minden funkciója működik. Ez tulajdonképpen az oldal szerkezetének a kialakítását, a képek beillesztését, a különböző típusú tipográfia és betűtípus családok alkalmazását, az esetleges animációk végrehajtását, az oldalak kapcsolatának kialakítását jelenti.
A Back-end fejlesztők azok, akik elkészítik a weboldalak azon részét, amelyek a kiszolgáló adatait és kéréseit kezelik. A weboldal általában back-end szolgáltatásokat igényel, ha dinamikus adatokat használ. Ez azt jelenti, hogy ha a felhasználók személyes adatokat, pl. egy Felhasználói Fiók létrehozásához szükséges adatokat tartalmazó űrlapot küldtek el, vagy egy bejegyzést hoztak létre a blogoldalra, akkor az ilyen adatok kezeléséhez és feldolgozásához általában adatbázisra is szükség van. A szerveren levő adatbázissal a kapcsolatot speciális, úgynevezett szerver oldali programnyelvekkel lehet létesíteni. Ilyenek pl. a PHP vagy az ASP.NET. Az adatbázisok lekérdezéseit, adatainak feldolgozását pedig a MySQL nyelv használatával lehet elvégezni. A Back-end folyamatokat tehát általában az úgynevezett magasabb szintű programnyelvekkel lehet működésre bírni
Egy webfejlesztő néhány feladata:
Front-end-fejlesztő
- A tényleges webes felület felépítése, amelyen keresztül a felhasználó használhatja a webhelyet.
- Alap programnyelvek ismerete (HTML/CSS/JavaScript)
- Verziókezelő eszközök használata (Git/GitHub) Ez segít visszalépni a projekt egy korábbi, “megszakadt” verziójához, ha erre szükség van.
- A különféle webes keretrendszerek és a JavaScript könyvtárak használata
- Az különféle interaktív funkciók kialakítása a back-end fejlesztőknek
Back-end-fejlesztő
- A honlap háttérben futó folyamatainak létrehozása olyan nyelvek használatával, mint pl. a PHP és a MySQL.
- Webes alkalmazások létrehozása
- Adatbázis kezelés ismerete
- Verziókezelő eszközök használata (Git/GitHub)
Ezek alapján elég jól elkülöníthető és különböző feladatok tartoznak a tervezés és a fejlesztés területéhez. Ám míg az egyes webes szakemberek szakosodnak, vagy bizonyos területekre sokkal jobban koncentrálnak, sokan elmossák a különböző területek közötti határvonalakat és a másik terület munkafolyamatait is képesek elvégezni a munkájuk során. Lehet, hogy a legtöbbet a vizuális tervekkel dolgoznak a különféle grafikai programokat használva, de ismerik a kódolás alapjait is, és minden nehézség nélkül létre tudnak hozni egy működő oldalt. Vagy éppen masszív tudással rendelkeznek a Front-end fejlesztésben, de simán elkészítenek egy webtervet, mivel ismerik a grafikai részt és a tervezési elvekkel is tisztában vannak.
Ez a kereszt tudás nagyon hasznos lehet, mivel ez nem csak piacképesebbé teheti az adott szakembert, de az a vizuális tervező, aki megérti, hogyan készülnek a weboldalak, jobban fel tudja ezt használni a tervezés során is. Hasonlóképpen egy olyan webfejlesztő, aki ismeri a tervezés alapjait és a vizuális kommunikációt, intelligens döntéseket hozhat a projekt kialakítása és tervezése folyamán is. Az ilyen szakembereket Full-stack fejlesztőknek, vagy viccesen Unikornisoknak hívják.
Hogyan legyél Unikornis?
A Full-stack fejlesztők azok, akik jól ismerik a fent említett fejlesztési területeket. Ez azt jelenti, hogy ha ilyenné akarsz válni, képesnek kell lenned felépíteni egy weboldalt a semmiből. Megvizsgálni, majd elkészíteni a teljes tervezést, a háttéranyagok feldolgozásától egészen a teljes webhely elkészítéséig, a háttérfolyamatok programozását is beleértve. Alapvető ismeretekkel kell rendelkezned a tervezés és a felhasználói szokások terén, ismerned és használnod kell az alap programozási technológiákat. Ez egyébként nem jelenti azt, hogy szakértőnek kell lenned az összes programnyelvben. Ma már nagyon nehéz szakértővé válni, ugyanúgy, ahogy nem lehet csak egy nyelvet használni szakértő szinten, mivel ez is kevés. Az alap technikák és nyelvek mindennaposak, a többi technológia viszont nagyon gyorsan változik, így ezekkel nehéz lépést tartani. Tanuld meg az alapokat és ha a tervezésben vagy pl. a Font-end fejlesztésben már jó a tudásod, fejleszd az ismereteidet a magasabb szintű programnyelvekben is.
Felejtsd el a sztereotípiákat
Nézzünk meg néhány olyan tévhitet, amely sok esetben előkerül a különböző területek kapcsán.
1. Programozni tanulni nehezebb, mint tervezést tanulni
Van aki úgy gondolja, mivel a fejlesztés magában foglalja a magasabb szintű programozást is, sokkal nehezebb tanulni, mint a tervezést. Mások a tervezést nehezebbnek érzik, mivel úgy vélik, hogy ez több veleszületett (nem tanult) képességet, pl. kreativitást igényel.
Valójában ha a semmiből indulsz, minden új készség elsajátítása kihívás lesz. A webfejlesztés és a webes tervezés természeténél fogva nem kevés kihívást jelent majd, de ezt csak az erősségeid és gyengeségeid határozzák meg. Hogy ezen a területen mit érsz el és meddig jutsz, az csak a saját elhatározásod és hozzáállásod függvénye.
2. A tervezőknek nem kell kódolni
Éppen ellenkezőleg, a webes tervezők HTML és CSS kódot írnak. És néhányan még a CSS előfeldolgozókat is használják, mint a Sass vagy a LESS, vagy éppen JavaScript kódokat is írnak. Vannak olyan tervezők, akik nem kódolnak, ilyenek pl. akik szakosodva nyomdai előkészítéssel, vagy csak grafikai tervezéssel foglalkoznak. A legtöbb Webes tervező azonban ma már a HTML és a CSS használatával át is alakítja a terveit működő prototípusokká.
3. A fejlesztők jobban keresnek mint a tervezők
Tény, hogy a webprogramozók és általában a szoftverfejlesztők jól keresnek. Azonban azt, hogy ezt a szintet elérd mindenképpen kell néhány év tapasztalat, mivel kezdő fejlesztőként nem lesz egyből kiugróan magas a fizetésed. Viszont szerintem csak tervezéssel ma már elég nehéz boldogulni. Igaz egy jó tervező egy nagyobb cégnél jól kereshet, de az elvárások is egyre inkább nőnek a webes szakemberekkel szemben is. Ha saját vállalkozásban gondolkozol, akkor pedig nincs is nagyon más választásod, mint minél képzettebbé válni.
És egy kis útmutató a végére, milyen digitális készségekkel kell rendelkezned a különféle területeken.
A szerző: Gergely György
1998-ban kezdtem el komolyabban foglalkozni a számítástechnikával. Kezdetben hagyományos grafikát, reklám illetve dekoráció készítést, majd az informatika mellett webtervezést, animációt és programozást tanultam. 2004-től folyamatosan foglalkozom weboldalak tervezésével, programozásával, grafikai és arculattervezéssel, emellett digitális tananyag fejlesztésből diplomáztam. A web és a grafika ma már nem csak munka, hanem egyfajta szenvedély is lett. Emellett egyre többet foglalkozom új technológiák megismerésével, illetve multimédiás anyagok tervezésével és készítésével is.
Ha hasznosnak találtad ezt a bejegyzést, megköszönöm ha megosztod másokkal is!
The post Webdesign vagy webfejlesztés. Melyiket válasszam? first appeared on Webdesign tanfolyamok - D-kreatív Oktatás.]]>
Régebben nem a hatékonyság volt az elsődleges szempont. Elég volt, hogy az oldal legyen egyedi, legyen más mint a versenytársaké. Ezt a felhasználói szokások és igények is alátámasztották, jónak számított az oldal, ha volt valami egyedi funkciója, valami amit megjegyeztek, amitől “több” volt. Az ilyen oldalaknál a megjelenés volt az elsődleges szempont és érdekes módon ma is találni jócskán ilyen oldalakat. Itt nem számít a reszponzivitás, vagy a használhatóság, egy cél van csak a jó kinézet.
Azt is be kell látnunk, hogy a trendek nagyon gyorsan változnak. Mint ahogy változnak és fejlődnek a webes technológiák is, ami magával hozza a felhasználói szokások és a felhasználói igények változását is. Élesedik a verseny, most is meg kell különböztetnünk magunkat a versenytársaktól, most is ki kell tűnni valamivel és sokan ennek az egyetlen eszközeként ma is a design-t tartják az elsődleges eszköznek.
Pedig egy jól megtervezett weboldal sokkal többet kínál, mint a vizualitás. Segít, hogy az emberek megismerjék a terméket, a vállalatot, vagy megértsék a szolgáltatást. Elősegíti a márkaépítést, amely magába foglalja a képeket, a szövegeket, a weboldal minden elemét és az ezek közötti kölcsönhatásokat. Ugyanis a webhely minden egyes elemének egy meghatározott cél felé kell haladnia.
Első lépés: a cél meghatározása
Ebben a kezdeti szakaszban a tervezőnek meg kell határoznia a weboldal végleges célját. Általában szoros együttműködésben az ügyféllel és a tervezés legelső lépéseként, nem pedig a második harmadik vázlatterv és megbeszélés után. Ez ugyanúgy igaz egy új oldal készítésekor, vagy egy meglévő redesign-ja esetén. Minden esetben a tervnek kell alátámasztania a meghatározott célt. Az nem jó stratégia, hogy készítesz egy oldalt és reméled, hogy az majd megfelel a meghatározott céloknak.
Meglepő módon találkozni fogsz olyan ügyfelekkel is, akik nem fogják érteni azt a kérdést, hogy mi a cél? Sok ember van, aki nem gondol erre és az a válasza, hogy én csak egy oldalt szeretnék. Ha ez a helyzet, akkor főleg elengedhetetlen, hogy elindítsd vele ezt a folyamatot.
A következő kérdésekre kell megtalálni a választ:
- Kié az adott webhely és mit képvisel?
- Mit kaphatnak a látogatók az oldalon?
- Mi a weboldal elsődleges célja? Az információ átadás, az értékesítés vagy a szórakoztatás?
- A weboldal saját egyedi brand-et képvisel, vagy egy szélesebb branding-stratégia része?
- Kik a versenytársak és mi az, amiben az oldal mást nyújt?
Ez azért ilyen fontos, mert ha egy kérdés is megválaszolatlanul marad, az egész tervezési munkát elviheti rossz irányba. Csak a pontos célok ismeretében lehet eldönteni, mit szeretnénk kommunikálni a tartalommal, milyen cselekvésre ösztönző elemeket használjunk, illetve milyen eszközökkel vezessük a látogatókat az oldalon. Ezzel kialakíthatók azok a fókuszpontok, amelyeket követve tervezhetünk.
a Slack oldalán egyértelmű a cél, amelyre az egész oldal kialakítása épül
Kommunikálj az ügyféllel
Ne csak a határidőkről, az árról, illetve a lehetőségekről beszélgess. A megoldandó problémák azonosítása és a megfelelő megoldások megtalálása érdekében kommunikálni kell az ügyféllel és a többi érdekelt féllel is. Ennek során lehet feltárni, hogy mi működik a jelenlegi weboldalon és mi nem, illetve hogy mit szeretnének, mit gondolnak az új webhelyről. Lehet hogy a tartalom nagyon jó, de a használhatóság csapnivaló. Vagy éppen a regisztráció és a fizetési folyamat nehézkes, ezért veszítenek sok vásárlót. Meg kell ismerned, hogy az ügyfelek mit tartanak fontosnak és mivel valószínű vannak visszajelzéseik is, így elképzeléseik is vannak, mit akarnak mindenképpen megváltoztatni.
Ismertesd a problémákat és keresd meg rájuk a megfelelő megoldásokat
Gyakran az ügyfelek teljes mértékben megértik a problémákat és az erre tett javaslatokat is elfogadják. Máskor viszont nehezen értik meg a problémákat, és csak az új oldal teljesítési mutatói a fontosak. Ezért neked is el kell végezni az elemzést és összegezni kell a tapasztalataidat. Feltárni a hibás részeket, végig elemezni az egyes folyamatokat és feljegyezni ezeket. A mi feladatunk, hogy meghatározzuk a hiányosságokat és egy optimális megoldási lehetőséget, vagy egy komplett stratégiát javasoljunk.
Ismerd meg a célközönséget is
A közönség elérése mindig az egyik legfontosabb cél. Minden webhely a látogatókkal vagy az ügyfelekkel szeretné összekapcsolni az üzletét vagy a termékét. Mi a leghatékonyabb módja, hogy létrehozd ezt a kapcsolatot? Ha pontosan ismered a célközönséget. Gyakori válasz erre a kérdésre az alábbi.
-Kinek szeretnél értékesíteni?
-Mindenkinek.
Pedig ez elég súlyos hiba. Nemcsak maga az oldal céljának és fő üzenetének meghatározása nem lesz megfelelő, de marketing szempontból is kidobott pénz mindenkinek hirdetni és azt gondolni, hogy ez több vevőt eredményez. A célközönség ismerete végigvezet az egész tervezési folyamaton és egyszerűsíti a döntések meghozatalát. Egyértelmű, hogy más tervezési szempontok érvényesek egy időseknek szóló oldal esetében, mintha mondjuk ha fiatal szörfösöknek értékesítesz olcsó utakat. Ez egyébként arra is rákényszerít, hogy válaszolj egy egyszerű kérdésre:
Miért hasznos, illetve hasznos-e ez a közönség számára?
Ha ismered a célközönséget, olyan kérdésekre is választ kaphatsz, hogy:
- Milyen egyéb termékeket és szolgáltatásokat vásárolnak?
- Milyen egyéb oldalakat látogatnak meg?
- Általában hol hagyják el az oldalt?
Mindezek ismerete már sokkal inkább segít megtervezni a fogyasztói tapasztalatokkal összhangban lévő és az esetleges értékesítési folyamatokat jól kihasználó design-t.
Határozd meg a sikereket is
Anélkül, hogy meghatároznád mit szeretnél elérni, nem fogod tudni azt sem, hogy elérted-e. Ezek közül néhány egyértelműbb, és látványosabb mint a többi. Siker ugyanis nem csak az eladási számok vagy a bevétel növekedése lehet. A kitűzött célok elérése között ugyanúgy helyet kaphat egy jobb keresési eredmény a Google-ban, a márkaismertség növekedése, vagy a feliratkozók és ezáltal a lehetséges vásárlók körének növelése is. És míg az egyik számszerűleg is könnyen mérhető, a márkaismertséget mondjuk nem minden esetben lehet konkrétan meghatározni.
Ezeket a mérföldköveket megint csak az ügyféllel egyeztetve alakítsd ki. Így ha mindenki aki részt vesz a projektben tudja a szerepét, akkor a munka hatásait is mindenki látni és érteni fogja. Egyre figyelj, irreális vállalást soha ne tegyél. Ne ígérj teljesíthetetlen dolgokat, mert ez az ügyfélnek is neked is káros lesz a jövőben.
A szerző: Gergely György
1998-ban kezdtem el komolyabban foglalkozni a számítástechnikával. Kezdetben hagyományos grafikát, reklám illetve dekoráció készítést, majd az informatika mellett webtervezést, animációt és programozást tanultam. 2004-től folyamatosan foglalkozom weboldalak tervezésével, programozásával, grafikai és arculattervezéssel, emellett digitális tananyag fejlesztésből diplomáztam. A web és a grafika ma már nem csak munka, hanem egyfajta szenvedély is lett. Emellett egyre többet foglalkozom új technológiák megismerésével, illetve multimédiás anyagok tervezésével és készítésével is.
Ha hasznosnak találtad ezt a bejegyzést, megköszönöm ha megosztod másokkal is!
The post A webes tervezési folyamat első és legfontosabb lépése first appeared on Webdesign tanfolyamok - D-kreatív Oktatás.]]>
Ideális esetben a látogató szépen sorról-sorra végigolvas minden elérhető információt az oldalon. Ám ez sohasem valósul meg. A valóságban pár pillanat alatt felméri, hogy az adott tartalom érdekes vagy értékes- e a számára és olvasni kezd vagy elkattint.
Bizonyára te is voltál már úgy, hogy egy oldalra tévedve a szép grafika és a jó színek ellenére úgy érezted valami még hiányzik, valamitől nem teljes és egységes az egész. Valamitől a mondanivaló nincs összhangban a megjelenéssel. Erre nyújt megoldást a helyes vizuális hierarchia kialakítása.
Design = Kommunikáció
Alapvetően a tervezés a vizuális kommunikációval foglalkozik. Ahhoz, hogy hatékony tervező legyél, képesnek kell lenned arra, hogy egyértelműen közöld az ötleteidet így megszerezve az emberek figyelmét. Az oldalad látogatói azonban nem mindig hajlanak erre, ha hatalmas adatblokkot adsz nekik valószínű, hogy sokan nem fogják elolvasni. Miért? Mert a legtöbb ember a természeténél fogva vizuálisan gondolkodik, nem pedig adatfeldolgozóként.
Emiatt fontos megérteni, hogy hogyan látjuk a dolgokat. Az emberek nagy része a vizuális információ megszerzése és egyenletes feldolgozása helyett egy pillanat alatt felméri, amit a “vizuális kapcsolatok” tekintetében lát. Magyarul mi az, amit először észrevesz, mi az amit utána, majd amit következőnek megnéz.
A tervezésben ezért használunk olyan alapelveket, amelyek segítségével az olvasó figyelmét a legfontosabb mondanivalóra irányíthatjuk, vagy amelyek segítségével egyfajta utat bejárva vezethetjük a figyelmét.
Tervezési minták
A különféle nemzetek közül a legtöbben felülről lefelé és balról jobbra olvasnak. Ezt kihasználva célszerű lehet valamilyen elrendezési mintát követve elhelyezni a tartalmi elemeket az oldalon is. Ezzel kihasználható az olvasóknak az a szokása, ahogy szkennelik az oldalt és elérhető az olvasói figyelem irányítása.
F minták
Az F-minták leggyakrabban a hagyományos szöveges oldalakra, magazin stílusú oldalakra, cikkekre vagy blogbejegyzésekre használhatóak. Az olvasó itt leellenőrzi az oldal bal felső részét, érdekes kulcsszavakat keres a címsorokban, vagy a különféle témaindító mondatokban, majd jobbra olvas, amikor valami érdekeset talál. Ezután visszatér a bal oldalra, majd lejjebb ugorva megint beleolvas valamibe. Az eredmény úgy néz ki, mint egy F betű.
Ennek a mintának a használatát a Nielsen Norman Group híres kutatási anyaga is igazolta, amellyel nagyon sok helyen találkozni egyébként, mint fő hivatkozási alappal. Ennek a lényege, hogy egy hőtérképes elemzéssel vizsgálták az olvasási szokásokat, majd ezt elemezve kapták meg azokat az adatokat, amelyek megmutatták a leggyakoribb olvasási mintákat.
Hogyan tudod ezt használni? Igazítsd a fontos információkat balra, és használj rövid, kiemelt fejléceket és egyéb figyelemfelkeltő elemeket. A legfontosabb infókat pedig mindig az oldal bal felső részében helyezd el.
Z minták
A Z-mintákat általában olyan oldalakra alkalmazzuk, amelyek valamilyen ajánlatot jelenítenek meg. Például hirdetésekre vagy olyan webhelyekre, ahol az információ nem feltétlenül jelenik meg a blokk bekezdésében. Ezeknél az oldalaknál általában kevesebb a szöveg és nagyobb hangsúlyt kapnak az egyéb vizuális elemek.
Az olvasó szeme ilyenkor először az oldal tetején pásztáz végig, ahol fontos információk találhatók, majd átlósan átmegy az ellenkező sarokba, és ugyanazt csinálja az oldal alsó részén. Ilyenkor az olvasás iránya egy Z betűt formáz, aminek a végén célszerű valamilyen cselekvésre ösztönző blokkot, pl. feliratkozó formot, ajánlatot vagy gombot elhelyezni. (CTA)
Eszközök a vizuális hierarchia kialakítására
Méret
Azok a tárgyak, amelyek nagyobbak, nagyobb figyelmet is kapnak általában. A méret hierarchikus eszközként való felhasználása az egyik leghatékonyabb módja annak, hogy a néző szemét az adott oldal egy részére irányítsa. Ez azon alapul, hogy a nagy dolgok az emberek számára mindig fontosabbak, mint a kicsik, ezért a felhasználók figyelme automatikusan a nagyméretű szavakra és a nagyobb képekre irányul először.
Használd ki ezt úgy, hogy a legfontosabb dolgok legyenek a legnagyobbak az oldalon, míg a kevésbé fontosak kisebb méretűek. Ez a tendencia valójában elég erős lehet ahhoz, hogy felülbírálja a tervezési mintákat is, ezt vedd figyelembe.
Szín
A színeknek jelentős hatásuk van az érzékelésre, mivel megvan a maguk hierarchiája is. Általában amellett, hogy milyen érzéseket váltanak ki úgy is csoportosítjuk őket, hogy milyen erősen hatnak az emberekre. A weboldal egy adott elemének kiemelt, kontrasztos színei szinte igénylik a figyelmet. Ezeket használjuk általában kiemelésekre, gombokhoz, vagy hivatkozásokhoz. Vannak olyan kevésbé erőteljes színek is, amelyek viszont jobban működnek háttérként, és helyes megválasztásukkal még inkább erősíthetjük az erősebb színek hatásait.
Kontraszt
A kontraszt szintén nagyon fontos vizuális elem. A jelentőségét egy dokumentumon belül sokszor nem használjuk ki, pedig nagyon fontos lenne. Kontraszt akkor van két elem között, ha elég nagy közöttük az eltérés grafikailag. A világos háttérszíntől a sötét háttérszínig történő változtatás gyorsan elkülönítheti az oldal tartalmi részeit. Ugyanígy kontrasztot alkot, ha eltérő méretű és stílusú betűtípusokat használunk. A megfelelő kontraszt révén a felhasználók könnyen el tudják különíteni egymástól az egyes tartalmi elemeket.
Kontrasztot kialakíthatsz színekkel, különböző méretetekkel és stílusok használatával is. A használatakor ügyelj arra, hogy próbáld meg egyensúlyban tartani, így az egyik tartalmi elem nem fogja elnyomni a másikat.
Negatív tér
Egy oldalon mindig több különböző elem is helyet kap. A figyelem felhívásának egyik jó módja lehet az, hogy a tartalomnak elegendő helyet biztosítunk. Ha pl. egy gomb körül jelentős üres hely marad, vagy egy szövegblokk jól körülhatárolható a hasábtörés és a hasábok közötti elválasztó hely miatt, ezek az elemek könnyebben láthatók lesznek az olvasók számára.
A negatív tér (whitespace) azt jelenti, hogy megfelelő teret kell hagyni az elemek között. Sokan nem úgy gondolnak erre, mint a weboldal egy elemére, pedig ez egy hatékony tervezési eszköz a megfelelő tartalom kialakításához. Ezen kívül nemcsak az olvashatóságot teszi sokkal könnyebbé, hanem az úgynevezett kognitív terhelést is csökkenti.
Közelség
A tárgyakat minták felismerésével azonosítjuk, mert így gyorsabban értelmezni tudjuk az agyunkba jutó ingereket. A szemünk és az agyunk akkor is mintákat akar felfedezni, ha valójában nincsenek is ott. Ezért van az, hogy a képen valószínűleg négy pár, és nem 8 db téglalapot látsz. A téglalapok közötti üres terület és a téglalapok közelsége miatt két-két téglapot összetartozónak érzékelsz.
Az egyes elemek közelségére ezért kell különösen figyelni, hiszen hajlamosak vagyunk arra, hogy a közel levő vizuális elemeket csoportokba rendezzük. A tervezésnél ezért használjuk a távolságot olyan eszközként, amely segít a különféle tartalmi részeket kategóriákra bontani. Ha a weboldalon az elemeket ennek megfelelően helyezed el, akkor a felhasználók könnyen össze tudják majd kapcsolni őket.
Ismétlés
Az ismétlés egyfajta relatív jelentést tulajdonít az elemeknek. Pl. ha minden bekezdés szöveg szürke, akkor a felhasználó ha egy új szürke szövegblokkot lát feltételezheti, hogy ez egy másik alapvető bekezdés. Ez amiatt van így, mivel a felhasználók ha bizonyos elemek hasonlóan néznek ki, akkor automatikusan egy csoportba tartozónak tekintik őket. Az ismétlés segít a dokumentum egyes részeinek elkülönítésében, ezért mindig egy egységes szabályrendszert alakítsunk ki a létrehozásuknál, használatuknál. Ezzel elősegíthetjük a tartalmi elemek közötti navigációt és a fontosabb információk hatékony átadásán túl a felhasználói élményt is javíthatjuk.
Következtetés
Az egyes építőelemek használatának ismerete fontos követelmény minden webes tervező számára. Tudni kell az egyes elveket használni, illetve azt is, mikor mit kell használni. A cél az, hogy jobban tudatában légy annak, hogyan használhatod a vizuális hierarchia fogalmát az elemek kiemelésének kézben tartására, és hogyan irányítsd az olvasókat az oldalon belül abban az irányban, ahogy eltervezted. Ez nem csak a tartalom megértésének szempontjából fontos, de egy landing oldalon akár az értékesítési folyamat sikeressége is múlhat ezen.
A szerző: Gergely György
1998-ban kezdtem el komolyabban foglalkozni a számítástechnikával. Kezdetben hagyományos grafikát, reklám illetve dekoráció készítést, majd az informatika mellett webtervezést, animációt és programozást tanultam. 2004-től folyamatosan foglalkozom weboldalak tervezésével, programozásával, grafikai és arculattervezéssel, emellett digitális tananyag fejlesztésből diplomáztam. A web és a grafika ma már nem csak munka, hanem egyfajta szenvedély is lett. Emellett egyre többet foglalkozom új technológiák megismerésével, illetve multimédiás anyagok tervezésével és készítésével is.
Ha hasznosnak találtad ezt a bejegyzést, megköszönöm ha megosztod másokkal is!
The post A vizuális hierarchia használata a webes tervezésben first appeared on Webdesign tanfolyamok - D-kreatív Oktatás.]]>
A weboldalak esetében a logót leggyakrabban a bal felső sarokban találod meg. Az említett felmérés szerint ez több okból is kedvező a felhasználói élményt figyelembe véve.
Elsősorban tájékoztatja a felhasználót arról, hogy éppen hol jár, mivel a logó segít abban, hogy mindig pontosan tudjuk melyik oldalon vagyunk. Emellett segít a márka megerősítésben is. Minél többször látja a látogató a logót, annál nagyobb valószínűséggel jegyzi meg. Így megjegyzi a cégedet is, ez pedig leggyakrabban azzal jár együtt, hogy a márkaelismerés miatt jobban használja a szolgáltatásaidat, vagy vásárolja a termékeidet.
A harmadik ilyen jellemző pedig az, hogy mindenki hozzászokott már a kattintható logókhoz, amelynek segítségével könnyen visszatérhetünk a főoldalra, bárhol is legyünk éppen az oldalon.
Ez tulajdonképpen annyira megszokott és ismerős a felhasználók számára, hogy már egy kis eltérés is lényegesen leronthatja a felhasználói élményt. Ennek ellenére egyre inkább találkozni középre igazított logókkal, ami főként a reszponzív (mobilbarát) oldalak elterjedéséből adódik. Mobil eszközökön ebben az esetben valamelyik oldalt a menü ikon foglalja el, a logó pedig középre igazodik. Kis kijelzők esetében ez nem gond, viszont a rendes monitorok esetében ez a menü megjelenítés és elrendezés már nem indokolt.
A Library Hotel oldala 1024 x 768 pixeles felbontáson.
A középre igazított logó a tervezés szempontjából lehet hogy kényelmes megoldás, viszont a kutatás szerint több pontban is rosszabbul teljesített. Megvizsgálták több balra és középre igazított logójú oldal esetében ugyanazt az interakciót, ahol egy adott termék kiválasztása után vissza kellett lépni a főoldalra. A vizsgálat fő célja az volt, hogy a felhasználók a főoldalra történő visszalépést egy kattintással meg tudták-e tenni.
A balra igazított logónál minden könnyebb
Azoknál az oldalaknál, ahol a logó balra volt igazítva, a felhasználók többsége egy kattintással vissza tudott lépni a főoldalra, Az eredmény egész pontosan hatszoros volt a középre igazított logóhoz képest.
A felhasználók 24 %-a nem tudott egy kattintással visszamenni a főoldalra
a középre igazított logó esetében (Forrás NNGroup)
A felmérés szerint a középre igazított logó esetében több felhasználónak is gondot jelentett a főoldalra navigálás, és ennek a fő oka a logó elhelyezése volt. Ez nagyon lényeges kérdés egyébként, hiszen gyakran kell visszatérnünk a nyitó oldalra, hogy egy új interakciót tudjunk elkezdeni, vagy egy új témát tudjunk elindítani. Ez a balra igazított logó esetében majdnem mindenkinek sikerült is.
Az is látható egyébként, hogy bár a balra igazított logó esetében sokkal több embernek sikerült az egy kattintásos visszalépés, itt is adódtak gondok néhány esetben. Ez amiatt van, mivel még mindig nem ismeri mindenki a kattintható logó lehetőségét. Ezért nem árt egy Főoldal menüpontot elhelyezni a főmenüben, még akkor is ha sokan ezt a menüpontot feleslegesnek tartják a kattintható logók miatt.
És mi van a márkafelismeréssel?
Egy kapcsolódó felmérésben arra keresték a választ, hogy hogyan befolyásolja a márkafelismerést a logó elhelyezése. A 128 résztvevővel elvégzett felmérés már nem hozott lényegi különbségeket abból a szempontból, hogy az adott oldalakon hol helyezkedett el a logó. Itt inkább a logók kontrasztossága vagy olvashatósága volt, ami befolyásolta a végeredményt.
Mi a tanulság?
A logó középre helyezése rontja az oldal használhatóságát. Ez pedig problémát jelent. Talán mert a megszokás ezt eredményezi, és a megszokott dolgoktól való kismértékű eltérés is gondolkodásra kényszeríti a felhasználókat az oldal használatát illetően. Ez pedig növeli a kognitív terhelést, és ellentétben áll a webergonómia első és legfontosabb szabályával is, miszerint
Ne kelljen gondolkodni. Amikor ránézünk egy weboldalra, az legyen egyértelmű, evidens, „önmagyarázó”. Magyarul ha a felhasználónak erőfeszítést jelent egy feladat elvégzése, akkor van még mit javítani.
Az oldal navigációja mellett a másik nagyon fontos funkció egy oldalon az adott oldal azonosítása, vagy más néven a márkafelismerés. Hogy a látogató be tudja azonosítani milyen oldalon jár, mit kínál az adott oldal, illetve mivel foglalkozik. Valamint hogy emlékezzen is erre, mivel csak így lehet megfelelően tervezni, célokat elérni az adott oldallal.
A tanulság tehát az, hogy ha csak nem feltétlenül szükséges, ne térj el megszokott dolgoktól, helyezd el a logót az oldal bal felső részén. Ha nagyon muszáj, akkor pedig középre, viszont semmiképpen se a jobb oldalra, mivel ez még inkább ront a felhasználói élményen.
A szerző: Gergely György
1998-ban kezdtem el komolyabban foglalkozni a számítástechnikával. Kezdetben hagyományos grafikát, reklám illetve dekoráció készítést, majd az informatika mellett webtervezést, animációt és programozást tanultam. 2004-től folyamatosan foglalkozom weboldalak tervezésével, programozásával, grafikai és arculattervezéssel, emellett digitális tananyag fejlesztésből diplomáztam. A web és a grafika ma már nem csak munka, hanem egyfajta szenvedély is lett. Emellett egyre többet foglalkozom új technológiák megismerésével, illetve multimédiás anyagok tervezésével és készítésével is.
Ha hasznosnak találtad ezt a bejegyzést, megköszönöm ha megosztod másokkal is!
The post Hova helyezd a logót a weboldalon, balra vagy középre? first appeared on Webdesign tanfolyamok - D-kreatív Oktatás.]]>
Az olló eszközt az eszköztáron a radír csoport alatt találhatjuk. Segítségével görbéket bármelyik szerkesztőpontjuknál vagy bármelyik szegmensük mentén feloszthatjuk. A görbék felosztásakor ügyelni kell arra, hogy ha egy zárt görbét két nyitott görbévé szeretnénk felosztani, két helyen kell elmetszenünk, mert ha csak egyszer tesszük, akkor egy olyan görbét kapunk, amelyben csak egy szakadás van. A felosztott görbék mindegyike örökli az eredeti görbe beállításait, például a körvonal vastagságát vagy a kitöltőszínt.
A szerző: Gergely György
1998-ban kezdtem el komolyabban foglalkozni a számítástechnikával. Kezdetben hagyományos grafikát, reklám illetve dekoráció készítést, majd az informatika mellett webtervezést, animációt és programozást tanultam. 2004-től folyamatosan foglalkozom weboldalak tervezésével, programozásával, grafikai és arculattervezéssel, emellett digitális tananyag fejlesztésből diplomáztam. A web és a grafika ma már nem csak munka, hanem egyfajta szenvedély is lett. Emellett egyre többet foglalkozom új technológiák megismerésével, illetve multimédiás anyagok tervezésével és készítésével is.
Ha hasznosnak találtad ezt a bejegyzést, megköszönöm ha megosztod másokkal is!
The post A Scissors Tool használata 2 percben first appeared on Webdesign tanfolyamok - D-kreatív Oktatás.]]>
A szerző: Gergely György
1998-ban kezdtem el komolyabban foglalkozni a számítástechnikával. Kezdetben hagyományos grafikát, reklám illetve dekoráció készítést, majd az informatika mellett webtervezést, animációt és programozást tanultam. 2004-től folyamatosan foglalkozom weboldalak tervezésével, programozásával, grafikai és arculattervezéssel, emellett digitális tananyag fejlesztésből diplomáztam. A web és a grafika ma már nem csak munka, hanem egyfajta szenvedély is lett. Emellett egyre többet foglalkozom új technológiák megismerésével, illetve multimédiás anyagok tervezésével és készítésével is.
Ha hasznosnak találtad ezt a bejegyzést, megköszönöm ha megosztod másokkal is!
The post A Pathfinder panel használata first appeared on Webdesign tanfolyamok - D-kreatív Oktatás.]]>
Ez egy nagyon egyszerű, ennek ellenére egy nagyon látványos technika. Leginkább az olyan képek esetében működik amelyeknek a színei és a hátter is viszonylag homogének. Ebben az esetben viszont nagyon gyorsan és nagyon látványos átalakítás érhető el a kép színeiben.
The post Színek megváltoztatása a Korrekciós rétegek használatával first appeared on Webdesign tanfolyamok - D-kreatív Oktatás.]]>