weboldal tervezés
Szűcs Máté
Szűcs Máté

A weboldal tervezés folyamata, lépésről lépésre

Tartalomjegyzék

Ez a cikk a weboldal tervezés folyamatáról szól, ha szeretnéd megismerni weboldal tervezési szolgáltatásunkat, akkor kattints ide.

A tervezés folyamata, legyen ez pénzügyi, vagy épp marketing jellegű tervezés a legtöbb vállalkozás számára kulcsfontosságú. Sajnos a tapasztalat viszont azt mutatja, hogy a vállalkozások tevékenységében részt vevő elemek közt nem minden kap ilyen kiemelt prioritást. Ilyen elhanyagolt elem a legtöbbször a vállalkozások weboldala is.

Az üzleti weboldal a legtöbb vállalkozás online jelenlétének sarokköve, sokszor mégsem jut elég erőforrás arra, hogy megfelelően megtervezzék a fejlesztést, valamint a későbbi üzemeltetést. Pedig a weboldal megtervezése legalább annyira fontos, mint akármelyik más a vállalkozást kiszolgáló alkotóelemé.

Megfelelő weboldal tervezéssel nagyban lerövidíthető a fejlesztési folyamat, továbbá segít abban, hogy weboldalunk a lehető legmagasabb hatékonysággal támogassa a vállalkozásunk üzleti céljait.

Ebben a bejegyzésben lépésről lépésre bemutatom, hogy hogyan is érdemes megtervezni egy weboldalt, mielőtt belekezdünk annak fejlesztésébe.

Első lépés – Információgyűjtés

Mielőtt belekezdenénk a weboldal tervezés folyamatába a lehető legtöbb információt kell összegyűjtenünk. Így a későbbiekben sokkal egyszerűbben tudjuk meghatározni és elkészíteni többek közt a szükséges funkciókat, a webdesign elemeit, vagy a szöveges tartalmakat, de az erőforrások elosztásában is nagy segítségünkre lesz a nagy mennyiségű információ.

Fontos már a weboldal tervezése során kijelölni az elérni kívánt célokat

Célok meghatározása

A weboldal tervezése és elkészítése előtt már valószínűleg rendelkezel üzleti tervvel, vagy legalább egy határozott elképzeléssel, így jó eséllyel tudod, hogy mit is szeretnél elérni a weboldaladdal.

A legtöbb weboldal információt biztosít a vállalkozásról, a kínált termékről, vagy szolgáltatásról, továbbá kapcsolat felvételi lehetőséget is biztosít. Ám a legfőbb elérendő cél az értékesítés, vagy valamilyen egyéb üzleti szempontból fontos konverzió megtörténése.

Az elérendő cél(okat) mindig érdemes részletesen megfogalmazni, így a webdizájnerek és fejlesztők mindig ezen célokat szem előtt tartva fogják végezni a munkájukat.

A célcsoport meghatározása kritikus fontosságú

Célcsoport meghatározása

A célcsoport foglalja magában azokat akik leginkább szeretnél elérni a weboldaladdal. Ők azok, akiket a termékeddel, vagy szolgáltatásoddal megcélzol.

A megjelenés, tartalom, funkciók és kommunikáció szempontjából nagyon fontos, hogy minél pontosabb képet alkoss a célközönségedről.

Érdemes minél több jellemzőt összegyűjteni. Ilyenek a nem, életkor, foglalkozás, iskolázottság, jövedelmi színvonal, vagy a földrajzi lokáció.

Versenytárs elemzés

A versenytársak tevékenységének tüzetesebb átvizsgálása rengeteg előnnyel jár. Tölts egy kis időt azzal, hogy átnézed a weblapjukat és megvizsgálod, hogy mi az ami működik és mi az ami nem. Hasonlíts össze az eddigi elképzeléseid a versenytársak által megvalósítottakkal, jó inspirációt nyújthat például egy jól felépített a látogató tekintetét vezető dizájn.

Ha több weboldalt is megvizsgálsz, akkor biztosan ki fog rajzolódni egy-két iparági trend. Ezek célján mindig érdemes elgondolkodni, hiszen akár te is hasznukat veheted.

Tartalmi leltár

Hogy ne csak a vállalkozáson kívüli tényezőkről beszéljünk. Ismerkedj meg a tartalmi leltárral.

Ha már van egy korábbi weboldalad, vagy gyűjtöttél néhány ötletel, esetleg készítettél némi tartalmat, akkor ezeket érdemes összegyűjteni és rendszerezni. Értelemszerűen nagyban leegyszerűsíti a későbbiekben a folyamat több lépését is az, ha már bizonyos elemeket nem kell újra elkészíteni, vagy elég azokat átalakítani.

