Σχεδιασμός σε χρώμα

Το χρώμα είναι μια ισχυρή δύναμη στα χέρια ενός σχεδιαστή. Τραβεί το μάτι σας, προκαλεί συναίσθημα και μεταδίδει νόημα. Για να σας δώσω μια ιδέα για το πόσο σημαντικό είναι το χρώμα, σε μια ευρέως αναφερόμενη μελέτη με τίτλο «Ο αντίκτυπος του χρώματος στο μάρκετινγκ», οι ερευνητές ανακάλυψαν ότι για ορισμένα προϊόντα, το 90% των γρήγορων αποφάσεων που λαμβάνουν οι άνθρωποι για τα προϊόντα θα μπορούσε να βασίζεται μόνο στο χρώμα.

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

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

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

Επιλέγοντας μια παλέτα χρωμάτων

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

Προσδιορίστε τον σκοπό

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

Ρωτήστε τον εαυτό σας τις ακόλουθες ερωτήσεις:

  • Ποιο είναι το μήνυμα που θέλετε να μεταφέρετε με το σχέδιό σας;
  • Ποιος είναι ο σκοπός του σχεδιασμού σας; Για να είστε ενημερωτικοί; Να πείσει?
  • Τι συναισθήματα θέλετε να προκαλέσει το σχέδιό σας;

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

Προσδιορίστε το κοινό σας

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

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

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

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

Ανασκόπηση της θεωρίας χρωμάτων

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

Ένα καλό αστάρι είναι το Basic Color Theory από το Canva και το Color Theory 101 του Hubspot. Μπορείτε να διαβάσετε για μια ενδιαφέρουσα εφαρμογή της θεωρίας χρωμάτων στο Why Is Facebook Blue; Η επιστήμη πίσω από τα χρώματα στο μάρκετινγκ.

Βρείτε έμπνευση

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

Ο συνηθισμένος ύποπτος για έμπνευση παλέτας χρωμάτων είναι ιστότοποι όπως το Dribbble και το Behance. Εάν θέλετε να βρείτε έμπνευση χρωμάτων για ένα συγκεκριμένο στυλ σχεδίασης όπως το σχεδιασμό υλικού, μπορείτε να χρησιμοποιήσετε έναν ιστότοπο όπως το MaterialUI Το επίπεδο ισοδύναμο σχέδιο μπορεί να βρεθεί στο FlatUIColors.

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

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

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

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

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

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

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

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

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

  • Ιστορικό
  • Πρωτεύουσα προφορά
  • Δευτερεύουσα προφορά
  • Χρώμα σφάλματος
  • Χρώμα επιτυχίας

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

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

Επιλέξτε μια παλέτα χρωμάτων

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

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

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

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

  • Ποια χρώματα είναι προσβάσιμα;
  • Ποια χρώματα έχουν οπτική επίδραση και τραβούν τα μάτια σας;
  • Χρειάζεστε ένα ελαφρύ ή σκούρο χρώμα; Τι ώρα της ημέρας θα χρησιμοποιήσουν οι χρήστες το προϊόν σας;
  • Τι διάθεση θέλετε να μεταφέρει το σχέδιό σας; Μήπως κάποια παλέτα χρωμάτων έχετε αυτό καλύτερο από τις άλλες;

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

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

Για παράδειγμα, εδώ είναι η παλέτα χρωμάτων της Invision.

Μια γεωμετρική αναπαράσταση θα μπορούσε να μοιάζει κάπως έτσι.

Εφαρμογή παλετών χρωμάτων

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

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

Το Kazan, το τιρκουάζ χρώμα, χρησιμοποιείται για να πιάσει και να τραβήξει το μάτι σας. Παρατηρήστε πώς συμπληρώνει το πρωτεύον χρώμα.

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

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

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

Τύλιξε

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

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

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

PS Αν σας άρεσε αυτό το άρθρο, θα σήμαινε πολλά αν πατήσετε το κουμπί πρότασης ή μοιραστείτε με φίλους.