eclick.aiGEO-audit
Tervezés

UI/UX tervezés: felület, amit az ember használni tud, a gép pedig érteni

Az UI/UX tervezés a felhasználó útjának és a felület kinézetének megtervezése, drótváztól a fejlesztőnek átadott Figma-fájlig. Weboldalhoz, webshophoz és mobilapphoz is vállaljuk, a fejlesztéstől függetlenül is, akadálymentesen és olvashatóan.

Szerző: Az eClick csapata · Frissítve:

Ingyenes konzultációt kérek Ingyenes GEO-audit

Röviden

  • Figma a fő eszköz: design rendszer, átkattintható prototípus és fejlesztőbarát átadás. A tervezés a fejlesztéstől külön is megrendelhető.
  • Az akadálymentességet (WCAG, EAA) már a tervben rögzítjük, mert utólag drágább javítani.
  • A jól strukturált, olvasható felület az AI-nak is segít: tiszta címhierarchia, értelmes feliratok.
  • A grafikai tervezés (arculat, logó, csomagolás) az xMatrix csapatával, egy kapcsolattartón át megy.
A szolgáltatás tartalma

Mit tartalmaz az UI/UX tervezés, és mi a különbség az UI és az UX között?

  • 01

    UX: a felhasználó útja

    Felfedezés interjúkkal, analitikával és UX-audittal: kik használják a felületet, mit akarnak, hol akadnak el. Ebből lesz a struktúra.

  • 02

    UI: a felület kinézete

    Gombok, színek, tipográfia, elrendezés. Figmában design rendszerré áll össze, komponensekkel, változókkal és Auto Layouttal, pixelpontos képernyőkkel, reszponzívan.

  • 03

    Drótváz és átkattintható prototípus

    Mindig a drótváz jön először: a struktúrát ott döntjük el, mielőtt a vizuálra időt költenénk. Az átkattintható prototípuson már felhasználói teszt is futtatható.

  • 04

    Akadálymentes tervezés

    Elegendő kontraszt, olvasható betűméret, billentyűzettel és képernyőolvasóval használható elemek, címkézett űrlapmezők, már a tervben. A mérce a WCAG 2.1 AA szint.

  • 05

    Grafikai tervezés: arculat, logó, csomagolás

    Logó, arculat és vizuális kommunikáció online és offline felületekre. Az xMatrix Communication grafikai ügynökséggel egy irodában dolgozunk, így a fejlesztés, a marketing és a grafika egy kapcsolattartón és egy ütemterven át megy. A referenciák között 190+ grafikai munka szerepel, főleg POS-grafika és csomagolás.

  • 06

    Átadás és finomítás

    Fejlesztőbarát Figma-átadás, rétegekbe rendezett fájlokkal, és ha a fejlesztő elakad, segítünk értelmezni a tervet. Élesítés után pár körös finomítás jön adatok és visszajelzések alapján.

Hogyan zajlik

Hogyan zajlik az UI/UX tervezés?

  1. 1

    Felfedezés

    Megismerjük a célközönséget, a versenytársakat és a meglévő felület gyengéit: interjúk, analitika, UX-audit.

  2. 2

    Ajánlat

    Az eclick.hu szerint pár nap alatt árazunk, tételes lebontással és határidővel, kötelezettség nélkül.

  3. 3

    Drótváz és design

    Először wireframe, hogy a struktúra rögzüljön, utána Figmában design rendszer, pixelpontos képernyők és átkattintható prototípus.

  4. 4

    Átadás és iteráció

    Fejlesztőbarát Figma-átadás, élesítés után pár körös finomítás. Az UX-munka az élesítéssel nem ér véget.

Kinek szól

Kinek érdemes UI/UX tervezést rendelnie?

  • Akinek már van fejlesztője, de hiányzik a használható, átgondolt felület, és csak a tervezést rendelné meg.
  • Új weboldal, webshop vagy mobilapp előtt állóknak, akik a fejlesztés előtt tisztázni akarják a struktúrát.
  • Akinek a meglévő felülete sok kattintást, lemorzsolódást vagy ügyfélszolgálati kérdést termel: az UX-audit önállóan is rendelhető.
  • Webshopot vagy online szolgáltatást üzemeltetőknek, akiket érint az EAA akadálymentességi kötelezettsége.
AI és GEO

Miért segít az akadálymentes, jól strukturált felület az AI-nak is?

Az akadálymentesség és az AI-olvashatóság ugyanabból a forrásból táplálkozik: a szemantikus, jól szerkesztett felületből. Egy képernyőolvasó és egy nyelvi modell is a címsorokból, listákból, gombfeliratokból és képleírásokból építi fel az oldal szerkezetét. Az EAA (European Accessibility Act) 2025. június 28-tól kötelező az érintett szolgáltatásokra, például a webshopokra. A mikrovállalkozásokra bizonyos esetekben kivétel vonatkozik, a pontos hatályt a hazai jogszabály dönti el, ezt érdemes jogásszal is egyeztetni. Mi a WCAG 2.1 AA szintjéhez tervezünk: egyértelmű címhierarchia, kitöltött alt-szövegek, beszédes linkek és gombfeliratok.

