Mi a különbség az UX és a UI tervezés között?

Az UX azt tervezi, hogyan működik a felület: struktúra, útvonalak, űrlapok logikája. A UI 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.

Kell UX/UI tervezés egy kis céges honlaphoz is?

Igen, arányosan. A menü, a kezdőlap sorrendje és az ajánlatkérő helye kis oldalon is eldönti, jön-e megkeresés. A céges honlapkészítés árában ez az alap tervezés benne van.

Milyen eszközben készül a terv és mit kapok kézbe?

A drótváz és a vizuális terv kattintható prototípusként készül. A végén az élő oldalt, a design systemet és az SVG ikonkészletet is megkapja.

Nem lassítja az oldalt a sok grafika és animáció?

Nem, ha tervezéskor számolunk vele: WebP és AVIF képek, SVG ikonok, GSAP animáció csak a látható szekción. Az oldalaink látványos felülettel is zöld PageSpeed értéket hoznak.

Meglévő WordPress vagy webshop felületét is újratervezik?

Igen. Az újratervezés a meglévő statisztikából indul, a kész tervet WordPress, WooCommerce, Magento 2 vagy WebPot CMS rendszerben valósítjuk meg a keresőbeli pozíciók megtartásával.

UX/UI tervezés és grafika, ami nem csak szép: elad

Kutatás, drótváz, vizuális design és arculat egy kézben, a fejlesztővel közös asztalnál.

A látogató nem a kódot látja, hanem a felületet: a betűt, a színt, a gombot, a mozgást. Mi úgy tervezünk, hogy a design a fejlesztéssel együtt születik, ezért amit a terven lát, ugyanúgy fut mobilon, sötét módban és zöld PageSpeed érték mellett is. Görgessen: ez az oldal maga a bemutató, a két interaktív szekció élesben mutatja, mit értünk felület alatt.

UX / UI Grafika

Amit lát, az csak a felszín: nézzen a felület mögé

Egy jó felület öt rétegből áll és a látogató ebből csak a legfelsőt látja. Görgessen és szedjük szét együtt: ez az UX/UI tervezés rétegről rétegre.

01 · Vizuális design

02 · Interakció

03 · Struktúra

04 · Kutatás

05 · Arculat

ADATLAP / RÉTEGEK

1 / 5 · Amit a látogató lát

Vizuális design (UI)

Tipográfia, színek, térközök, gombok és képek: az arculat a képernyőn. Mobilon, asztali gépen és sötét módban is ugyanaz a minőség.

Design system: minden komponens egy készletből
Arculathoz illő betű és paletta, kontraszt-ellenőrzéssel
Reszponzív és sötét módra tervezett felület

2 / 5 · Amit a látogató érez

Interakció és mozgás

Hover, belépő animáció, görgetésre mozgó szekció, űrlap visszajelzés. A mozgás vezeti a szemet és jelzi, hogy történt valami.

Mikrointerakciók a gombokon és űrlapokon
GSAP animáció csak a látható szekción
Csökkentett mozgásnál automatikusan kikapcsol

3 / 5 · Ami vezeti

Struktúra és drótváz (UX)

Menü, oldaltérkép, a látogató útja a belépéstől az ajánlatkérésig. Szürke vázlaton dől el, mi kerül a hajtás fölé.

Információs architektúra és menü
Kattintható drótváz és prototípus
Űrlapok logikája, hibakezelés

4 / 5 · Amire épül

Kutatás és célok

Kik jönnek, honnan, milyen eszközről és mit akarnak elérni. Statisztika, versenytársak felülete és néhány ügyfélbeszélgetés.

Célcsoport és a fő feladatok
A meglévő oldal mérési adatai
Versenytárs-felületek elemzése

5 / 5 · Ami összetartja

Arculat és grafika

Logó, színpaletta, betűk, ikonkészlet, képi stílus. Ha nincs vagy elavult, elkészítjük, ha van, webre igazítjuk.

