Weboldal készítés lépései – ahogy én csinálom

Ma elfoglak kalauzolni téged a weboldalkészítés színfalai mögé. A téma a landing oldal és weboldal készítés lépései, méghozzá úgy, ahogyan én csinálom. Megmutatom, hogy milyen folyamatokon, milyen lépéseken szoktam végigmenni az ügyfeleimmel, amikor egy weboldalt vagy landing oldalt készítünk. Ez egy közös munka, nekem ugyanúgy szükségem van az ügyfélre, mint neki rám. Eddig még soha nem került ennyire részletesen terítékre a téma, szóval már épp itt az ideje. 

Ha inkább a videót részesíted előnyben a szöveg helyett, akkor íme:

Ez a blogcikk 2021. szeptemberében készült, ezért elképzelhető, hogy mire te olvasod majd, már kicsit más lesz a folyamat. Minden ügyfél és minden projekt más és más, tehát ha holnap jelentkezel hozzám, nem biztos, hogy pont ugyanezt a folyamatot fogjuk végig vinni. De az alap mindig ugyanaz. Lássuk is…

Weboldal készítés 1. lépés: ajánlatadás

Felkeresés

A weboldal készítés lépései közt az első az ajánlatkérés. Itt megadhatod a telefonos és e-mail elérhetőséget is a weboldalamon, de a telefonszám nem kötelező jelen pillanatban. 

Szóval attól függően, hogy milyen elérhetőségeket kaptam, telefonon vagy e-mailen tájékoztatom az ügyfelet arról, hogy hogyan fog zajlani az együttműködésünk kezdete. Pontosabban az együttműködésünk előtti néhány lépés.                  

Kérdőív

Következő lépésben egy előzetes, felmérő kérdőívet küldök a számodra. Lényegében ezek csak a legfontosabb kérdéseket tartalmazzák, hogy egy körülbelüli rálátásom legyen arra, hogy

• hol tartasz most a weboldaladdal / landing oldaladdal
• mit szeretnél pontosan készíttetni
• mire van szükséged
• illetőleg, hogy mennyire vannak rendben az alapok, amelyek szükségesek a sikeres oldalhpz

Személyes konzultáció

Az igazi megismerés egy személyes konzultáció keretein belül történik. Ez egy online konzultáció, melyet jellemzően ZOOM-on keresztül tartok. Itt mélyebben megismerlek, hogy milyen helyzetben vagy jelenleg, mik az igényeid és céljaid, hova szeretnél eljutni, és hogy hogyan tudlak én támogatni mindebben. Próbálom feltérképezni azt, hogy pontosan mire is van szükséged ahhoz, hogy elérd a céljaidat.

Ezen a beszélgetéseten te is jobban megismerhetsz engem, és felfedezhetjük együtt, hogy megvan-e az a bizonyos kémia köztünk, ami szintén elengedhetetlen részét képezi a sikeres weboldal (vagy landing oldal) készítésnek.

Ajánlatkészítés

Miután megtörtént a konzultáció, elkezdem kidolgozni magát az ajánlatot. Sőt, ez nem is csak egy szimpla árajánlat. Egy konkrét megvalósíthatósági tervvel szoktam már ilyenkor előrukkolni, ami megmutatja, hogy

• mire van szükséged
• milyen szolgáltatásokat javaslok
• milyen weboldal vagy landing oldal felépítést javaslok

Ennek az árajánlatnak természetesen része az is, hogy a fentebb említett weboldal / landing oldal készítés szolgáltatás tartalmazó részfeladatok tételesen mennyibe kerülnek. Végül pedig több csomag kerül kidolgozásra, így még választani is tudsz, hogy a számodra legmegfelelőbb honlap konstrukciót kapd.

Második konzultáció

Miután elkészültem az ajánlattal és megvalósítási tervvel, a következő lépés egy második online konzultáció. Bemutatom számodra az elképzeléseimet, hogy hogyan érdemes a leginkább haladnunk a célod megvalósítása érdekében, bemutatom, hogy hogyan néz ki a közös munkafolyamat és természetesen, hogy mennyibe kerül mindez számodra.