Az olvashatóság és a mobil sem csak esztétika. Ahol mobilon is jól tagolt a szöveg, rövidek a bekezdések, egyértelműek a gombok és az űrlapok, ott az embernek könnyebb a dolga, az AI-nak pedig könnyebben összefoglalható az oldal. Ezt már a drótvázon rögzítjük: hova kerül a főcím, a lényegi válasz, a kapcsolat és az ár. Az AI a tervezési munkában is segít, az eclick.hu szerint drótváz-iterációban, microcopyban, akadálymentesség-ellenőrzésben és vizuális asszetekben. Hogy a kész felület mennyire olvasható a gépeknek, az ingyenes GEO-audit megmutatja.

Ár

Mennyibe kerül az UI/UX tervezés, és mennyi idő alatt készül el?

Az ár a projekt méretétől és összetettségétől függ, ezért az ajánlat tételesen lebontja, mit kapsz. Az eclick.hu szerint négy dolog befolyásolja: a képernyők száma (egy háromoldalas landing mást kér, mint egy harmincképernyős webapp), a felhasználói folyamatok (regisztráció, fizetés, admin), a design rendszer (teljes komponens-könyvtárnál hosszabb a tervezés, de utána gyorsabb a fejlesztés) és a kutatás (interjú, UX-audit, felhasználói teszt: opcionális). Időkeretre az eclick.hu átlagokat ad: kis projekt (1-3 oldal) 1-2 hét, közepes webapp (10-20 képernyő) 3-6 hét, nagy rendszer (design rendszerrel, 30+ képernyő) 6-12 hét, önálló UX-audit 3-5 munkanap. A végleges határidőt a hatókör és a visszajelzési körök száma szabja meg.

Kérj ajánlatot egy ingyenes konzultáción
Az eClick-ről

Tények és technológiák

  • Az eClick Apps csapatában designer és fejlesztők dolgoznak, a grafikai munkát az xMatrix Communication kreatív csapata egészíti ki, közös irodából (eclick.hu, Rólunk).
  • Az eclick.hu referenciái között 190+ grafikai munka szerepel, ebből 129 POS-grafika és 61 csomagolás.
Technológiák
  • Figma
  • Sketch (meglévő fájlok fogadása)
  • Adobe XD (meglévő fájlok fogadása)

Referenciák és részletek az eclick.hu-n

GYIK

Gyakori kérdések az UI/UX tervezésről

Mi a különbség az UI és az UX tervezés között?
Az UX az egész út: honnan érkezik a felhasználó, mit csinál, miért kattint és miért nem. Az UI a vizuális megjelenés: gombok, színek, tipográfia, elrendezés. Egy jó terméknél a kettő együtt működik, ezért nálunk egy folyamatban, drótváztól a végleges designig készül.
Csak akkor érdemes hozzátok fordulni, ha a fejlesztést is nálatok rendelem?
Nem, a tervezés önállóan is megrendelhető. Figma-fájlt kapsz minden képernyővel és állapottal, design rendszert, átkattintható prototípust, és ha a fejlesztőd elakad, segítünk értelmezni a tervet.
Miért kell akadálymentesen tervezni, és mit jelent ez a gyakorlatban?
Azért, mert az EAA 2025. június 28-tól kötelező az érintett szolgáltatásokra, például a webshopokra, és mert a rossz kontraszt vagy a címke nélküli űrlapmező vásárlót visz el. A gyakorlatban WCAG 2.1 AA szintű tervezést jelent: kontraszt, betűméret, billentyűzettel használható elemek, címkézett mezők. Hogy rád pontosan hogyan vonatkozik, azt a hazai jogszabály dönti el.
Lesz drótváz, és milyen eszközökkel dolgoztok?
Mindig drótváz az első, mert a struktúra nélkül a design csak smink. A drótvázon kiderül, mi hova kerül, gyorsan átdolgozható, és prototípusként már tesztelhető. A fő eszköz a Figma: drótváz, design, prototípus és átadás egy helyen. Sketch vagy Adobe XD fájlokat is be tudunk fogadni.
Készítetek logót, arculatot és csomagolást is?
Igen. A grafikai tervezést az xMatrix Communication kreatív csapatával együtt végezzük, egy irodából. Az xMatrix önálló ügynökség, nálunk a fejlesztés, a marketing és a grafika mégis egy kapcsolattartón és egy ütemterven át megy, a logótól a polci megjelenésig, online és offline.

Kapcsolódó tudástár-cikkek

Beszéljünk a projektedről

Az első beszélgetés ingyenes. Ha már van weboldalad, előtte lefuttathatod az ingyenes GEO-auditot is: a riportból látszik, hol tart ma.

Ingyenes konzultációt kérek Ingyenes GEO-audit

Minden szolgáltatásunk