Szinte mindegy, hogy egy hírportál oldalról, egy webshopról vagy egy kisvállalkozás bemutatkozó weboldaláról van szó, a webfejlesztés folyamatának főbb lépései szinte minden esetben azonosak. Cikkemben ezt a folyamatot szeretném bemutatni részletesen.

Az itt bemutatásra kerülő folyamat arra is rávilágít, hogy …

• bár a munkát webfejlesztésnek nevezzük, ahhoz, hogy a végeredmény sikeres legyen, egy sor kapcsolódó szolgáltatásra, pl. versenytárs elemzésre, UX design-ra, szövegírásra … stb. van szükség.
• magától értetődő, hogy egy webfejlesztés projektre webfejlesztő szakembert keresel, de az alábbi cikkből is látni fogod, hogy az effektív programozás mellett egy projektvezetőre, webdesignerre, SEO szakemberre, szövegíróra, UX specialistára, online marketingesre is szükség lesz. 

1. Kapcsolatfelvétel, igény felmérés

Az első általában e-mail-ben történő megkeresést egy Skype vagy személyes találkozó követi, amelynek során megpróbálunk minél több információt összeszedni a projektről.

Az alábbi témákat szoktuk érinteni az első találkozó során:

• Mivel foglalkozik a cég?
• Mi a webfejlesztés célja?
• Milyen elvárások vannak a készítendő weboldallal kapcsolatban?
• Kiknek készül a weboldal? Ki a célközönség?
• Milyen eredményeket vár a marketing az új weboldaltól?
• Milyen piaci környezetben kell megállnia a helyét az új oldalnak? Kik a versenytársak?

Sok olyan webfejlesztés projektről hallok, ahol rögtön fejest ugranak a weboldal tervezésbe anélkül, hogy pontosan tudnák mi a vállalkozás célja a weboldallal, milyen eredményeket várnak el tőle és kik a főbb versenytársak, akikkel az új site-nak majd versenyeznie kell.

Az első lépéstől kezdődően arra szoktam törekedni, hogy minden apró információt írásban dokumentáljak és megosszam a projektben résztvevőkkel, így semmi nem merül feledésbe, másrészt írásos nyoma marad mindennek, amiben a fejlesztést illetően megállapodtunk. Az ilyen írásos dokumentációk arra is jók, hogy elejét vegyük az esetleges egymásnak ellentmondó kéréseknek.

Minél nagyobb a webfejlesztés projekt, a dokumentálásnak annál nagyobb szerepe van. Sok véget nem érő, elhaló projekt mögött az húzódik meg, hogy az igények nem lettek megfelelően rögzítve és a projekt megkezdése után fél évvel már senki nem emlékszik arra, hogy egy adott részfeladatot illetően ki miben állapodott meg.

2. Specifikáció készítés

A webfejlesztés projekt specifikációja tulajdonképpen egy részletes feladatleírás. Összeszedi az összes lényeges információt, amelyet a projektről ezidáig megtudtunk. 

Ahhoz, hogy egy webfejlesztés projektre árajánlatot tudjunk adni, az alábbi kérdéseket javasolt megválaszolni:

• Melyik iparágban tevékenykedik a cég, mivel foglalkozik?
• Mi az új weboldal célja? Itt elsősorban az üzleti és marketing célokra vagyunk kíváncsiak.
• Milyen tapasztalatok voltak a korábbi weboldallal? Mi az, ami működött és mi az, amin mindenképpen változtatni szeretnének?
• Ki a weboldal célközönsége? Mit lehet tudni a potenciális ügyfelekről?
• Rendelkezik a vállalkozás arculati elemekkel, logóval?
• Milyen menüpontokból áll a készítendő weboldal? Milyen jellegű információ kerül az egyes menüpontokba?
• Milyen funkciókra van szükség az új weboldalon? Pl. blog, webshop, jelszóvédett felület, esemény naptár, … stb.
• Hány nyelvű lesz a weboldal?
• Kik a potenciális versenytársak?
• Tudna mutatni olyan weboldalakat, amelyek megjelenésükben tetszenek?

