Zeplin, a nagyvállalati design kollaborációs eszköz

A Zeplin egy olyan designer eszköz, ami megkönnyíti a designerek és fejlesztő csapatok együttműködését, illetve a megrendelővel közös folyamatokat és kommunikációt (látványtervek megtekintése, véleményezése).

Ettől jó a Zeplin

A webre vagy mobil eszközökre készült látványterveket egy helyen látja a designer, a fejlesztő és az ügyfél. A managerek használhatják a webes felületet, így semmit nem kell telepíteniük a gépükre. Az eszköz használatával a fejlesztők kiválthatják a designer szoftverek (Photoshop, sketch) használatát, a designerek számára pedig egy olyan kommunikációs csatorna nyílik meg, ami szükségtelenné teszi a levelezést.

Minden információt egy helyen találsz

Design

Ha a Zeplinben megnyitunk egy látványtervet, az önmagán túl többféle hasznos plusz információt is tartalmaz, amit jogosultságuktól függően látnak az együttműködők:

  • rövid leírást, amelyben kifejthetjük a weboldal vagy mobil app elképzelt működését, a specifikációban szereplő funkcióit, linkeket, hasznos információkat,
  • tag-eket és tag managementet,
  • bekapcsolható az oldal felépítésénél használt grid (bekapcsolás nélkül is jelzi az oldal szélességét és a hasábok számát),
  • linkekkel megosztható az adott látványterv. Így akár emailben is elküldhető ha szükséges, de maga a terv egy eszközben található,
  • a designerekre is gondoltak azzal, hogy innen is megnyitható a forrásfájl!

Az információs panelen található további lehetőségeink:

  • kiválaszthatóak az adott látványterven használt színek (többféle formátumból választhatunk, hogyan jelölje) tulajdonságai
  • szintén kiválaszthatóak a hozzá tartozó letölthető elemek (képek, ikonok)
  • az adott látványtervhez tartozó kommentek itt olvashatóak

A design elemei

 

Míg az ügyfél számára önmagában a design is információ, addig a fejlesztők számára ott mutatkozik meg az erőssége, hogy az adott terv elemeire (gombok, vonalak, blokkok, szövegrészek) kattintva megjelennek azok saját tulajdonságai:

  • méretei, egymáshoz viszonyított eltartásainak méretei,
  • színkódjai (konfigurálható, hogy az HEX, RGB, HSL legyen),
  • körvonalak, árnyékok, stb. CSS kódja (konfigurálható, hogy az CSS, Sass, SCSS, Less, Slylus legyen),
  • ha az elem vektoros (ikon), vagy fotó, akkor ez letölthető,
  • ha ez elem szöveges, annak betűtípusa, mérete, sortávja is láthatóvá válik.

Stílusok

A Zeplinben található Styleguide nézettel lehetőség nyílik arra, hogy egy vektoros elem tulajdonságok paneljéről annak színe bekerüljön a styleguide-ba is. Szöveges elemnél a betűtípust adhatja hozzá a Stylgeuide-hoz annak méretével együtt, így egy kattintással definiálhatóak a címsorok, bekezdések, egyéb szöveges stílusok. A fejlesztők munkáját segíti, hogy egy helyre kerül a projektben használt összes szín, betűtípus és betűméret.

Rendszerezettség

A látványtervek a projekteken belül a Dashboardon jelennek meg, sorrendjük egyszerű “drag and drop” módszerrel változtatható meg.

A szekciók alkalmazásával komolyabb felépítésű projektek is átláthatóak maradnak a Dashboardon, a tag-ek használata pedig megkönnyíti egy adott nézet vagy folyamat megtalálását.

A címkéket okosan alkalmazva könnyen szűrhetünk is (pl.: oldal neve + mobil nézet) a találatok között.

Verziókövetés

Minden korábbi verzió elérhető, illetve ezek tulajdonságai ugyanúgy hozzáférhetőek maradnak. Ennek köszönhetően egy korábbi állapothoz való visszatérés, vagy a változások összehasonlítása is gyorsan megy.

Világos, gyors, pontos kommunikáció a projekt résztvevői között

A látványtervekhez minden résztvevő számára látható és megválaszolható kommenteket lehet fűzni és bárki válaszolhat rájuk. Maga a hozzászólás tartozhat akár egy elemhez is, ami egyértelművé teszi, hogy az adott design melyik komponenséhez érkezett a kérdés, késés. Így könnyedén elkerülhető a végtelen emailfolyamok kialakulása, így rengeteg időt, akár heteket is nyerhetünk.

Miért hasznos az ügyfélnek?

A projektje összes látványtervét egy helyen, rendszerezve látja (nem kell a gépén, vagy drive-on, vagy emailjei között keresgélnie). A verziókövetés miatt mindig a legfrissebb tervet látja, de egy kattintással megnézheti a korábbi verziókat is. Adott esetben akár egy képernyőterv adott eleméhez is kommentelhet, így a designer pontosan tudja, mire vonatkozik a kérdés vagy kérés, nincs szükség 3-10 emailváltásra egyszerűbb esetekben sem, és ugyanitt kapja meg a feltett kérdésére a választ.

