UX/UI design
Mi az a wireframe, és miért készül a webdesign előtt?
A wireframe a weboldal szerkezeti vázlata. Megmutatom, miért érdemes a színek és vizuális részletek előtt eldönteni a tartalmi hierarchiát és az oldal működését.
Ha weboldaltervezés előtt állsz, valószínűleg találkoztál már a wireframe kifejezéssel. Röviden: ez a weboldal vizuális vázlata, amely még nem a színekről, betűtípusokról vagy végleges képekről szól, hanem arról, mi hol legyen, milyen sorrendben, és mi legyen fontosabb a többinél.
Én azért szeretek wireframe-mel dolgozni, mert ilyenkor még gyorsan lehet nagy szerkezeti döntéseket meghozni.
Mit tartalmaz egy wireframe?
Egy wireframe egyszerű blokkokból, helykitöltő szövegekből és alapvető navigációs elemekből áll. Lehet nagyon vázlatos, akár papíron készített rajz is, vagy részletesebb digitális terv Figmában.
Tipikusan látszik rajta:
- a fejléc és navigáció;
- a hero szekció helye és fő üzenete;
- a tartalmi blokkok sorrendje;
- a CTA-k;
- a képek vagy vizuális elemek helye;
- az űrlapok;
- a lábléc fő részei.
Miben más, mint a kész webdesign?
| Wireframe | UI design |
|---|---|
| Szerkezetet mutat | Vizuális megjelenést mutat |
| Egyszerű, többnyire semleges elemek | Végleges színek és tipográfia |
| Tartalmi hierarchia a fókusz | Hangulat és márkaélmény a fókusz |
| Gyorsan módosítható | Részletesebb és időigényesebb |
| Működési kérdésekre válaszol | Megjelenési kérdésekre válaszol |
Miért nem érdemes rögtön a látványtervvel kezdeni?
A vizuális design könnyen elviszi a figyelmet a szerkezetről. Ha már ott vannak a színek, fotók és tipográfia, nehezebb észrevenni, hogy a tartalom sorrendje nem logikus.
Wireframe-nél viszont nincs hova bújnia a struktúrának. Ha a látogató nem kap elég információt jó sorrendben, az gyorsan kiderül.
Példa: szolgáltatói oldal wireframe-je
Egy szolgáltatói főoldal például épülhet így:
- Mit csinálsz és kinek?
- Milyen problémát oldasz meg?
- Milyen szolgáltatásaid vannak?
- Miért bízzanak benned?
- Referenciák vagy ügyfélvélemények.
- Hogyan lehet veled dolgozni?
- Kapcsolat / CTA.
Ez nem univerzális recept, de jól mutatja, hogy a wireframe során már a kommunikáció logikája is formálódik.
A wireframe UX-eszköz, nem csak rajz
A wireframe akkor igazán hasznos, ha nem pusztán dobozok elhelyezéséről szól. Érdemes mögé tenni a felhasználói célt is: mit szeretne megtudni, milyen kérdései vannak, mi bizonytalanítja el, és hol várható tőle döntés.
Ezért egy összetettebb projektben a wireframe előtt vagy mellett készülhet user flow, sitemap vagy akár UX kutatás is.
Kell minden weboldalhoz wireframe?
Nem feltétlenül. Egy nagyon kicsi landing page esetén előfordul, hogy a szerkezeti tervezés és a UI design egy lépésben történik.
Viszont minél több tartalom, célcsoport és funkció van az oldalon, annál nagyobb értéke van annak, ha előbb a szerkezetet tisztázzuk.
Mi történik a wireframe után?
A jóváhagyott wireframe-re épül rá a vizuális koncepció: tipográfia, színek, képi világ, ikonok, komponensek és finomabb interakciók. Ezután készülhet kattintható Figma prototípus, majd a fejlesztés.
A teljes folyamatról a UX/UI design szolgáltatás oldalán olvashatsz.
Röviden
A wireframe segít különválasztani két kérdést:
- Mit és milyen sorrendben mutassunk meg?
- Hogyan nézzen ki?
Ha az első kérdésre jó válasz születik, a későbbi vizuális tervezés is biztosabb alapokra kerül.
