Εκπαιδευτικά Σκετς

Δημιουργία στυλ σε στυλ

Πελάτης: Κάντε το μπλε. * τρεις εβδομάδες αργότερα * Όχι, Όχι αυτό το μπλε!

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

Ακριβώς έξω από την οθόνη αριστερά, οι Jony Ive και Dieter Rams παίζουν πούλια.

Αλλά για πραγματικά, αυτό συμβαίνει όλη την ώρα, και ο λόγος είναι πάντα διαφορετικός:

• "Συγγνώμη, αλλάξαμε το branding."
• "Shoot, σας δώσαμε έναν παλιό οδηγό στυλ"
• * σιωπή ραδιοφώνου *
• "Μπορείς να φτιάξεις αυτό το χρώμα POP;"
• "Εδώ είναι μια φωτογραφία του λογότυπου μας. Απλά "Photoshop" το χρώμα από εκεί. "
• "Πρέπει να ταιριάξουμε το χρώμα Pantone των ποντικιών μας."
• "Το (το άλλο μου) δεν μου αρέσει το χρώμα."

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

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

1. Στοίβαξη

Ας το ονομάσουμε "τη μέθοδο της κρέμας" επειδή είμαι σήμερα στη Διατροφή Whole30 και το μόνο που μπορώ να σκεφτώ είναι οι τηγανίτες. (βοήθεια, είμαι πεινασμένος)

Το πρώτο βήμα σε αυτή τη διαδικασία δημιουργεί αποθηκευμένα στυλ για κείμενο και χρώμα. Είναι αρκετά εύκολο, αλλά μπορεί να είναι λίγο κουραστικό. Κρεμάστε εκεί:

Απλά παρακολουθήστε αυτό το GIF 96 φορές. Αυτός είναι ο αριθμός των στυλ επιπέδων που θα καταλήξετε να δημιουργήσετε.

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

Επίσης, συμβουλεύω για το χρώμα του σπιτιού.

Αρκετά εύκολο, ε; Αλλά εδώ δεν βλέπετε:

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

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

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

ProTip: Ξεκινήστε στο κάτω μέρος και φτιάξτε το δρόμο σας προς τα πάνω. Αυτός ο επιλογέας χρωμάτων πάντα παθαίνει τον τρόπο!

Μάντεψε?

Αυτό λειτουργεί και για το κείμενο! Εδώ φαίνεται το φύλλο στυλ κειμένου μου:

Είμαι MEGA υπερήφανος αυτού του φύλλου στυλ. Laugh out loud => γελάω δυνατά.
Σημείωση για το Σκίτσο: Νιώθω σαν να μην χρειάζομαι μοναδικά στυλ κειμένου για μια δέσμη διαφορετικών χρωμάτων. Ίσως να βρούμε έναν τρόπο να ορίσουμε το βασικό κείμενο, έπειτα να έχουμε έναν τρόπο να εφαρμόσουμε το χρώμα στην κορυφή; Τροφή για σκέψη!

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

Και πάλι, απλά στοιβάζω αυτά τα δύο πάνω από το άλλο (Align → Left), γεγονός που καθιστά εύκολη την ενημέρωσή τους όλα αργότερα. Όπως και με τα παραπάνω στρώματα, το Sketch θα διατηρήσει τα μοναδικά στυλ για κάθε στυλ κειμένου που τονίζετε, έτσι ώστε οι αλλαγές που κάνετε και ο συγχρονισμός να ισχύουν για κάθε στυλ κειμένου ξεχωριστά. Επομένως, μην ανησυχείτε για να επισημάνετε τα πάντα, αλλάζοντας το χρώμα και το Σκίτσο να αντικαταστήσετε όλα τα στυλ κειμένου σας σε έντονα 14 χιλ. Δεν θα συμβεί.

2. Κλείδωμα ετικετών

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

Ξαφνικά αναρωτιέται κανείς γιατί ονομάζεται κασκόλ;

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

Μην ξεχάσετε να εξομοιώσετε τα ονόματα των επιπέδων σας

Παρακολουθήστε το πώς μεταφέρω για να επιλέξω ότι επιλέγει μόνο τα αντικείμενα που πρέπει να ενημερώσω και όχι τις ετικέτες γύρω από αυτό:

Ένα τέτοιο ανόητο ανθρωπικό τέχνασμα, αλλά μου αρέσει αυτό (ツ) _ / ¯

3. Self Reference

Έχετε όλα αυτά τα ωραία στυλ τώρα, οπότε γιατί να μην τα χρησιμοποιήσετε;

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

Αριστερά: Το φύλλο στυλ μου. Δεξιά: Ο οδηγός στυλ μου. Εάν ενημερώσω το φύλλο στυλ, ο οδηγός στυλ μου θα ενημερωθεί επίσης!

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

Τέλος, μιλώντας για προδιαγραφές ...

4. Μοιραστείτε το!

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

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

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

Το InVision Inspect είναι ένας τέλειος τρόπος για να μοιραστείτε το φύλλο στυλ με τους προγραμματιστές.

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

Ή αν είστε τεμπέλης, χτίσαμε πλήρως το κιτ UX Power Tools UI χρησιμοποιώντας τα φύλλα στυλ που βλέπετε σε αυτή τη θέση. Η εργαλειοθήκη διαθέτει στυλ, σύμβολα και εξαρτήματα και θα σας δώσει περίπου το αρχικό κεφάλαιο ενός μήνα

Dang.

Όταν δεν βγάζω το Medium, δουλεύω σε εργαλεία Σκίτσο σε UX Power Tools για να σας κάνει έναν καλύτερο, γρηγορότερο και ισχυρότερο σχεδιαστή. Ακολουθήστε μας στο Twitter @uxpowertools. Ακολουθήστε με και εγώ αν σας διασκεδάσει!