Weboldaltervezés wireframe segítségével

  • Dunder Krisztián
  • 4 hozzászólás

A weboldaltervezés egy komplex folyamat. Magyarországon nincs igazán kultúrája, gyakran kifelejtik a munkafolyamatból (vagy nem veszik elég komolyan). Pedig sok későbbi bosszúságtól és költségtől kíméli meg magát az ember, ha gondolkodik, mielőtt cselekedne. Ha komolyan vesszük a webes jelenlétet, legyen az kis céges weboldal vagy komplex portál, illik tervezni, és ehhez jön jól a wireframe (=drótváz) mint eszköz.

A weboldaltervezés munkafolyamatának közepén helyezkedik el a készülő site megtervezése wireframe formában. Tulajdonképpen arról van szó, hogy a funkciókat, szolgáltatásokat, fix tartalmakat, mindezek hangsúlyait egy kézi vagy szoftveres megoldással összegyűjtjük, és a leendő weboldal minden (fontos) oldaltípusára elkészítjük. A kész rajzok alkalmasak arra, hogy visszaadják a leendő weboldal struktúráját, a belső oldalak kapcsolatát, hierarchiáját, hasonlóságát, stb. Ideális esetben a megrendelő egy – a weboldal használhatóság szempontjait jól ismerő – tanácsadóval közösen készíti el a drótvázakat, melynek dupla előnye van: a megbízó elvárásai sokkal inkább visszaköszönnek, mintha kész terveket kapna, másrészről könnyebb vele azonosulnia, hisz az Ő gondolatai is mélyebben benne vannak a rajzokban, hovatovább a közös tervezés során megérti, mit miért célszerű esetleg másképp csinálni. A webdesigner az elkészült wireframe-ek alapján gyakorlatilag különösebb értelmezési és átadási procedúrák nélkül vizuális látványtervet tud készíteni, mely sokkal közelebb áll az igényekhez, mint amikor félmondatokból, koncepciótlanságból kell választ adni az igényekre.

Nem titok, én magam is rengeteg wireframe-et tervezek. Tekintettel arra, hogy a partneri körömben értik-érzik ezek szükségességét, könnyebben tudunk az operatív munkára koncentrálni, és az eredménye gyakorlatilag mindig az elégedett ügyfél (“Pont ilyet akartam”), elégedett webdesigner (“Hú, nem vagyok ilyen alapanyaghoz szokva…”), no meg a jó végtermék. Évek óta rajzolok wireframe-eket, kezdetben még Wordben, majd a Microsoftnál maradva egy ideig OneNote-ban rajzolgattam. Egyik sem wireframe-tervezésre való, de még így is sikerült egyszerűsíteni a tervezésben szükséges írásos specifikáció bonyolultságán.

Pár hónapja ajánlásra próbáltam ki a ForeUI-t, ami kifejezetten wireframe-tervező szoftver (hivatalosan prototyping tool). A program egy pekingi fejlesztőcég terméke. Talán mondanom sem kell, gyorsan és pixelpontosan lehet vele weboldalakat tervezni, sőt, akár okostelefon-alkalmazásokat is. Előre definiált elemeket lehet használni, melyek testre szabhatóak (betűtípus, elhelyezés, vastagság, szín, stb.), valamint a ForeUI közösség által megosztott elemeket is letölthetjük és integrálhatjuk saját drótvázainkba. A drótvázakat tervezhetjük úgy is, hogy a készülő portálhoz egy alapvázat létrehozunk (master page), és a többi oldaltípus esetén e fix elemek már rögzítve lesznek. Az így készített, összekapcsolt drótvázak slideshow formában is megtekinthetőek, dhtml-ben exportálhatóak. Export: a saját, szerkeszthető formátumán kívül jpg-ben, png-ben, pdf-ben, dhtml-ben és további formátumokban tud exportálni a szoftver. Az egyetlen eddig feltárt hiányosság, hogy pdf-exportnál a szövegeket képként exportálja, de friss információk szerint előbb-utóbb ezt is megoldják.

Nekem eddig ez a legszimpatikusabb, egy ideig biztosan ezt fogom használni. Találtam egy videót a YouTube-on, ami néhány alapfunkciót megmutat a ForeUI szolgáltatásaiból, alant megtekinthető.

Dunder Krisztián

Tanácsadó és a Growww Digital digitális marketing ügynökség társalapítója. Rendszeres konferencia előadó, a Digitális sikertörténetek 1-2. szerzője.

4 hozzászólás
  1. 2010. április 15. csütörtök

    ez tényleg nagyon hasznos, köszi az összefoglalót!

  2. 2010. április 15. csütörtök

    ajánlásra? :) funny

    a másik hiányossága, ami kimaradt a cikkből, hogy egy text boxon belül nem tudsz bold, italic formázást használni, sőt linket sem tudsz alkalmazni. ezek hiányznak a pdf-el egyetemben, de a foreui route planjében szerepelnek, mint fejlesztések.

  3. krisztian
    2010. április 15. csütörtök

    @Tamás: szívesen.

    @kolboid: még egyszer köszi az ajánlást :). A text boxos dolgok úgy vannak, ahogy írod, bár nem tartottam különösebben lényegesnek, mert ugye tetszőleges számú text box tehető egymás mellé, és így a formázások megoldhatóak, csak macerás, mint tudjuk…

  4. Tana
    2010. július 23. péntek

    Tényleg jónak tűnik ez a ForeUI, köszi az ötletet :)

Szólj hozzá

A legjobb felhasználói élmény érdekében az oldal cookie-kat használ. Bővebben