Το Van de Graaf Canon, ένα αρμονικό σύστημα πλέγματος που χρησιμοποιείται από τους τυπογράφους κατά τη διάρκεια του Μεσαίωνα

Αρμονική Τυπογραφία και Πλέγματα

Ποιο μέγεθος θα πρέπει να είναι οι γραμματοσειρές σας; Χρειάζεται να χρησιμοποιήσετε ένα πλέγμα; Και τι γίνεται με τον κάθετο ρυθμό;

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

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

Γιατί είναι σημαντικό

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

Μια αναλογία: φανταστείτε ότι χτίζετε ένα σπίτι και διακόπτετε τη διαδικασία ζωγραφικής για να μετακινήσετε μερικούς τοίχους γύρω. Αυτό που θα ήταν σχετικά εύκολο να γίνει κατά την αρχική φάση σχεδιασμού καθίσταται απαγορευτικά δαπανηρό. Μετά από μια ακολουθία θα σας βοηθήσει να εξαλείψετε αυτό το είδος thrashing.

Αποποίηση ευθυνών:
Αυτή η ανάρτηση είναι γραμμένη για ανθρώπους σχετικά νέους στον οπτικό σχεδιασμό, οι οποίοι θα μπορούσαν να αμφισβητηθούν για τον τρόπο εφαρμογής του κάθετου ρυθμού και για το είδος του συστήματος δικτύου που θα χρησιμοποιήσει. Αυτή είναι μία μόνο ακολουθία που έχω διαπιστώσει ότι δουλεύει για μένα και έχω εξαντλήσει αυτή τη διαδικασία επί χρόνια πρακτικής ως σχεδιαστής οπτικών, UX και προϊόντων και τα τελευταία 2 χρόνια διδάσκοντας σχεδίαση στο Tradecraft σε συνεργασία με τον συνάδελφό μου Τζέικ Φλέμινγκ. Αυτός δεν είναι με κανένα τρόπο ο μόνος τρόπος για την καθιέρωση ενός εσωτερικά συμβατού τυπογραφικού συστήματος και ενός συστήματος πλέγματος και εάν έχετε συμβουλές για τη βελτίωση της διαδικασίας, παρακαλείστε να τις αφήσετε στα παρακάτω σχόλια. Τα στιγμιότυπα οθόνης είναι από την εφαρμογή Σκίτσο, αλλά οι αρχές είναι αρκετά γενικές ώστε να μπορείτε να τις ακολουθήσετε σε οποιαδήποτε εφαρμογή σχεδίασης.

Η ακολουθία

Εδώ είναι ένα cheatsheet, το οποίο περιγράφει ολόκληρη την ακολουθία 9 βημάτων για να σας δώσει ένα καλό τυπογραφικό θεμέλιο + θεμέλιο. Θα πάω σε βάθος για κάθε ένα από τα παρακάτω βήματα.

1. Ορίστε τους στόχους σας

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

Για παράδειγμα, η τυπογραφία που είναι "καθαρή και σύγχρονη" θα πρέπει να φαίνεται διαφορετική από την τυπογραφία που είναι "νεαρή και φρέσκια" ή "σταθερή και αξιόπιστη". Ένας καλός κανόνας είναι να περιορίσετε τις αρχές σας σε 3-5 επίθετα ή επίθετο δηλώσεις. Οι δηλώσεις επωνύμων βοηθούν στην οριοθέτηση ορίων, π.χ. "Μινιμαλιστική, αλλά όχι σύγχρονη".

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

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

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

Μερικά έμπνευση (από ταλαντούχους εικονογράφους, έμποροι και σχεδιαστές στο Dribbble), σε συνδυασμό με κάποια επώνυμα επίθετα.

2. Ιεραρχία περιεχομένου

Μόλις ορίσετε τους στόχους σας, το επόμενο βήμα είναι να κατανοήσετε το περιεχόμενο για το οποίο σχεδιάζετε (ή να γράψετε, αν αυτό είναι και η δουλειά σας). Κατά κύριο λόγο, το βήμα αυτό προορίζεται αποκλειστικά για την κατανόηση της προτεραιότητας και της ιεραρχίας του περιεχομένου και για την καθιέρωση αυτού του περιεχομένου όσο το δυνατόν πιο αναγνώσιμου. Η αναγνωσιμότητα εκτείνεται πέρα ​​από την αναγνωσιμότητα και μιλάει για το κατά πόσο είναι επιθυμητό ένα κομμάτι περιεχομένου να εξετάσει και να διαβάσει.

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

