Az erdő mélyén! Egy újabb célt sikerült elérni!

Ha rendszeresen követted a blogom ThemeForesttel kapcsolatos bejegyzéseit, akkor már tudod, hogy a történet eleje viszonylag régre nyúlik vissza. A tavalyi évben belevágtam egy HTML alapú sablon elkészítésébe, melynek az volt a célja hogy értékesítsem a ThemeForest nemzetközi piacterén. Az első próbálkozás sajnos zátonyra futott. Ellenben az első fenékre esés után felálltam, leporoltam a kudarc porát és belevágtam újra. Ezúttal sokkal átgondoltabban, lendületesebben, kitartóbban és mint ilyenkor lenni szokott meg is lett a pozitív eredménye. Bejutottam az erdő közepére. Sikerült!

Az újrakezdés első lépései

Az első próbálkozásnál nem is a technikai követelmények teljesítése volt a probléma, hanem a design egyedisége. Mivel a ThemeForestre éves szinten több 10 ezer sablon töltenek fel kategóriánként, így elég erős a mezőny. Ráadásul az évek során ez a mennyiségű sablon áradat kannibalizálná a piacát, így évről évre mindig szelektálnak az adminisztrátorok. Nagyjából 3500-4500 sablon aktív kategóriánként a piactéren. Lehát ebben a versenyben kell egyedinek és érdekesnek és egyben profinak lenni. Nem kis kihívás, de most bizonyítottam, hogy nem lehetetlen.

Az első lépések kutatómunkával kezdődtek. Körbenéztem, hogy milyen kategóriákban kell el sok sablon HTML és WordPress verzióban. Végül a portfólió, illetve a szolgáltatások kategóriákra esett a választásom.

Most következik a sablon megjelenésének kitalálása. Miután én nem vagyok szakképzett grafikus, így meg sem kíséreltem, hogy ezt magam találjam ki. Én elsősorban sitebuilder és back-end fejlesztőként funkcionálok. Kellett valaki, aki ért a vizuális varázsláshoz. Felkerestem néhány ThemeForesten kereskedő PSD sablon szerzőt és írtam nekik üzleti kapcsolat reményében. Természetesen ez sem ment zökkenőmentesen. Minden PSD sablon esetén megnéztem, hogy készült-e már belőle felépített verzió, ha nem, akkor volt érdemes írnom a szerzőnek. Nagyon sokan nem válaszoltak, vagy jelezték, hogy ők, vagy egy másik partner már készíti a HTML, vagy akár WordPress verziókat. Az első 10-15 levél után kezdett elhagyni a hitem, de azt mondtam magamnak itt nem adhatom fel, csak néhány órát kell még rászánnom és menni fog ez. Megközelítőleg 100 megkeresést küldtem el, amiből 3 megállapodás született. A most elkészült sablonom PSD-jének szerzője kiváló munkákat készít és már régebben is nagy vágyam volt, hogy vele dolgozhassak. Sikerült meggyőznöm őt, hogy adja el nekem a látványtervének jogait, hogy elkészíthessem belőle a HTML és WordPress verziókat. Ez egyedi árazás alapján történt. A sablon adatlapján kiírt kiterjesztett licensz árát ne tekintsd ilyenkor mérvadónak. Az csak arra vonatkozik, hogy ha megvetted a sablont, akkor másnak értékesítheted pénzért, de a szerző hozzájárulása nélkül a piactér adminisztrátorai nem fogják engedni a feltöltést. Tehát egy egyedi ár alapján kellett megegyeznünk. Ez a szerző lakhelyétől és ottani anyagi lehetőségeitől függően változik. Nagyjából 1000 és 2500 dollár közötti befektetéssel érdemes számolni verziónként. Van olyan megállapodási lehetőség is, hogy a PSD szerzőjét felveszed társszerzőként és az eladások után osztalékot fizetsz neki. (Mint grafikus számodra ez egy igen kedvező lehetőség lehet, ha esetleg PSD-ket készítenél a piactérre.) Hogy számodra melyik szimpatikusabb az már rád van bízva. Miután megtörtént a tranzakció kaptam a szerzőtől egy úgynevezett support ticketet, mellyel érvényesítette ezt az engedélyét számomra. Ezt a kódot kellett később beírni a sablon feltöltésekor. Ha találsz ilyen partnert, akkor mindenképp kérdezd meg tőle, hogy van-e még eladásra szánt sablonja. Sok esetben több felhasználói fiókból is értékesítenek és ilyenkor sok kincs a felszínre bukkanhat. Közvetlenebb is lesz a beszélgetés az első sikeres tranzakciót követően.