Majd közösen meghozzuk a döntést, hogy valóban szeretnénk-e egymással együtt dolgozni vagy sem. Szerencsére a második eset a ritkább. Jellemzően már az első konzultáció után jön az üzletkötés és közös együttműködés. Sőt, az esetek 96%-ában még jól is érezzük magunkat, míg tartanak a weboldal / landing oldal készítés lépései, és persze általában még azután it (hisz többnyire hosszú távú kapcsolatok születnek ezekből az oldalakból) 🙂

Weboldal készítés 2. lépés: adminisztratív teendők

Ha megvan az összhang és úgy döntünk, hogy szeretnénk együtt dolgozni a weboldaladon, akkor jönnek a szokásos adminisztratív feladatok.

Szerződéskötés, előleg

Ez a következőképpen zajlik: 

1. Átküldöm neked a szerződéstervezetet.
2. Te ezt átnézi, esetleg véleményezed.
3. Visszaküldöd az adataiddal kitöltve.
4. Az adataid alapján elkészítem a végleges szerződést, és bekérem az előleget.
5. A szerződést közösen aláírjuk az Eszerződés.hu rendszerén keresztül (mely gyors, biztonságos, környezetbarát és teljesen megfelel a magyar jognak), illetve küldöm az összeg beérkezését követően küldöm az előlegszámládat.

Nagyon fontos, hogy én mindig számlával dolgozom. Azt gondolom, hogy mind számodra, mind pedig számomra ez a legtisztább megoldás.

Google Drive és ClickUp felületek létrehozása 

Ezek azok a felületek, amelyekben közösen dolgozunk veled (illetve az esetleges alvállalkozókkal).

Az együttműködésünk elején létrehozom a saját Google Drive és ClickUp felületeidet a számodra.

A Google Drive-ot szerintem te is ismered, nem nagyon kell bemutatnom. Ez egy felhő alapú dokumentum kezelő rendszer. Word-szerű dokumentumokat, táblázatokat, Power Pointhoz hasonló prezentációkat lehet létrehozni benne, valamint képeket és videókat lehet feltölteni rá.

Itt osztok meg veled olyan dokumentumokat, mint például:

• szöveg
• webdesign
• brief-ek, melyeket ki kell majd tölteni, hogy valóban hatékony weboldalt tudjak létrehozni számodra

És ide tölti fel az ügyfél a képeket, videókat, amelyeket nekem szán.

A Google Drive-ba van minden ügyfelemnek egy személyes mappája, ebben megtalál mindent. Ide felkerülnek a számlák, az ajánlat, szerződés és egyéb fontos dokumentumok is.

A másik alkalmazás, amelyet használunk, a ClickUp, egy projektmenedzsment rendszer. Ennek köszönhető az, hogy én is és az ügyfél is folyamatosan nyomon tudjuk követni, hogy éppen hol tart a projekt, illetve, hogy milyen képekre, információkra, adatokra van szükségem az ügyféltől. Tehát minden szuperül nyomonkövethető itt.

Egyáltalán nem bonyolult egyébként a kezelése, de amikor elkezdünk együttműködni egy nagyon rövid videós kurzust is adok, ahol bemutatom a legfőbb funkciókat. De tényleg rendkívül egyszerű az egész, én imádom.

Amióta használom, sokkal sokkal produktívabb vagyok. akár vállalkozóként, akár magánemberként, ezért szívből ajánlom neked ezt a rendszert.

Weboldal készítés 3. lépés: brief

A weboldal készítés folyamatának következő része az, amikor az ügyféllel közösen elkészítjük a brief-et.

Arra az esetre, ha esetleg nem ismernéd a briefet, akkor gyorsan összefoglalom mi is ez:

Tehát megmondja, hogy

• egészen pontosan ki a célközönség,
• mik az ő problémái,
• mik az ő vágyai,
• mi a termék,
• mik a termék előnyei,
• mi az egyedisége az ügyfélnek,
• mi az ajánlat és hogyan épül az föl,

és még rengeteg-rengeteg információt, melyek segítenek a weboldal készítésben.

A fentebb felsorolt szempontok inkább a szöveg brief-be tartoznak. De van web design brief-is, mely arra tér ki, hogy

• milyen hangulatú legyen a weboldal,
• milyen érzetet kell, hogy keltsen,
• milyen színeket használjon,
• milyen stílusú betűtípussal dolgozzunk
• milyen képeket alkalmazzunk, stb.