Αποφύγετε το Lorem Ipsum, αν μπορείτε να το βοηθήσετε

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

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

Ορίστε όλους τους τύπους περιεχομένου

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

Αν και δεν είναι απόλυτα περιεκτική, ο κατάλογος αυτός θα καλύπτει τις περισσότερες περιπτώσεις χρήσης:

  • Τίτλος (H1)
  • Υπότιτλοι (H2 - H6, αν και στην πράξη H2 και H3 είναι πιθανώς το μόνο που χρειάζεται να ανησυχείτε)
  • Αντίγραφο βασικής παραγράφου
  • Αποκωδικοποιήστε και καταγράψτε τα αποσπάσματα
  • Λίστες (ταξινομημένες και μη διορθωμένες)
  • Σύνδεσμοι (προεπιλεγμένη κατάσταση, κατάσταση αναμονής, ενεργή / πατημένη κατάσταση)
  • Ετικέτες εισόδου φόρμας
  • Λεζάντες, μικρό κείμενο και σίγαση κειμένου
Προτιμώ να θέσω αυτόν τον αρχικό κατάλογο σε κάτι φανταχτερό, όπως το Μονακό ή το Courier, που με αναγκάζει να λαμβάνω αποφάσεις εκ προθέσεως και όχι να κλίνω τις αθετήσεις. Λάβετε περισσότερα παραδείγματα κειμένου για να ορίσετε από το Έργο Gutenberg: https://www.gutenberg.org/

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

3. Επιλέξτε γραμματοσειρές

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

Κατά την επιλογή τυπογραφίας, υπάρχουν μερικές πρώτες ερωτήσεις για να απαντήσετε:

Ποιος είναι ο προϋπολογισμός σας;

Με την τυπογραφία, όπως με τα περισσότερα πράγματα στον κόσμο, παίρνετε αυτό που πληρώνετε. Υπάρχουν κάποιες εξαιρέσεις σε αυτόν τον κανόνα, αλλά αρχίστε με να σκεφτείτε πόσα μπορείτε να ξοδέψετε. Αν έχετε προϋπολογισμό, τότε ξεκινήστε εξετάζοντας επαγγελματικά χυτήρια όπως το House Industries και Hoefler & Co. ή καταλόγους επαγγελματικού τύπου όπως το Typekit (μια καλή επιλογή εάν πληρώνετε ήδη για το Adobe CC) και MyFonts.

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

Πού θα χρησιμοποιηθεί αυτό;

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

Επιλέξτε ένα στυλ για τις επικεφαλίδες σας

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

Για παράδειγμα, στη βιβλιοθήκη σας έμπνευσης, παρατηρείτε ότι οι επικεφαλίδες συχνά χρησιμοποιούν δραματικές σειρφές; Ίσως όλοι χρησιμοποιούν τολμηρή, συμπυκνωμένη sans-serif; Αναπτύξτε μια αίσθηση για το πώς ορισμένα είδη εμπορικών σημάτων χρησιμοποιούν την τυπογραφία για να γνωστοποιήσουν τις αξίες τους. Εάν οι λέξεις "συμπυκνωμένο" και "serif" δεν σημαίνουν τίποτα για σας, διαβάστε ένα γρήγορο αστάρι για την ανατομία του τύπου.

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

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

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

Για την κορυφή: Kabel, Raleway, Source Serif, Abril Titling

Επιλέξτε ένα ζεύγος για το σώμα σας αντίγραφο

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

Ενώ η τυπογραφία για επικεφαλίδες πρέπει να είναι ενδιαφέρουσα, η τυπογραφία για το αντίγραφο του σώματος πρέπει να είναι ευανάγνωστη και ευανάγνωστη (δηλαδή αρκετά βαρετή).

Η αντίθεση θα πρέπει να καθοδηγεί τη λήψη αποφάσεων εδώ. Εάν έχετε επιλέξει μια δραματική serif για την κατεύθυνση σας, δοκιμάστε ένα γεωμετρικό sans-serif για το σώμα σας. Εάν επιλέξατε μια λεπτή, μοντέρνα sans-serif, δοκιμάστε να τη συνδυάσετε με μια κλασική serif. Το site fontpair.co μπορεί να σας βοηθήσει να αποφασίσετε με αρκετή αντίθεση. Μπορείτε επίσης να χρησιμοποιήσετε μια ενιαία γραμματοσειρά για τις επικεφαλίδες και το αντίγραφο του σώματος σας και να επιτύχετε αντίθεση μεταβάλλοντας τα βάρη των γραμματοσειρών σας, όπως τολμηρά για τις επικεφαλίδες και κανονικά για την αντιγραφή του σώματος.

