Sketch Tutorial

Ένας οδηγός γρήγορης εκκίνησης στο σύστημα σχεδιασμού Cabana

Μάθετε πώς μπορείτε εύκολα να βελτιώσετε τη ροή εργασίας σχεδίασης στο Sketch εδώ, τώρα!

Τον Νοέμβριο του 2017 (με μια ήπια παράξενη μουσική και ξεθωριασμένη οθόνη), αποφάσισα να ξεκινήσω να κτίζω ένα Αρχείο Σχεδίων / Σκαριφήματος με τίτλο Cabana. Μπορείτε να διαβάσετε το αρχικό άρθρο μου εδώ.

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

  • Πώς να δημιουργήσετε ένα σύστημα σχεδίασης στο σκίτσο
  • Δημιουργία με σύστημα σχεδίασης στο σκίτσο

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

... αλλά αυτό είναι που σκοπεύω να κάνω εδώ και να σας δώσω οδηγίες με πιο λεπτομερή τρόπο ώστε να μπορείτε να μεταβείτε στην Cabana και να πείτε "Hot diggity damn Είμαι Cabana Design System Pro απλά περιμένετε μέχρι την υπόλοιπη ομάδα πάρτε ένα κομμάτι μου, προαγωγή εδώ έρχομαι ", ή ίσως κάτι λίγο πιο συγκρατημένο από αυτό;

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

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

Πρώτα πράγματα πρώτα

  • Πιάσε ένα αντίγραφο του Cabana εδώ
  • Εγκαταστήστε και τις γραμματοσειρές Poppins και Open Sans
  • Ενεργοποιήστε το αντίγραφο του Sketch
  • Ας το κάνουμε!

Όταν ανοίγετε για πρώτη φορά το Cabana, θα σας παρουσιάσουμε 4 σελίδες ανυπολόγιστης αρεσκείας ...

  • Ξεκινήστε εδώ
  • Οδηγός στυλ
  • Συστατικά
  • Σχεδίαση συστήματος επίδειξης
  • Σύμβολα

Φυσικά, πρώτα να επικεντρωθούμε στη σελίδα Please Start Here. Κάνει τέλεια αίσθηση σωστά;

Παρακαλώ ξεκινήστε από εδώ

Στη σελίδα αυτή βρίσκεται η πλειοψηφία της μαγείας συστήματος σχεδιασμού. Ο λα λα!

Εδώ θα βρείτε 3 ξεχωριστά Artboards ...

  • Χρωματιστά
  • Τυπογραφία
  • Διάφορος

Βασικά χρώματα

Ας ρίξουμε μια ματιά πώς να ρυθμίσετε τα βασικά χρώματα μέσα Cabana θα εμείς;

Θα επικεντρωθούμε στο πρωτεύον χρώμα εδώ και θα σας δείξω πόσο απλό είναι να κάνετε τη μόνη προσαρμογή στη σελίδα αυτή και να την διαδώσετε σε όλο το σύστημα. Είναι κάποια μαγεία Sketch / Design System στη δουλειά εδώ!

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

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

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

Αυτό το είδος εξοικονόμησης χρόνου σίγουρα θα κάνει την επιστροφή στο μέλλον του Doc Brown να φωνάζει "Μεγάλο Σκίτσο!".

Μέσα στο Cabana DS (Design System) έχετε επίσης τα ακόλουθα χρώματα για να σας βοηθήσουμε από την αρχή ...

  • Δευτερεύων
  • Τριτογενής
  • Μαύρος
  • Γκρί
  • Ανοιχτό γκρι
  • Επιτυχία
  • Προειδοποίηση
  • Λάθος

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

Επικαλύψεις χρώματος

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

