UX/UI design
és webdesign

Az UX (felhasználói élmény) azt tervezi, hogyan működik a felület: struktúra, útvonalak, űrlapok logikája. A UI (felhasználói felület) azt, hogyan néz ki: tipográfia, színek, ikonok, gombok, mozgás. A kettő együtt ad használható és az arculathoz illő weboldalt, ezért nálunk egy csapat csinálja mindkettőt.

A drótváz a képernyő szürke vázlata: mi hol van, mekkora helyet kap és milyen sorrendben következik. Színt, betűt és végleges képet még nem tartalmaz, ezért gyorsan és olcsón változtatható.

A prototípus egy lépéssel tovább megy: kattintható, a menü és a gombok működnek, így végig lehet próbálni a látogató útját az ajánlatkérésig vagy a kosárig, mielőtt egyetlen sor végleges kód születne.

Igen, csak arányosan. Öt aloldalnál elég egy rövid kutatás, de a menü, a kezdőlap sorrendje és az ajánlatkérő helye ott is eldönti, jön-e megkeresés. A céges honlapkészítés árában ez az alap tervezés benne van.

A design system a weboldal építőkészlete: a színek, betűméretek, gombok, űrlapmezők, kártyák és térközök egységes készlete, mindegyik meghatározott állapotokkal (alap, hover, tiltott, hibás).

A haszna később mutatkozik meg: egy új aloldal vagy funkció gyorsabban és olcsóbban készül el, mert nem kell újra tervezni mindent, és az oldal nem esik szét az évek alatt.

Egy szabadúszó webdesigner jellemzően olcsóbb és rugalmasabb, viszont a terv megvalósítása már másik emberre marad, és a két oldal között szokott elveszni az idő meg a felelősség.

Nálunk a tervező és a fejlesztő egy csapatban dolgozik, így a terv nem úgy készül, hogy utána nem megvalósítható. Cserébe egy egyszerű, egy képernyős feladatra valószínűleg a szabadúszó a gazdaságosabb választás, ezt meg is szoktuk mondani.

Weboldal-projektnél a tervezés a kivitelezés része, külön tétel csak az önálló arculat, logó vagy a nagyobb webalkalmazás-felület. A céges honlap nettó 350 ezer forinttól indul, az ársávokat a weboldal készítés árak 2026 oldalon részleteztük. Egyedi feladatra tételes ajánlatot adunk.

Ezek önálló tételek, a terjedelem szabja meg az árat. Egy logó önmagában a legkisebb csomag: több irány, egy kiválasztott változat kidolgozása és a használható fájlformátumok (vektoros és képfájlok, színes és egyszínű változat).

A teljes arculat ennél több: színpaletta, betűtípusok, névjegy és dokumentumsablonok, közösségi média felületek. Árajánlat előtt megbeszéljük, mire van tényleg szüksége, mert sok elem utólag is pótolható.

Egy céges honlap drótváza és vizuális terve jellemzően 2–3 hét, webshopnál vagy alkalmazásfelületnél 4–6 hét, a képernyők számától függően. Ebbe beleértjük az egyeztetési köröket is.

A határidőt leggyakrabban a visszajelzés üteme mozgatja: ha a döntéshez több ember jóváhagyása kell, azt érdemes előre összehangolni.

Az ajánlatban két érdemi módosítási kör szerepel: egy a drótvázra, egy a vizuális tervre. A tapasztalat szerint ennyi elég, ha az első egyeztetésen tisztázódik, mit kell tudnia az oldalnak és kinek szól.

Az apró igazításokat (szöveg, kép, sorrend) nem számoljuk köröknek. Ami tényleg drága, az az irányváltás: ha a második kör után derül ki, hogy más célközönségre kellett volna tervezni.

A drótváz és a vizuális terv kattintható prototípusként készül, amit böngészőben néz meg és kommentel, tehát nem kell hozzá tervezőprogram. A végén a tervfájlok mellett az élő oldalt, a design systemet (színek, betűk, komponensek) és az SVG ikonkészletet is megkapja.

A forrásfájlok Önéi: átadás után bármelyik másik tervező vagy fejlesztő tovább tud dolgozni belőlük.

