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

Sketch και Zeplin: Βοηθώντας Προγραμματιστές και Σχεδιαστές να Συνεργαστούν

Length:LongLanguages:

Greek (ελληνικά) translation by Iris Diakoumi (you can also view the original English article)

Η συνεργασία ανάμεσα σε σχεδιαστές και προγραμματιστές είναι απαραίτητη για την επιτυχία ενός web project και είναι κριτήριο για την επιτυχία μιας ομάδας. Ενώ η συνύπαρξη στον ίδιο εργασιακό χώρο είναι πολύτιμη, η ύπαρξη μιας διαδικτυακής πηγής αλήθειας η οποία συνεισφέρει σε αυτήν τη συνεργασία είναι εξαιρετικά χρήσιμη  Σε αυτό το άρθρο πρόκειται να εξετάσουμε το Zeplin και πώς λειτουργεί σε συνδυασμό με το Sketch για να φέρει κοντά τις ομάδες.

Μια γρήγορη αναφορά στο Sketch

Περίπου έξι μήνες πριν, όταν άλλαξα εργασία, με παρότρυναν να δοκιμάσω το Sketch. Το μεγάλο προτέρημα αυτού του λογισμικού είναι ότι είναι ειδικά επικεντρωμένο στο σχεδιασμό διεπαφής και εικονιδίων. Από τους πίνακες γραφικών με ειδικά μεγέθη για το web, mobile και εικονίδια, μέχρι χαρακτηριστικά που βοηθούν στη βελτίωση της διαδικασίας σχεδιασμού, το Sketch είναι απολύτως απαραίτητο για τους σχεδιαστές.

Επιπλέον, η καμπύλη μάθησης, αν είστε ένας μέσος χρήστης Photoshop ή Illustrator είναι σχεδόν μηδενική.

Εδώ είναι μερικά παραδείγματα που σας δίνουν μια επισκόπηση του τι μπορείτε να κάνετε με το Sketch:

  1. Να δημιουργήσετε σελίδες για να οργανώσετε το περιεχόμενό σας (για παράδειγμα: σχέδια για φορητές συσκευές, σχέδια για σταθερούς υπολογιστές) και τους πίνακες γραφικών μέσα σε αυτές τις σελίδες για να σκιαγραφήσετε (mockup) το προϊόν σας (για παράδειγμα: δημιουργία βήμα προς βήμα πλοήγησης ενός πελάτη).
  2. Χρησιμοποιήστε τον Inspector για να βρείτε όλες τις λεπτομέρειες για ένα συγκεκριμένο αντικείμενο (μέγεθος, τοποθέτηση, χρώματα, στυλ γραμματοσειράς, αδιαφάνεια και πολλά άλλα).
  3. Χρησιμοποιήστε τη δυνατότητα εξαγωγής Export για να εξαγάγετε μεμονωμένα αντικείμενα ή πίνακες γραφικών σε συγκεκριμένες μορφές αρχείου (PNG, JPG, PDF και ούτω καθεξής).

«Είμαι προγραμματιστής, δεν έχω χρησιμοποιήσει ποτέ το Sketch!»

Τα τελευταία χρόνια οι σχεδιαστές έχουν μάθει να συνεργάζονται μεταξύ τους χρησιμοποιώντας εργαλεία όπως το InVision, αλλά αυτή η πλατφόρμα εξακολουθεί να στερείται τα χαρακτηριστικά γνωρίσματα που επιτρέπουν μια γρήγορη παράδοση σχεδίων στην ομάδα ανάπτυξης.

