Design handoff - Mε αγάπη και παραδείγματα σε Sketch, Figma, XD, Zeplin & Invision

Hints & tips για ένα όμορφο handoff με αγάπη προς τον άνθρωπο που θα φτιάξει αυτό που σχεδιάζεις και τα 2 σημαντικότερα προβλήματα που συναντούμε σε αυτή τη διαδικασία.
Αφού πούμε για όλα αυτά, θα δούμε πως γίνεται το handoff στα πιο δημοφιλή σχεδιαστικά προγράμματα εκεί έξω.

Ας συζητήσουμε στα σχόλια τη δική σας handoff εμπειρία και τυχόν προβλήματα που συναντήσατε!
—
0:00 - Intro
0:58 - Τι είναι το design handoff
1:41 - Ποιος είναι ο σκοπός του design handoff
3:43 - Έχει σημασία η δουλειά του designer από μόνη της;
6:10 - Μια προσωπική ιστορία design handoff
11:35 - Τι θέλουν οι developers
13:36 - Πότε πρέπει να ξεκινά η συνεργασία με έναν developer;
19:33 - Design handoff με sketch cloud
36:28 - Design handoff με Sketch & InVision
48:26 - Design handoff με Zeplin
58:40 - Design handoff με Adobe XD
1:04:16 - Design handoff με Figma
1:11:00 - Πρέπει να ξέρει ο designer html/css/javascript;
1:12:30 - Ερωτήσεις και απαντήσεις.
—
—
Αυτά τα lives γίνονται κάθε δεύτερη Κυριακή και μιλάμε για design for the web. Αν σε ενδιαφέρει, μπορείς να εγγραφείς στο κανάλι μου και να πατήσεις το κουδουνάκι ώστε να ενημερώνεσαι για κάθε μελλοντικό live.
—
Πείτε μου τι θέλετε να σχεδιάσουμε στα επόμενα lives και τις ιδέες σας στα comments ή online
--
Διαβάστε περισσότερα άρθρα μου σχετικά με το design
--
Γραφτείτε στο newsletter μου! Γράφω μια φορά το μήνα για design, Tv shows & movies, games και ωραία πράγματα που μου συμβάινουν εντός και εκτός του internet
--
Ακούστε το podcast που κάνουμε με τους φίλους μου και μιλάμε για θέματα γύρω από το web, το design, το internet και την τεχνολογία.

[chriskotzabasis]

Πολύ καλό βίντεο Θάνο! Keep up the good work!

[djamarildo]

bravo thano super sinehise etsi dinata !!!

[sergio_ko]

Μίλα μας για την wix!
Wix-on/wix-off!

[xphstos_]

Issues:

1) Not naming artboards, για layers προφανώς δεν τίθεται λόγος.
- Solution: Name your damn layers please!

2) Design Consistency: Δεν είπαμε να μην έχεις 2-3 buttons και 5-6 text styles αλλά for the love of everything holy… restrain yourself! 

- Solution: Πριν ξεκινήσεις, take a step back και προσπάθησε να σκεφτείς την αρχιτεκτονική της πληροφορίας και προσπάθησε να φτιάξεις ένα mini design system. It helps.. A LOT!



3) Fonts/Font weights/Variants: Ίδιο story με τα styles και τα text styles.
Οι γραμματοσειρές ειδικά αυτές που δεν είναι μέρος του συστήματος προσθέτουν αρκετό βάρος και χρόνο στο page load.

- Solution: Again, restrain yourself, μπορείς να τονίσεις την ιεραρχία της πληροφορίας και με άλλους τρόπους, όπως font-size, color, opacity… δεν είναι ανάγκη να έχεις semibol, bold & extra-bold!



4) Responsive design/Resolution: Είσαι γαμάτος γραφίστας και έχεις οθονάρα 32” με ανάλυση 4Κ? Τέλεια! Είσαι εσύ και άλλοι 10 χρήστες*
.
- Solution: Μην σχεδιάζεις στην ανάλυση της οθόνης σου, κυρίως γιατί δεν αντιπροσωπεύει την πραγματικότητα, οι περισσότεροι χρήστες έχουν μια ανάλυση ενός κοινότυπου laptop που 1366x Επέλεξε αυτή την ανάλυση ή του macbook 1440x
Ύψος δεν βάζω γιατί δεν μας νοιάζει.

