Wireframe

Mi az A Wireframe?

A „drótváz” egy vizuális terv, amelynek célja reprezentálni a leendő alkalmazás vázlatos megjelenését (a felhasználó szemszögéből). A drótváz úgy is felfogható, mint egy nem működő prototípus.

A drótváz elkészítése során nem a dizájnon (tipográfia, színek) van a hangsúly, hanem az elemek elrendezésén illetve prioritásán, a navigáción és a különböző események képernyőn történő megjelenítésén. A wireframe megjelenését tekintve nagyon egyszerű, gyakorlatilag egy „szabásminta”, amelyet a designerek és a fejlesztők fognak valós funkciókkal felöltöztetni. A tervnek tartalmaznia kell az alkalmazás valamennyi oldaltípusának összes állapotát.

A drótváz elkészítése az applikáció tervezés egyik utolsó, de igen fontos lépése.

Miért használjunk Wireframe-et?

A drótváz a leghatékonyabb módja annak, hogy gyorsan képernyő terveket, nem működő prototípusokat tudjunk létrehozni. A drótváz segítségével megbizonyosodhatunk arról, hogy egy koncepció működőképes-e, és kiderülnek azok a gyenge pontok, amiken még finomítani kell, esetleg teljesen feleslegesek.

  • Költséghatékony
    • A wireframe tervek gyorsan összeállíthatók, könnyen módosíthatók és rengeteg elrendezés variáció kipróbálható rajtuk anélkül, hogy a jóval nehezebb, lassabb és drágább design tervezéssel kezdenénk a munkát.
  • A látványtervezés (dizájn) inputja
  • Informálja a fejlesztőket:
    • Elkerülhető az a csapda, hogy a designer megtervez valamit, amiről később kiderül, hogy nem célszerű lefejleszteni, vagy nem fér bele a projekt költségkeretébe
  • Bevonja a megrendelőt
    • A wireframe tervek már kellő részletezettségűek ahhoz, hogy meg lehessen mutatni a megrendelőnek, hogy véleményezze, értékelje azokat. Így még a tervezési fázisban felszínre juthatnak hibák, véleménykülönbségek, amelyek javítása ezek kezdeti fázisban sokkal idő és költséghatékonyabb, mint később.

Egy tipikus Wireframe felépítése

Akkor jó egy wireframe, ha az alábbi mindhárom elvárást, nézőpontot kielégíti:

// Adattartalom (elhelyezés) megtervezése

Ennek során kell kialakítani (vázolni) az adott oldalakon (képernyőkön) az információ (gombok, képek, szövegek, stb.) elhelyezését, ezek priorizálását. Ennek a résznek a célja, hogy megkönnyítse az oldal értelmezését a felhasználó számára, valamint hogy a készítők a céljaiknak megfelelően „tereljék” a felhasználókat

// Navigáció megtervezése

Ennek a résznek a lényege hasonlít egy folyamatábrához; azt kell prezentálnia a drótváznak, hogy bizonyos események hatására (gomb megnyomása, visszalépés, stb.) mit lát a felhasználó, milyen aloldalra jut. A navigáció tehát az egyes oldalak, események kapcsolatát ábrázolja.

// Felület (interfész) megtervezése

Az interfész kialakítása során pedig a felhasználókkal való kommunikálás (beviteli mezők, lenyíló menük, űrlapok, stb.) kialakítása és elhelyezése a cél.

A Wireframe fajtái kidolgozottság szerint

Mindhárom megoldást használják, más-más célokra:

// Papír-alapú

Leginkább vázlatos megoldás, minimális szöveggel. Ezzel a módszerrel gyorsan ki lehet próbálni radikálisan különböző és nem megszokott ötleteket is.

  • Tartalmazza:
    • vizuális hierarchia (melyik elemek hangsúlyosak?)
    • elrendezés
    • főbb folyamatok
  • Nem tartalmazza:
    • pontos arányok, méretek
    • branding (márkaépítés)
    • színek
    • kiszínezett felületek (csak vonalak)
    • térközök
    • pontos szövegek

Példa:

img13

1. ábra – Forrás

img14

2. ábra – Forrás
// Lo-fi (alacsony részletességű)

Ezt már digitális, de kevéssé részletes, és gyorsan előállítható. A folyamatot ezen a szinten már jobban ki kell fejteni, fel kell építeni a navigációs struktúrát és a felületek működését.

  • Tartalmazza:
    • arányos (de a méretek még nem a valódiak)
    • max 2-3 szürke árnyalat (de a legjobb, ha csak vonalak)
  • Nem tartalmazza:
    • pontos térközök, pixel pontos méretek
    • arculat, branding színek
    • grid (rácsozás a precíz méretarányhoz és pozícionáláshoz)

Példa:

img15

3. ábra – Forrás

img16

4. ábra – Forrás

img17

5. ábra – Forrás
// Hi-fi (részletes)

Az Lo-fi mind funkciókban, mind kinézetben részletesebben kidolgozott változata.

  • Tartalmazza (a Lo-fi-n felül)
    • grid
    • pontos méretek
    • akár alap színezés is
  • Nem tartalmazza:
    • pixel pontos design
    • fontok
    • végleges ikonok

Példa:

img18

6. ábra – Forrás

img19

7. ábra – Forrás