Εργαλεία για να Γεφυρώσετε το Χάσμα Μεταξύ Σχεδιαστών και Προγραμματιστών

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

Σε αυτό το άρθρο θα δούμε στα γρήγορα κάποια εργαλεία που θα σας βοηθήσουν στο να κάνετε κατανοητά τα σχέδιά σας στους προγραμματιστές που έχουν αναλάβει να τα υλοποιήσουν. Θα σας προτείνω επίσης μερικά μαθήματα για να σας βοηθήσουν στην αρχή - οπότε ας ξεκινήσουμε!

Κιμωλία και Τυρί

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

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

InVision (Συγχωνεύσεις για Sketch & Photoshop)

Το InVision είναι ένα από τα πιο δημοφιλή φωτογραφικά εργαλεία στην αγορά.

Κάνοντας εγγραφή θα ξεκινήσετε μ' ένα δωρεάν project, ενώ οι εγγραφές επί πληρωμή ξεκινούν από 15$/μήνα για τρία projects. Tο InVision έχει άπειρα πρόσθετα και συγχωνεύσεις, οπότε εκτός του αρχικού μας στόχου (καλύτερη επικοινωνία), θα βρείτε και επιπλέον τρόπους για να κάνετε τη δουλειά σας πιο εύκολα.

Οι βασικές του λειτουργίες περιλαμβάνουν:

Το InVision έχει στο πακέτο του τόνους πρωτότυπων χαρακτηριστικών, όπως άμεση δοκιμή σε κινητό και τη δυνατότητα να ενσωματώσετε το πρωτότυπό σας οπουδήποτε για δοκιμή από τον χρήστη.
Δουλεύει μαζί με τόσα ακόμα εργαλεία που δε με φτάνει ο χώρος εδώ για να τα αναφέρω. Η αγορά το έχει κατατάξει στα βασικά πακέτα οπότε πολλά πρόσθετα έχουν φτιαχτεί για να δουλεύουν με το InVision.
Έχει version control (έλεγχο έκδοσης) για να συγχρονίζεται με τα αρχεία σας στο Sketch ή στην Adobe.
Παρότι είναι σε private beta (εκεί που υπερισχύουν σήμερα οι Zeplin/Avocode) το InVision έχει επίσης ένα εργαλείο εξαγωγής για τη δημιουργία προτύπων (stylesheet) και κώδικα (code generation) για οποιοδήποτε στοιχείο. Είναι πολύ νωρίς να πούμε πόσο καλά θα πάει αυτή η λειτουργία σε σχέση με τους ανταγωνιστές.

Avocode (Συγχωνεύσεις για Sketch και Photoshop)

Έχουμε ασχοληθεί με το Avocode στο Envato Tuts + αρκετές φορές στο παρελθόν. Είναι ένας τρόπος εξαγωγής σχεδίων για χρήση στην ανάπτυξη ιστοσελίδων.

Το Avocode προσφέρει δωρεάν δοκιμή 14 ημερών, και μετά χρεώνει 7$ το μήνα για απεριόριστες εργασίες ανά χρήστη. Αν θέλετε να μοιραστείτε τη δουλειά σας (που είναι και το ζητούμενο) με άλλους, πρέπει να κάνετε την εγγραφή των 10$ το μήνα, η οποία παραμένει φθηνότερη από άλλες λύσεις που θα δούμε σ' αυτό το άρθρο.

Το Avocode έρχεται με πλήρεις συγχωνεύσεις για Sketch και Photoshop, προσφέροντας τα παρακάτω:

Οι προγραμματιστές μπορούν να διαλέξουν ότι χρειάζονται - δεν είναι απαραίτητο για το σχεδιαστή να φτιάξει style guides. Δίνονται πλήρεις προδιαγραφές, χρώματα (HEX, RGBA, HSLA), γραμματοσειρές, στυλ και μεγέθη για κάθε στοιχείο.
Υπάρχει εξαγωγή κώδικα CSS και εξαγωγή πολλαπλών εικόνων (υποστηρίζονται και αρχεία SVG). Γίνεται επίσης εξαγωγή των στυλ σε SASS, Stylus και Less, μεγάλο ατού για όλους τους προγραμματιστές.
Μια άνετη λειτουργία αντιγραφής και επικόλλησης κειμένου, όπου μπορείτε να επικολλήσετε κείμενο από το σχέδιο σε διορθωτή κώδικα με HTML heading markup (π.χ. H1).
Όλες οι συνδρομές είναι για απεριόριστες εργασίες. Χρειάζεται να αναβαθμίσετε τη συνδρομή σας, εάν θέλετε να συμμετέχουν περισσότεροι χρήστες σε μια εργασία.
Υπάρχει έλεγχος έκδοσης και συνεργασία με ειδοποιήσεις μέσω email. Η συγχώνευση με το Slack περιλαμβάνεται στη συνδρομή Business ($10).