Logó és arculati alapok
Egyedi SVG ikonok, illusztrációk, hero képek
Hirdetési és social kreatívok ugyanabban a stílusban

01 / UX

Kutatás és struktúra

Kik jönnek, honnan, mit akarnak elérni. Menü, oldaltérkép és a látogató útja az ajánlatkérésig, szürke drótvázon eldöntve, mielőtt egyetlen szín a képernyőre kerülne.

célcsoport · oldaltérkép · drótváz · prototípusA rétegek élőben ↑

02 / UI

Vizuális design

Tipográfia, paletta, térközök, komponensek és állapotaik egy design systemben. Sötét móddal együtt, kontraszt-ellenőrzéssel, hogy a látvány olvasható is maradjon.

design system · tipográfia · sötét mód · WCAG AAA hat oldal élőben ↓

03 / GRAFIKA

Arculat és grafika

Logó, ikonkészlet SVG-ben, illusztrációk, hero képek és hirdetési kreatívok ugyanabból a stílusból. Ha nincs arculat, elkészítjük, ha van, webre igazítjuk.

logó · SVG ikon · illusztráció · social kreatívMérőszámok ↓

WEBPOT DEV / UX · UI · GRAFIKA

UX és UI: az egyik azt tervezi, hogyan működik,
a másik azt, hogyan néz ki.

A weboldal sikere nem a technológián dől el, hanem azon, hogy a látogató megtalálja-e, amit keres, és megteszi-e, amit szeretnénk: kattint, űrlapot tölt ki, vásárol. Az UX (felhasználói élmény) a felület működése, a UI (felhasználói felület) a megjelenése. Nálunk a kettő egy asztalnál készül a fejlesztéssel, ezért a terv nem kép marad, hanem élő felület lesz.

5 RÉTEG

ADATLAP / UX · UI

Kimenetélő oldal, nem PDF

Mobilelőször tervezve

Sötét módalapból, két palettával

HozzáférésWCAG AA · EAA 2026

MozgásGSAP, csökkentett módban ki

AjánlatÁrajánlatkérés →

MOBIL

Mobil és sötét mód

Mobilra tervezünk először, onnan jön a látogatók többsége
Két paletta: világos és sötét, kontraszt-teszttel
Érintésre méretezett gombok és űrlapok

HOZZÁFÉRÉS

Akadálymentesség

Kontraszt WCAG AA szinten minden állapotban
Billentyűzetes kezelés, látható fókusz
Képleírás, címsor-hierarchia, EAA 2026 webshopokra

ÁTADÁS

A terv élő felület

Design system: minden oldal ugyanabból a komponenskészletből
Pixelre ugyanaz WebPot CMS-ben vagy a választott rendszerben
Oktatás a szerkesztőfelülethez, a cég maga frissíti

A jó felület hat oldalból áll

Görgessen le és forgassa meg: a kocka hat oldala az a hat döntés, amit minden felületnél meghozunk, a logótól a mozgásig.

Brief

Kutatás

Drótváz

Prototípus

Teszt

Átadás

Logó · Arculat

Tipográfia

Szín · Sötét mód

Ikon · Illusztráció

Reszponzív

Mozgás

ADATLAP / HAT OLDAL

1 / 6 · Első benyomás

Logó és arculat

A logó, a színek és a betűk a cég névjegye a képernyőn. Ha az arculat nyomtatásra készült, webre igazítjuk: kontrasztos állapotszínek, sötét paletta, ikonstílus.

Meglévő arculat→webes kiegészítés→egységes felület

2 / 6 · Olvashatóság

Tipográfia

Betűméret, sorhossz, sortáv, címsor-hierarchia. A látogató nem olvas, hanem pásztáz, a tipográfia mondja meg neki, hol álljon meg.

Címsor-hierarchia→olvasható törzsszöveg→gyors pásztázás

3 / 6 · Hangulat

Szín és sötét mód

A paletta az arculatból jön, de a webnek kettő kell belőle: világos és sötét. Minden gomb- és űrlapállapotot kontraszt-teszttel ellenőrzünk.

