Sketch Tutorial

Δημιουργία με σύστημα σχεδίασης στο σκίτσο: Μέρος πρώτο [Εκμάθηση]

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

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

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

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

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

Πλοήγηση Series -

  • Μέρος πρώτο
  • Μέρος δεύτερο
  • Μέρος τρίτο
  • Μέρος τέταρτο
  • Μέρος πέμπτο
  • Μέρος έξι
  • Μέρος έβδομο
  • Μέρος Οκτώ
  • Μέρος εννέα

Κοιτάζοντας το σύστημα σχεδιασμού

Εντάξει. Πριν αρχίσουμε να σχεδιάζουμε το πανέμορφο, μεσαιωνικό, μεσαίο στυλ iOS App (το οποίο είπε τον κλώνο;), επιτρέψτε μου να σας δώσω μια γρήγορη επισκόπηση του αρχείου Sketch System Design (Cabana-Lite) που εμείς θα καλέσω στα πιο πρόσφατα μέρη αυτής της Σειράς Tutorial.

Μέσα από το αρχείο μορφοποίησης (εκκινητή) θα υπάρχουν 3 σελίδες ...

  • Σύστημα σχεδιασμού (Ρύθμιση)
  • Σύμβολα
  • Μορφή

Ας το πάρουμε από την κορυφή ...

Σύστημα σχεδιασμού (Ρύθμιση)

Εδώ είναι όπου η μαγεία γίνεται άνθρωποι! Το σημείο εκκίνησης από όπου μπορείτε να ελέγξετε τουλάχιστον το 90% του στυλ που θα προκύψει στο έργο στο οποίο εργάζεστε.

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

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

Στο εσωτερικό αυτής της σελίδας υπάρχουν 2 artboards ...

  • Χρώματα + Επικάλυψη + Duotone
  • Τυπογραφία (Θα ακουμπήσουμε σε αυτό το Artboard στο δεύτερο μέρος)

Χρώματα + Επικάλυψη + Duotone

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

Τώρα στο Cabana Design System έχω κάνει λίγο περισσότερο διαχωρισμό, όπου το Colors Artboard περιέχει μόνο τα Base Colors και Color Overlays και στοιχεία όπως το Duotone χωρίζονται σε ένα άλλο Artboard που φέρει την ένδειξη Various που περιλαμβάνει επίσης στοιχεία όπως Gradients, και σκιές κουτιού. Αλλά για τους σκοπούς αυτού του εγχειριδίου προσπαθώ μόνο να κρατήσω τα πράγματα λίγο πιο συμπαγή για σένα. Ολα καλά?

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

Για αυτή την σειρά Tutorial θα δείτε ότι υπάρχουν μόνο 4 βασικά χρώματα που θα χρειαστούμε κατά το σχεδιασμό της εφαρμογής iOS. Φυσικά, εάν δημιουργείτε το δικό σας Σύστημα και καλύπτετε όλες τις βάσεις όταν εργάζεστε σε ένα μεγάλο έργο, θα ήταν καλό να δημιουργήσετε Base Colors για (και αυτά είναι μόνο προτάσεις) ...

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

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

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

Εστιάζοντας πρώτα στο πρωτεύον χρώμα και ειδικότερα το στυλ γραμμών, δημιούργησα απλά ένα Rectangle (R) 200x200, αφαιρώ το Fill, έδωσε ένα όριο 1px με την επιλεγμένη τιμή Hex, με ακτίνα 4.

Στη συνέχεια, απλά δημιούργησα ένα νέο Layer Style ...

... και την χαρακτήρισαν "σύνορα / πρωτοβάθμια ..."

Για το Primary Fill Δημιουργήσα για άλλη μια φορά ένα Rectangle (R) 200x200, εφάρμοσε την τιμή Hex που επέλεξα και μου έδωσε ακτίνα 4.

Στη συνέχεια, δημιουργήθηκε ένα νέο στυλ επιπέδου και ονομάστηκε πλήρωση / πρωτεύον.

Στη συνέχεια ευθυγραμμίσαμε και τα δύο αυτά στοιχεία (ορθογώνια) το ένα πάνω στο άλλο. Γιατί μπορείτε να ρωτήσετε;

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

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

