Sketch Tutorial

Πώς να δημιουργήσετε ένα σύστημα σχεδίασης στο σκίτσο (Μέρος πρώτο)

Επιτρέψτε μου να σας δείξω τα θεμέλια που πρέπει να τεθούν για να αρχίσετε να δημιουργείτε ένα ισχυρό σύστημα σχεδίασης

Θέλετε να βελτιώσετε δραματικά τη ροή εργασίας σας με το Premium Design System for Sketch; Μπορείτε να πάρετε ένα αντίγραφο του Cabana εδώ.

Χρησιμοποιήστε τον κωδικό προσφοράς MEDIUM25 για να λάβετε 25% OFF.

Τοποθετώντας τα θεμέλια

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

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

Εμπνευσμένο από άλλα Συστήματα που συναντούσα, ήμουν έκπληκτος με το χρόνο που εξοικονομούσα κάτι σαν ένα σύστημα που θα μπορούσε να φέρει στην καθημερινή μου δουλειά. Μπορεί να έχω μπλοκάρει λίγο στην τελευταία μου θέση, αλλά πραγματικά έχει αυξήσει την ταχύτητα της ροής εργασίας μου μαζικά, και είναι καρύδια δεν έφερα κάποιον στη δουλειά μου σε προγενέστερο στάδιο. Ker-raaazzzy!

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

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

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

Μου αρέσει να το ονομάζω 'Sketch Zen Cruise Control'.

Εμπιστέψου με. Μόλις έχετε φέρει ένα Σύστημα Σχεδιασμού στη ζωή σας αυτά τα Χριστούγεννα, δεν θα θέλετε να επιστρέψετε στον παλιό σας τρόπο σχεδιασμού στο Sketch ...

  • Ανοίξτε το σκίτσο
  • Φροντίστε σε κενή οθόνη (το αποκαλώ «Σύνδρομο κενής οθόνης»)
  • Πιάσε μερικά εικονίδια από κάπου
  • Περάστε την αυστηρή διαδικασία δημιουργίας συμβόλου μετά το σύμβολο
  • Ρυθμίστε κάποια Στυλ Στρώσεων, και στη συνέχεια μερικά ακόμη, και στη συνέχεια κάποια άλλα
  • Στη συνέχεια, κάνε πραγματικά ένα ξεκίνημα για το έργο!
  • Κοιτάξτε το ρολόι και πηγαίνετε "Ω, πού πήγαινε όλη αυτή την ώρα. Ώρα για υπνηλία-γη. "

Εντάξει. Ας πάμε σε αυτό και επιτρέψτε μου να σας δείξω τα θεμέλια που πρέπει να τεθούν για να ξεκινήσετε την οικοδόμηση μιας πανύψηλης δομής awesomeness που ονομάζεται System Design Sketch ...

Ξεκινήστε με αυτά τα χρώματα ...

Κρατήστε το απλό εσπερινό λουκάνικο (KISYSS)

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

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

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

Και φυσικά ο υποχρεωτικός Μαύρος, 2 αποχρώσεις του Γκρι, Λευκού και Λευκού με το 50% Αδιαφάνεια για να ενεργεί ως Επικάλυψη για στοιχεία όπως εικόνες.

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

Ετοιμάστε, Ρυθμίστε, Πηγαίνετε!

Έδωσα σε ένα από τα Βασικά Χρώματα μου ένα χρώμα Χρώμα της ίδιας τιμής Hex και έπειτα δημιούργησα ξεχωριστά Κοινότυπα Στυλ για κάθε (δηλ. "Γεμίστε / Κύρια" και στη συνέχεια "Συνοριακή / Πρωτοβάθμια").

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

Αυτό θα μου επέτρεπε στο μέλλον να επιλέξω γρήγορα και τα δύο σχήματα (με στυλ Fill και Border applied) και να πραγματοποιήσω τις σχετικές αλλαγές Στυλ ταυτόχρονα.

Μόλις είχα τα βασικά χρώματα στη θέση τους, θα μπορούσα απλά να πάρω μερικά από αυτά τα χρώματα δηλαδή? Πρωτοβάθμια, Δευτεροβάθμια, Μαύρη και δημιουργήστε μια απλή Έγχρωμη Επικάλυψη με 60% Opacity που θα μπορούσε να εφαρμοστεί σε όλες τις εικόνες ενός έργου και αυτό ήταν τόσο απλό όσο η λήψη της Hex Value από τα Βασικά Χρώματα μου, εφαρμόζοντας το με αδιαφάνεια 60% και δημιουργώντας ένα νέο κοινόχρηστο στυλ, π.χ. Επικάλυψη / Πρωτοβάθμια.

... και τώρα για την τυπογραφία ...

Κατά τη δημιουργία Cabana, και αυτό ισχύει για κάθε έργο στο οποίο εργάζεστε. Προσέχετε τον κανόνα της οικογένειας γραμματοσειρών 2 (μέγ.). Ένα για τις επικεφαλίδες και το άλλο για το Body copy. Υπάρχουν φορές που «το» 3ο μέλος της οικογένειας μπορεί να προσκληθεί στρογγυλά, αλλά πρέπει να τους δώσετε μια καρέκλα δίπλα στην πόρτα.

Επέλεξα Poppins και Open Sans λόγω του ότι αλληλοσυμπληρώνονται πολύ καλά ως οικογένειες γραμματοσειρών βάσης (starter).

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