Ένας άλλο λόγος είναι ότι αν έχεις οθόνη 1920x1080 και το artboard σου είναι 1920 τότε για να βλέπεις όλο το artboard μαζί με τις μπάρες του προγράμματος σχεδίασης τότε θα πρέπει να δουλεύεις σε zoom mode λιγότερο του 100%, κάτι που δείχνει no biggie αλλά αυξάνει την πιθανότητα να σφάξεις όλα τα font sizes, να τα βάζεις 20 και 22px ενώ τα θέλεις 16 ή 18.



* Προφανώς και αυτό είναι project specific, αλλά 9 στις 10 περιπτώσεις οι χρήστες σου δεν έχουν τέτοια ανάλυση



5) Hand-off program: Δουλεύεις με Sketch, Figma, XD ? (Αν ακόμη δουλεύεις photoshop ή illustrator τότε παράτα τα και γίνει τσομπάνης.. 2021 hello!)

Έφτασε η ώρα να μου δώσεις αρχείο.. Τι μου δίνεις? *.sketch / *.xd / figma link?

Μάντεψε! Το link προφανώς!
Δεν είμαι ούτε υποχρεωμένος να έχω mac για να τρέξω το sketch ούτε φυσικά είμαι υποχρεωμένος να έχω αγοράσμενο licence γιαυτό ή το adobe xd! Επίσης υπάρχει ένα σοβαρό ενδεχόμενο να είμαι 1337 τύπος και να τρέχω arch linux γιατί απλά μπορώ!

- Solution: Marvel & Zeplin, μετά το χάος… Ανεβάζεις τα όμορφα και σωστά ονομασμένα σου artboards σε αυτά και μου στέλνεις ένα invite για τα projects αυτά και έτσι μπορώ εύκολα να παίρνω ότι θέλω, από διαστάσεις χρώματα εικόνες κλπ μέχρι και έτοιμα κομμάτια κώδικα αν βαριέμαι.

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



6) Text boxes: Πάτησες το ’T’ έφτιαξες ένα γρήγορο πλαίσιο και έγραψες την τιτλάρα σου και νιώθεις έτοιμος να πειράξεις τα font styles. Τελειώνεις και με αυτό και μετά φύγαμε το επόμενο element…

Hold your horses! Μη βιάζεσαι!
Γιατί μου έχεις αφήσει ένα text box το οποίο πιάνει την μισή οθόνη και επειδή είναι διάφανο στα @@ σου.

Μετά όμως θα μου ζητήσεις να είναι pixel perfect η απόσταση του τίτλου με την παράγραφο.
Εγώ όμως ο φτωχός και αδαής developer δεν θα μπορώ να την πάρω και θα προσπαθώ με το μάτι ή ακόμη χειρότερα να περνάω την εικόνα στο photoshop ή όπου αλλού και να φτιάχνω ένα box από εκεί που τελειώνει ο τίτλος μέχρι εκεί που ξεκινά η παράγραφος για να μετρήσω απόσταση σε px.

HELL NO SON!! (Or Daughter or Other)

- Solution: Fix your damn text boxes.
Κάθε φορά που θα σταντάρεις ένα κείμενο μέσα σε ένα box θέλω να φτιάχνεις το box αυτό να είναι ακριβως όπως είναι το κείμενο.
Στο Figma για παράδειγμα είναι η επιλογή “Auto Height” αντί του fixed size. Κάτι αντίστοιχο θα υπάρχει και στα άλλα tools.



Αυτά και άλλα πολλά είναι, απλά εν ψυχρώ αυτά θυμήθηκα αλλά αν καθόμουν κιαλλο θα μπορούσα να γραψω πολλά περισσότερα!


Γενικά μιλάτε με τους devs ας, δεν δαγκώνουμε.. τουλάχιστον όχι οι front-endάδες! :P
@Klou Design βγάλτε με στο γυαλί να τα πω!!!

Με εκτίμηση,
Ένας αγανακτισμένος πρώην γραφίστας νυν developer.