Στη συνέχεια, στη συνέχεια, κλείδωσα τους τίτλους (δηλ. Πρωτογενής, Μαύρη, Γκρίζα κ.λπ.) μόλις βρώ όλα τα Βασικά Χρώματα μου και τα συνοδευτικά Στυλ Στρώματά τους.

Στη συνέχεια, γνωρίζω ότι έχω τους τίτλους μου για εύκολη αναφορά και μπορώ να μεταφέρω τον κέρσορα γύρω μου, για παράδειγμα, το πρωτεύον χρώμα, να το επιλέξω, να κάνω τις προσαρμογές στυλ Layer μου, αν χρειαστεί, όλα χωρίς να σπρώξω ιδρώτα ή με όρους Σκίτσο χωρίς ο πόνος να πάει "Όχι! Οχι! Οχι! Δεν ήθελα να επιλέξω αυτό το στοιχείο ". Ναι, είμαστε όλοι εκεί;

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

Έγχρωμες επικαλύψεις

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

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

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

  • Πρωταρχικός
  • Δευτερεύων
  • Μαύρο (που χρησιμοποιούμε σε αυτό το Tutorial)

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

Θα επικεντρωθώ στο Black Color Overlay που θα χρησιμοποιήσουμε αργότερα στο tutorial.

Γι 'αυτό και απλά να δημιουργήσει ένα ορθογώνιο (R) 432x248 (τώρα αυτό μπορεί να είναι οποιαδήποτε μέτρηση που θέλετε, αυτό είναι ακριβώς αυτό που επέλεξα τυχαία για), με ακτίνα 4 (και πάλι τις προσωπικές προτιμήσεις, απλά κοίταξε καλύτερα αισθητικά), επικολληθεί στο Hex τιμή του μαύρου χρώματος βάσης που προηγουμένως δημιούργησα και έπεσε το 60% στο Opacity.

Στη συνέχεια, δημιούργησα ένα νέο στιλ στρώματος και το έγραψα Overlay / Black.

Τώρα θα μπορούσα να το αφήσω εκεί. Αλλά σκέφτηκα το λογικό πράγμα που έπρεπε να κάνω, αλλά και ότι αυτό το Overlay θα ήταν, 99% του χρόνου, που εμφανίζεται πάνω σε μια εικόνα, για να προσθέσετε μια μικρή προεπισκόπηση αναφοράς παράλληλα με το νέο Layer Layer Style. Αυτό απλά σήμαινε ότι θα μπορούσα να έχω ένα καλύτερο μετρητή για το πώς θα μπορούσε να λειτουργήσει το Overlay όταν, όπως ανέφερα, ήταν στο επάνω μέρος μιας εικόνας στο σχεδιασμό μου, και επιτρέψτε μου να τσίμπημα ίσως είναι Opacity μέχρι που ήμουν ευχαριστημένος με το αποτέλεσμα.

Επιτρέψτε μου να σας δείξω πώς το έβαλα στη θέση του ...

Πρώτα βρήκα ένα ορθογώνιο (R) με τις ίδιες διαστάσεις με το Color Overlay που είχα δημιουργήσει προηγουμένως, και έπειτα απλά έδωσε ένα πλήκτρο εικόνας.

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

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

Duotone

Τέλος, για την εικόνα Duotone, απλά θα εστιάζουμε στο ένα στυλ για αυτό το φροντιστήριο, αλλά στο Cabana Design System δημιούργησα περίπου 9 διαφορετικές παραλλαγές στυλ.

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

Εντάξει. Πριν ολοκληρώσουμε αυτό το κομμάτι, επιτρέψτε μου να σας δείξω πώς γρήγορα δημιούργησα μία από τις εικόνες Duotone τόσο στο δικό μου σύστημα όσο και στο αρχείο μορφοποίησης (εκκινητή). Ας το ονομάσουμε ένα τμήμα μπόνους των ειδών :)

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

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

  • # 041674 & Λάβετε
  • # 1EDE81 & Πολλαπλασιασμός

Τότε απλά έσυρνα για να αναδιατάξω το Fills στον Επιθεωρητή μέχρι να έχω κάτι σαν τα ακόλουθα ...

Και έπειτα έδωσε ένα όνομα kerrr-aaazzyy για αναφορά (δηλαδή, Green Goblin). Ναι, το πνεύμα μου δεν γνωρίζει όρια!

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

Περάστε στο δεύτερο μέρος εδώ ...

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

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

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

Marc

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