Segítő információk is vannak a brief dokumentumban mindehhez. Például, hogy a adott színt vagy adott stílusú betűt milyen esetekben érdemes alkalmazni, melyik milyen jelentéssel bír. Ugyanis egy weboldal elkészítése során nem azért választjuk például a piros színt, mert egész egyszerűen szeretjük, és az a kedvenc színünk, hanem mert szenvedélyt, tüzességet, erőt és energiát szeretnénk kifejezni vele. A weboldalakat nem magunknak kell csinálni, hanem a célközönségünknek.

A webdesign brief nagyon könnyedén szokott menni. A szöveg brief viszont rengeteg kérdést és információt tartalmaz. Több ügyfelem jelezte vissza, hogy beletelt egy pár órába, mire kitöltötte. Nos, ez így van rendjén. Hiszen ahhoz, hogy valami olyat tudjunk létrehozni, ami később pénzt fog termelni, bele kell rakni az energiát. Ezeket az információkat, amelyeket az ügyfél megad, sajnos sem én, sem pedig másik kivitelező nem fogja tudni kitalálni önmagától. Ezeket mind-mind az ügyfélnek kell biztosítani, ahhoz, hogy mi ebből egy jól működő egészet tudjunk létrehozni.

Na de azért nem hagyom teljesen magára az ügyfelet…

Szóval kitölti ezt a szöveg brief-et az ügyfél úgy, ahogy tudja. Ez azonban első körben nem szokott elegendő lenni a jó munkához. Ezért vezettem be azt, hogy ezt követően egy 1-2-3 órás konzultáción végig megyünk ezen a briefen. Előzetesen még áttekintem, hogy melyek azok a kérdések, amelyek többlet információt követelnek. Legtöbbször azért, mert nem érthetőek vagy nem vagyok benne teljesen biztos, hogy elegendő lesz a meggyőző weboldal szöveghez. Tehát erre a meetingre már megvannak a megjelölt kérdéses részek. A beszélgetés során pedig próbálom rávezetni az ügyfelet, hogyan érdemes gondolkodnia erről, hogyan menjen még mélyebbre a kérdésben, megmutatni, hogy milyen irányban gondolkozzon. 

Itt már általában hosszasan mesélnek az ügyfelek az adott témáról.

Szoktam mosolyogni rajta, amikor a brief-ben pár sort ír valaki egy kérdésre, majd amikor a konzultáción elmélyedünk benne, akkor kiderül, hogy milyen sok minden van még ebben a témában. Az a jó ilyenkor, hogy csak a saját gondolataikra kell figyelniük. Többször észrevettem már, hogy mennyire elgondolkodnak egy-egy ilyen meeting során, ami tök szuper! Ennek így kell lennie. Hisz ilyenkor vannak benne teljesen abban a témában, én pedig közben folyamatosan jegyzetelek :).

Weboldal készítés 4. lépés: piackutatás

Mindamellett, hogy az ügyfél saját szavaival elmondja a válaszokat, hogy ki a célközönsége, milyen problémáik, vágyaik vannak, én magam is készítek egy piackutatást.

Megvizsgálom a konkurenciát, hogy ők milyen üzeneteket közvetítenek. Az ügyfél által adott válaszokból és a piackutatás során kapott információkból együttesen alkotjuk meg a legjobb és legmeggyőzőbb üzeneteket.

Jelenleg még csak konkurencia weboldalakon végzek kutatást. Azonban mivel folyamatosan fejlesztem a szolgáltatásomat, azon gondolkodom mostanában, hogy bevezetem azt, hogy ilyenkor a témába, szakmába vágó Facebook csoportokba is belépek és szétnézek. Az érdekel, hogy miről beszélnek ott az emberek, milyen problémáik vannak, miket kérdeznek, stb.

 Illetve, ha már vannak vásárlói az ügyfélnek, akkor őket is érdemes lehet kikérdezni egy online vagy telefonos kérdőívvel.

Ezek még nincsen bevezetve a folyamataimba, de elég erősen gondolkodom rajta, illetve még ki kell dolgozni hozzá a rendszert. De lehet, hogy mire te rendelsz tőlem weboldalt vagy landing oldalt, addigra már ezek is be lesznek építve a folyamatba :).