Ξεκινώντας με την οικογένεια γραμματοσειρών Poppins. Ξεκίνησα με το στυλ γραμματοσειράς Uber. Αυτό δεν είναι στυλ γραμματοσειράς που θα χρησιμοποιηθεί ως επί το πλείστον από αυτά που είναι διαθέσιμα, αλλά ξέρω από την εμπειρία ότι όταν έχω δοκιμάσει άλλα συστήματα σχεδίασης στο παρελθόν, το μεγαλύτερο στυλ γραμματοσειράς τους δεν ήταν αρκετά γενναιόδωρο όσον αφορά το μέγεθος και ειδικά όταν που επιθυμούν να δημιουργήσουν προϊόντα τόσο για κινητά όσο και για web. Γι 'αυτό έβαλα το Uber σε θέση με ένα υγιές μέγεθος γραμματοσειράς 111pt

Στη συνέχεια πήγα κάτω από τους συνηθισμένους υπόπτους τυπογραφίας (H1 έως H5) χρησιμοποιώντας Modular Scaling, με το μέγεθος κειμένου σώματος που ορίστηκε στα 18pt, και χρησιμοποιώντας έναν συντελεστή 1,2.

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

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

Δημιούργησα ένα κανονικό και τολμηρό βάρος για κάθε στυλ (Uber, Hero, H1, H2, Body, κλπ.) Έχω δει συστήματα πριν επιλέξω ένα ελαφρύ βάρος αντί Regular (ή ακόμα και απλά Bold για τις επικεφαλίδες, αλλά δεν είναι κάθε οικογένεια γραμματοσειρών που είναι γενναιόδωρη με βάρη και στυλ και βασιζόμενοι σε ένα ελαφρύ βάρος γραμματοσειράς όταν πρόκειται να αλλάξει οικογένειες γραμματοσειρών μπορεί να προκαλέσει περισσότερη δουλειά στον εαυτό σας στο Sketch, οπότε προσπάθησα να αποφύγω αυτό με απλά παλιά Κανονική και έντονη. Ένα ευτυχισμένο μέσο νομίζω!

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

Μόλις είχα μαύρες εκδόσεις και των δύο γραμματοσειρών Famins (Poppins & Open Sans) όλο το κείμενο Styled και έτοιμο, τότε προχώρησα στη δημιουργία των παραλλαγών χρώματος του καθενός.

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

  • Γκρί
  • Ανοιχτό γκρι
  • λευκό
  • Πρωταρχικός
  • Κόκκινο (σφάλμα)
  • Πράσινο (επιτυχία)

Διάφορος

Σκιές

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

Διαβαθμίσεις & Duotone

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

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

8pt σύστημα πλέγματος

Είχα μαζική εμπνευσμένη από το 8pt Grid System, και ναι στο παρελθόν είχα κρατήσει στο δικό μου σύστημα (είδος), αλλά θα μπορούσε να διαφέρει πολύ από το έργο στο έργο. Με ένα 8pt Grid System στη θέση μου μπορώ να διαχωρίζω και να διαχωρίζω στοιχεία στη σελίδα σε βήματα των 8 (8, 16, 24, 32 κλπ.). Όταν άρχισα να κατασκευάζω τα Σύμβολα και τα Εξαρτήματα μου στο επόμενο στάδιο έβαλα αυτό το σύστημα πλέγματος σε πολύ καλή πρακτική και θα σας το παρουσιάσω λεπτομερώς στο Μέρος 2 αυτής της σειράς άρθρων.

Πριν από τη χρήση κάτι σαν το 8pt Grid System είχα στηριχθεί σε ένα συνδυασμό του ματιού μου και του καλού εργαλείου μέτρησης Sketch. Φυσικά, θα έδινα κάποια συνέπεια, αλλά τελικά κατά τη διάρκεια πολλών σελίδων ή οθονών ενός σχεδίου, και χωρίς σημείο αναφοράς έχετε ένα mish-mash για μετρήσεις απόστασης. 20px εδώ, 15px εκεί, 30px εδώ.

Μετρήσεις που ποικίλλουν τόσο ελαφρώς μεταξύ των οθονών. X στοιχείο 20px από το στοιχείο Y σε μια οθόνη, αλλά το στοιχείο Y 22px από το στοιχείο Z στην επόμενη οθόνη. Αυτό το είδος δυσκολίας προστίθεται τελικά και δημιουργεί μια διαφορετική εμπειρία για τον χρήστη.

Βρήκα με την προσθήκη κάτι σαν το 8pt Grid System στο Cabana, ήμουν σε θέση να φέρει πολύ περισσότερη συνέπεια σε ένα ολόκληρο έργο και επίσης να έχουν ένα ισχυρότερο σημείο αναφοράς για τους προγραμματιστές να ακολουθήσουν στα μεταγενέστερα στάδια ενός έργου.

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

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

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

Ελάτε μαζί μου για το Μέρος 2 (το οποίο μπορείτε να δείτε εδώ)

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

Χρησιμοποιήστε τον κωδικό προσφοράς MEDIUM25 για να λάβετε 25% OFF.

Ευχαριστώ για την ανάγνωση του άρθρου,

Marc

Σχεδιαστής, συγγραφέας, πατέρας και εραστής του MacPaint