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

Μάθηση συστήματος κειμένου με κοινά στυλ

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

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

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

Στυλ κειμένου με ισχυρή ιεραρχία

Μπορεί να έχετε παρατηρήσει ότι μερικές φορές τα δάχτυλά σας, παρακάμπτοντας τη σκέψη, καταφέρνουν να έρχονται πιο γρήγορα με ένα όνομα για ένα νέο στρώμα ή στυλ, έτσι ίσως να έχετε παρατηρήσει τέτοιες επιλογές μενού στο έργο σας ως Title-2, subheader-small, header- 3 κλπ. Ας σταματήσουμε λοιπόν να κατασκευάζουμε και να διανέμουμε κακά οργανωμένα στυλ.

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

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

είναι η πιο σημαντική επικεφαλίδα του πρώτου επιπέδου και η ετικέτα

χρησιμοποιείται για την ένδειξη της κεφαλίδας του έκτου επιπέδου και είναι η λιγότερο σημαντική.

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

Δημιουργία συστήματος τυπογραφίας

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

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

3. Αντιγράψτε τον πίνακα που προκύπτει και αντιγράψτε τον απαιτούμενο αριθμό φορών ανάλογα με το χρώμα της κατάστασης της μάρκας ή της διεπαφής σας, για παράδειγμα, την ένδειξη Accent, Disabled ή Active text status.

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

Η δομή του μενού μας μοιάζει με αυτό:

% * / Όνομα γραμματοσειράς / Ευθυγράμμιση / Χρώμα
Όπου (% *) είναι το τρέχον όνομα στρώματος

(Αν δεν σχεδιάζετε να προσθέσετε άλλη γραμματοσειρά δεν χρειάζεται να συμπεριλάβετε / όνομα γραμματοσειράς στη δομή).

5. Τώρα πρέπει να δημιουργήσετε ένα στυλ κειμένου από κάθε στρώμα κειμένου, μπορείτε να χρησιμοποιήσετε το plugin https://github.com/lucaorio/sketch-styles-generator για να δημιουργήσετε γρήγορα στυλ από τη δομή ονομάτων. Επομένως, δεν χρειάζεται πλέον να αντιστοιχίζετε χειροκίνητα κάθε στρώμα σε ένα κοινό στυλ κειμένου από το αναπτυσσόμενο μενού.

Μετά από αυτό θα πρέπει να έχετε μια δομή μενού κειμένου μοιάζει με αυτό:

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

Το Freebie ενημερώνεται με ένα νέο σύνολο στυλ κειμένου που είναι συμβατό με την έκδοση 52, και τα δύο πρότυπα είναι διαθέσιμα ως δέσμη, που περιλαμβάνουν πρότυπα γραμματοσειρών Single και Duo. (29.10.18)

Λήψη δέσμης στυλ κειμένου

Αρχικό πλάνο: https://dribbble.com/shots/5461577-Text-Styles-Bundle-for-Sketch

Συνδυασμός γραμματοσειρών

Έτσι χρειάζεστε πραγματικά μια δεύτερη οικογένεια γραμματοσειρών στο έργο σας;
Η δεύτερη γραμματοσειρά στο έγγραφό σας θα σας επιτρέψει να καταστήσετε το κείμενο πιο αποτελεσματικό και να δημιουργήσετε δροσερούς συνδυασμούς που μπορείτε να δείτε σε αυτές τις φανταστικές σελίδες προορισμού ή μπορείτε να χρησιμοποιήσετε πολλές γραμματοσειρές από την άποψη της προσβασιμότητας του προϊόντος σας για διαφορετικές ομάδες χρηστών.

Για να συνδέσετε μια δεύτερη γραμματοσειρά, θα χρειαστεί:

  1. Διπλασιάστε τους πίνακες που δημιουργήσατε προηγουμένως και αλλάξτε τη γραμματοσειρά για όλα τα επίπεδα κειμένου. Για παράδειγμα: από το τυπογραφικό πλάνο Arial έως Roboto.
  2. Χρησιμοποιήστε το plugin Μετονομασία για να αντικαταστήσετε το όνομα / όνομα γραμματοσειράς στη δομή μενού, για παράδειγμα: από / Arial στο / Roboto
  3. Τώρα, αντικαταστήστε όλα τα νέα επίπεδα κειμένου ως νέα Shared Styles.

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

Ελέγξτε τη σελίδα προώθησης του Frames Kit για να βρείτε περισσότερες χρήσιμες λειτουργίες.

Μοιραστείτε και εισαγάγετε τα στυλ κειμένου σας

Τώρα που έχουμε ένα έτοιμο σύστημα μορφών κειμένου, μια φυσιολογική επιθυμία ανθρώπου είναι να χρησιμοποιήσει αυτή την προσέγγιση όσο το δυνατόν γρηγορότερα για άλλα έργα, το plugin Shared Text Style θα μας βοηθήσει να γίνει αυτό.

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

Αποκτήστε την προσθήκη στυλ κοινόχρηστου κειμένου.

Κρατήστε το κεφάλι σας κρύο και την τυπογραφία καθαρή.

Περισσότερα συμβουλές:

  • Δημιουργήστε διαφορετικά αρχεία JSON έτοιμα για τυπογραφία κινητού και web design.
  • Καθώς το σχέδιό σας μπορεί να αναπτυχθεί και να αλλάξει διαρκώς ο έλεγχος έκδοσης για το αρχείο συστήματος τυπογραφίας σας, να το κρατάτε σε συγχρονισμό με το GitHub ή αφηρημένο.
  • Μπορείτε να εισαγάγετε ξανά ένα αρχείο JSON για να αντικαταστήσετε τις αρχικές καταστάσεις στυλ κειμένου, ώστε να μπορείτε να φορτώσετε ξανά με το σκίτσο.
  • Εδώ μπορείτε να βρείτε έναν μεγάλο αριθμό διαφορετικών συνδυασμών γραμματοσειρών που μπορείτε να δοκιμάσετε - http://fontpair.co/.

Και πριν φύγετε

  • Κάντε λήψη του προτύπου στυλ κειμένου.
  • Λήψη με Dropbox
  • Επισκεφθείτε τη σελίδα προώθησης του Frames Kit για περισσότερες αντιξοότητες και δυνατότητες, εξερευνήστε το πιο χρήσιμο σύστημα σχεδίασης για το σκίτσο και κερδίστε έκπτωση με την κοινή χρήση.
  • Ακολουθήστε το Robowolf στο Twitter για πιο φοβερό freebies και tutorials.