3. Árajánlat készítés

A webfejlesztés specifikációját követően egy általában 6-12 oldalas tételes árajánlatot készítünk. Az  árajánlat része a munkafolyamat bemutatása, az egyes szolgáltatások leírása, a költségek részletezése és a határidők megjelenítése.

Az árajánlatban pontosan leírjuk, hogy az egyes szolgáltatások, pl. grafikai tervezés, programozás, tartalom feltöltés … stb. milyen tevékenységet jelentenek és elvégzésükhöz milyen információkra van szükségünk.

4. Szerződéskötés

Az árajánlat elfogadását követően egy szerződés készítünk és átküldjük ügyfelünknek jóváhagyásra. A szerződés tervezet főbb részei:

• felek alapadatai
• szerződés tárgya
• szolgáltatás elállásának menete
• felek jogai és kötelességei
• adatok védelme és titoktartás
• szavatosság
• vállalkozói díj
• fizetési feltételek, számlázási időszak
• hatályba lépés, szerződés megszűnése
• szerzői jogok
• záró rendelkezések
• mellékletek (pl. szolgáltatás megrendelő, feladat specifikáció)

5. Kutatás és tervezés

Az ügyféllel történt első megbeszélés és az ezután készült specifikáció információi alapján egy olyan kutatásba kezdünk, amely segít abban, hogy a készítendő weboldal a célközönségnek minél magasabb felhasználói élményt nyújtson.

A felhasználói élmény alapú tervezés (angolul UX design) egyre inkább meghatározó szerepet tölt be a webes projekteknél, mivel segítségével olyan weboldalak készülnek, amelyek a látogatók szívesen böngésznek.

A kutatás és tervezés az alábbi tevékenységeket érintheti:

• versenytárs elemzés– alaposan átnézzük a legerősebb piaci szereplők weboldalát és online stratégiáját annak érdekében, hogy az általunk készített website rögtön a legjobbak között lehessen.
• weboldal látogatottsági adatok elemzése– a korábbi weboldal analitikájának átnézése annak érdekében, hogy megértsük a felhasználók viselkedését.
• weboldal UX audit– a korábbi weboldal auditálása felhasználói élmény szempontjából. Mi az ami jó működött benne és mi az ami fejlesztésre szorul?
• perszóna alkotás– a weboldal célközönség csoportjainak meghatározása, motivációjuk, eszköz használati szokásaik, böngészési szokásaik megértése
• user interjúk– szóbeli vagy írásos interjúk a célközönséggel annak érdekében, hogy minél jobban megismerjük őket
• customer journey defíniálása– a látogató útjának meghatározása a weboldalon. Ez az eszköz segít a konverziós útvonalak meghatározásában és a konverzió optimalizálásban
• drótváz készítés (wireframing)– a drótvázak szabadkézi vagy számítógéppel készített fekete-fehér rajzok, amelyek segítenek az egyes oldalak elrendezését bemutatni.
• prototípus készítés– a drótváz tervek felruházása alapvető műveletekkel (kattinthatóság) annak érdekében, hogy a látogató viselkedését az oldalon szimulálni tudjuk

6. Webdesign

Itt már minden információ összeállt ahhoz, hogy a webdesignerek a korábban jóváhagyott struktúra, funkcionális terv és drótvázak alapján elkészítsék a weboldal grafikai terveit.

Első körben a nyitólap 1:1 méretarányú terve készül el, amelyet böngészőben prezentálunk, majd pedig ennek finomítása és jóváhagyása után készülnek el az aloldalak tervei. Egy egyszerű bemutatkozó oldal esetében 2-3 aloldal terv is elégséges lehet, míg egy összetett site esetében akár tucatnyi aloldal terv is készülhet.

A weboldal grafikai terve a drótvázakon prezentált elrendezéseken felül már a végleges színeket, formákat, arculati elemeket, betűtípusokat, ikonokat, illusztrációkat és képeket tartalmazza. Egy szóval pixel pontosan azt, amit a későbbi látogatók a böngészőben látnak majd.

