UX / UI design
UX/UI design weboldalakhoz és digitális felületekhez
A UX/UI design során a struktúrától és a felhasználói útvonalaktól a vizuális rendszerig megtervezem, hogyan működjön és hogyan nézzen ki a felület.
Ha már van weboldalad, a meglévő struktúrát is újragondolhatjuk. Ha pedig nulláról indulunk, közösen építjük fel az oldaltérképet, a felhasználói folyamatokat és a vizuális irányt.
Research before design
UX-kutatással is indulhat a projekt
Nagyobb vagy összetettebb projektnél érdemes a tervezés előtt megérteni, kik használják majd a felületet, milyen problémákkal érkeznek és hogyan hoznak döntést.
A kutatás része lehet például:
- felhasználói interjú
- perszóna
- user journey
- kérdőív
- usability teszt
- versenytárselemzés
Information architecture
UX/UI design weboldalakhoz és digitális felületekhez
A vizuális design előtt meghatározzuk, milyen oldalakra, tartalmakra és funkciókra van szükség. A UX/UI design célja, hogy a felület esztétikus, érthető és következetesen használható legyen.
Ha meglévő weboldalt tervezünk újra, ilyenkor történik a jelenlegi struktúra átvizsgálása és szükség esetén a restruktúra.
A wireframe még nem végleges design: azt mutatja meg, mi hol helyezkedik el, milyen sorrendben jelenik meg, és hogyan halad rajta végig a felhasználó.
A tervezés része lehet:
- sitemap / oldaltérkép
- navigációs rendszer
- információs architektúra
- user flow
- tartalmi hierarchia
- wireframe / drótváz
Visual direction
Moodboard és vizuális irány
Ha még nincs konkrét elképzelésed a designról, az sem probléma. Moodboard segítségével közösen meghatározzuk, milyen vizuális karakter illik a márkához, a célközönséghez és a szolgáltatáshoz vagy termékhez.
Itt dől el többek között:
- tipográfiai irány01
- színvilág02
- fotó vagy illusztráció03
- vizuális ritmus04
- formai nyelv05
- képhasználat06
- UI-karakter07
- mozgás és interakciók08
From direction to system
UI design és design system
A jóváhagyott struktúrából és moodboardból készül el a részletes UI design. A megvalósult felületek közül néhányat az UX/UI referenciák között mutatok meg.
A cél nem csak egy szép képernyő, hanem egy következetes rendszer, amely több oldalon és különböző képernyőméreteken is működik.
A vizuális rendszer része lehet:
- tipográfia
- színrendszer
- gombok és űrlapelemek
- kártyák
- navigáció
- képi elemek
- ikonográfia
- térközök
- komponensek
- állapotok és mikrointerakciók
Figma prototípus
A design működés közben is kipróbálható.
A végleges design szükség esetén interaktív Figma prototípusként is elkészül. A statikus képernyők kattinthatóvá válnak: ki lehet próbálni a navigációt, gombokat, menüket és főbb felhasználói folyamatokat még a fejlesztés előtt.
Így a működést nem csak elképzelni kell — végig is lehet kattintani.
Ez különösen hasznos:
- összetettebb weboldalak
- webalkalmazások
- foglalási folyamatok
- webshopok
- több lépéses űrlapok
- egyedi interakciók
Deliverables
Mit kapsz a végén?
Egy átgondolt UX/UI tervet, amely a kutatástól a fejlesztésig közös hivatkozási pontként működik.
- a felhasználói célokra épül
- logikus információs struktúrát használ
- vizuálisan illeszkedik a márkához
- következetes komponensrendszert ad
- fejlesztésre előkészített
- szükség esetén kattintható prototípusként is tesztelhető
Design to development
Már a fejlesztésre is szükséged van?
A UX/UI tervet nem kell másik fejlesztőnek átadnod. A kész designból WordPressben és frontend oldalon is meg tudom valósítani a működő felületet.
Van egy felületed, amit jó lenne végre rendszerként látni?
Nem kell kész specifikációval érkezned.
Elég, ha elmondod, mit szeretnél létrehozni vagy min szeretnél változtatni.
Beszéljünk a projektrőlGyakori kérdések
Gyakori kérdések a UX/UI designról
Mikor érdemes UX/UI tervezéssel kezdeni?
Akkor, ha új weboldal vagy digitális felület készül, vagy ha a meglévő rendszer nehezen használható, átláthatatlan, illetve nem támogatja jól az üzleti célokat.
Mi a különbség a UX és a UI között?
A UX a felület logikájával, struktúrájával és használhatóságával foglalkozik, a UI pedig a vizuális megjelenéssel: tipográfiával, színekkel, komponensekkel és képi világgal.
Készül kattintható prototípus is?
Igény szerint igen. Figma prototípusban a fő felhasználói folyamatok még fejlesztés előtt végigkattinthatók és tesztelhetők.
Ha már van weboldalam, akkor is tudsz segíteni?
Igen. Meglévő oldalnál restruktúra, új információs architektúra, wireframe és teljes UI redesign is készülhet.
UX-kutatást is végzel?
Igen, nagyobb vagy összetettebb projektnél a tervezést megelőzheti UX-kutatás, interjú, user journey vagy usability teszt.