Δεν πρέπει να ζητάμε από τους προγραμματιστές να είναι άριστοι γνώστες των ίδιων εργαλείων που οι σχεδιαστές χρησιμοποιούν για να σχεδιάζουν προϊόντα. Τούτου λεχθέντος, ούτε θα πρέπει να απαιτούμε οι σχεδιαστές να ξεφύγουν από ό, τι κάνουν καλύτερα: Τον Σχεδιασμό! Το να δημιουργούν ένα «έγγραφο προδιαγραφών» κάθε φορά που παραδίδουν ένα σχέδιο είναι κάθε άλλο παρά «ευέλικτο», και μπορεί να σημαίνει μεγάλη σπατάλη χρόνου ανάμεσα στην παράδοση των σχεδίων και στην φάση των αλλαγών αν αποδειχθούν απαραίτητες.

Zeplin

Αυτό είναι όπου το Zeplin εισέρχεται στο προσκήνιο.

Το Zeplin είναι ένα εργαλείο συνεργασίας για UI σχεδιαστές και front-end προγραμματιστές. Πηγαίνει πέρα από τη ροή εργασίας σχεδιασμoύ και βοηθά τις ομάδες με την παράδοση των σχεδίων.

Αυτό επιτρέπει στους σχεδιαστές να ανεβάσουν τα wireframes ή τα σχέδια τους, κατευθείαν από το Sketch και να τα προσθέσουν στους φακέλους έργου στο Zeplin. Το καλύτερο απ'ολα; Σχολιασμοί θα προστεθούν αυτόματα στα σχέδια (μεγέθη, χρώματα, περιθώρια ακόμη και προτάσεις CSS για ορισμένα στοιχεία) που θα σας αφήσει με ένα online repository στο οποίο μπορεί να συμβάλει όλη η ομάδα.

«Το Zeplin λειτουργεί πολύ καλά ως μια ενιαία πηγή αλήθειας, όταν χρησιμοποιείται ως τέτοια.

Επίσης, δεδομένου ότι είναι διαθέσιμο ως μια ξεχωριστή εφαρμογή, καθώς και ένα web app, μπορείτε να το προσπελάσετε λίγο πολύ οπουδήποτε. Το καθιστά εύκολο να ελέγξετε σχέδια και πράγματα όπως μεγέθη, χρώματα, απόσταση, κλπ.» – Daniel Setas Pontes, Javascript προγραμματιστής @NOW TV, Sky

Εξαγωγή Σχεδίων από το Sketch στο Zeplin

Zeplin λειτουργεί ως ένα plugin μέσα στο Sketch, έτσι το ανέβασμα σχεδίων είναι δουλειά ενός μόνο κλικ

Ορίστε πώς να ξεκινήσετε ένα έργο:

Έναρξη ενός έργου Zeplin
  1. Κατεβάστε το Zeplin (μόνο για mac) & εγκαταστήστε το. Οι προγραμματιστές δεν χρειάζεται να τρέχουν το OS X αφού θα χρειαστεί να έχουν πρόσβαση μόνο στο αντίστοιχο διαδικτυακό εργαλείο για να αποκτήσουν πρόσβαση στο περιεχόμενο.
  2. Δημιουργήστε projects.
  3. Επιλέξτε την πλατφόρμα για την οποία έχετε σχεδιάσει.
  4. Ονομάστε το project (βεβαιωθείτε ότι έχετε επιλέξει ένα όνομα που είναι γνωστό σε όλη την ομάδα).
Export from Sketch
Εξαγωγή από το Sketch

Μέσα στο Sketch, επιλέξετε μεμονωμένα αντικείμενα και ορίστε τα ως εξαγώγιμα (exportable). Αυτό θα επιτρέψει την ομάδα ανάπτυξης σας να εξάγει κάθε στοιχείο αργότερα μέσα από το Zeplin. Ορίστε πώς λειτουργεί:

  1. Στη συνέχεια, επιλέξτε τους πίνακες γραφικών που θέλετε να ανεβάσετε στο Zeplin.
  2. Πηγαίνετε στο Plugins > Zeplin > Export Selected Artboards.
  3. Επιλέξτε το έργο στο οποίο θέλετε να στείλετε τα σχέδιά σας και, στη συνέχεια, κάντε κλικ στο κουμπί Import.

Δουλεύοντας με το Zeplin