A tartalmi leltárba gyakran bekerülnek egy korábbi weboldalról származó, vagy már előre megírt szöveges tartalmak, összegyűjtött és felhasználni kívánt szöveges elemek, vagy inspiráló weboldalak képernyőmentései.

Második lépés – Weboldal tervezés

Ha sikerült összegyűjtenünk akkora mennyiségű információt, amely alapján már konkrét célokat tudunk kijelölni, akkor ideje elkezdeni a weboldal tervezési fázist. A fázis során feldolgozzuk az információt és egy előzetes tervet készítünk, melyre a későbbiekben weboldal fejlesztői alapozni fognak.

Oldalak meghatározása és az oldaltérkép elkészítése

Az oldaltérkép lesz a segítségünkre abban, hogy felvázoljuk milyen aloldalak fogják alkotni a weboldalunkat és azt is megmutatja, hogy ezek hogyan viszonyulnak egymáshoz.

Érdemes kilistáznod először azokat az aloldalak amelyekről tudod, hogy biztosan szükséged lesz rájuk. Tipikusan ilyen a Főoldal, kapcsolat, rólunk, termékek, szolgáltatások, kosár, vagy a pénztár oldal. A korábban összegyűjtött információk birtokában pedig kiegészítheted a listát a további szükséges aloldalakkal.

Ahhoz, hogy ezt rendszerezni tudd és jobban átlásd a listádat, valamilyen vizualizációs szoftverre lesz szükséged. Ez lehet egy Microsoft Excel, vagy Google Sheets táblázat, de számos, kifejezetten oldaltérkép készítésére kifejlesztett szoftver létezik, ilyen az Octopus.do, vagy a Gloomaps.com.

Felhasználói szempontból a logikus navigáció kiemelt fontosságú

Navigáció megtervezése

Ha készen van az oldaltérkép, akkor következő lépésként érdemes megkeresni az oldalak közötti kapcsolódási pontokat. Ezek lesznek segítségünkre abban, hogy logikus navigációs lehetőségeket biztosítsunk a látogatók számára.

A folyamat részeként érdemes azt is megvitatni, hogy milyen típusú navigációs elemeket biztosítunk és hogy hol helyezzük el azokat. Például hol helyezzük el a menüsávot és milyen legyen a felépítése.

Használj drótvázakat az egyszerűbb tervezés érdekében

Az oldalak struktúrájának megtervezése

A weboldal egésze után fordítsuk a figyelmünket egy eggyel kisebb egység felé. Ha nem is tervezzük meg minden egyes oldal részletes felépítését, de legalább a legfontosabb aloldalak és a több hasonló aloldalt magukban foglaló kategóriák kinézetét érdemes felvázolnunk.

A folyamat ezen részében javasolt a moodboard-ok használata.

A moodboard-ok olyan kollázsok melyekre a kiválasztott színek, betűtípusok és egyéb grafikai elemek kerülnek. Használatával láthatjuk, hogy ezek az elemek milyen összhatást nyújtanak.

Fontos még megemlíteni a drótvázakat. Ezek olyan vázlatos tervek, melyeken már feltüntetjük az egyes később elkészülő elemek elhelyezkedését. Így magunk előtt láthatjuk, hogy hogyan is fog felépülni az adott oldal.

Harmadik lépés – A webdesign véglegesítése

A harmadik fázisban az előzőleg begyűjtött információkat, az elképzeléseket, a már elkészült dizájn elemeket és a konkretizált vázakat és rendszereket gyúrjuk össze egy kerek egésszé. A webdesignerek a folyamat ezen részében alakítják ki azt a végleges megjelenést, mely alapján a fejlesztők el tudják kezdeni a munkájukat. Itt konkrét lépések helyett inkább tanácsokkal tudok szolgálni, ugyanis a folyamat ezen része szinte mindig egyéni preferencia alapján halad előre.

Fókuszálj a célcsoportra

Vizsgáld meg, hogy kik is fogják alkotni a fő célcsoportodat és fókuszálj a jellemzőikre. Különböző társadalmi csoportokhoz, különbözőképpen kell szólni. Ezért a grafikai elemek és a írott tartalmak elkészítése során mindig fejben kell tartani a célzott csoportok főbb tulajdonságait.

Válassz jól olvasható betűtípust

Figyelj az olvashatóságra

Itt két dologra hívnám fel a figyelmet. Egyrészt érdemes olyan színeket választani, melyek egymásra helyezve jól olvasható szöveget eredményeznek. A klasszik fekete-fehér kombinációval nem fogsz tudni mellélőni, de ha több színt vinnél az írott elemekbe, akkor mindig vizsgáld meg, hogy jól olvasható-e a szöveg az adott kombinációval.