Μου αρέσει επίσης να γράφω google "font pairing" + το όνομα της υπηρεσίας που επέλεξα (π.χ. "γραμματοσειρά γραμματοσειράς google"). Υπάρχουν πολλές τέλειες τοποθεσίες έμπνευσης που σας δείχνουν τι μοιάζουν με μερικές ζεύξεις τύπου. Αυτά είναι ζευγάρι αγαπημένα.

Μου αρέσει να περιορίσω τις γραμματοσειρές του σώματος σε όχι περισσότερες από 2-3 συνολικές επιλογές (όχι 2-3 ανά γραμματοσειρά τίτλου).

Για την κορυφή: Source Serif, Open Sans, Abril Text

Δοκιμάστε το με ένα πίνακα τέχνης

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

Αποφασίζω

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

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

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

Για το παράδειγμα μας Alice in Wonderland, καταλήξαμε να επιλέγουμε μια μικρή παραλλαγή:

Ονομασία: Abril Titling Narrow; Σώμα: Πηγή Serif Regular

4. Μέγεθος γραμματοσειράς βάσης και ύψος γραμμής (λόγος)

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

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

Επιλέγοντας ένα βασικό μέγεθος γραμματοσειράς

Είναι καλή ιδέα να ξεκινήσετε με τις προεπιλογές για τη συσκευή για την οποία σχεδιάζετε και να προσαρμόσετε από εκεί. Αν σχεδιάζετε για τον ιστό, η προεπιλογή είναι 16px. Το iOS είναι 17pt και το Android 13sp.

Τεχνική εκτροπή: Ενώ όλες οι μονάδες μέτρησης εμφανίζονται διαφορετικές - και είναι διαφορετικές με λεπτό τρόπο - οι διαφορές δεν είναι εξαιρετικά σημαντικές σε αυτό το στάδιο. Το Sketch μετρά τις γραμματοσειρές σε μεγέθη σημείων (pt) και αυτό θα μεταφραστεί στις μονάδες που χρησιμοποιούνται για το web και το Android. Όταν χρειάζεστε βοήθεια για να κοιμηθείτε κάποια στιγμή, οι διαφορές μεταξύ των σημείων, των pixel και των εικονοστοιχείων αναφοράς στον ιστό και του sp / dp για το Android.

Αφού γνωρίζετε το προεπιλεγμένο μέγεθος, ρυθμίστε το πάνω ή κάτω ανάλογα με τις ανάγκες σας. Είναι μια καλή ιδέα να χρησιμοποιήσετε μια επέκταση όπως το font ninja για να μάθετε τι μεγέθη χρησιμοποιούν άλλοι ιστότοποι. Ο NY Times, για παράδειγμα, χρησιμοποιεί αντίγραφο σώματος 13px, ενώ το Medium χρησιμοποιεί 21px. Αυτές οι μετρήσεις εξυπηρετούν πολύ καλά ως κατώτερα και ανώτερα όρια.

Σκεφτείτε το ποσό του περιεχομένου που θα πρέπει να περιέχει η διεπαφή, τους αναγνώστες του περιεχομένου και το πλαίσιο στο οποίο θα προβληθεί πιθανώς. Για παράδειγμα, εάν σχεδιάζω ένα blog για αναγνώστες άνω των 50 ετών με την πάροδο του χρόνου), και η παραδοχή μου είναι ότι θα διαβάζουν σε στιγμές ανίας στις κινητές συσκευές τους, θα επέλεγα ένα μεγαλύτερο μέγεθος γραμματοσειράς σώματος - πιθανότατα πιο κοντά στο 21px της Medium.

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

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

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

Πριν προσγειωθείτε σε ένα τελικό μέγεθος, δημιουργήστε μερικές επιλογές σε πίνακες τέχνης του μεγέθους της κινητής σας συσκευής και δοκιμάστε τις. Μπορείτε να χρησιμοποιήσετε το Sketch Mirror για αυτό, ή να εξαγάγετε τους πίνακες τέχνης ως PNG και να τις προβάλετε στη συσκευή σας.

Αριστερά: αντίγραφο σώματος 20px. Δεξιά: αντίγραφο σώματος 18px

Επιλέγοντας ένα ύψος γραμμής βάσης

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