Zeplin (για το Sketch)

Το Zeplin σας το δείξαμε πρόσφατα στα μαθήματα για αρχαρίους της Andreia.

Όπως και στο InVision, οι μηνιαίες συνδρομές ξεκινούν από $15 για 3 εργασίες (μπορείτε να ξεκινήσετε με μια εργασία δωρεάν). Οι λειτουργίες αυτού του εργαλείου για Mac/Windows/Web, εστιάζουν στη λύση του προβλήματός μας: στην επικοινωνία σχεδιαστή και προγραμματιστή. Δεν έχετε όλα τα παραφερνάλια του InVision, αλλά λειτουργεί εξαιρετικά σε επίπεδο συνεργασίας.

Μερικές από τις βασικές του λειτουργίες:

Συνεργάζεται αποκλειστικά με το Sketch.
Δίνει συγκεκριμένες τιμές HEX και RGB για όλα σας τα σχέδια.
Ενεργοποιεί αυτόματα τα πρόσθετα (κουμπιά, εικονίδια ή οτιδήποτε επιλέξετε ως πρόσθετο).
Δίνει στον προγραμματιστή συγκεκριμένες πληροφορίες (PT, DP/SP, PX) για κάθε πλατφόρμα (iOS, Android, web). Έτσι ο προγραμματιστής μπορεί να κωδικοποιήσει τα πρόσθετα που του στέλνετε με τρόπους που γνωρίζει. Προσφέρει ακόμα δείκτες κωδικών χρώματος, ώστε ο προγραμματιστής να κάνει απλά αντιγραφή και επικόλληση.
Υπάρχει η δυνατότητα για πλήρη ενσωμάτωση στο Slack, ώστε όλα τα μέλη της ομάδας να ενημερώνονται για οποιαδήποτε διόρθωση των σχεδίων.

Προεκτάσεις του Sketch/Photoshop με Πρόσθετα (Plugins)

Περιττό να πούμε οτι και το Sketch και το Photoshop έχουν μια ικανή λίστα προσθέτων για την εξαγωγή των σχεδίων σας και τη δημιουργία λεπτομερειακών style guides για τους προγραμματιστές. Δείτε μερικά παραδείγματα και πόσο κοστίζουν:

Ink (Photoshop, δωρεάν): γεννήτρια style guide
Markly (Sketch/Photoshop, $49.99): γεννήτρια style guide UI/Spec. Χρησιμοποιείται από το Netflix, Google, Facebook και πολλά άλλα.

Αξίζουν Επίσης

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

Framer (δείτε παρακάτω) είναι επίσης ένα αξιόλογο εργαλείο, αν σχεδιάζετε για κινητά. Ωστόσο, μπορεί να μην το βρείτε βολικό αν εργάζεστε στο σχεδιασμό ή στον προγραμματισμό, αλλά όχι και στα δύο. Το Framer είναι ένα καλό παράδειγμα για τη χρήση δημιουργικών και λογικών διαδικασιών ταυτόχρονα.

JavaScript

Πέρα από τα Βασικά του Framer

Ashraff Hathibelagal

Το Adobe XD (Adobe Experience Design CC, το παλιό Project Comet) είναι ένας σχετικά νέος παίκτης στην αγορά, αλλά έχοντας πίσω του τη νο1 εταιρεία εφαρμογών, σίγουρα θα πάει καλά. Ενώ προσφέρει τεράστια σειρά εργαλείων για σχεδιασμό πρωτοτύπων, εστιάζει στο UX, όχι στην επικοινωνία σχεδιαστή-προγραμματιστή. Προσφέρει "σχέδια έτοιμα για παραγωγή" (production-ready artwork) αλλά δε θα βρείτε code snippets ή λεπτομερή αρχεία εξαγωγής στο μενού του.

Adobe Experience Design

Πώς να Δημιουργήσετε ένα Πρωτότυπο UI με το Adobe XD

Rafiq Elmansy

Πρόσφατα αναλύσαμε το Sympli σ' ένα μάθημα για σχεδιαστές. Δουλεύει αποκλειστικά με το Photoshop και το Sketch - δείτε το!

Ανάπτυξη Εφαρμογών (App)

Πώς να Μεταφέρετε Σχέδια Photoshop και Sketch με το Sympli

Kezz Bracey

Συμπέρασμα

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