Arculati paletta→két témára bontva→kontraszt-teszt

4 / 6 · Karakter

Ikon és illusztráció

Egyedi SVG ikonkészlet és saját stílusú illusztráció különbözteti meg az oldalt a sablonoktól. Kicsi fájl, éles minden kijelzőn, sötét módban is működik.

Ikonstílus→SVG készlet→hero és illusztráció

5 / 6 · Minden eszközön

Reszponzív elrendezés

Telefonon, tableten és asztali gépen más a sorrend és a méret, de ugyanaz a felület. Mobilra tervezünk először, mert onnan jön a látogatók többsége.

Mobil vázlat→tablet→asztali nézet

6 / 6 · Élet

Mozgás és mikrointerakció

Hover, belépő animáció, görgetésre mozgó szekció, űrlap visszajelzés. A mozgás irányítja a figyelmet, de csökkentett mozgást kérő látogatónál kimarad.

Állapot változik→finom mozgás→a látogató érti

Nézze meg, ahogy a tervből felület lesz

Balra a kód, jobbra a felület, ahogy a látogató látja: szerkezet, tartalom, dizájn, élesítés. A valóságban ez nálunk pár nap vagy hét, itt fél perc. A lépésekre kattintva bármelyik fázisról újraindíthatja.

index.htmlstilus.css

● ÉLŐ ★ SEO/AI kész

Rozmaring Bisztró ÉtlapGalériaKapcsolat

Házias fogások és jó hangulat a belváros szívében.

Asztalfoglalás

0PageSpeed

🍷Borvacsorák

🥗Napi menü

🎉Rendezvények

Indítsuk el az Önét? Árajánlatot kérek →

WEBPOT DEV / UX · UI FOLYAMAT

Öt lépés a brieftől az élő oldalig, minden lépésnél látja, hol tartunk.

A design nem egy nagy leleplezés a végén, hanem rövid körök sora. A fejlesztő az első naptól részt vesz benne, ezért nem kerül a tervbe olyan elem, amit később nem lehet gyorsan és jól megvalósítani.

0101Brief

Brief és kutatás

Egy beszélgetés a célokról, a célcsoportról és a meglévő anyagokról: logó, színek, szövegek, statisztika. Megnézzük a versenytársak felületét és azt, honnan érkeznek a látogatók.

kimenet: tervezési brief · célok · prioritások

0202Struktúra

Struktúra és drótváz

Menürendszer, oldaltérkép és a fő oldalak szürke vázlata. Itt dől el, mi kerül a hajtás fölé, hol az ajánlatkérő és hány kattintás az út a célig. Olcsón lehet rajta változtatni, ezért itt vitázunk, nem a kész designon.

kimenet: oldaltérkép · kattintható drótváz

0303Design

Vizuális terv és design system

A kezdőlap és egy tipikus aloldal kész designja asztali és mobil nézetben, sötét móddal együtt. Ha kell, két stílusirányt mutatunk, és a választottat visszük tovább. Ebből épül az összes többi oldal.

kimenet: UI terv · design system · ikon- és képkészlet

0404Teszt

Prototípus és teszt valódi eszközön

A tervet telefonon, tableten és gyenge hálózaton nézzük, nem csak a tervező monitorán. Ellenőrizzük a kontrasztot, a billentyűzetes kezelést és a betöltési időt, mielőtt éles lenne.

kimenet: jóváhagyott terv · tesztjegyzőkönyv

0505Éles

Kivitelezés és finomhangolás élesben

A design a WebPot CMS moduljaiban vagy a választott keretrendszerben épül meg, majd az élő oldalon mérjük, hol akad el a látogató, és ott javítunk. Az átadás után a felületet a cég maga szerkeszti.

kimenet: élő oldal · mérés · oktatás a szerkesztőhöz

A felület csak annyira jó, amennyire a grafika, amiből épül. Egy stókfotókból és vegyes ikonokból összerakott oldal akkor is sablonos marad, ha a kód hibátlan. Ezért a grafikai munkát nem adjuk ki a házból: ugyanaz a csapat rajzolja az ikont, aki a gombot programozza.