Weboldal készítés 5. lépés: drótváz

A weboldal készítés folyamatának következő lépése mindezek után a drótváz.

A drótváz igazából egy nagyon-nagyon mini webdesign, ami csak vonalakból, szövegekből és kép-helyekből áll. Tehát az oldal vázát mutatja meg, vagyis, hogy

• hol lesz kép
• hol lesz szöveg
• mekkora lesz az a szöveg
• mekkora helyek lesznek kihagyva
• hogyan néznek ki ezek a blokkok
• Szóval így kell elképzelni a drótvázat.

 Ebbe a drótvázba maguk az üzenetek bele vannak építve. Tehát megvan az, hogy egy adott blokk nagyjából

• miről szól,
• milyen üzenet kerül a címsorába,
• alcímsoraiba milyen üzenet kerül,
• ezek alatt lévő szövegekbe milyen üzenet kerül.

Nem a végleges szöveg kerül bele, csak egyszerű üzenetek, néhol akár vak szöveg.

Miután ez megvan konzultálunk róla e-mailben vagy személyesen. Amikor elküldöm ezt az ügyfélnek, sokszor csak rábólintanak és mehetünk tovább, vagy beleírnak egy-két dolgot, vagy egy rövid konzultáció keretein belül átbeszéljük. Ez mindig az igény és szükséglet szerint alakul.

Weboldal készítés 6. lépés: szövegírás

Ha már nagyjából véglegesítődik a drótváz, akkor átküldöm azt egy szövegírónak. Most már jellemzően külsős, profi szövegíróval dolgozom együtt, aki 10-15 munkanap alatt elkészíti a szöveget.

Weboldal készítés 7. lépés: szövegírás

A szövegírás megkezdésével párhuzamosan pedig megkezdődik a webdesign készítése is. Főleg, ha egy teljesen új arculatról beszélünk. Hiszen bár ilyenkor még nincsenek meg a végleges szövegek, de van egy körülbelüli kinézet és egy körülbelüli szöveg mennyiség, illetve annak elrendezése a dórátváz alapján. Mindezek segítségével már nyugodtan el lehet készíteni három weboldal blokkot, amely igazából már meg tudja mutatni az ügyfélnek, hogy mi az

• irány,
• stílus,
• milyen színeket, árnyékokat, betűtípusokat tervezünk használni.

Általában a webdesignt is külsős alvállalkozó készíti már nekem. Van még néha, hogy én magam személyesen készítem el, mert nagyon élvezem ezt a kreatív alkotó folyamatot, azonban ha túl sok a munka akkor kiszervezem ezt a részét is.

Szöveg és webdesign összefésülése 

Ha igazán hatékony oldalt szeretnél, akkor elengedhetetlen a szöveg és webdesign együtt kezelése, noha ez két teljesen különálló folyamat.

Szóval elkészül a 3 szekció a webdesignban, majd megérkezik a szöveg. Ezt is írásban vagy személyes konzultáció keretein belül megbeszéljük és módosítjuk az igények alapján, majd pedig véglegesítjük.

Ha véglegesítettük, akkor még egyszer visszatérek a drótvázba és behelyezem a szövegeket, megvizsgálom, hogy a kész szöveg tekintetében érdemes-e esetleg módosítani rajta.

Hiszen, habár az első verzióban is már több mint 90%-os a drótváz, de azért aez nem feltétlenül a végleges verzió. Nagyon fontos, hogy a szöveget és a designt együtt kell kezelni. Mindegyik függ a másiktól. Nem működik jól az sem, hogy van egy kész design és abba kell beleerőltetni a szöveget. De az sem hatékony, ha van egy kész szöveg, és nincs megvizsgálva, hogy design szempontból megfelelő-e. A kettőt együtt kell kezelni.

Mondok erre egy konkrét példát: 

