Δημιουργήστε το σύστημα σχεδιασμού σας, μέρος 3: Χρώματα

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

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

Σειρά άρθρου:
- Μέρος 1: Τυπογραφία
- Μέρος 2: Πλέγμα & Διάταξη
- Μέρος 3: Χρώματα
- Μέρος 4: Διάκενο
- Μέρος 5: Εικόνες
- Μέρος 6: Κουμπιά

Ξεκινήσαμε τον Color Editor! Ένα εργαλείο σχεδιασμού ιστοσελίδων που δημιουργεί παλέτες χρωμάτων και θέματα συμβατά με το CodyHouse Framework.

Μεταβλητές χρώματος 101

Σε αντίθεση με άλλα CSS globals, η δημιουργία ενός συστήματος χρωμάτων είναι 10% για την κωδικοποίηση και 90% για τη σημασιολογία. Ενώ εργάζεστε στο αρχείο _colors.scss, θέλετε να έχετε κατά νου τους ακόλουθους στόχους:

  1. Οι μεταβλητές χρώματος πρέπει να είναι εύκολο να θυμηθούν → Δεν θέλετε να ελέγξετε το παγκόσμιο αρχείο οποτεδήποτε πρέπει να επιλέξετε ένα χρώμα.
  2. Το σύστημα πρέπει να είναι εύκολο να ενημερωθεί → Θα προσθέσετε, αφαιρέσετε και μετονομάσετε χρώματα. Βεβαιωθείτε ότι αυτό δεν είναι περίπλοκο.
  3. Το σύστημα θα πρέπει να περιλαμβάνει μόνο τα βασικά χρώματα → έχουμε ακούσει αυτό το τόσο πολλές φορές ... όμως καταλήγουμε πάντα με περισσότερα χρώματα από όσο χρειαζόμαστε! Το πραγματικό κλειδί επιτυχίας ενός συστήματος σχεδιασμού αφαιρεί όλα όσα δεν είναι απαραίτητα (συμπεριλαμβανομένων των χρωμάτων).

Σημασιολογικά vs. δηλωτικά χρώματα

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

Η σημασιολογική προσέγγιση μοιάζει με:

Ενώ εδώ είναι ένα παράδειγμα δηλωτικής προσέγγισης:

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

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

Η βασική παλέτα χρωμάτων

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

  1. Το κύριο / κύριο χρώμα → που χρησιμοποιείται για τους συνδέσμους, το χρώμα φόντου του κουμπιού κλπ. Γενικά, είναι το κύριο χρώμα παρότρυνσης για δράση.
  2. Το χρώμα τόνου → χρησιμοποιείται για να επισημάνει κάτι σημαντικό στη σελίδα. Δεν πρέπει να είναι μια παραλλαγή του πρωταρχικού χρώματος, αλλά ένα συμπληρωματικό χρώμα.
  3. Μια κλίμακα ουδέτερων χρωμάτων → Είναι γενικά μια κλίμακα τόνων του γκρι, που θα χρησιμοποιηθεί για στοιχεία κειμένου, λεπτές λεπτομέρειες, σύνορα κλπ.
  4. Χρώματα ανάδρασης → επιτυχία, σφάλμα, προειδοποίηση.

Ορισμένα από αυτά τα χρώματα χρειάζονται μια παραλλαγή (σκούρα / ελαφριά έκδοση), που συχνά χρησιμοποιείται για να τονίσει τη διαδραστικότητα (π.χ.: hover /: ενεργές καταστάσεις).

Στο CSS, αυτό μεταφράζεται σε:

* Σημείωση: Χρησιμοποιούμε το plugin postcss-color-mod-function για να μεταφράσουμε τις λειτουργίες χρωμάτων σε κώδικα RGBA συμβατό με όλα τα προγράμματα περιήγησης.

Το απόσπασμα παραπάνω αντιπροσωπεύει την παλέτα χρωμάτων: όλα τα χρώματα που χρησιμοποιούνται σε όλο το έργο.

Οι παραλλαγές των πρωτοτύπων και των χρωμάτων της προφοράς δημιουργούνται με τη χρήση λειτουργιών χρώματος. Αυτή η προσέγγιση είναι χρήσιμη αν έχετε ένα αρχείο demo.html (και το κάνουμε στο πλαίσιο μας) ώστε να μπορείτε να τροποποιήσετε τις τιμές των λειτουργιών μέχρι να είστε ικανοποιημένοι με τα χρώματα που έχετε αποκτήσει. Τα χρώματα αποχρώσεων (ή τα ουδέτερα) δημιουργούνται χρησιμοποιώντας το chroma.js. Σε αυτήν την περίπτωση, η χρήση των λειτουργιών δεν ήταν ιδανική, επειδή έχετε γενικά δύο αντίθετα χρώματα (ασπρόμαυρα) και πρέπει να δημιουργήσετε μια κλίμακα τιμών βάσει αυτών των δύο χρωμάτων.

Προσθήκη σημασιολογικών χρωμάτων στο μείγμα

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

Γιατί νομίζω ότι αυτή είναι μια καλή προσέγγιση

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

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

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

Σημαντικά χρώματα προστίθενται στο μείγμα για τρεις κύριους λόγους:

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

Theming

Μόλις μπορέσουμε να χρησιμοποιήσουμε μεταβλητές CSS χωρίς να χρειάζεται να βασίζεστε σε plugins ή polyfill, η δημιουργία χρωμάτων θα είναι πολύ απλή *! Αυτό σημαίνει ότι δεν μπορούμε να δημιουργήσουμε θέματα σήμερα; Όχι, μπορούμε. Έχουμε δύο επιλογές.

* στο πλαίσιο μας, χρησιμοποιούμε το postcss-css-μεταβλητές plugin για να μεταγλωττίσετε μεταβλητές CSS. Αυτήν τη στιγμή δεν υποστηρίζει την ενημέρωση μεταβλητών σε μια κλάση CSS.

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

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

Έτσι δημιουργείτε ένα νέο θέμα που ενημερώνει μερικές μεταβλητές CSS κλειδιού:

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

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

Ακολουθεί ένα παράδειγμα της επιλογής 2 στη δράση:

Τώρα ξέρετε πώς σχεδιάζουμε να χειριστούμε τα χρώματα στο πλαίσιο μας! Εάν έχετε σχόλια / προτάσεις, ενημερώστε μας στο σχόλιο!

Ελπίζω ότι σας άρεσε το άρθρο! Για περισσότερα nuggets σχεδιασμού ιστοσελίδων, ακολουθήστε μας εδώ στο Medium ή στο Twitter.