Az egyik leggyakoribb kérdés, amit kapunk: „Oké, de hogyan működik ez a gyakorlatban? Mi történik, miután felveszem veletek a kapcsolatot?” Ez jogos kérdés, és a válasz nem csak „kódolunk és kész”. A professzionális weboldal készítés egy strukturált, többlépéses folyamat, ahol a stratégiai gondolkodás legalább annyit számít, mint a technikai kivitelezés.
Ebben a cikkben végigvezetjük az egész folyamaton, az első konzultációtól az éles indulásig és azon túl.
1. Fázis: Konzultáció és Igényfelmérés (1. hét)
Minden az üzleti célok megértésével kezdődik. Nem a technológiával, nem a színekkel, nem a betűtípusokkal — hanem azzal a kérdéssel: „Mit szeretne elérni a weboldalával?”
Az Első Találkozó Kérdéslistája
- Célok: Ügyfélszerzés? Termékértékesítés? Márkaépítés? Tájékoztatás?
- Célközönség: Kik az ideális ügyfelei? Milyen problémájukra ad megoldást?
- Versenytársak: Kit tart a fő versenytársának online? Mit csinálnak jól/rosszul?
- Meglévő anyagok: Van logója, arculati kézikönyve, szöveges tartalma, fotói?
- Funkcionális igények: Blog? CMS (tartalomkezelő)? Kalkulátor? Többnyelvűség? Webshop?
- Időkeret és büdzsé: Reális elvárások egyeztetése
Ennek a fázisnak a végeredménye egy részletes projektterv (scope document), ami rögzíti az összes megállapodást: mit építünk, milyen ütemezéssel, és mennyiért.
2. Fázis: Stratégia és UX Tervezés (2. hét)
A második fázisban az információ-architektúrát és a felhasználói útvonalakat tervezzük meg. Ez nem dizájn — ez logika.
Mit Csinálunk Ebben a Fázisban?
- Oldaltérkép (Sitemap) — A weboldal struktúrájának megtervezése: milyen aloldalak kellenek, hogyan kapcsolódnak egymáshoz
- Wireframe — Alacsony hűségű vázlatok, amelyek megmutatják, melyik elem hol lesz az oldalon (szöveg, kép, gomb, űrlap)
- Konverziós útvonalak — Hogyan vezessük el a látogatót az A pontból (első látogatás) a B pontba (kapcsolatfelvétel/vásárlás)
- SEO stratégia — Kulcsszókutatás, a meta adatok tervezése, a tartalomstruktúra SEO szempontú optimalizálása
Ügyfél jóváhagyás
Minden wireframe-et és a stratégiát bemutatjuk és jóváhagyatjuk, mielőtt a dizájn fázisba lépnénk. Nincs meglepetés.
3. Fázis: UI Dizájn (3-4. hét)
Most jön a vizuális tervezés: Figma-ban készítjük el az egyedi dizájnt, pixel-pontosan.
A Dizájn Folyamata
- Moodboard — Inspirációs kollázs, ami meghatározza a vizuális irányt (színek, hangulatvilág, stílus)
- Design System — A tipográfia, a színpaletta, a gombok, az ikonok, az űrlapok egységes rendszere
- Főoldal dizájn — Az első, legrészletesebb oldal megtervezése
- Belső oldalak — A többi oldal dizájnja a main design language alapján
- Mobilnézet — Minden oldal mobil variánsának megtervezése
Amit NEM Csinálunk
- ❌ Nem dolgozunk sablonokból
- ❌ Nem használunk pagebuildereket (Elementor, Wix, stb.)
- ❌ Nem „közelítő” dizájnt adunk — pixel-pontosat
A UI/UX tervezés üzleti értékéről részletes cikket írtunk, érdemes elolvasni.
4. Fázis: Fejlesztés (4-7. hét)
Az elfogadott dizájnot egyedi kóddá alakítjuk. Itt történik a tényleges weboldal-építés.
Technológiai Stack
A projekttől függően a következő technológiákat használjuk:
- Astro — Tartalomvezérelt weboldalakhoz (céges oldal, blog, portfólió)
- Next.js — Komplex webalkalmazásokhoz (SaaS, dashboard, egyedi rendszerek)
- React — Interaktív komponensekhez (kalkulátorok, animációk, dinamikus elemek)
- Vite — Gyors fejlesztői környezethez és építési folyamathoz
- Sanity.io — Tartalomkezeléshez, ha az ügyfélnek szerkesztenie kell a tartalmat
SEO Beépítés a Fejlesztés Során
A keresőoptimalizálás nem utólagos ráépítés nálunk, hanem a fejlesztés szerves része:
- Sitemap és robots.txt automatikus generálás
- JSON-LD strukturált adatok (Organization, LocalBusiness, BreadcrumbList, BlogPosting)
- Kanonikus URL-ek
- Képoptimalizálás (WebP, lazy loading)
- Core Web Vitals optimalizálás (90+ PageSpeed pontszám cél)
Tesztelés
Fejlesztés közben folyamatos tesztelést végzünk:
- Cross-browser tesztelés — Chrome, Safari, Firefox, Edge
- Responsive tesztelés — Minden népszerű mobilméret
- Teljesítmény tesztelés — PageSpeed Insights, Lighthouse
- SEO audit — Meta adatok, strukturált adatok, indexelhetőség
5. Fázis: Tartalom és Finomhangolás (7-8. hét)
A végleges tartalom (szövegek, képek) behelyezése és a finomhangolás.
Tartalmi Ellenőrzőlista
- Minden oldalnak van egyedi title tag és meta description?
- A kulcsszavak helyesen vannak elhelyezve?
- A képek optimalizáltak és van alt szövegük?
- A belső linkek működnek?
- A CTA gombok hatékonyak és jól elhelyezettek?
- A kapcsolatfelvételi űrlap működik?
6. Fázis: Indulás és Átadás (8-9. hét)
Az Éles Indítás Lépései
- DNS átirányítás — A domain rámutatásás az új hosting-ra
- SSL tanúsítvány — HTTPS biztosítása
- Google Search Console beüzemelés — A sitemap beküldése
- Google Analytics 4 beállítás — Forgalomkövetés elindítása
- 301 átirányítások — Ha régi oldalról érkezünk, a régi URL-ek átirányítása az újakra
- Végleges teljesítmény teszt — Utolsó PageSpeed/Lighthouse ellenőrzés
Amit Átadáskor Kap
- A teljes forráskód az Ön tulajdonába kerül
- Hosting hozzáférés (Netlify/Vercel admin)
- CMS hozzáférés (ha van Sanity.io integráció)
- Google Analytics és Search Console hozzáférés
- Dokumentáció a legfontosabb teendőkről
7. Fázis: Utógondozás és Növekedés (Folyamatos)
Az éles indulás nem a vége — hanem az eleje az online jelenlétnek.
Amit ajánlunk az indulás után:
- Havi 2-4 SEO-optimalizált blogposzt témáváan
- Negyedéves teljesítmény-felülvizsgálat (PageSpeed, Search Console)
- Google Business Profile optimalizálás helyi keresésekhez
- Tartalomfrissítések és funkcionális bővítések
Gyakran Ismételt Kérdések
Mennyi időm megy el ügyfélként a folyamatba?
Az első konzultáció 1-2 óra. Ezután a jóváhagyási pontoknál kérünk visszajelzést (wireframe, dizájn, tartalom), ami alkalmanként 30-60 perc. Összesen kb. 5-8 óra az Ön idejéből a teljes projekt során.
Mi történik, ha nem tetszik a dizájn?
A dizájn fázisban 2 revíziós kört biztosítunk. Az esetek 95%-ában az első terv közelében maradunk, mert a wireframe fázisban már egyeztettük az irányt. Ha mégis gyökeresen más irány kell, azt megbeszéljük.
A weboldalt később bővíthetem?
Igen, ez az egyedi kódalapú fejlesztés egyik legnagyobb előnye. Az Astro/Next.js architektúra moduláris — később hozzáadhat blogot, többnyelvűséget, CMS-t, webshopot anélkül, hogy az alapokat újra kellene építeni.
Készen áll az első lépésre? Az ingyenes konzultáción közösen felmérjük az igényeit, és személyre szabott tervet készítünk.
Kérek egy ingyenes konzultációt
