Két wireframe szoftver: Balsamiq és HotGloo

A címben is említett két wireframe-készítő szoftver az, amit az elmúlt hónapokban többször is próbálgattam. Nem mondanám, hogy bármelyik is az ultimate megoldás, de mindenképpen olyan kezdeményezések, amiket érdemes próbálgatni annak, akinek szüksége van ilyen programra a munkájához.

Kezdjük a Balsamiqkal. Lehet hogy saját beidegződés, de én alapvetően egy ilyen szoftvertől azt várom, hogy szigorúan funkcionális, egyszerű dizájnja legyen. A Balsamiq pedig inkább ezt a játékos, skiccelős, gyerekrajzos élményt hozza, ami munka közben inkább zavaró, mint szórakoztató. Amúgy meg elképesztően lassú a webes verzió. És a funkciók sem annyira intuitívak, hogy néhány óra után készségszinten lehessen dolgozni vele.

Körülbelül ugyanez a véleményem a HotGlooról is. Leszámítva a felületet. A felület itt már sokkal tisztább, jobban reagál azokra a szerkesztőfelületekre, amiket amúgy is használ az ember. Bár az ablakok mozgatása, funkciók nyitogatása itt is elég nyögvenyelős.

Na és akkor következzen a kívánságlista. Én egy jó wireframe szoftvertől azt várom, hogy a Photoshop és más képszerkesztő és grafikus programok logikáját kövesse. Lehetőleg legyen deszktop verziója, hogy gyorsabban, optimálisabban lehessen vele dolgozni. Mert egy agyonterhelt böngészővel szenvedés egy idő után a munka. 

Nagyon jó lenne valamiféle támogatás a fotókhoz is. Teszem azt lerajzolok valamit, majd lefotózom/beszkennelem, megnyitom a szoftverrel, és az meg próbálja értelmezni a fotón szereplő ábrákat. Vagy egyenesen definiálja azokat. Hogy aztán könnyedén lehessen játszogatni, szerkesztgetni az elemeket.

Sajnos én a mai napig nem találtam rá a megfelelő megoldásra. Ez valószínűleg annak is köszönhető, hogy mockupokat, wireframe-eket nagyon sokféleképpen rajzolnak az emberek. Vannak nagyon egyszerű skiccek, és vannak nagyon mély, nagyon részletező felülettervek is. Az igények tehát legalább annyira szerteágazóak, mint egy grafikus szoftver esetében.

Ezért lenne jó, ha különféle felhasználási módokat lehetne definiálni. A tipizált munkafolyamatokhoz pedig sajátos eszközkészletet lehetne társítani. Nem nagyon ragoznám tovább. Eleve ennek a postnak az az elsődleges célja, hogy összegyűjtse a téma iránt érdeklődő olvasókat, hogy a kommentekben jól meg tudjuk beszélni, hogy ki mit miért használ, kinek mi hiányzik és mi tetszik a létező szoftverekben.

Címkék: szoftver mockup wireframe hotgloo balsamiq
2009.12.01. 19:12. írta: hírbehozó

Kommentek:

A hozzászólások a vonatkozó jogszabályok  értelmében felhasználói tartalomnak minősülnek, értük a szolgáltatás technikai  üzemeltetője semmilyen felelősséget nem vállal, azokat nem ellenőrzi. Kifogás esetén forduljon a blog szerkesztőjéhez. Részletek a  Felhasználási feltételekben és az adatvédelmi tájékoztatóban.

nekem ez a friss kedvencem:

iplotz.com/

ami miatt komálom:
- master page támogatás
- linkelhetőség jól
- egyszerűen váltható a stílus a comic, win és osx kinézet között
Tapasztalatom szerint az Axure pl nem rossz, csak iszonyú drága.
axure.com/
Van ugye ez a Pencil dolog is, ami ingyen van. www.evolus.vn/Pencil/
@hh, és a fentieknél a wireframe importálása mennyire megy? mert nekem ez is fontos szempont lenne. Azt látom, hogy a hot gloonál van lehetőség a megosztásra. az jó, de importok is mennek?

nekem amúgy az omnigraffle jött be az elmúlt időben
@efff_: en is csak par napja kezdtem el nezegetni. de erre a ficsorre meg nem merult fel igeny. ha elobb talalok ra, megirom :)
A Balsamiq-t meg kell védjem, a Win32 natív (khm) verzió tök rendben van, nem lassú, egyből lehet vele termelni, nem kell hosszasan ismerkedni vele. Egyébként azért ilyen vicces a design, hogy ránézésre látszódjék, hogy ez csak mokup (létező probléma!).
@hh, a hotgloonál pngben és pdf-ben is megy szépen az import.
mockflow.com/

ami miatt kívánatos
- minimál dizájn
- kollaborációs lehetőség
- diszkréten nyilazós kommentelési lehetőség

és ami a legnyerőbb: alap interaktív lehetőség révén némi prototyping: alert boxok, navigációs események preview módban
Ha valakit wireframe / prototyping téma érdekel, itt talál cikk és eszköz url-eket:

delicious.com/Jano80/wireframes
delicious.com/Jano80/prototyping

@hh ha grafikus program logikát szeretnél, akkor próbáld talán a FireWorks-öt ki.
Mi a kivert geci az a wireframe meg a mockup nálatok?
Már megint lazáztok itt ezzel a szar hippi szöveggel, he?!
kicsit más megközelítés: Inkscape
open source vektoros grafikai program, ami igazából nem erre leztt kitalálva és éppen ezért néha kissé nehézkes és túl bonyolult is, de ha mnegszokja az ember (és készít néhány előre felhasználható UI elemet), akkor gyoran megy vele a meló.
És ez mire jó egyébként (és miért)? Layout tervezésre, vaagy html kód generálásra, mire?
@ergerberger: felülettervezés. Nem design, az a grafikus dolga, hogy csili-vili legyen, de a projektgazdának/tanácsadónak kell "drótváz" szinten megtervezni, hogy mi hol legyen, mekkora legyen, melyik képernyő után mi következzen, stb...
Az nem elég a Balsamiq Mockups-ban Media>Image és abba akármilyen képet illeszthetsz bele? legyen az szkennelt ficka, már meglévő, és akár a Netről. Szerintem a Balsamiq Mockups 2 óra alatt ki ismerhető egy életre. A desktop verzió még a NetBookon is fürge. Amit meg tud az pont elég: ötletet értelmezhetően felvázolni a fejlesztőknek megoszthatóan. Kell ennél több?
flairbuilder.com

Épp ma vettem meg, könnyedén lehet vele prototípust gyártani. Desktop változata Adobe Air-ben készült, mint a Balsamiq Mockups is.
Képértelmezést nem tud, de egyikben sem láttam.
Én alapvetően Omnigrafflet használok. Tiszta, egyszerű, rengeteg felhasználható elem. Mindent össze lehet vele rakni. Az interaktívhoz meg ott van az axure.
HotGloo-t teszteltem ÉLES-ben, azaz munkahelyen, project GUI tervezéséhez és egyszerűen tökéletes volt, 15 perc alatt kitapsztaltam a funkciókat, exportáltam, importáltam, színeztem, snappeltem, lapokat gyártottam, eseményeket "programoztam"...

Ajánlani tudom csak.