Igen, a meglévő logó, színek és betűk az alap. Ha az arculat csak nyomtatásra készült, kiegészítjük a webes részekkel: képernyőn olvasható betűméretek, kontrasztos állapotszínek, sötét mód paletta, ikonstílus.

A logó használati szabályait (méretek, védőtávolság, mit nem szabad vele csinálni), a színpalettát pontos kódokkal, a betűtípusokat és a típusos alkalmazásokat: névjegy, levélpapír, közösségi borítókép, hirdetési sablon.

Kis cégnél egy néhány oldalas változat is elég, a lényeg, hogy bárki, aki később anyagot készít Önnek, ugyanazt a képet hozza.

Három út van: saját fotózás, jogtiszta képbörze és egyedi grafika vagy illusztráció. Szolgáltatónál szinte mindig a saját fotó nyer: a valódi műhely, csapat és munka többet mond, mint a mosolygó modellek laptop előtt.

Fotózni mi is tudunk, és a meglévő képeket is rendbe tesszük: vágás, színhelyesség, webre való méretezés, WebP és AVIF változat. A képek alt leírását is megírjuk, mert az a keresőknek és a képernyőolvasóknak is számít.

A sablon gyorsabban indul és olcsóbb, viszont a versenytársai ugyanazt a sablont használhatják, és a szűk hely gyakran a tartalmat tördeli meg: azt tudja megmutatni, amit a sablon enged.

Az egyedi design ott térül meg, ahol a márka megkülönböztetése és a konkrét üzleti cél számít. A mi megoldásunk a kettő között áll: egyedi felület bevált, tesztelt komponensekből építve, így nem nulláról készül minden.

Igen, ha a tervezéskor számolunk vele. A képek WebP és AVIF formátumban, méretezve mennek ki, az ikonok SVG-k, az animációt a GSAP csak akkor futtatja, amikor a szekció látszik. Ez az oldal is animált szekciókkal és egy interaktív csúszkával fut, mérje meg a Google PageSpeed eszközével.

Először mobilra, utána asztali méretre: a látogatók többsége telefonon érkezik, és ott a legkeményebb a helyért folyó verseny. Ez a gyakorlatban azt jelenti, hogy előre eldöntjük, mi az az egy dolog, ami a kis képernyőn látszani fog.

Emellett figyelünk a kézre eső gombméretre, az egy kézzel elérhető sávra és a mobilon kitölthető űrlapra. Átadás előtt valódi készülékeken nézzük végig, nem csak böngészős szimulációban.

Nem kötelező, de érdemes: a látogatók egy része eleve sötét módból érkezik, és ha az oldal ilyenkor olvashatatlan, az rosszabb, mintha nem is lenne. A tervezéskor ezért mindkét változatra megnézzük a színeket és a képeket.

Gyakorlati következménye van a grafikára is: átlátszó hátterű logó és ikonok kellenek, fehér háttérbe égetett kép helyett. Ezt érdemes az arculatnál egyszer rendezni.

Webshopoknál 2026 júniusától igen, az európai akadálymentesítési irányelv (EAA) alapján. Más oldalon önkéntes, de a kontraszt, a billentyűzetes kezelés és a képek leírása mindenkinek jobb felületet ad. Részletek: kötelező akadálymentesíteni a webshopot?

Igen. Az újratervezés a meglévő statisztikából indul: hol lépnek ki a látogatók, melyik oldal hoz megkeresést. A kész tervet WordPress, WooCommerce, Magento 2 vagy saját WebPot CMS rendszerben valósítjuk meg, a keresőbeli pozíciók megtartásával.

Csak mérésből. Ezért rögzítjük az átépítés előtt, hogy mi a viszonyítási alap: hány ajánlatkérés vagy megrendelés jön most, milyen arányban hagyják el a kosárt, hol esnek ki a látogatók.

Élesítés után ugyanezt mérjük: az ízlés helyett számok döntenek. Nagyobb forgalomnál A/B tesztet is futtathatunk egy-egy kulcsoldalra, kisebb oldalon az előtte és utána összevetés a reális módszer.