Κανόνας: επιλέξτε ένα ύψος γραμμής που είναι κάπου μεταξύ 120% - 150% του μεγέθους γραμματοσειράς σας. Είναι εντάξει να σπάσετε αυτόν τον κανόνα εάν έχετε έναν καλό λόγο.

Όσο πιο χαλαρή είναι η κορυφαία (που αντιστοιχεί σε μεγαλύτερες αναλογίες πιο κοντά στο 1,5), τόσο περισσότερα κενά θα έχετε ανάμεσα στις γραμμές. Αυτό μπορεί να διευκολύνει το μάτι να βρει την επόμενη γραμμή κειμένου. Στυλιστικά, οι μεγαλύτεροι λόγοι ύψους γραμμής αισθάνονται πιο πολυτελείς, σταθεροί και ειρηνικοί.

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

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

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

Χρησιμοποιήστε ολόκληρους αριθμούς

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

Εδώ είναι μερικές συνδυασμοί μεγέθους γραμματοσειράς / γραμμής ύψους που χρησιμοποιώ συχνά.

  • 16/24 (λόγος: 1,5, ή τέλεια πέμπτη χορδή)
  • 18/26 (λόγος: 1,44, ή κοντά σε μια επαυξημένη τέταρτη χορδή)
  • 20/30 (αναλογία: 1,5)

Για το παράδειγμά μας, αποφάσισα να πάω με ένα προεπιλεγμένο μέγεθος αντιγράφου σώματος 18px, το οποίο είναι μεγάλο, αλλά όχι υπερβολικά μεγάλο, και κορυφαίο λόγο 1,333 (ή, ισοδύναμο με τέλειο τέταρτο). Αυτό δίνει ένα ύψος γραμμής 23,994, το οποίο πρόκειται να στρογγυλοποιήσω μέχρι και 24px. Είναι μια καλή ιδέα σε αυτό το σημείο να τροποποιήσετε τον αρχικό πίνακα γραφικών για να εμφανίσετε τις γραμματοσειρές, τα μεγέθη και την κορυφή που έχετε επιλέξει. Μην ανησυχείτε για την απόσταση ακόμα.

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

5. Τυπογραφική κλίμακα

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

Μια τυπογραφική κλίμακα δεν είναι παρά μια σειρά γραμματοσειρών που μοιράζονται την ίδια εσωτερική λογική, παρόμοια με μια μουσική κλίμακα. Η κλασική κλίμακα εξελίσσεται από τα 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24 κλπ. Θα δημιουργήσουμε τη δική μας τυπογραφική κλίμακα βάσει του λόγου που επιλέξαμε στο βήμα 4 .

Η κλίμακα τύπου ιστότοπου θα είναι χρήσιμη για αυτό το βήμα. Εισαγάγετε το βασικό μέγεθος γραμματοσειράς, επιλέξτε τον λόγο που χρησιμοποιήσατε και πληκτρολογήστε κλίμακα θα σας δείξει τι φαίνεται η εξέλιξη των μεγεθών. Η κλίμακα τύπου δείχνει τα μεγέθη σε ems και ο ευκολότερος τρόπος για να σκεφτείς ένα em αν είσαι νέος σε αυτά είναι ότι το 1em είναι ίσο με το βασικό μέγεθος γραμματοσειράς σου. Έτσι, αν το μέγεθος βάσης μου είναι 18px, τότε 2em = 36px (18 * 2). Για να μεταφράσετε αυτό στο Sketch, πάρτε ακριβώς την τιμή em που εμφανίζεται στην κλίμακα τύπου και πολλαπλασιάστε την με το βασικό μέγεθος γραμματοσειράς.

Συμβουλή Pro: Το Σκίτσο σάς επιτρέπει επίσης να κάνετε μαθηματικά απευθείας στην εφαρμογή, ένα χαρακτηριστικό που πρέπει να εκμεταλλευτείτε. Ας υποθέσουμε ότι το μέγεθος βάσης και το ύψος της γραμμής σας είναι 16px / 24px (λόγος: 1,5). Για να πάρετε το επόμενο βήμα στην κλίμακα τύπου, μπορείτε να πληκτρολογήσετε "16 * 1.5". Για να πάτε 2 βήματα, πληκτρολογήστε "16 * 1.5 * 1.5". Και ούτω καθεξής…

Τοποθετήστε την κλίμακα τύπου στην ιεραρχία περιεχομένου