Amire figyelj PSD sablon vásárlásakor, mert én is megjártam vele!

Alaposan nézd át, hogy milyen sablonért adsz ki pénzt. Minden egyes részletét vizsgáld meg alaposan. Nekem fejlesztés közben merült fel, hogy a regisztráció, termék összehasonlító aloldal, illetve események eredményének pop-up alapú visszajelzései nincsenek benne a PSD-ben. De akadt olyan is, ahol mindössze egy főoldal volt csak elkészülve, de a főoldal menüpontjai alapján az ember várta volna, hogy van több látványterv is. Szóval erre mindenképp áldozz annyi időt, hogy rendesen körbejárd a dolgot.

Remek most már van egy látványtervünk, amibe nem köthetnek bele. Innentől már csak rajtunk múlik, hogy mi lesz belőle.

Hogyan tovább?

Első körben mindenképp a HTML verziót szerettem volna elkészíteni. Méghozzá a lehető legfrissebb technológiákkal. A szabványos HTML5 és CSS3 kód csak természetes volt. Mindemellé választottam a Bootstrap 3 CSS keretrendszert, mely a reszponzivitásért felelt és a Grunt és SASS fejlesztői eszközöket, melyek nagyobb projektek fejlesztésében hasznos segítség. Nagyjából 2 hónap munka volt a HTML sablon profi szintű felépítése, melyben olyan részletek is bekerültek, mint a Google térkép útvonaltervezője, vagy a Google microdata, más néven rich snippets adatok integrálása. A legérdekesebb kihívás talán az SVG alapú szögletes progressbar, jobb szó híján feldolgozás állapotát jelző animáció volt. Az érdekessége az volt, hogy négyzetlakú megoldást nem találtam. A sablonok felépítésekor engedélyezett már előre elkészített megoldások alkalmazása. Licensztől függően lehet őket alkalmazni, de erről majd egy kicsit később. Megpróbáltam kész megoldást találni az említett progressbar-ra, de sajnos eredménytelenül. A CodeCanyon-on csak kör alakú, illetve egyéb más alakzatok voltak, de olyan, ami nekem kellett sajnos nem volt. Egyedi fejlesztést kellett hozzá alkalmazni. Az ember elsőre nem is gondolná, de felhasználói szemmel, ami teljesen magától érthetőnek tűnik, sőt szinte fel se tűnik elsőre a különlegessége, az a fejlesztői oldalról már sokszor több órás fejtörést jelentenek. De megérte! Számos CSS animáció, funkció, vagy épp finomhangolás olyan feladat elé állított, amivel eddig még nem volt dolgom, de ez egyben csodás dolog is. Ebből tanul a legtöbbet az ember, így lehet a legjobban fejlődni és a sikerélmény mindig egy felemelő és önbizalmat erősítő érzés. Sose add fel, ezt az érzést neked is meg kell tapasztalnod!

Licensz kérdés

A sablon elkészítéséhez számos, főleg jQuery bővítményt használtam fel. Ennek zöme szabadon felhasználható és terjeszthető MIT licensz alá tartozó kiegészítő volt, de akadt GPLv3 elnevezésű is, mely egy kereskedelmi licensz. Ebben az esetben ki kellett fizetni a jogdíjat. Igyekeztem a költséghatékonyság miatt ilyen típusú bővítményből a legkevesebbet használni, előre megtervezve azt, hogy a későbbi WordPress változatban miket tudok majd felhasználni. Így végül csak az Isotope nevű bővítményhez kellett vásárolnom engedélyt, mely mindössze 25 dollárba került. Ha már régebb óta szemezel a ThemeForest sablonokkal, akkor bizonyára már feltűnt, hogy sok sablon használ a CodeCanyon-ról megvásárolható bővítményeket. Legnépszerűbb például a Slider Revolution, mely egy nagyon szépen kidolgozott és paraméterezhető képváltó. A szerző nem mellékesen szintén magyar származású. A legtöbb szerző, hogy jogtisztán értékesíthesse a sablonját a piactéren, megvette a slider adatlapján látható Extendeed elnevezésű licenszt, mely ad nekik erre jogosultságot. Természetesen minden feltöltött sablonhoz külön meg kell ezt vásárolni és társítani az ekkor kapott dokumentumot felöltéskor.

