A reszponzív webdesign legjobb prototípus-készítő eszközei

Mivel a legtöbb webhely alapértelmezés szerint reagál, a prototípus készítés elengedhetetlen. Olyan webhelyeket tervezünk és építünk, amelyek reagálnak a
megtekintésére használt eszköz. Az a közeg, amely a lehető legközelebb van ahhoz, hogy a terveket felhasználjuk, csak előny lehet számunkra. Egyre könnyebb ezt megtenni, mivel a rendelkezésünkre álló eszközök kifinomultabbá válnak.

A tervező munkájának messze legnehezebb része az ötletek és szándékok megfelelő magyarázata másoknak. Lehetővé teszi az emberek számára, hogy megtapasztalják ezeket az ötleteket, sokkal jobb módja annak, hogy megértsék őket - a „mutasd, ne mondd” kifejezést különösen megfelelőnek tartom. Ez azonban nem áll meg. A dizájn prototípusának elkészítésével lehetősége nyílik arra is, hogy menet közben tesztelje, módosítsa és beállítsa, hol működik és nem.



hogyan kell használni a mágneses lasszó eszközt

A prototípus készítésének előnyei

Milyen gyakran láttál valamit építeni, éppen úgy, ahogy azt megtervezted, hogy felfedezd, hogy nem ez az, amit igazán vártál vagy szeretnél? Ekkor már késő.

Régóta hiszem, hogy a tervezőknek kódolniuk kell. A tervezés mélyebb megértése akkor valósul meg, ha tudja, mi folyik alatt. Jobb tervezővé és szigorúbbá teszi. A dokumentum felépítése tervezési döntés.

De nemrégiben meg kellett kérdőjeleznem ezt a hitet. Olyan alkalmazásokat kezdtem látni, amelyek a HTML prototípusok néhány előnyét kínálják a fogd és vidd felületen keresztül, lehetővé téve számodra, hogy egy ötlettől kezdj el interakcióba lépni és viszonylag gyorsan előre lépni. Messze a legnagyobb előny, és az a kérdés, ami megkérdőjelezte a véleményemet, az a tény, hogy ezek az alkalmazások olyannyira megkönnyítik a reaktív prototípus készítést.

Ha először mobilra megy, megváltoztathatja a képernyő méretét asztali számítógépre, és szükség esetén megnézheti a tartalom újratöltését és újrapozícionálását. Ez rendkívül leegyszerűsíti mind a folyamatot, mind azokat a szempontokat, amelyeket figyelembe kell vennünk egy adaptív webhely megtervezésekor. De ez egy kezdet, és jobb kezdet, mint számos különböző méretű drótváz és látvány.

Prototípus-alkalmazások

Az évek során számos alkalmazást kipróbáltam abban a reményben, hogy ezek segítenek abban, hogy közelebb kerüljek annak, amit akkoriban terveztem, élő verziójához, anélkül, hogy sokáig kellett volna vennem egy prototípus kézi kódolását. A válasz mindig az volt: nincsenek parancsikonok. De most, hogy olyan alkalmazások jelennek meg, amelyek segítenek egy adaptív webhely megtervezésében és prototípusának elkészítésében, hogyan tudnak segíteni Önnek - és melyiket érdemes jobban megnéznie?

Nézzünk meg három alkalmazást, amelyek fontolóra vehetik a munkafolyamat bevezetését: Divshot , Festőállvány és UXPin . Nagyjából mindhárman ugyanazt teszik: segít létrehozni egy oldalt számos szabványos elem húzásával.

A fogd és vidd felület-készítő Divshot és a böngészőben található webtervező eszköz, az Easel használata Bootstrap mint alapkeret: értelmes, tekintettel a meteorikus elfogadására. A Divshot is nemrégiben tartalmazta A ZURB Alapítványa . UX / drótváz-készítő eszköz Az UXPin nem csak a prototípus készítéséről szól; személyeket és más műtárgyakat tölthet fel, amelyek segítenek elmesélni a projekt történetét.

