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

Sketch e Zeplin: aiutare progettisti e sviluppatori di collaborare

Length:LongLanguages:

Italian (Italiano) translation by Mirko Pizii (you can also view the original English article)

Collaborazione tra designer e sviluppatori è essenziale per il successo di un progetto web, ed è una misura del successo di una squadra. Pur condividendo la stessa area di lavoro è prezioso, avere una fonte online di verità che aiuta con questa collaborazione è incredibilmente utile. In questo articolo ci stiamo andando a guardare Zeplin e come funziona in combinazione con l'abbozzo di riunire squadre.

Una parola veloce su Sketch

Circa sei mesi fa, quando mi sono trasferito di posti di lavoro, mi ha incoraggiato a Sketch. La cosa grandiosa di questo software è che esso è specificamente incentrato sul design di interfaccia e icona; da tavole da disegno con dimensioni specifiche per web, mobile e icone, caratteristiche che contribuiscono a migliorare il processo di progettazione, Sketch è un must avere per i progettisti.

Inoltre, la curva di apprendimento, se sei un utente di Photoshop o Illustrator intermedio è vicino a nessuno.

Ecco alcuni esempi che vi darà una panoramica di che cosa si può fare con Sketch:

  1. Creare pagine per organizzare i tuoi contenuti (ad esempio: disegni mobile, desktop disegni) e tavole da disegno all'interno di queste pagine per mockup del prodotto (ad esempio: creare il viaggio di un cliente passo per passo).
  2. Utilizzare la finestra di ispezione per trovare tutti i dettagli su un oggetto specifico (dimensioni, posizionamento, colori, stili di carattere, opacità e molto altro ancora).
  3. Utilizzare la funzionalità di esportazione per esportare le tavole da disegno o singoli oggetti in formati di file specifici (PNG, JPG, PDF e così via).

"Io sono uno sviluppatore, non ho mai usato Sketch!"

Negli ultimi anni i progettisti hanno imparato a collaborare tra di loro utilizzando strumenti come InVision, ma questa piattaforma manca ancora caratteristiche che consentono un rapido disegno hand-off al team di sviluppo.

Non dovremmo chiediamo agli sviluppatori di essere competente negli stessi strumenti che i progettisti utilizzano per prodotti di mockup. Detto questo, né dovremmo richiediamo ai progettisti di allontanarsi da ciò che sanno fare meglio: design! Creazione di un "documento di specifiche" ogni volta che passano sopra un disegno è lungi dall'essere "agile" e può significare un sacco di tempo sprecato tra consegna disegni e dover ripetere se necessario.

Zeplin

Questo è dove Zeplin entra in scena.

Zeplin è uno strumento di collaborazione per i progettisti di interfaccia utente e gli sviluppatori front-end. Essa va oltre il workflow di progettazione e consente ai team con la mano-off design.

Esso consente ai progettisti di caricare loro wireframe o visual disegni direttamente da Sketch e aggiungerli alle cartelle di progetto in Zeplin. La cosa migliore? Le annotazioni verranno automaticamente aggiunto ai disegni (dimensioni, colori, margini e persino CSS suggerimenti per alcuni elementi) che verranno lascerà con un archivio on line che tutta la squadra può contribuire alla.

"Zeplin funziona molto bene come un'unica fonte di verità, quando utilizzato come tale.

Inoltre, poiché è disponibile come un'applicazione standalone come pure una web app, è possibile accedervi praticamente ovunque. Lo rende facile controllare disegni e cose come spaziatura, dimensioni, colori, ecc."– Daniel Setas Pontes, Javascript developer @NOW TV, Sky

Esportazione di disegni da Sketch a Zeplin

Zeplin funziona come un plugin all'interno di Sketch, quindi caricare disegni è un uno fare clic su processo.

Ecco come avviare un progetto:

Avvio di un progetto di Zeplin
  1. Scarica Zeplin (solo mac) & installare. Gli sviluppatori non devono essere in esecuzione OS X come essi avrete solo bisogno di accedere lo strumento basato su web per accedere al contenuto.
  2. Creare progetti.
  3. Selezionare la piattaforma che hai progettato per.
  4. Etichettare il progetto (assicuratevi di scegliere un nome che è familiare a tutta la squadra).
Export from Sketch
Esportazione da Sketch

All'interno di Sketch, selezionare i singoli oggetti e li rendono esportabile. Ciò consentirà il dev team per esportare ogni elemento più tardi dall'interno Zeplin. Ecco come funziona:

  1. Selezionare quindi le tavole da disegno che si desidera caricare in Zeplin.
  2. Vai al plugin > Zeplin > esportazione selezionata le tavole da disegno.
  3. Selezionare il progetto a cui si desidera caricare i vostri disegni, quindi fare clic su Importa.

Lavorando con Zeplin

Una volta in Zeplin, puoi navigare tra progetti ed esplorare facilmente tutti i componenti all'interno di essi. Trovare sulle specifiche di alcuni elementi è anche intuitiva; Selezionare l'elemento desiderato, quindi tutte le informazioni rilevanti appariranno nella colonna di destra.

Sviluppatori: Ecco come funziona, dopo aver aperto lo strumento basato su web e firmato a:

  1. Selezionare l'oggetto che si desidera controllare.
  2. Osservare la colonna di destra per informazioni dettagliate quali stili di carattere, colore e così via (informazioni verranno visualizzate in base all'oggetto che si seleziona).
  3. Copiare il CSS suggerito.

Se il team di progettazione ha permesso per elementi esportabili quando si importano i disegni in Zeplin, il team di sviluppo dovrebbe essere in grado di esportare risorse individuali. Attività sarà disponibile per il download nel formato SVG e tre diverse dimensioni PNG.

  1. Qui è possibile aggiungere note e commenti ai disegni.
  2. Qui è possibile copiare e condividere il link del progetto, forse anche integrare con il canale Slack del team per ottenere le notifiche o invitare i membri del team di collaborare!

Perché il vostro Team dovrebbe fare la mossa

Lavorare con Zeplin ha molti vantaggi, ecco alcuni esempi:

  • Potrai evitare la creazione di un documento di specifiche; qualcosa che non è né agile né facile da aggiornare.
  • Creare disegni annotati istantanee con tutte le informazioni rilevanti per gli sviluppatori e altri designer.
  • È possibile creare disegni esportabili, in modo rapido gli sviluppatori di accedere ai singoli beni.
  • Creare altrettanti progetti desiderato, quindi caricare e aggiornare con pochi click.
  • Creare guide di stile che consentirà al team di progettazione di rimanere coerenti.
  • Porta la tua squadra vantaggio dell'integrazione Slack, immediatamente notifica ogni volta che c'è un aggiornamento.

Provalo!

Lavorare con Sketch e Zeplin è un ottimo modo per i progettisti di collaborare armoniosamente con gli sviluppatori. La mia squadra ama lavorare in questo modo – mi piacerebbe sentire i vostri pensieri e le esperienze di lavoro con questi strumenti!

Link utili

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.