H1 · Bebas Neue · 64 px · sorköz 1.05

UX/UI tervezés és grafika:  szép felület, ami elad


H3 · 24 px · nagy terc skála

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


Szövegdoboz · Poppins 16 px · sorköz 1.7 · kontraszt 12:1 AAA
A látogató a felületet látja: 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. A piros keretek azt mutatják, ahogy mi nézzük ezt a fejlécet: minden elemnek mérete, betűje és kontrasztja van. Görgessen, az oldal maga a bemutató.
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
Tervezőasztal / drótváztól a kész felületig

Húzza el a csúszkát: balra a drótváz, jobbra a felület

Így dolgozunk: előbb a szürke vázlaton dől el, mi hova kerül és hány kattintás az út a célig, aztán kap színt, betűt és mozgást. A csúszka azt mutatja, mennyi múlik a látványon, és mennyi azon, ami alatta van.

UX / DRÓTVÁZUI / KÉSZ
PortfólióÁrakKapcsolat
Fény, ami elmesél

Portré és esküvő természetes fényben, Budapesten.

Időpontkérés
📷Portré
💍Esküvő
🏢Céges
↔
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 ↑
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 AADesign system élőben ↓
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ívA hat oldal élőben ↓
UX és UI / mi a különbség

Az egyik azt tervezi, hogyan működik, a másik azt, hogyan néz ki.

A weboldal sikere azon dől el, 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 tervből élő felület lesz. Az UX akkor jó, ha a látogató észrevétlenül célba ér, a UI akkor, ha az arculatot hordozza és olvasható marad telefonon és sötét módban is.

Spec lap / UX · UI
Kimenetélő, kattintható oldal
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 kikapcsol
KépekSVG ikon · WebP · AVIF
AjánlatÁrajánlatkérés →
JEGYZET 01 / 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
JEGYZET 02 / 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 a webshopokra
JEGYZET 03 / Á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
01
Logó · Arculat
02
Tipográfia
03
Szín · Sötét mód
04
Ikon · Illusztráció
05
Reszponzív
06
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ó 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 design-tokenekből felület lesz

Balra a design system: rács, betűk, színek, állapotok. Jobbra a felület, ahogy a látogató látja, drótváztól a kontrasztig. 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.

tokens.csstipografia.css











● ÉLŐ
★ WCAG AA kész





PortfólióÁrakKapcsolat











Portré és esküvő természetes fényben, Budapesten.

Időpontkérés



0PageSpeed







📷Portré


💍Esküvő


🏢Céges fotó























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










Folyamat / öt lépés
Öt lépés a brieftől az élő oldalig, minden lépésnél látja, hol tartunk.
A design rövid körökben készül, egy-egy döntéssel, amit együtt hozunk meg. A fejlesztő az első naptól részt vesz benne, ezért a tervbe csak olyan elem kerül, amit gyorsan és jól meg is tudunk valósítani.
01
Brief · 1. hét
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.
Kimenettervezési briefcélokprioritások
02
Struktú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.
Kimenetoldaltérképkattintható drótváz
03
Design
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.
KimenetUI tervdesign systemikon- és képkészlet
04
Teszt
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.
Kimenetjóváhagyott tervtesztjegyzőkönyv
05
É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ő oldalmérésoktatás a szerkesztőhöz
Grafika és arculat a weboldalhoz
A felület csak annyira jó, amennyire a grafika, amiből épül. Egyedi ikonok és saját képi világ teszik felismerhetővé az oldalt a hibátlan kód mellett. Ezért a grafikai munka is házon belül készü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.
Miért egy kézben a design és a fejlesztés?
01
Nincs fordítási veszteség
A grafikus terve ugyanannál a csapatnál valósul meg, aki rajzolta. Ami a terven van, az fut az oldalon, pixelre.
02
Csak megvalósítható ötlet kerül a tervbe
A fejlesztő az első vázlatnál ott ül, ezért minden design egyszerre szép, gyors és mobilon is kényelmes.
03
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.
04
Egy felelős, egy határidő
Grafikus, fejlesztő és üzemeltető egy csapat, egy asztalnál. Egy partner viszi végig a brieftől az éles oldalig és utána is.
Design system / élő panel
A design system élőben: próbálja ki
Ez a panel a saját oldalunk design systemjéből dolgozik. A színek mellett a kontrasztarányt a böngésző számolja, a tipográfia-skála egy alapméretből és egy arányból áll elő, a komponensek állapotai pedig azok, amiket a fejlesztő kézhez kap. Ugyanezt készítjük el az Ön arculatára.
design-system / webpot · élő panel 
Paletta és kontraszt
A site palettája. Minden szín mellett a WCAG kontrasztarány: a panel hátterén és a rajta ülő szövegnél. Váltson sötétre a fejlécben, és nézze meg, mi marad olvasható.
Tipográfia-skála
Egy alapméret és egy arány, ebből jön az összes címsor. Képletből számolva, ezért marad egységes ötven aloldalon is.
Komponens-állapotok
Egy gomb nem egy állapot, hanem öt. A design system mindet leírja, így a fejlesztő kész receptet kap.
Ajánlatot kéreknormál
Ajánlatot kérekhover
Ajánlatot kérekfókusz
Ajánlatot kérekletiltott
Mégsemmásodlagos
Hiányzik a domain vége, például .hu
kapcsoló, kattintson
Térköz-skála
Négy pixeles rácsra ülő térközök. Ettől néz ki rendezettnek egy oldal, akkor is, ha a látogató csak érzi, hogy minden a helyén van.
4
8
12
16
24
32
48
64
Gyakori kérdések az UX/UI tervezésről
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 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.
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 a tervfájlok mellett az élő oldalt, a design systemet (színek, betűk, komponensek) és az SVG ikonkészletet is megkapja.
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.
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 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 ö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.
Mutassa meg, hol akad el a látogató a mostani felületén
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.





	

			

				



Tegye meg az első lépést egy sikeres vállalkozás felé!







Telefon: +36 30 199 1620
WebPot DEV a LinkedInen
GitHub
WebPot DEV a Facebookon
WhatsApp






WebPot DEV logó






Tervezéstől a kivitelezésig: WebPot DEV



			

				

					

					

						
Lépjen kapcsolatba velünk!

						

					

					

					

        
          
        


					

        
          
        


					

        
          
        


					
					
					

					  
					  
					

					

					
					
				
				

			
	
		
	
	







		

#UX tervezés #UI design #webdesign #arculattervezés #grafikai tervezés #design system #reszponzív design