Advertisement
  1. Web Design
  2. Sketch
Webdesign

Sketch a Zeplin: Pomoc designerom a vývojárom pri spolupráci

Length:LongLanguages:

Slovak (Slovenčina) translation by Zoli Rosa (you can also view the original English article)

Spolupráca medzi dizajnérmi a vývojármi je základom úspešného webového projektu a to meria úspech tímu. Kým zdieľanie rovnakého pracovného miesta je neoceniteľné, mať online zdroj pravdy pomáha pri tejto spoluprácu. V tomto článku sa pozrieme na Zeplin a ako to funguje v kombinácii so Sketchom, pre prepojenie tímu.

Pár slov o Sketche

Pred šiestimi mesiacmi, keď som menil prácu, mi bolo odporúčané použiť Sketch. Skvelá vec na tomto softvéru je, že sa špecificky zameria na interface a dizajn ikon; z artboardu so špecifickou velikostou pre web, mobil a ikony, k funkciám ktoré pomáhajú vylepšiť dizajnový proces, Sketch je nutnosť pre Designerov.

Dodatočne, učiaca krivka, ak ste pokročilí vo Photoshope alebo Illustratore je takmer neexistujúca.

Tu je pár príkladov, ktoré vám dajú prehľad toho, čo môžete robiť so sketch:

  1. Tvorba stránok pre organizáciu vášho obsahu (napríklad: mobilný dizajn, desktop design) a Artboardy vnútri týchto stránok pre náhľad vášho produktu (napríklad: krok za krokom zákazníkovho dobrodružstvo).
  2. Použite Inspector pre vyhľadanie všetkých detailov o špecifickom objekte (veľkosť, pozícia, farba, štýl fontu, krytie a ďalšie).
  3. Použite funkciu Export pre exportovanie Artboardů alebo individuálnych objektu do špecifických formátov (PNG, JPG, PDF, atď).

"Som Vývojári, ja nikdy nepoužil Sketch!"

V posledných rokoch sa dizajnéri naučili spolupracovať medzi sebou pomocou nástroje ako je Invision, ale tejto platforme stále chýba funkcia ktorá dovolí rýchly dizajn vývojárskemu tímu.

Nemali by sme chcieť po vývojároch aby vedeli v rovnakom nástroji ako dizajnéri.Takto povedané, nemali by sme chcieť aby dizajnéri odišli od toho, čo vedia najlepšie: design! Tvorba "dokumentu špecifikácia" vždy keď odovzdajú dizajn je ďaleko od "agile" a tiež môže znamenať veľa strateného času medzi odovzdaním dizajn a prerobením, ak je to potrebné.

Zeplin

To je miesto, kde prichádza Zeplin na scénu.

Zeplin je kolaboratívne nástroj UI návrhára a front end vývojárov. Ide za workflow dizajnu a pomáha tímom s odovzdaním dizajnu.

To dovolí dizajnérom nahrať ich wireframes alebo vizuálny dizajn priamo zo Sketche a pridáme ich do projektových adresárov v Zeplinu. Najlepšia vec? Poznámky sú automaticky pridané do dizajnu (veľkosti, farby, okraje a dokonca aj CSS pre určité elementy) ktoré spôsobí, že máte online knižnicu, do ktorej môže prispievať celý tím.

"Zeplin funguje skvele ako jednotný zdroj pravdy, ak je tak použitý.

Tiež, pretože je dostupná ako samostatná aplikácia rovnako ako webová aplikácia, máte k nej prístup v podstate odkiaľkoľvek. Je jednoduché s ňou skontrolovať dizajn a veci ako je riadkovanie, veľkosti, farby, atď "- Daniel setas Pontes, Javascript developer @NOW TV, Sky

Export dizajnu zo Sketche do Zeplinu

Zeplin funguje ako plugin vo Sketch, takže uploadovanie dizajnu je práca pre jedno kliknutie.

Tu je návod ako začať projekt:

Začiatok Zeplin projektu
  1. Stiahnite Zeplin (mac only) a nainštalujte. Developeri nebudú potrebovať bežiaci OS X pretože im stačí prístup cez web, aby mali prístup k obsahu.
  2. Vytvorte projekty
  3. Vyberte platformu, pre ktorú tvoríte.
  4. Označte projekt (uistite sa, že použijete názov ktoré je jasné celému tímu).
Export from Sketch
Exportovanie zo Sketche

Vo Sketch, vyberte individuálne objekty a urobte je exportovatelnými. Toto dovolí vášmu vývojárskemu tímu exportovať každý element z Zeplinu. Takto to funguje:

  1. Ďalej, Vyberte artboard ktorý chcete nahrať do Zeplinu.
  2. Choďte do Plugins> Zeplin> Export Selected Artboards.
  3. Vyberte projekt do ktorého chcete nahrať vaše designy, potom stlačte Import.

Práca s Zeplinem

Akonáhle ste v Zeplinu, môžete sa navigovať medzi projektmi jednoducho a preskúmať všetky komponenty v nich. Zistiť ich špecifikáciu určitých elementov je tiež intuitívne; vyberte element ktorý chcete, potom sa všetky relevantné informácie objaví v pravom stĺpci.

Vývojári: tu je ako to funguje, akonáhle otvoríte webový nástroj a prihlásite sa:

  1. Vyberte objekt ktorý chcete preskúmať.
  2. Pozrite sa na pravý stĺpec pre detailné informácie ako sú fonty, farby, atď (informácia bude zobrazená podľa objektu ktorý vyberiete).
  3. Skopírujte určené CSS

Ak dizajn tím povolil exportovatelným elementom pri importe dizajnu do Zeplinu, vývojársky tím by mal byť schopný exportovať individuálne zdroje. Zdroje budú k dispozícii na prevzatie v SVG formáte a troch rôznych PNG veľkostiach.

  1. Tu môžete pridať poznámky a komentáre k dizajnu.
  2. Tu môžete skopírovať a zdieľať odkaz na projekt, možno dokonca integrovať tímový Slack kanál pre notifikácia alebo pozvať členov tímu k spolupráci!

Prečo by mal váš tím urobiť tento krok

Práca s Zeplinem má mnoho výhod, tu je pár príkladov:

  • Vyhnete sa tvorbe dokumentu špecifikácia; niečo čo nie je agilné a ťažko sa udržiava.
  • Vytvorí rýchly dizajn s poznámkami a všetkými dôležitými informáciami pre vývojárov a ďalšie dizajnérmi.
  • Môžete vytvoriť exportovateľný dizajn, aby vývojári rýchlo získali prístup k jednotlivým zdrojom.
  • Vytvorte projektov koľko chcete, potom nahrajte update len pár kliknutiami.
  • Vytvorte štýlový návod, ktorý pomôže tímu zostať konzistentné.
  • Využite Slack integráciu, hneď informujte váš tím, keď je k dispozícii update.

Skúste to!

Práca sa Sketch a Zeplinem je skvelým spôsobom spolupráce pre dizajnérov a vývojárov. Môj tím miluje prácu týmto spôsobom a ja by som rád počul vaše myšlienky na skúsenosti s týmito nástrojmi!

Užitočné odkazy

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.