Sketch and Zeplin collaborazione tra designer e sviluppatori

La collaborazione tra designer e sviluppatori è essenziale per il successo di un progetto web ed è una misura del successo di una squadra. Pur condividendo lo stesso spazio di lavoro è inestimabile, avere una fonte di verità online che aiuta con questa collaborazione è incredibilmente utile. In questo articolo vedremo Zeplin e come funziona in combinazione con Sketch per riunire i team.

Una parola veloce sullo schizzo

Circa sei mesi fa, quando ho spostato i lavori, sono stato incoraggiato a provare Sketch. La cosa grandiosa di questo software è che si concentra in particolare sull'interfaccia e sul design di icone; dalle tavole da disegno con dimensioni specifiche per Web, dispositivi mobili e icone, alle funzionalità che aiutano a migliorare il processo di progettazione, Sketch è un must per i designer.

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

Ecco alcuni esempi che ti forniscono una panoramica di cosa puoi fare con lo schizzo:

1. Crea pagine per organizzare i tuoi contenuti (ad esempio: design per dispositivi mobili, design desktop) e tavole da disegno all'interno di queste pagine per simulare il tuo prodotto (ad esempio: creare un percorso passo-passo per il cliente).
2. Utilizzare il Ispettore per trovare tutti i dettagli su un oggetto specifico (dimensioni, posizionamento, colori, stili dei caratteri, opacità e molto altro).
3. Utilizzare il Esportare funzione per esportare tavole da disegno o singoli oggetti in formati di file specifici (PNG, JPG, PDF e così via).

"Sono un dev, non ho mai usato Sketch!"

Negli ultimi anni i progettisti hanno imparato a collaborare tra loro usando strumenti come InVision, ma questa piattaforma non ha ancora caratteristiche che consentano un rapido trasferimento del progetto al team di sviluppo.

Non dovremmo chiedere agli sviluppatori di essere abili negli stessi strumenti che i designer usano per simulare i prodotti. Detto questo, non dovremmo nemmeno richiedere ai designer di allontanarsi da ciò che sanno fare meglio: il design! Costruire un "documento di specifiche" ogni volta che consegnano un progetto è lontano dall'essere "agile" e può significare un sacco di tempo perso tra la consegna di progetti e la necessità di iterare se necessario.

zeplin

È qui che Zeplin entra in scena.

Zeplin è uno strumento di collaborazione per progettisti dell'interfaccia utente e sviluppatori di front-end. Oltrepassa il flusso di lavoro di progettazione e aiuta le squadre a gestire il progetto.

Consente ai designer di caricare i loro wireframes o disegni visivi direttamente da Sketch e aggiungerli alle cartelle di progetto in Zeplin. La cosa migliore? Le annotazioni verranno automaticamente aggiunte ai disegni (dimensioni, colori, margini e persino suggerimenti CSS per determinati elementi) che ti lasceranno un repository online a cui l'intero team può contribuire.

"Zeplin funziona molto bene come un'unica fonte di verità, se usato come tale.
Inoltre, poiché è disponibile sia come app standalone che come app web, puoi accedervi praticamente ovunque. Semplifica il controllo di disegni e cose come spaziatura, dimensioni, colori, ecc. "- Daniel Setas Pontes, sviluppatore Javascript @NOW TV, Sky

Esportare disegni da schizzo a Zeplin

Zeplin funziona come plug-in all'interno di Sketch, quindi caricare i disegni è un lavoro da un clic.

Ecco come avviare un progetto:

Avvio di un progetto Zeplin

1. Scarica Zeplin (solo mac) e installa. Gli sviluppatori non dovranno eseguire OS X in quanto avranno solo bisogno di accedere allo strumento basato sul Web per accedere ai contenuti.
2. Crea progetti.
3. Seleziona la piattaforma per cui hai progettato.
4. Etichetta il progetto (assicurati di scegliere un nome che sia familiare a tutto il team).

Esportare da Sketch

All'interno di Sketch, seleziona singoli oggetti e rendili esportabili. Ciò consentirà al tuo team di sviluppo di esportare ogni elemento in un secondo momento all'interno di Zeplin. Ecco come funziona:

1. Quindi, seleziona le tavole da colorare che desideri caricare in Zeplin.
2. Vai a Plugin> Zeplin> Esporta tavole da disegno selezionate.
3. Seleziona il progetto a cui desideri caricare i tuoi progetti, quindi fai clic su Importare.

Lavorare con Zeplin

Una volta in Zeplin, puoi navigare tra i progetti e esplorare facilmente tutti i componenti al loro interno. Anche scoprire le specifiche di alcuni elementi è intuitivo; seleziona l'elemento che desideri, quindi tutte le informazioni rilevanti appariranno nella colonna di destra.

Sviluppatori: ecco come funziona, dopo aver aperto lo strumento basato sul Web e effettuato l'accesso:

1. Seleziona l'oggetto che vuoi ispezionare.
2. Guarda la colonna sul lato destro per informazioni dettagliate come stili di font, colori e così via (le informazioni verranno visualizzate in base all'oggetto selezionato).
3. Copia il CSS suggerito.

Se il team di progettazione ha consentito la presenza di elementi esportabili durante l'importazione dei disegni in Zeplin, il team di sviluppo dovrebbe essere in grado di esportare singole risorse. Le risorse saranno disponibili per il download in formato SVG e tre diverse dimensioni PNG.

1. Qui puoi aggiungere note e commenti ai disegni.
2. Qui puoi copiare e condividere il link del progetto, magari anche integrarlo con il canale Slack del team per ricevere notifiche o invitare i membri del team a collaborare!

Perché la tua squadra dovrebbe fare la mossa

Lavorare con Zeplin ha molti vantaggi, ecco alcuni esempi:

• Eviterete di costruire un documento di specifiche; qualcosa che non è né agile né facile da aggiornare.
• Crea progetti di annotazioni istantanee con tutte le informazioni rilevanti per sviluppatori e altri designer.
• È possibile creare progetti esportabili, in modo che gli sviluppatori possano accedere rapidamente alle singole risorse.
• Crea tutti i progetti che desideri, quindi carica e aggiorna con pochi clic.
• Crea guide di stile che aiuteranno il team di progettazione a rimanere coerente.
• Sfrutta l'integrazione Slack, notificando istantaneamente il tuo team ogni volta che si verifica un aggiornamento.

Provalo!

Lavorare con Sketch e Zeplin è un ottimo modo per i progettisti di collaborare armoniosamente con gli sviluppatori. Il mio team ama lavorare in questo modo: mi piacerebbe sentire i tuoi pensieri e le tue esperienze lavorando con questi strumenti!

link utili

• Plugin di schizzo
• Tutorial di sketch su Envato Tuts+
• Disegna i modelli di siti Web sul mercato Envato
• @zeplin_io su Twitter
  
• zeplin.io