Logó és arculati alapok: logóváltozatok, színpaletta, betűtípusok, használati szabályok, ha még nincs arculat vagy fel kell frissíteni.
Weboldal-grafika: hero képek, illusztrációk, egyedi SVG ikonkészlet, háttérminták, a sötét módhoz is.
Hirdetési és social kreatívok: Google Ads és Facebook banner-sorozatok az oldallal egyező stílusban, hogy a kattintás után ne törjön meg az élmény.
Képkezelés: WebP és AVIF konverzió, méretezett változatok, alt szövegek, hogy a grafika ne lassítsa az oldalt és a képkeresőben is megjelenjen.
Animált elemek: GSAP alapú belépő és görgetésre mozgó szekciók, mint a fenti rétegek és a lenti kocka, csökkentett mozgásnál kikapcsolva.

Nincs fordítási veszteség

A grafikus terve nem egy másik cégnél „közelítőleg” valósul meg. Ami a terven van, az fut az oldalon, pixelre.

Csak megvalósítható ötlet kerül a tervbe

A fejlesztő az első vázlatnál ott ül, ezért nem születik olyan design, ami szép, de lassú vagy mobilon használhatatlan.

Sebesség a tervezés része

Képformátum, betűbetöltés, animáció költsége már a designban eldől. Ezért tudnak az oldalaink zöld PageSpeed értéket hozni látványos felülettel is.

Egy felelős, egy határidő

Nem kell grafikus, fejlesztő és üzemeltető között közvetíteni. Egy partner viszi végig a brieftől az éles oldalig és utána is.

MÉRŐSZÁMOK / FELÜLET

Mérhető olvashatóság, mobil-használat és sebesség.

01 / OLVASHATÓSÁG

Kontrasztos szöveg minden állapotban

Minden szín-párost WCAG AA szinten ellenőrzünk, világos és sötét módban egyaránt. A tipográfia olvasható betűmérettel és sorhosszal készül, nem a látvány kedvéért csökkentve. Aki nem tudja elolvasni, az nem is kattint.

WCAG AA · két paletta · kontraszt-teszt minden gombon

02 / MOBIL

Mobilra tervezve, nem lekicsinyítve

A látogatók többsége telefonról érkezik, ezért a vázlat mobilon indul, az asztali nézet abból nő ki. Érintésre méretezett gombok, egy oszlopos elrendezés, a sávszélességhez igazított képek. Amit itt lát, ugyanígy fut a telefonján.

mobil-első · érintésre méretezett · egy oszlop

03 / SEBESSÉG

Látványos felület, zöld PageSpeed értékkel

A design költsége már a tervben eldől: SVG ikonok, WebP és AVIF képek, betűk előre betöltve, GSAP animáció csak a látható szekción. Ezért marad zöld a mérés egy ilyen, animált oldalon is, ahogy ez az oldal is bizonyítja.

PageSpeed 97-100 · SVG · WebP és AVIF · lusta betöltés

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.

Igen, csak arányosan. Öt aloldalnál nem kell hetekig kutatni, 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.

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.

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. A végén nem csak a tervfájlokat kapja, hanem az élő oldalt, a design systemet (színek, betűk, komponensek) és az SVG ikonkészletet.

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.

Nem, 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 két nagy interaktív szekcióval fut, mérje meg a Google PageSpeed eszközével.

Webshopoknál 2026 júniusától igen, az európai akadálymentesítési irányelv (EAA) alapján. Más oldalon nem kötelező, 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.

Küldje el a jelenlegi oldal címét vagy a tervezett projekt rövid leírását. Megnézzük, hol akad el a látogató, és tételes ajánlatot adunk a tervezésre és a kivitelezésre. A felmérés díjmentes.

Árajánlatot kérek

Kapcsolódó oldalak: céges honlapkészítés, weboldal és webáruház készítés, webalkalmazás fejlesztés, weboldal készítés árak 2026, referenciák.