Για να έχετε μια Επικάλυψη στη θέση της, για παράδειγμα το Primary Overlay, πρέπει απλά να μεταβείτε στον Επιθεωρητή και να επιλέξετε την Τιμή Χρώματος Hex (#) που έχετε ρυθμίσει για το Βασικό σας Χρώμα Βάσης και στη συνέχεια με την επιλεγμένη Επικόλληση επικόλλησης σε αυτή Hex Value και κάντε κλικ στο εικονίδιο συγχρονισμού. Ολα τελείωσαν!

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

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

Τυπογραφία

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

Το σύστημα σχεδιασμού Cabana χρησιμοποιεί 2 οικογένειες γραμματοσειρών. Poppins, για επικεφαλίδες, κουμπιά κλπ ...

... και Open Sans, για Body, Lead κλπ ...

Αναφέρονται ως Γραμματοσειρά Οικογένειας # 1 (Poppins) και Γραμματοσειρά Οικογένειας # 2 (Open Sans).

Αυτό απλά σας επιτρέπει να αλλάξετε εύκολα τις οικογένειες γραμματοσειρών σε κάτι πιο κατάλληλο για το έργο σας χωρίς να χρειάζεται να περάσετε από τα Στυλ Κειμένου σας και να αλλάξετε τα ονόματα των γραμματοσειρών.

Για κάθε οικογένεια γραμματοσειρών έχετε Styles που κυμαίνονται από το Uber (για εκείνα που είναι μεγαλύτερα από τις επικεφαλίδες που είναι κατάλληλα για χρήση στο Web) έως ότου είναι μικροσκοπικά (πιο κατάλληλα για μικρότερα κείμενα σε μια κινητή συσκευή).

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

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

Και πάλι μην ανησυχείτε για την επιλογή κανενός από τους τίτλους (δηλαδή, Font Family # 1 (Black)), όλες αυτές είναι κλειδωμένες.

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

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

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

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

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

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

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

Λάβετε υπόψη ότι οι Στυλ Στυλ και οι Στυλ Κειμένου είναι 2 ξεχωριστές οντότητες μέσα στο Σκίτσο και το χρώμα που ορίσατε για παράδειγμα το Βασικό Έγχρωμο Χρώμα δεν θα μεταδίδεται σε όλη την Τυπογραφία με τον τίτλο Πρωτεύον. Θα χρειαστεί να αντιγράψετε και να επικολλήσετε την τιμή Hex και στη συνέχεια να συγχρονίσετε για να δείτε τις αλλαγές. Αυτός είναι ο τρόπος με τον οποίο το Layer και οι Στυλ Κειμένου λειτουργούν στο Sketch. Συγγνώμη για να απογοητεύσει εκεί λαούς.

Σκιές

Εδώ μπορείτε να επιλέξετε από μια επιλογή από λεπτές, μαλακές σκιές για να βελτιώσετε τα στοιχεία μέσα στο έργο σας. Για να αφαιρέσετε μια σκιά από ένα στοιχείο, απλά επιλέξτε την επιλογή No Shadow (Σκίαση χωρίς σκίαση) από τον πίνακα Shared Styles (Κοινόχρηστα στυλ).

Για να κάνετε ρυθμίσεις σε οποιαδήποτε από τις επιλογές σκιών, μπορείτε να επεξεργαστείτε τις τιμές X, Y, Blurand Spread στον πίνακα Shadows και για τυχόν αλλαγές αδιαφάνειας απλά κάντε κλικ στο χρώμα και ρυθμίστε την τιμή Alpha εκεί. Αφού πραγματοποιήσετε αλλαγές, θα εμφανιστεί το εικονίδιο συγχρονισμού, κάντε κλικ σε αυτό για να ενημερώσετε τις αλλαγές σας. Τέλος & Τέλος!

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

Για να χρησιμοποιήσετε το στυλ στυλ σκιά στο έργο σας, απλά δημιουργήστε ένα Layer Shape, και αυτό θα μπορούσε να είναι ένα κοντέινερ ή μια εικόνα και, στη συνέχεια, επιλέξτε από τον πίνακα Επιθεώρησης τις Στυλ στρώσης σκιάς, για παράδειγμα Shadow> Shadow 40%.

Εάν αποφασίσετε ότι μια σκιά δεν είναι σωστή για το στοιχείο που επιλέξατε, μπορείτε απλά να μεταβείτε στο στυλ Σκιά> Χωρίς σκιά στυλ.

Απλό με ψεκάζει!

❚ Διαβαθμίσεις

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

Για να αλλάξετε απλά οποιαδήποτε από τις Διαβαθμίσεις μέσα στο Cabana, απλά προχωρήστε και επιλέξτε την κλίση που θέλετε να αλλάξετε (για παράδειγμα Purple Rain), στη συνέχεια ρυθμίστε το Gradient Fill στον Επιθεωρητή και μόλις είστε ικανοποιημένοι με τα αποτελέσματα, Οδηγός εσείς, κάντε κλικ στο εικονίδιο συγχρονισμού για να κλειδώσετε την τροποποιημένη σας κλίση.

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

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

Image Εικόνα Duotone

Τώρα, όπως και οι κλίσεις πριν, θα μπορούσατε να δείτε τα στυλ εικόνας Duotone ως ένα μικρό προαιρετικό εξάρτημα και όχι απαραίτητα για το έργο που έχετε έτοιμο να πάτε, αλλά όπως αυτές που είχαμε αναφέρει, είναι εκεί που είχατε ανάγκη Αυτά (Ναι, το Duotone εξακολουθεί να είναι On-Trend) και σας εξοικονομεί το επιπλέον έργο της δημιουργίας τους σε μεταγενέστερη ημερομηνία.

Για να επεξεργαστείτε τις εικόνες Duotone που είναι ήδη διαθέσιμες, απλά επιλέξτε ένα (για παράδειγμα το Blue Moon) και στη συνέχεια από το Inspector tweak στις διάφορες επιλογές Color Blending. Εδώ μπορείτε να επιλέξετε από τις επιλογές Blending όπως Screen, Multiply και Lighten για να βρείτε κάτι που να μοιάζει καλά με τις χρωματικές τιμές που επιλέγετε.

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

Όταν έρχεστε να χρησιμοποιήσετε το προτιμώμενο Duotone σε ένα έργο, απλώς εισάγετε ένα στρώμα σχήματος, επιλέξτε το σχετικό Duotone Shared Style και στη συνέχεια εισαγάγετε μια εικόνα της επιλογής σας (κατά προτίμηση μια ασπρόμαυρη εικόνα για να είναι πιο αισθητή η εικόνα).

Gu Οδηγοί πλέγματος 8 σημείων

Τέλος στο Σύστημα Grid 8 Point, του οποίου είμαι πραγματικός συνήγορος και χρησιμοποιώ σχεδόν όλα τα έργα μου.

Γιατί; Λοιπόν, επειδή δημιουργεί μια αισθητικά ευχάριστη και δομημένη σύνθεση σε ένα Έργο κάθε φορά, είναι δύσκολο να γίνει χωρίς ένα τέτοιο Σύστημα Grid στη θέση του και το "flying blind" δεν είναι ο τρόπος να κάνεις πράγματα όταν δουλεύεις σε ένα Project Client.

"Ας πάμε 16pt εδώ, και, erm, ας πάμε με 15.75pt εδώ, και τότε πηγαίνουμε τότε, 14.5pt εδώ για καλό μέτρο".

Οχι. Δεν είναι δροσερό!

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

Με τους οδηγούς πλέγματος 8pt στο Cabana, μπορείτε να προχωρήσετε και να εισάγετε τα Shared Styles σε ένα έργο, να τα ομαδοποιήσετε και στη συνέχεια να εμφανίσετε / αποκρύψετε την ομάδα όπως απαιτείται όταν εργάζεστε. Αν ο ίδιος και οι Dev σας χρησιμοποιούν ένα εργαλείο όπως το Zeplin, μπορείτε στη συνέχεια να κάνετε τα 8pt Share Styles ορατά στον Προγραμματιστή σας, ώστε να μπορούν εύκολα να τα παραπέμπουν στην παραγωγή.

Ελπίζω ότι αυτός ο Οδηγός γρήγορης εκκίνησης για τη χρήση του Cabana σας βοήθησε να ξεκινήσετε το ταξίδι σας στο Design System με κάποιο τρόπο.

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

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

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

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

Marc

Σχεδιαστής, συγγραφέας, πατέρας και εραστής των Sunny Days