A képekre, videókra és hangfájlokra szintén érvényben van ez a korlátozás. Éppen ezért szokták jellemzően csak a bemutató oldalon alkalmazni ezeket az anyagokat, azonban a megvásárolt sablon már nem tartalmazza. A sablonom esetén is így történt. A bemutatóban látható képek, mind elhomályosítva vannak benne a megvásárolható verzióban. Egyfelől ez nagyon drága lenne a szerző számára, mert egyes képek akár több száz dollárt is érhetnek, másfelől pedig sok esetben értelmetlen is lenne, mivel az vásárló fél nyilván le fogja cserélni a képeket saját ízlése és igénye szerint. Természetesen a korrektség jegyében mindenképp érdemes kiírni az adatlapra, hogy a képeket tartalmazza-e a megvásárolható sablon, vagy sem.

Eljött feltöltés napja

Miután minden forráskód elkészült, több felbontáson, több böngészőben tesztelve lett a megjelenés, már csak a feltöltés volt hátra. Ez viszonylag egy egyszerű művelet, így ebben most nem mélyülnék el túlságosan. Egy korábbi cikkemben részletesen beszámoltam a folyamatról. Ami ezen a lépcsőn érdekes volt a borítókép, illetve az adatlap megszerkesztése volt. A borítóképbe igyekeztem minden részletet és egy szlogent belesűríteni. Ez nem volt egyszerű, mert a sablon alapvetően multifunkciós. Tartalmaz blogot, portfolió galériát, webáruházat, termékbemutatót. Tehát ezeket az előnyöket mind fel szerettem volna sorolni. Továbbá kellett egy ösztönző szlogen, ami a "For the creative aims" lett, vagyis a kreatív célokhoz szöveget kapta. Persze ennyi funkciót képekben sem volt egyszerű ábrázolni, így a sablon nevének is árulkodnia kellett a funkcionalitásról. Ezért kapta az AP68 - Creative Multi-Purpose HTML5 Template nevet. Tartalmaznia kellett a látványterv eredeti elnevezését, ami az AP68 volt. Tartalmazta a kategóriát, mely a Creative szó volt. Tartalmazta a Multi-Purpose kifejezést, mely a sokszínű felhasználhatóságra utal, ezt különben kedvelik a vásárlók is. Majd végül a HTML Template, mely a sablon fajtáját jelzi.

Ezt követően ki kellett találnom a leírást. Mivel az elit szerzők képeket is alkalmaztak, melyek szépen tudták illusztrálni a sablon funkcionalitásait, így én is emellett döntöttem, majd alá felsoroltam az érveket és előnyöket, hogy segítsem a vásárlóim döntését.

Az elbírálási időszak nagyjából 3 hét volt. Az első feltöltést követően visszautasították a sablont, de ettől nem kellett megijedni túlságosan. Az adminisztrátorok megnyugtattak a levelükben, hogy nincs semmi komoly probléma és szívesen fogadják a sablont újrafeltöltésre, amint az általuk felsorolt javításokat elvégzem. Apróságok voltak, és gondosan körülírták, hogy mi a hiba és adtak instrukciókat a javításhoz. Szóval nagyon segítőkészek voltak és a javítás nagyjából 2 órát vett igénybe. Miután újra feltöltöttem a sablont rá 2 órával már aktív volt a piactéren és várt a vásárlókra.

Az első eladások

Legnagyobb meglepetésemre a sablon hazai időszámítás szerint este 10 órakor került fel és fél órával rá megtörtént az első eladás. Nagyon boldog voltam. Majd jöttek sorban még. Összesen 5 vásárlás történt az első estén. Úgy érzem egy nagyon szép eredmény. Továbbá 10 pozitív hangvételű hozzászólást is kaptam. Egy része elégedett vásárlói visszajelzés volt, másik része pedig más szerzők véleménye és jókívánságai voltak. Sikerült!

Te ne kövesd el a hibámat!

Voltam olyan figyelmetlen és regisztrációkor nem töltöttem ki az adózási információkat. Ahhoz, hogy vásárolni tudj a piactéren ez nem szükséges, illetve alapvetően a sablon feltöltéséhez sem. Ezért elsőre nem is foglalkoztam vele. A feketeleves az első eladás után történt. Mi ez a halom levonás?! Hol van az áhított 50% jutalék, amikor ez kiszámolva már csak 34%?! Az eddigi kalkulációim alapján nem ezt vártam. Igen én hibáztam, nem a ThemeForest volt mohó! Miután nem állítottam be, hogy én Magyarországon szeretnék adózni az eladások után, a piactér automatikusan amerikai adózónak tekintett és az eladásokból automatikusan levonta az amerikai kereskedelmi adót. Miután mindent beállítottam az adózási információknál ez a levonás már nem érintette az eladásokat. Szóval, ha ez veled is előfordulna, nem kell megijedned, csak beállítás kérdése a megoldás.