A másik a betűtípusok kérdése. Válassz olyan betűtípust, melyet minden böngésző képes megjeleníteni, továbbá jól olvasható. Érdemes hanyagolni az írott hatást keltő és túlzottan dekorált betűtípusokat.

Használj képeket

Egész bekezdéseket válthatsz ki egyetlen jól megválasztott képpel. Amit itt fontosnak tartok megemlíteni, az az hogy érdemes minőségi, egyedi képeket használni, melyek jól kiegészítik a mondandódat. Ne használj csak azért képeket, mert kötelezőnek érzed a használatukat. Rengeteg jó stock fotó oldal érhető el, továbbá manapság már néhány perc alatt elkészíthetsz egy minőségi infografikát.

A hajtás feletti rész fontossága

Hajtás feletti szekciónak, vagy angolul above the fold-nak nevezzük a weboldal részét, amely betöltést követően, azonnal láthatóvá válik. Itt el kell helyezned azt a fő információt amit közölni szeretnél, emellett érdemes valamilyen cselekvés megtételére is felszólítanod a látogatóidat.

reszponzív technológia
A reszponzivitás ma már alapkövetelmény

Reszponzivitás

Manapság a legtöbb weblapot már többen látogatják mobil eszközökről, mint asztali gépekről. Épp ezért fontos, hogy külön dizájnt készíts legalább a mobilról és táblagépekről böngészőknek. Ha az erőforrások engedik, akkor érdemes nagyobb felbontásokra is tervezni, például 4k-ra, valamint a népszerűbb mobiltelefonok kijelzőire is.

Légy konzisztens

Az egységes dizájn és a logikus felépítés érdekében érdemes meghatározott megjelenést alkalmazni az fontosabb webes alkotóelemeknél. Hogy mire is gondolok? Javasolt többek közt az ugyanolyan megjelenésű gombok használata, a szövegek betűtípusainak egységesítése, vagy az olyan interaktív eszközök, mint az űrlapok felületének kinézetének fixálása.

Negyedik lépés – A megvalósítás megkezdése

Ez a cikk a tervezés folyamatáról szól és írtam már néhány bejegyzést a teljes weboldal készítés folyamatáról. Azonban ahhoz, hogy teljes legyen a bejegyzés, fontos hogy ejtsek néhány szót a megvalósításról.

A megvalósítás során a fejlesztők lépésenként ültetik át a még csak képeken és projekt fájlokon létező dizájnt egy működő weboldallá. Jellemzően először az aloldalak kerülnek legenerálásra, majd felépülnek a drótvázak. Ezt követi az egyes elemek elhelyezése és testreszabása, majd a funkcionalitás kialakítása.

A folyamat általában egy csak számodra és a fejlesztők számára elérhető felületen zajlik. Itt nyomon követheted a fejlesztés alakulását.

Gyakran ismételt kérdések

Mennyibe kerül egy átlagos weboldal megtervezése és elkészítése?

Egy átlagos üzleti weboldal megtervezése elkészítése körülbelül 120000-140000 forintos kezdő ártól érhető el.

Mennyi ideig tart megtervezni és elkészíteni egy weboldalt?

Weboldalak tervezését akár 2-3 hetes határidőkkel is vállaljuk.

Milyen csomagok közül választhatok?

Jelenleg három csomagajánlatot kínálunk, de természetesen ezektől eltérhetünk és egyedi árajánlatot is adhatunk.

Mit foglal magában a weboldal tervezés szolgáltatás?

Többek között teljesen egyedi dizájnt, pénzvisszafizetési garanciát, reszponzív megjelenést, magyar kezelőfelületet, biztonsági mentést, ingyenes SSL tanúsítványt, tartalom feltöltést, rövid határidőt, kijelölt kapcsolattartót, valamint weboldal kezelési oktatást.

Miért titeket válasszalak?

Mert a legkorszerűbb technológiákat nyújtjuk 8 év tapasztalatával, rövid határidővel és garanciával. Emellett kijelölt kapcsolattartód lesz és folyamatos tájékoztatást kapsz a folyamat lépéseiről.

Olvass tovább, ezek a cikkek is érdekelhetnek:

Megosztás itt: facebook
Megosztás itt: twitter
Megosztás itt: linkedin
Megosztás itt: email
Megosztás itt: pocket
small_c_popup.png

200+ Ingyenes marketing eszköz​

Emeld magasabb szintre vállalkozásod teljesítményét teljesen ingyenes marketing eszköztárunkkal. Több, mint 200 eszköz havidíj nélkül.

A weboldalon cookie-kat használunk, hogy minél jobb élményt tudjunk nyújtani