Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Sketch
Webdesign

Sketch i Zeplin: Pomoć u Suradnji Dizajnera i Razvojnih Programera

Length:LongLanguages:

Croatian (Hrvatski) translation by Maja Petek (you can also view the original English article)

Suradnja između dizajnera i razvojnih programera je od esencijalne važnosti za uspjeh projekta, a time se ujedno i mjeri uspjeh tima. Iako je rad u istom radnom okruženju iznimno važan, kada imate online izvor istine koji pomaže u ovoj kolaboraciji je nevjerojatno korisna stvar. U ovom članku ćemo pogledati Zeplin i način na koji on radi u kombinaciji s Sketch-om kako bi spojio zajedno timove.

Kratki Uvod u Sketch

Prije nekih šest mjeseci, kada sam mijenjao posao, ohrabrio sam se iskušati Sketch. Odlična stvar kod tog softvera je da se isključivo fokusira na dizajn ikona; od radnih površina sa specifičnim veličinama za web, mob i ikone, do značajki koje pomažu unaprijediti proces dizajniranja, Sketch je naprosto nešto što dizajner mora imati.

Uz to, ako ste osrednji u radu s Photoshop ili Illustrator programima, učenje je jednako nuli.

Ovdje su neki primjeri koji će vam pružiti uvid u što sve možete raditi koristeći Sketch:

  1. Kreirajte stranice da organizirate svoj sadržaj (npr: mobilne dizajne, desktop dizajne) i Artboard radne površine unutar tih stranica da svoj proizvod primijenite na mockup (npr: kreirajte korak-po-korak doživljaj za klijenta).
  2. Upotrijebite Inspector da pronađete sve detalje o određenom objektu (veličinu, poziciju, boje, stolove fonta, prozirnost i mnogo više).
  3. Upotrijebite Export značajku da eksportirate Artboard površine ili individualne objekte da specificirate formate datoteka (PNG, JPG, PDF, itd.).

"Ja sam razvojni programer, nikada nisam koristio Sketch!"

Posljednjih godina dizajneri su naučili međusobno surađivati koristeći InVision, ali ovoj platformi još uvijek nedostaju značajke koje će omogućiti brzu predaju dizajna timu razvojnih programera.

Ne bismo trebali tražiti razvojne programere da budu vješti s istim alatima koje koriste dizajneri za svoj posao. A isto tako, ne bismo trebali ni tražiti da se dizajneri u svojem poslu udaljavaju od onoga što najbolje rade: dizajn! Izgradnja "dokumenta specifikacija" svaki put kada predaju dizajn je daleko od "agilnog" i može značiti puno izgubljenog vremena između predaje dizajna i ponovne iteracije ukoliko je potrebno.

Zeplin

Ovdje na scenu nastupa Zeplin.

Zeplin je alat za kolaboraciju između UI dizajnera i front end razvojnih programera. Obavlja i više od dizajnerskog tijeka rada i pomaže timovima kod predaje dizajna.

Omogućava dizajnerima da prenesu svoje wireframeove ili vizualne projekte izravno iz skica i dodaju ih u projektne mape u Zeplinu. Najbolja stvar? Oznake će automatski biti dodane dizajnima (veličine, boje, margine i čak CSS sugestije za određene elemente) koje će vam pružiti cijeli repozitorij kojem cijeli tim može pridonijeti.

"Zeplin dobro radi kao izvor istine, kada se koristi kao takav.

Također, budući da je dostupan kao samostalna aplikacija kao i web-aplikacija, možete mu pristupiti gotovo bilo gdje. Olakšava vam da provjerite dizajn i stvari poput razmaka, veličine, boje itd." - Daniel Setas Pontes, Javascript programer @NOW TV, Sky

Eksportiranje Dizajna iz Sketcha u Zeplin

Zeplin radi kao dodatak u Sketchu pa se upload dizajna obavlja jednim klikom.

Ovako ćete započeti projekt:

Početak Zeplin Projekta
  1. Preuzmite Zeplin (samo mac) i instalirajte. Razvojni programeri neće morati imati pokrenut operativni sustav OS X jer će im trebati samo pristup alatima koji se temelje na webu kako bi mogli pristupiti sadržaju.
  2. Kreirajte projekte.
  3. Odaberite platformu za koju ste dizajnirali.
  4. Označite projekt (pobrinite se da odaberete ime koje je poznato cijelom timu).
Export from Sketch
Eksportiranje iz Sketcha

U Sketchu odaberite pojedinačne objekte i učinite ih izvezivima. To će omogućiti vašem dev timu da kasnije izvezu svaki element iz Zeplina. Evo kako to funkcionira:

  1. Zatim odaberite artboarde koje želite prenijeti u Zeplin.
  2. Idite na Plugins > Zeplin > Export Selected Artboards.
  3. Odaberite projekt u koji želite prenijeti svoje dizajne i zatim kliknite Import.

Rad sa Zeplinom

Nakon što uđete u Zeplin, možete navigirati između projekata i lako istražiti sve komponente unutar njih. Pronalaženje pojedinosti o određenim elementima također je intuitivno; odaberite željeni element, a zatim će se svi relevantni podaci pojaviti u desnom stupcu.

Razvojni programeri: evo kako to funkcionira, nakon što otvorite web-bazirani alat i prijavite se:

  1. Odaberite objekt koji želite pregledati.
  2. Pogledajte desnu stranu stupca za detaljne informacije poput stilova fonta, boje i tako dalje (informacije će se prikazati prema odabranom objektu).
  3. Kopirajte sugestirani CSS.

Ako je dizajnerski tim omogućio izvozne elemente prilikom uvoza dizajna u Zeplin, razvojni tim bi trebao biti u mogućnosti eksportirati pojedinačne elemente. Elementi će biti dostupni za preuzimanje u SVG formatu i tri različite PNG veličine.

  1. Ovdje dizajnima možete dodati bilješke i komentare.
  2. Ovdje možete kopirati i dijeliti poveznicu projekta, možda čak i integrirati s Slack kanalom tima kako biste primali obavijesti ili pozvali članove tima na suradnju!

Zašto bi Vaš Tim Trebao Napraviti Potez

Rad sa Zeplinom ima mnoge prednosti, evo nekih prednosti:

  • Izbjeći ćete stvaranje dokumenata o specifikacijama; nešto što nije agilno niti lako ažurirati.
  • Izradite trenutačno napisane dizajne sa svim relevantnim informacijama za programere i druge dizajnere.
  • Možete kreirati eksportabilne dizajne kako bi razvojni programeri imali brz pristup individualnim elementima.
  • Napravite koliko god projekata želite, a zatim ih prenesite i ažurirajte sa samo nekoliko klikova.
  • Izradite smjernice za stil koji će pomoći dizajnerskom timu da ostane dosljedan.
  • Iskoristite prednosti Slack integracije, odmah obavještavajući svoj tim svaki put kad se desi ažuriranje.

Isprobajte!

Rad s Sketchom i Zeplinom izvrstan je način da dizajneri skladno surađuju s programerima. Moj tim voli raditi na ovaj način - volio bih čuti vaše mišljenje i iskustva u radu s tim alatima!

Korisni Linkovi

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.