Nem túl szerencsés, ha mondjuk volt egy 3 oszlopos, szövegdobozos elképzelés a design-ra, ami tök jól néz ki azonos hosszúságú vakszövegekkel, majd és születik rá egy olyan szöveg, hogy mindhárom oszlopban különböző hosszúságú ez a szöveg, mert egyszerűen nem lehetett úgy megfogalmazni szépen, hogy nagyjából azonos hosszúságú szöveg kerüljön mindhárom oszlopba. Ilyen esetben a 3 egyforma szövegdobozt érdemes lehet úgy átalakítani, hogy például felülre helyezel kettőt, alájuk pedig egy szélesebbet. Vagy ha azt állapítjuk meg, hogy nem lehet a design-t szépen és jól átalakítani, akkor pedig a szövegre kell visszatérni és megpróbálni átfogalmazni.

Ha mindezek megvannak, akkor továbblépünk a teljes webdesign-ra. Természetesen erről is folyamatosan konzultálunk és módosítjuk a kéréseknek megfelelően.

Weboldal készítés 8. lépés: fejlesztés, tesztelés, élesítés

Fejlesztés

Amikor a webdesign 80-90%-os, akkor már elkezdődik a fejlesztés. Ennek egész egyszerűen időspórolási oka van. Általában ebben a fázisban már nyugodtan el lehet kezdeni a weboldal konkrét kivitelezését, hiszen ezt követően a megjelenésben már csak apró módosítások lehetnek.

Annak érdekében, hogy ne 2 hónap legyen létrehozni egy landing oldalt vagy weboldalt, ezek a folyamatok párhuzamosan mennek. Ezért is van az, hogy amikor elkezdődik a szövegírás, már elkezdődik a webdesign egy része. Amikor a design nagyjából megvan, akkor már elkezdődik a fejlesztés. És amikor teljesen megvan a design, véglegesítődik a fejlesztés, akkor jön a tesztelés.

Tesztelés

Ilyenkor minden funkciót, gombot, menüpontot, linket lecsekkolok, hogy tutira jól működik-e.

Majd megnézem azt is, hogy az alábbi 4 böngészőben jól működik-e a weboldal:

• Google Chorme
• Mozilla Firefox
• Microsoft Edge
• Safari

A Safari böngészőhöz egy úgynevezett emulátort szoktam használni, ami azt jelenti, hogy maga a szoftver az igazából nem a Safari, hanem nálam pédául a Chrome. Lényege, hogy van egy weboldal, amelyek keresztül tudom szimulálni a Safarit, és annak működését, mintha csak ténylegesen Safari böngészőn keresztül szemlélném a weboldalt.

Ezeken kívül a legtöbb képernyő felbontásban is leellenőrzöm a weboldal összes oldalát:  

• 7 asztali képernyőn,
• 2 tablet képernyőn,
• 3 mobil képernyő felbontáson.

Ilyenkor azt nézem, hogy minden jól néz-e ki, nincsenek-e kilógások, belógások, túl kicsi vagy túl nagy betűk.

Miután minden minden-minden rendben találtatok, akkor jöhet az élesítés.

Az egész együttműködés során egyébként kisebb-nagyobb meglepetésekkel készülök az ügyfeleknek. De pontosan azért, mivel ezek meglepetések, itt és most nem szeretnék többet elárulni róla. Úgyis meg fogod tapasztalni, ha az ügyfelemmé válsz ;). Sőt nem is csak az együttműködés során, hanem előtte és utána is tartogatok meglepiket.

Weboldal készítés 9. lépés: utolsó lépések

Miután megtörtént az élesítés, jön ismét néhány adminisztratív teendő. Olyanokhoz, mint a végszámla, a megmaradt díj kiegyenlítése. 

Valamint egy visszajelzést is szoktam kérni az ügyfelektől kérdőív formájában, hiszen ebből tudok tanulni, fejlődni és olyan szolgáltatást nyújtani, ami után mindenki megnyalja mind a tíz ujját. Erre törekszem és ennek érdekében kérem a visszajelzéseket az együttműködés végén.

Bízom benne, hogy érdekes volt számodra, hogy betekinthettél a kulisszák mögé és láthattad, hogy hogyan dolgozom az ügyfeleimmel. Ha tetszett, akkor keress bátran és kérj ajánlatot tőlem.

Kíváncsi vagyok, hogy mit gondolsz erről az egész folyamatról, van-e valami amit tanácsolnál még nekem. Oszd meg hozzászólásban a cikk alatt!

Sikeres és produktív vállalkozást kívánok neked!