10 cose da tenere a mente lavorando con Sketch & Zeplin. Gli sviluppatori ti ringrazieranno!

Dopo aver valutato i pro e i contro di Sketch & Zeplin prima di iniziare a usarli, sembrava che ci fossero molti più pro che contro, ma hai ancora lo stesso carico di lavoro e le stesse difficoltà a comunicare con il team di sviluppo. Ti stai chiedendo se gli sviluppatori non sanno come utilizzare uno strumento così semplice come Zeplin.

Hai appena caricato tutti i tuoi progetti su Zeplin e all'improvviso ricevi un messaggio da uno degli sviluppatori che ti chiede di esportare tutte le tue icone e immagini e inviarle in un file zip. E ti chiedi, perché non li scaricano direttamente da Zeplin? Ti hanno detto di caricare uno screenshot su Zeplin perché non riescono a vedere i margini tra gli elementi ... e pensi, a che scopo serve questo strumento?

Se una di queste cose ti sta succedendo, questo articolo fa per te. Queste sono le 10 cose che ti aiuteranno a ottenere il massimo dal tuo tempo e a trovare un mezzo felice con gli sviluppatori.

1. Dimensione delle tavole da disegno

iOS

  • @ 1X: 375 x 667 px

androide

  • mdpi: 360 x 640 px

rete

In quali dispositivi verrà visualizzato il tuo prodotto? Definire i punti di interruzione e tenere presente le query multimediali che gli sviluppatori useranno. Parla con il tuo sviluppatore se non sai di cosa si tratta.

  • 1920 x 1080 px
  • 1200 x 900 px
  • 1024 x 768 px
  • 320 x 480 px

2. Funzionamento dei punti di interruzione nei layout reattivi

Carica un'opera d'arte su Zeplin con il design reattivo (in base ai punti di interruzione che hai già impostato), in altre parole, condividi l'aspetto del tuo design in diverse risoluzioni e dispositivi dello schermo.

Pensi che sia chiaro che il design sarà centrato orizzontalmente a risoluzioni più elevate, come 1920 x 1080 pixel, ma gli sviluppatori non sono lettori di mente.

Condivisione del design reattivo

3. Dimensione delle immagini raster

Assegna le dimensioni massime alle immagini raster per evitare la perdita di qualità quando il design viene visualizzato su schermi con risoluzioni più elevate. Ad esempio, se stai lavorando su un'app per iOS, imposta la dimensione delle immagini su @ 3x. Se non lo fai, riceverai un messaggio dallo sviluppatore come il seguente:

Inviami le immagini di grandi dimensioni perché sembrano pixelate quando vedo il design su un iPhone 7.

4. Rendi esportabile il gruppo di icone, ma anche i singoli oggetti separatamente

Gli sviluppatori potrebbero essere interessati ad esportare uno o più degli elementi della tua icona o l'icona completa. Rendi quindi tutti gli articoli esportabili separatamente e come gruppo. Più tardi a Zeplin, il team di sviluppo sarà in grado di esportare singoli asset e l'intero gruppo.

5. Rendi esportabili le immagini, non il testo

Immagina un banner che contenga un'immagine, un testo e un filtro e il filtro non può essere creato con CSS. Quindi, gli sviluppatori devono essere in grado di esportare:

  1. Solo l'immagine
  2. Solo il filtro
  3. Immagine + filtro

6. Altezza della linea

L'altezza della riga del testo del corpo deve essere 6px in più rispetto alla dimensione del carattere corrente, l'eccezione può essere rappresentata da titoli o testi sovrapposti in cui si desidera influire sull'utente potenziando la grafica di un elemento.

Quindi, controlla le altezze di linea delle diverse caselle di testo. Tieni presente che lo sviluppatore seleziona una casella di testo e copia e incolla l'altezza della linea. Imposta la stessa altezza di linea in tutte le caselle di testo per risparmiare coerenza lungo il tuo disegno.

7. Larghezza della casella di testo

Imposta la larghezza di un testo a riga singola su "auto". Ciò consentirà al team di sviluppo di visualizzare il margine tra il testo e altri elementi dell'interfaccia o i confini del design dello schermo.

8. Rimuovere l'area intorno all'icona

Alcune delle icone che importi in Sketch hanno un'area circostante, che è buona per esportare l'asset, ma è difficile per gli sviluppatori quando cerca di controllare il margine tra gli oggetti in Zeplin. Rimuovere questo spazio per consentire agli sviluppatori di controllare il margine tra l'icona e l'elemento successivo dell'interfaccia.

9. Stati dei pulsanti

Hai realizzato il tuo progetto in Sketch e hai caricato gli schermi su Zeplin. Ora arriva la domanda dello sviluppatore.

Qual è il comportamento dell'icona, del testo, del pulsante, cosa succede quando l'utente passa con il mouse, facendo clic su ...

Crea una nuova grafica con tutti gli stati per i diversi componenti che stai utilizzando nell'interfaccia. Puoi nominarla "Specifiche".

10. Come organizzare le schermate di progettazione in Zeplin

Zeplin ti consente di organizzare le schermate per tag. È possibile ordinare i disegni degli schermi in base al contenuto (ad esempio, le sezioni del sito Web) o alle funzionalità.

Ordinare le schermate seguendo il flusso dell'utente in ciascuno dei tag (sezione o funzionalità). In questo modo, la prima schermata di Zeplin sarà la prima schermata del tuo sito Web o della tua app.

Cos'altro?

Non perdere tempo a creare una styleguide, puoi aggiungere i colori e le tipografie direttamente da Zeplin (scheda Styleguide).

PD: non dimenticare di invitare il team di sviluppo al progetto del tuo Zeplin!

Spero che questo ti aiuti, fammi sapere se hai qualche domanda!

Unisciti alla mia classe Skillshare su come costruire prototipi in inVision usando il plugin Sketch & Craft per ulteriori suggerimenti: https://skl.sh/2Y4hj6l