Az ideális eset az, ha már vázlatos szöveges anyagokat is kapunk, mert ebben az esetben a designerek pontosan a szöveg szerkezetére és mennyiségére tudják szabni az oldal megjelenését.

A weboldal grafikai tervezése már rég nem öncélú művészi munka, a designereknek számtalan szempontot kell figyelembevenniük a tervezés során annak érdekében, hogy a kész site megfeleljen az üzleti és marketing céloknak és maximális teljesítményt nyújtson. Íme néhány ezek közül:

• célközönség– a weboldal nem a saját, sőt nem is az ügyfél ízlésének kell, hogy megfeleljen, hanem a célközönségének. Ez nem csak a megjelenésre, de a működésre és még a szövegekre is vonatkozik.
• arculat– a weboldalnak követnie kell a cég arculatát. Amennyiben csak egy logót kapunk, úgy annak forma- és szín-világához kell igazodni.
• versenytársak– egy weboldal szerkezete, funkcionalitása és megjelenése során figyelembe kell vennünk az online versenytársakat.
• navigáció– a weboldal navigációja kiemelten fontos funkció. Ha rosszul van megtervezve, akkor az oldal már indulása pillanatában gyengébben fog teljesíteni, amit utólag sokszor nem könnyű javítani.
• betöltési sebesség– a mobil használat elterjedésével az egyik legfontosabb szemponttá vált a weboldal betöltési sebessége. Ennek első lépcsője a webdesigner, akinek figyelembe kell vennie a sebességgel kapcsolatos szempontokat munkája során és nem tervezhet olyan nyitólapot, amelyen olyan sok kép van, hogy eleve ellehetetleníti a jó teljesítmény elérését.
• reszponzívitás– a grafikusnak tisztában kell lennie azzal, hogy mik az alapvető reszponzív működésre vonatkozó elvárások és ezek figyelembevételével kell az asztali, a tablet és mobil nézetet megterveznie
• programozhatóság– a webdesignernek figyelembe kell vennie a webfejlesztési technológiákat és olyan terveket kell előállítania, amelyek a mai modern programozási nyelvekkel kompatibilisek.
• SEO-barát kialakítás– a webdesigner-nek alapvető SEO ismeretekkel kell rendelkeznie és a weboldalra be kell terveznie azokat az elemeket, amelyek javítják a site feltérképezhetőségét és Google teljesítményét. Pl. breadcrumbs, címsorok, … stb.
• nyelvi verziókkal történő kompatibilitás– ez talán az egyik legnehezebb feltétel. A weboldalt úgy kell megtervezni, hogy a nyelvi mutációkkal történő feltöltés után se essen szét a megjelenés. Itt elsősorban arra gondolok, hogy egy adott menüpont elnevezése angolul sokkal kevesebb helyet foglal, mint pl. németül. Tehát megfelelő helyet kell hagyni a hosszabb szövegeknek is.
• tartalomkezelő rendszerek– a mai modern weboldalak mindegyikéhez tartalomkezelő rendszer tartozik. A weboldal grafikájának megtervezése során ügyelni kell arra, hogy minél több tartalmi elem CMS-ből szerkeszthető legyen.
• következetesség– weboldal nyitólapjának és aloldalainak stílusát, fejlécét, láblécét és navigációját következetesen kell felépíteni annak érdekében, hogy a látogató számára egyértelmű legyen, melyik oldalon tartózkodik éppen
• felhasználói élmény– ahogy korábban említettem, a felhasználói élmény alapú tervezés az egyik legfontosabb szempont a weboldal k
• aktuális trendek– ha minden korábban felsorolt szempontnak sikerült megfelelni, akkor ezen felül nem árt, ha az oldal divatos és megfelel a modern design trendeknek. A kutatások szerint egy átlagos látogató is el tudja dönteni, hogy egy weboldal elavult vagy divatos megjelenésű-e, ami értelemszerűen kihat a cég megítélésére is.