Μόλις προσδιορίσετε τα "βήματα" στην κλίμακα τύπου σας, ήρθε η ώρα να αντιστοιχίσετε αυτά τα βήματα στην ιεραρχία περιεχομένου που ορίσατε στο βήμα 2. Το κείμενο της παραγράφου σας θα πρέπει να είναι ίσο με το βασικό μέγεθος γραμματοσειράς ή 1em. Οι H2 / υπότιτλοι σας πρέπει να είναι ένα βήμα παραπάνω από αυτό και ο τίτλος H1 / title πρέπει να είναι ένα βήμα παραπάνω από αυτό. Από την άλλη πλευρά, οι λεζάντες και το μικρό σας κείμενο πρέπει να είναι ένα βήμα κάτω από το προεπιλεγμένο μέγεθος γραμματοσειράς.

Ειδικά όταν ασχολείστε με μεγαλύτερους λόγους ή όταν χρειάζεστε περισσότερα από 2 επίπεδα υποτίτλων, ίσως χρειάζεστε μισά βήματα για να διατηρήσετε τα μεγέθη σας λογικά. Τα μισά βήματα μπορούν να επιτευχθούν διαιρώντας την απόσταση μεταξύ 1,0 και του λόγου σας. Εάν το μέγεθος βάσης σας είναι 16px, και η αναλογία σας είναι 1,5, ένα πλήρες βήμα θα ήταν 24px. Ένα μισό βήμα (με αναλογία 1,25) θα ήταν 20px.

6. Οριζόντια απόσταση (τυπογραφικό μέτρο)

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

Κανόνας: Διατηρήστε ένα μήκος γραμμής 65-85 χαρακτήρων για το σώμα σας αντίγραφο, ή περίπου 2 1/2 αλφάβητο μακρύ. Ο ευκολότερος τρόπος για να το κάνετε αυτό είναι να κάνετε αναζήτηση στο google για ένα δωρεάν εργαλείο μέτρησης χαρακτήρων.

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

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

7. Κατακόρυφη απόσταση (κάθετος ρυθμός)

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

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

Όταν ρυθμίσετε το ύψος γραμμής σας σε κάθε μπλοκ κειμένου, θα διαπιστώσετε ότι το πλαίσιο οριοθέτησης κάθε μπλοκ κειμένου ευθυγραμμίζεται με τις γραμμές πλέγματος διάταξης. Αυτό κάνει την ευθυγράμμιση πολύ πιο εύκολη, αφού το Σκίτσο θα κουμπώσει το κείμενό σας στο πλέγμα. Ωστόσο, αν δεν ορίσετε ένα ύψος γραμμής, το Sketch θα καθορίσει ένα για εσάς (θα διαβαστεί ως "αυτόματη" και πιθανότατα δεν θα είναι αυτό που θέλετε).

Ακολουθεί παράδειγμα. Εάν το μέγεθος της γραμματοσειράς σας είναι 20px και ο λόγος σας είναι 1,5 - δίνοντας σας ύψος γραμμής βάσης 30px - τότε εδώ θα μπορούσε να φαίνεται η τυπογραφική σας ιεραρχία:

Μέγεθος γραμματοσειράς βάσης: 20px
Βάση γραμμής βάσης: 30px (λόγος = 1.5)

  • Μικρό κείμενο - μέγεθος γραμματοσειράς: 15px, ύψος γραμμής: 15px
  • Κείμενο σώματος - μέγεθος γραμματοσειράς: 20px, ύψος γραμμής: 30px
  • Κείμενο H3 - μέγεθος γραμματοσειράς: 30px, ύψος γραμμής: 45px
  • Υ2 κείμενο - μέγεθος γραμματοσειράς: 45px, ύψος γραμμής: 60px
  • Κείμενο H1 - μέγεθος γραμματοσειράς: 60px, ύψος γραμμής: 75px

Για το παράδειγμα της Alice in Wonderland, πρόκειται να χρησιμοποιήσουμε πολλαπλάσια των 12 για να καθορίσουμε τα ύψη των γραμμών μας, αφού το ύψος της γραμμής βάσης είναι 24 (24/2 = 12). Έχω βεβαιωθεί ότι οι επικεφαλίδες μου τυλίγονται σε περισσότερες από μία γραμμές έτσι μπορώ να δω ξεκάθαρα την επίδραση που έχει το ύψος της γραμμής μου στο κείμενο.