Árazás és jutalék

A sablon árát magad tudod meghatározni. Ad egy ajánlást arra, hogy mi az elfogadott átlag árazás, de ettől te természetesen eltérhetsz. Illetve az árba egyből belekalkulálja a piactér a saját jutalékát is. Tehát ha azt szeretnéd kiírni, hogy 12 dollár mondjuk az eladási ár, amit a vásárló megfizet, akkor az 8 dollár eladási árat és 4 dollár honorárium díjat jelent. Ezeknek a mértéke fix, melyről alább látható táblázat. Ezzel mindenképp érdemes előre számolni, hogy senkit se érjen csalódás, vagy meglepetés. A jutalék pedig az elején kevésnek tűnhet, de az eladási számok növekedésével a jutalék mértéke is növekszik.

Fix jutalékfizetési díjtáblázat díjtáblázat

Envato szerzői jutalék táblázat

Továbbá az eladások számával további rangok és kiváltságok is elérhetőek lesznek, melyről itt tudsz bővebben olvasni: Envato Elite

Lopásvédelem

Na igen! Ami népszerű azt lopják is és ez a sablonokkal sincs másképp. A HTML sablonok kifejezetten sérülékeny célpontok lehetnek a weboldalt másoló szoftvereknek. Egy ilyen szoftvert én is bemutattam nemrégiben, de semmiképpen se alkalmazd ilyen célra. Etikátlan, felháborító és jogsértő. Ha már a szerző belefeccölt pénzt, energiát, időt, akkor igazán megér néhány 10 dollárt megvenni az adott sablont, tekintve, hogy neked ezzel mennyi időt, munkát és kényelmetlenséget spórolt meg. Ennyi tiszteletet megérdemel a szerző a munkájáért.

Sajnos viszont ezzel sokan nem foglalkoznak, így megelőzve a bajt fel kellett készülni. A bemutató oldalon található CSS és JS állományok mind egyesítve és tömörítve vannak eltárolva, hogy aki mégis lllopná, ne nagyon tudja olvasgatni és szerkeszteni. Persze vannak erre célszoftverek, amivel vissza lehet állítani az eredeti formázást, de nincs jelentősége ha van még egy csavar a szerkezetben. Készítettem egy lopásvédelemre szolgáló gondosan letitkosított JavaScript kódot, mellyel le tudom ellenőrizni, hogy a bemutató sablon hol fut. Amennyiben nem a saját domainemmel kezdődik az URL, azonnal átirányítja a látogatót a ThemeForest profilomra egy viszonteladói linkkel. Egyfelől ezzel ugye megpróbálom meggyőzni afelől, hogy tudok a lopás tényéről és szeretném jobb belátásra ösztönözni, továbbá a viszonteladói linkből azt is látni fogom, hogy ki volt az, aki ilyen forrásból jutott el a vásárlásig. Magyarán mérhető a kód hatékonysága. Ezt a kódot nem fogom nyíltan megosztani, mert üzleti titoknak tekintem, ellenben aki ír a blog e-mail címére, annak szívesen adok iránymutatást egy ilyen kód megírásához.

Most rajtad a sor!

Ha kedvet kaptál az ilyesfajta pénzkereseti lehetőséghez, akkor ne habozz, vágj bele! Ha nekem sikerült, akkor neked is fog. Benned is minden meg van, vagy meg lehet hozzá, hogy sikerüljön. Sosem késő új ismereteket szerezni, tanulni, gyakorolni és fejlődni. A lehetőség számodra is adott! Grafikai, illetve weblapfejlesztői képzéseink biztos alapokat nyújtanak számodra a kezdéshez, illetve további fejlődési lehetőségeket és instrukciókat pedig itt a blogon is olvashatsz olyantól, aki már bizonyított. Álljatok össze akár többen, kiegészítve egymás tudását és alkossatok valami fantasztikust és keressetek vele sok pénzt!

AP68 - Creative Multi-Purpose HTML5 Template