Όταν βρίσκεστε στο Zeplin, μπορείτε να πλοηγηθείτε μεταξύ των έργων και να εξερευνήσετε εύκολα όλα τα στοιχεία στο εσωτερικό τους. Το να βρείτε τις προδιαγραφές ορισμένων στοιχείων είναι επίσης πολύ απλό και εύκολο. Επιλέξτε το στοιχείο που θέλετε και, στη συνέχεια, όλες οι σχετικές πληροφορίες θα εμφανίζονται στη δεξιά στήλη.

Προγραμματιστές: εδώ είναι πώς αυτό λειτουργεί, μόλις ανοίξετε το διαδικτυακό εργαλείο και κάνετε είσοδο:

  1. Επιλέξτε το αντικείμενο που θέλετε να επιθεωρήσετε.
  2. Κοιτάξτε τη δεξιά στήλη για λεπτομερείς πληροφορίες, όπως το στυλ γραμματοσειράς, χρώμα, και ούτω καθεξής (πληροφορίες θα εμφανίζονται ανάλογα με το αντικείμενο που επιλέγετε).
  3. Αντιγράψτε το προτεινόμενο CSS.

Εάν η ομάδα σχεδιασμού επέτρεψε εξαγώγιμα στοιχεία κατά την εισαγωγή των σχεδίων στο Zeplin, η ομάδα ανάπτυξης πρέπει να είναι σε θέση να εξάγει μεμονωμένα στοιχεία. Τα στοιχεία θα είναι διαθέσιμα για κατέβασμα σε μορφή SVG και τρία διαφορετικά μεγέθη PNG.

  1. Εδώ μπορείτε να προσθέσετε σημειώσεις και παρατηρήσεις για τα σχέδια.
  2. Εδώ μπορείτε να αντιγράψετε και να μοιραστείτε το link του έργου, ίσως ακόμη και να ενσωματώσετε το κανάλι Slack της ομάδας για να παίρνετε ειδοποιήσεις ή να καλέσετε τα μέλη της ομάδας να συνεργαστούν!

Γιατί η ομάδα σας θα πρέπει να κάνει την κίνηση

Η εργασία με το Zeplin έχει πολλά πλεονεκτήματα, δείτε εδώ μερικά παραδείγματα:

  • Θα αποφύγετε να δημιουργείτε ένα έγγραφο specs. κάτι που δεν είναι εύκολο να ενημερώσετε ούτε ευπροσάρμοστο σε αλλαγές.
  • Να δημιουργήσετε άμεσα σχολιασμένα σχέδια με όλες τις σχετικές πληροφορίες για τους προγραμματιστές και άλλους σχεδιαστές.
  • Μπορείτε να δημιουργήσετε εξαγώγιμα σχέδια, έτσι ώστε οι προγραμματιστές αποκτήσουν γρήγορη πρόσβαση στα επιμέρους σχεδιαστικά στοιχεία.
  • Να δημιουργήσετε όσα έργα θέλετε, στη συνέχεια, ανεβάστε και ενημερώστε τα με λίγα μόνο κλικ.
  • Να δημιουργήσετε οδηγούς στυλ που θα βοηθήσουν την ομάδα σχεδιασμού να παραμείνει συνεχής.
  • Να επωφεληθείτε από την ενσωμάτωση με Slack, ειδοποιώντας άμεσα την ομάδα σας κάθε φορά που υπάρχει μια ενημερωμένη έκδοση.

Δοκιμάστε το!

Εργασία με το Sketch και το Zeplin είναι ένας πολύ καλός τρόπος για τους σχεδιαστές να συνεργάζονται αρμονικά με τους προγραμματιστές. Η ομάδα μου αγαπά να εργάζεται με τον τρόπο αυτό – θα ήθελα πολύ να ακούσω τις σκέψεις και τις εμπειρίες σας αν έχετε εργαστεί με αυτά τα εργαλεία!

Χρήσιμοι Σύνδεσμοι

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.