Miért hasznos a site buildernek, fejlesztőnek?

Azonnal hozzáférhetővé válik a szervezet összes projektje. Látható az adott tervhez tartozó összes információ, az összes korábbi hozzászólás ( és ő maga is hozzászólásban tehet fel kérdést). Megnézheti a látványterv korábbi verzióit. Elég egyetlen eszközt használnia ahhoz, hogy a lehető legtöbb információkhoz egy helyen jusson hozzá a projektről, egy adott látványtervről, és ugyenezen a helyen látja a változásokat is.

A látványterv elemeinek tulajdonságait és CSS-ét egyszerű copy-paste-tel, a színpalettát, valamint a betűk típusát és stílusát CSS-ben kapja meg. A képeket több méretben, az ikonokat svg-ben tudja letölteni. A site buildernek így nem kell telepítenie designer szoftvert (Photoshop, Sketch), nem kell keresgélnie az ikonokat, nem kell letöltenie a gépére a forrásfájlokat és a látványterveket sem.

Miért hasznos a designernek?

Közvetlenül a Photoshopból (Sketch-ből) exportálhatja a látványterveket a Zeplinbe, így megszűnnek a verziózott png-k a számítógépen. Mindig a legújabb verzió látszik, de bármikor visszaléphet egy korábbi állapotra. Az új verzió feltöltése rendkívül gyors, azonnal felülírja a korábbit, illetve commit üzenetben le lehet írni, mi a változás az előző verzióhoz képest.

Miért hasznos a tesztelőnek?

Bár a reszponzív design magával hozta azt, hogy inkább arányokat használunk (REM), mint hogy pixel-pontosságra törekednénk, a Zeplin azért  kínál egy funkciót, amivel össze lehet hasonlítani az elkészült HTML- oldalt és a tervet. A desktop kliensben a designt meg lehet nyitni egy külön ablakban, aminek állítható az átlátszósága, így a HTML-oldal felé helyezve láthatóvá válnak a tördelési hibák.

Miért hasznos a projekt résztvevőinek?

Röviden: mert minden egy helyen van. Persze ez nem teljesen igaz, de a lehetőségekhez mérten a lehető legtöbb információ van egy helyen: ez hatalmas előny.

Miért hasznos a fejlesztő cégnek?

Nagyobb fejlesztői létszámnál rengeteget lehet spórolni azzal, hogy a site builderek és fejlesztők számára nem kell Photoshop vagy Sketch licencdíjat fizetni, hisz ezeket az eszközöket a Zeplin kiváltja számukra 6.75$-ért (havonta/fő). A projekt azon tagjai, akiknek nem kell látniuk az elemek tulajdonságait (managerek, tesztelők, ügyfél), korlátlan számban csatlakozhatnak.

Főbb különbségek a szervezeti és kisebb licencek között  

Az ingyenes rész teljes értékű használatot ad, viszont csak egy aktív projektünk lehet. Az is nagy hátránya, hogy nincsenek benne jogosultságok, különböző szerepkörök. Bárki tud benne törölni, ami magában hordozza a hibázás lehetőségét. A kisebb üzleti licenceknél több projekt kezelésére van lehetőség, de szerepkörök itt sincsenek.

Az “Organization” verzióban korlátlan projektet kezelhetünk, valamint itt már háromféle szerepkörben kezelhetőek a látványtervek:

  • editor: létrehozhat projekteket, szekciókat, átrendezheti a képernyőtervek sorrendjét, létrehozhat, vagy törölhet cimkéket.
  • member: nem hozhat létre projektet, viszont a szervezeten belül minden projekthez hozzáférési joga van. Nem rendezheti át a látványtervek sorrendjét, és nem is törölheti őket. Van lehetősége kommentelni. Látja a képernyőterv elemeinek a tulajdonságait.
  • alien: (a megrendelő, vagy a szervezet olyan tagjai, akinek nincs szükségük rá, hogy a látványterv elemeinek tulajdonságait is lássák): Minden képernyőtervet látnak az adott projekten belül, ezekhez tudnak hozzászólásokat adni. Az adott projekthez “alien” státuszban bárkit hozzá tudnak adni.

További előnyök

Végül néhány szó a hibákról

Szerencsére nincs sok belőlük :). Ha a hozzászólások rendszerezhetősége, nagyobb átláthatósága megtörténik (külön listák), nem nagyon lesz mire panaszkodni.

  • a hozzászólások számának növekedésével nehezebb nyomon követni az olvasott és olvasatlan hozzászólások sorát,
  • a hozzászólások a feed-ben ömlesztve jelennek meg az összes projektből, ráadásul az egyéb eseményekkel együtt, ez semmiképp sem segíti az átláthatóságot.
  • ugyan lehetséges átállítani egy hozzászólás státuszát, hogy a benne foglalt feladat/kérdés meg lett oldva, vagy megválaszolásra került, de akkor a hozzászólás eltűnik,
  • a webes kliens új projekt megjelenítésekor elég lomha. Második alkalommal már gyorsabban töltődnek be a képek.
  • Photoshop 2018CC-vel nem működik (hiba jelentve)