01. Divshot

A Divshot használatával a húzás bonyolult lehet: csak elemeket helyezhet olyan helyzetbe, amely aztán belefér a DOM-ba. Ez korlátozó lehet, de a Bootstrap gyártási szintű kódját kapja meg a tervezés mögött. Használnia kell a Bootstrap alkalmazást, és ehhez illesztenie kell a tervét, amely lehetővé teszi, hogy egyedi CSS-t adjon hozzá a látványterv csípéséhez.

Amikor kipróbáltam a Divshot-ot, azon kaptam magam, hogy időt töltök a beépített kódszerkesztőben, miután létrehoztam az oldal kezdeti felépítését. De nem kellett sokáig kialakítani ezt a kezdeti struktúrát, és gyorsan felvázolhattam az interfészt. Az egyik hiányosság az oldalak összekapcsolásának lehetőségének hiánya kattintható prototípus létrehozásához - ezért le kell töltenie a prototípust, majd manuálisan kell létrehoznia a fájlok közötti linkeket. (A Divshot azt tervezi, hogy egy későbbi kiadásban hozzáadja az alkalmazáson belüli oldalak linkelésének lehetőségét.)

Két további figyelemre méltó tulajdonság van. A Divshot láthatósági vezérlői az ellenőrben osztályt alkalmaznak az elemekre, így könnyedén megmutathatja vagy elrejtheti őket az Ön számára beállított négy eszköz egyikén (telefon, táblagép, asztali számítógép és HD).

Aztán ott vannak a témák. Divshot bekapcsolódott Bootswatch , amelyen keresztül gyorsan válthat a használt témáról - és akár saját egyéni témáit is használhatja. Ez a témakör jellemző pillanatnyilag egyszerű, de vegye figyelembe, hogy mekkora erőt adhat Önnek, ha csatlakoztatná egyéni témáját az ügyfeléhez. A Divshot havi 30-300 dollárba kerül.

02. Festőállvány

Az Easel a Bootstrap-ot is használja. A Divshot-tal ellentétben az elrendezés elemeinek használata nélkül gyorsan „vázlatolhat” a felületen. Az oldalakat gyorsan és egyszerűen linkelheti egy kattintható prototípusba. Ha készen áll megosztani valamit a csapatával vagy az ügyféllel, megteheti és visszajelzést kaphat a megjegyzés módban.

Fontolóra venném ennek használatát a lo-fi használhatósági tesztek futtatására is: az ilyen módon történő visszajelzés lehetősége a prototípus készítés egyik legnagyobb előnye. Az Easel a csapatok számára is támogatást nyújt. Ha a terved nem kötődik egy adott egyénhez, az csak jó dolog lehet.

Az Easel egyik hátránya a rögzített vászonméret az asztali nézetben, különösen, ha a megjelenést teljesen gördülékennyé kívánta tenni. Megállapítottam, hogy az elemek szélessége a vászon méretéhez van rögzítve, nem pedig a böngésző szabad helyén. A festőállvány havi 15–99 dollárba kerül.

03. UXPin

Az UXPin kezelőfelülete több funkcióval rendelkezik, mint a Divshot vagy az Easel, így teljesebb és teljesebb alkalmazásnak érzi magát. Nem vagy hozzákötve egy CSS keretrendszerhez, így szabadon tervezhetsz teljesen a rajtad mért korlátozások nélkül. Beállíthatja saját rácsát, és válthat néhány különböző képernyőméret között, másokat hozzáadva, mivel nagy rugalmasságot biztosít.

