A webfejlesztés folyamata – útmutató a webes projektek áttekintéséhez
Amikor egy nagy forgalmú portál oldalt, egy hatalmas választékkal bíró vezető webshopot vagy egy népszerű mobil app-ot látunk, sokszor nem is gondolunk bele abba, hogy egy ilyen szoftver – vagy nevezzük digitális terméknek – milyen fejlesztési folyamaton megy végbe az első ötlettől a megvalósulásig és hány különböző szakmákban jártas szakember dolgozik rajta, mielőtt a piacra kerülne.
Persze azt gondolhatná a kedves olvasó, hogy miért is van szükség arra, hogy átlássa egy nagy portál oldal fejlesztésének a folyamatát, de az az igazság, hogy szinte bármilyen webfejlesztés projektről beszélünk, a főbb lépések és azok sorrendje szinte mindegyik esetében azonosak. Ezért még ha csak egy mikrovállalkozás weboldalának a fejlesztéséhez keres webfejlesztő céget, nem árt tisztában lenni azzal, hogy mi is lesz maga a folyamat, mialatt a kezdeti ötleteléstől eljutunk a kész termékig.
Nézzük tehát, hogy milyen lépésekből áll egy webfejlesztés projekt:
- Az ügyfél igényeinek felmérése
- Kutatás és elemzés
- Tervezés
- Design
- Webfejlesztés
- Tesztelés és élesítés
- Üzemeltetés
1. Az ügyfél igényeinek felmérése
Sok olyan webfejlesztés folyamatról hallok, ahol a projekt rögtön a tervezéssel kezdődik, pedig valójában az első lépésnek az ügyfél igényeinek felmérése és megértése kell legyen. Ez pont arról szól, hogy megtudjuk milyen okok, célok és igények húzódnak meg az ötlet mögött annak érdekében, hogy egy olyan terméket tervezzünk, amely a későbbiekben képes lesz ezeket a kitűzött célokat megvalósítani.
A webes projektek jellemzően nem önmagukért vannak, hanem valamilyen üzleti célt valósítanak meg: terméket, szolgáltatást értékesítenek, brand-et népszerűsítenek, szakértői szerepet építenek, tartják a kapcsolatot az ügyfelekkel, egy szóval aktívan hozzájárulnak egy vállalkozás sikeréhez. Éppen ezért fontos tisztában lenni azokkal az üzleti célokkal, amelyeknek megvalósítására hívták segítségül a fejlesztendő digitális terméket.
Ehhez a lépéshez tartozik az ügyfél tájékoztatása arról, hogy a projekt milyen lépésekből, milyen mérföldkövekből áll, annak érdekében, hogy megértse mikor milyen szerepe, feladatai vannak és hatékonyan tudja döntéseivel támogatni a munkát.
2. Kutatás és elemzés
Ebben a szakaszban megpróbáljuk összegyűjteni a legtöbb releváns információt a projekthez. Megpróbáljuk megérteni az iparágat, feltérképezzük a konkurenseket, meghatározzuk a célközönséget.
Sok olyan projekttel találkozom, ahol az ügyfél nincs tisztában az online konkurenciával, nem tudja, hogy az adott területen hány versenytárssal kell a terméknek megküzdenie és ezek a versenytársak milyen stratégiát folytatnak, milyen erősségeik, gyengeségeik vannak és a terméket hogyan kell elhelyezni ebben a környezetben ahhoz, hogy sikeres legyen.
A célközönség megértése azért fontos, hogy tudjuk milyen platformokat, eszközöket használnak, milyen motivációik, kérdéseik vannak, milyen viselkedésbeli hasonlóságaik vannak, milyen nyelvezetet preferálnak.
3. Tervezés
Az előző szakaszban összegyűjtött információkra támaszkodva rendszerezzük az ismereteinket és nekiállunk összeszedni mindazt, amire majd a design-hoz szükség lesz.
Összeszedjük, hogy a weboldal vagy webes alkalmazás milyen menüpontokból áll majd és különböző kutatási eszközökkel meghatározzuk, milyen csoportokba, milyen sorrendbe érdemes ezeket a menüpontokat rendezni és pontosan milyen elnevezéseket használjunk annak érdekében, hogy a menüpont tartalmak a célközönség számára könnyen felismerhetők legyenek. A webhely térkép definiálása során figyelembe vesszük azt is, hogy a célközönség milyen útvonalon fogja bejárni az oldalt és hol, mely pontokon törekszünk konverziót megvalósítani.
Ha mindent jól csináltunk, akkor a látogató beszédes menüpontokkal találkozik majd, könnyen, kevés kattintással lesz képes navigálni az oldalon, mindig megtalálja, amit keres és elégedett lesz az oldallal, szívesen visszatér majd később is.
A drótvázak – angolul wireframe – olyan fekete-fehér rajzok, amelyek kezdetben szabadkézzel, később számítógéppel készülnek és nagy vonalakban ábrázolják a felhasználói felületek elemeit, sorrendjét és az egyes oldalak elrendezését. Mivel vázlatos tervekről van szó, ezért a drótvázak ideálisak többfajta ötlet felvázolására, tesztelésére és gyors módosítására. A színek és képek hiányában a tesztelő figyelmét semmi nem tereli el a lényegről.
4. Design
Ebben a szakaszban a letesztelt és véglegesített wireframe-ekből és sitemapből konkrét végleges design tervek készülnek, amelyek valós méretarányban minden apró részletet kidolgozva bemutatják a weboldal vagy webes alkalmazás felhasználói felületeit. A drótvázak megtelnek élettel, a fekete-fehér vonalakat színekkel, képekkel, betűtípusokkal váltják fel és egységes arculatot kap a projekt.
A designer szerepe, feladata sokkal összetettebb annál, minthogy színekkel, formákkal és képekkel ruházza fel a wireframe-eket. Egy jó designer a tervezés során ….
- figyelembe veszi a reszponzivitást
- ügyel arra, hogy a weboldal vagy app gyorsan töltődjön be
- egységes és konzekvens arculatot alakít ki
- ügyel arra, hogy amit megtervez, az leprogramozható legyen
- figyel a webes szabványokra, méretezésekre
- magas felhasználói élményt alakít ki
5. Webfejlesztés
Az angolban a webdesign, web development sokszor ugyanúgy jelöli az itt bemutatásra kerülő teljes folyamatot, mint a magyarban a webfejlesztés. Éppen ezért sokan még mindig egyfajta programozói munkaként, programozási feladatként tekintenek egy webfejlesztés projektre, noha ezen cikk pont arra próbál meg rávilágítani, hogy milyen nem közvetlenül programozáshoz kötődő részei is vannak a munkának. Arról nem beszélve, hogy a programozás mellett hány egyéb szakma érintett abban, hogy professzionális módon kivitelezhető legyen.
A webfejlesztő szó magát az iparágat illetve a tevékenységet is jelöli. Egy olyan céget jellemez, amelyik weben használatos digitális termékeket, weboldalakat, webes alkalmazásokat, webes appokat tervez és fejleszt.
Ez a pont a projektben már valóban az effektív programozásról – ahogy sokan nevezik webfejlesztésről – szól. A korábbi lépésben elkészült, véglegesített és az ügyfél által jóváhagyott grafikai tervekből ebben a lépésben működőképes, kattintható weboldal, webes app készül.
A webfejlesztést két fő területre szokták bontani, az egyik a frontend, amely azokkal a részekkel foglalkozik, amelyekkel a felhasználó találkozik és amelyekkel közvetlen interakcióba lép. A másik rész a backend, amely jellemzően a frontenden megjelenő információk tárolásáért és számolásáért felelős. (A frontendről és backendről ebben a cikkben olvashatsz bővebben)
A webfejlesztő felelőssége a designerhez hasonlóan nagy abban, hogy a végső termék sikeres legyen, mert ő az, aki kiválasztja a megfelelő technológiát, a tartalomkezelő rendszert, részben ő felel a magas felhasználói élményért és a gyors beletöltődésért is. A webfejlesztő kompetenciái közé tartozik az is, hogy egy olyan weboldalt fejlesszen, amely minden böngészőben működőképes lesz, olyan biztonsági megoldásokat alkalmazzon, amely védi a felhasználói adatokat és ellenáll a webről jövő támadásoknak. Hogy milyen egyéb szempontok azok, amelyek kulcsfontosságúak egy jó webfejlesztő kiválasztása során, arról ebben a cikkben lehet olvasni.
6. Tesztelés és élesítés
A kész digitális terméket a fejlesztés befejeztével tesztelni kell minden olyan eszközön és környezetben, amelyben felhasználásra kerül. Sok esetben itt még fel szoktak lépni olyan kisebb hibák, amelyeket élesítés előtt még korrigálni kell. Egy komplex projekt esetében maga a tesztelés is jól megtervezett módon kerül végrehajtásra, amelynek során kitérnek pl. az űrlapok működésére, a hibaüzenetek nyelvezetére is.
Ha minden teszt sikeresen lefutott és nem találtak több hibát a termékben, akkor jöhet az élesítés. Élesítés előtt közvetlenül még általában beszúrásra kerülnek azok a kódok, amelyek a különböző marketing eszközök, pl. Google Analytics, Google Ads, Facebook Pixel futtatásához szükségesek.
7. Üzemeltetés
Minél komolyabb projektről van szó, annál valószínűbb, hogy a projekt nem áll meg az élesítéssel, további aktív közreműködésre van szükség a webfejlesztő cég részéről annak érdekében, hogy a digitális termék folyamatosan és biztonságosan működtethető legyen. Az üzemeltetéshez tartoznak a biztonsági frissítések elvégzése, az ügyfélszolgálat fenntartása, amely segít a mindennapos kisebb-nagyobb kérdések megválaszolásában és egy rendelkezésre állásban is, amely biztosítja a termék folyamatos továbbfejlesztésének lehetőségét annak érdekében, hogy megfeleljen a piac és a célközönség elvárásainak.
Amennyiben érdekel a programozás világa, az 5. ponthoz tartozó készségek megalapozásában jó szolgálatot tesz a programozási alapokat Java nyelv segítségével megismertető StudiCore Online Java SE kurzusunk.