Η παράσταση του παραδοσιακού τυπογράφου δείχνει το μέγεθος της γραμματοσειράς στη θέση αριθμητή και το ύψος γραμμής στη θέση παρονομαστή (με έντονα γράμματα στο παραπάνω παράδειγμα)

8. Οριζόντιο σύστημα πλέγματος

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

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

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

Υπάρχουν δύο κύριες σκέψεις όταν σκεφτόμαστε το οριζόντιο πλέγμα διαμόρφωσης. Ανοίξτε τις ρυθμίσεις διάταξης από το μενού Προβολή> καμβά για να ακολουθήσετε.

  1. Συνολικό πλάτος διάταξης-Το συνολικό πλάτος σας εξαρτάται από τους στόχους σας. Για λόγους απλότητας, πρόκειται να υποθέσω ένα σχέδιο πλάτους υγρού (ή 100% τόσο ευρύ όσο ο πίνακας artboard). Βεβαιωθείτε ότι δεν έχει επιλεγεί η επιλογή "Αποχέτευση σε εξωτερικό μέρος" και ότι το συνολικό πλάτος διάταξης είναι ελαφρώς μικρότερο από το πλάτος του πίνακα εφαρμογών. Τυπικά, αφαιρώ το ύψος της γραμμής βάσης ή το ύψος της γραμμής βάσης 2x, από το συνολικό πλάτος διάταξης, και έπειτα επανέλαβε τη διάταξη.
  2. Εύρος υδρορροής - Το πλάτος του υδρορροή σας θα πρέπει να είναι ο ίδιος με το ύψος της γραμμής βάσης για πίνακες γραφικών και πίνακες γραφικών για επιφάνεια εργασίας ή το ήμισυ του ύψους γραμμής σας για κινητούς πίνακες γραφικών. Αυτό θα διευκολύνει την επίτευξη ίσων αποστάσεων μεταξύ των στοιχείων, τόσο οριζόντια όσο και κατακόρυφα.

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

Πλέγμα διάταξης για κινητά

Για το Mobileboard artboard, υπάρχει μια μικρή διακύμανση. Δεδομένου ότι έχουμε να κάνουμε με μικρότερες οθόνες, το πλέγμα θα πρέπει να είναι το πλήρες πλάτος του artboard σας. Ωστόσο, θα πρέπει να επιλέξετε "Υδρορροή από έξω" για να έχετε ένα περιθώριο μισού περιθωρίου εκατέρωθεν του πλέγματος διάταξης.

Μην ξεκινήσετε να εκθέτετε το περιεχόμενό σας JUST ακόμα. Πρέπει πρώτα να δημιουργήσουμε το κάθετο μας πλέγμα.

9. Κατακόρυφο σύστημα πλέγματος

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

Ανοίξτε ξανά τις ρυθμίσεις διάταξης και ελέγξτε τις "Γραμμές". Το ύψος της υδρορροής σας θα πρέπει να είναι το ήμισυ του πλάτους της υδρορροής σας και το "ύψος γραμμής" θα πρέπει να ρυθμιστεί στο 1. Οι ρυθμίσεις πρέπει να είναι οι ίδιες τόσο για τους πίνακες γραφικών όσο και για τους κινητούς πίνακες.

Το ύψος του υδρορροή σας μπορεί προαιρετικά να είναι το ίδιο με το πλάτος του υδρορροή σας (24px σε αυτό το παράδειγμα), αλλά αυτό θα περιορίσει τον λεπτόκοκκο έλεγχο που έχετε μειώνοντας κατά το ήμισυ τον αριθμό.

Σχέδιο

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

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

Νόμος της εγγύτητας

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

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

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

Σχεδίασα κόκκινα πλαίσια πάνω από τα μπλοκ κειμένου για να καταδείξω τις σχέσεις εγγύτητας

Τυλίγοντας

Η τελική έκδοση είναι κάτω, με όλους τους οδηγούς κρυμμένους.

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

Ένα απλό wireframe, βασισμένο στο σύστημα πλέγματος 18px / 24px που ορίσαμε νωρίτερα

Μπορείτε να το κάνετε καλύτερα;

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

Θέλουν περισσότερα?

Αν θέλετε περισσότερο σαν αυτό, συνεργάζομαι με τον Μάθε Python τον σκληρό τρόπο συγγραφέα Zed Shaw να αναπτύξει μια πλήρη πορεία στον οπτικό σχεδιασμό. Εγγραφείτε για να ενημερωθείτε σχετικά με την κυκλοφορία του εδώ: Μάθετε Σχεδιάστε τον σκληρό δρόμο