Miután elkészítette a prototípust és megosztotta a csapattagokkal, ők kommentálhatják, válaszolhatnak és megoldhatják az egyes kérdéseket. A többi alkalmazástól eltérően iterációkat hozhat létre, amelyeket át lehet tekinteni és amelyekhez megjegyzést lehet fűzni. Tetszik, hogy ez hogyan fedi fel a tervezés mögötti munkát - a nem működő elemek dokumentálása ugyanolyan hasznos, mint a dolgok dokumentálása. Túl gyakran csak a működő dolgokra figyelünk, elfelejtve elmagyarázni az utat.

Az UXPin úgy érzi, hogy valóban a projekt történetének elmesélésére összpontosít, lehetővé téve olyan további eszközök feltöltését, amelyek nem az alkalmazásban lettek létrehozva, például személyek, egy projekt indítása vagy egy projekt keretrendszer-sablon. Az UXPin ára havi 12 és 89 dollár között van.

Munkafolyamat szempontjai

Mindhárom alkalmazásnak megvan a helye a munkafolyamatomban. Nagyon sok földet fednek le, és látom, ahogy tapadnak. Az UXPin és az Easel gyorsan megismerkedik: ha szüksége van valamire, ami segít az ötletek gyors tesztelésében, akkor jó kezdő lépések.

Ha integráltabban dolgozik, esetleg egymás mellett dolgozik egy fejlesztői csapattal, és fontolgatja, hogy az alkatrészek miként illeszkednek egymáshoz, akkor előnyben részesítheti a Divshotot (különösen, ha a Bootstrap-ot vagy az Alapítványt használja). Látom, hogy az integrált csapatok futásteljesítményt kapnak az egyedi témához való kapcsolódás képességéből.

Lesznek fejlesztők, akik azt mondják, hogy saját keretet kell építeni. De ha elvihet valamit, amit prototípuson tesztelt, tesztelt és átadott a fejlesztői csapatnak, akik szívesen használják, miért nem tenné?

Könnyebb, mint volt

Ez a három alkalmazás azt mutatja, hogy a prototípus készítés sokkal könnyebb, mint volt. Az a szint, amire eljutsz, választás kérdése. Ez függ a projekttől, a csapattól és attól, hogy mennyi időd van. Még mindig láthatok olyan alkalmakat, amikor továbbra is szeretnék belépni a kódba, ezért kezelje ezeket az alkalmazásokat parancsikonként a folyamat elején.

Mivel az általunk használt eszközök kiforrnak, a belépés akadályai csökkennek. Merem mondani, de egyre könnyebb prototípusokat készíteni, ha különböző elemeket gyűjt össze olyan webhelyekről, mint a jsFiddle és a GitHub.

A prototípus készítés jövője

Minden alkalmazásnak vannak előnyei és hátrányai. Az egyik dolog zavarba ejtő ezekkel az alkalmazásokkal kapcsolatban az, hogy mindegyik alapértelmezés szerint az asztali számítógéppel kezdődik, nem pedig a mobilral.

Az ilyen jellegű tervezés során a tartalom az egyik kulcsfontosságú dolog - és ezen alkalmazások egyike sem teszi lehetővé a tartalom egyszerű megszerzését a tervezési folyamat elején. Ha a terveinknek azokat az alapelveket akarjuk megtestesíteni, amelyek alapján kezdünk élni, akkor az általunk használt eszközöket a szívükben kell megépíteni. Lehet, hogy egy alapértelmezett oldalállapot örvendetes kiegészítő.

Ennek ellenére a prototípus-készítés egyre egyszerűbbé válik, ami azt jelenti, hogy hatékonyabban tesztelheti és elmagyarázhatja ötleteit - így időt hagy a tervezésre való összpontosításra.

Gavin Wye vezető felhasználói élmény-tervező, jelenleg a Virgin Money-nál dolgozik.

Ez a cikk eredetileg itt jelent meg net magazin 245. szám

Tetszett ez? Olvassa el ezeket!

  • Fedezze fel, mi következik Kibővített valóság
  • A CSS hibákat minden webdesignernek el kell kerülnie
  • Remek példák weboldal navigáció