Τι κάνει μια εμφάνιση σχεδιασμού συντονισμένη, προγραμματισμένη και επαγγελματική; Η απάντηση είναι: 'χρώμα' .
Δεν είναι κάθε έργο που χρειάζεται bland εταιρικό μπλε να δούμε επαγγελματικά. Ο σχεδιασμός του χρώματος σημαίνει τη δημιουργία ενός πλαισίου που περιγράφει τα χρώματα που πρέπει να χρησιμοποιήσετε και πώς να τα χρησιμοποιήσετε.
Το χρώμα είναι το πιο ολισθηρό στοιχείο σχεδιασμού. Το "καλό" χρώμα είναι τόσο στενά δεμένο με αόριστα πράγματα όπως προσωπική γεύση και διαίσθηση, καθώς και τεχνικές παραμέτρους όπως η αντίθεση και η βαθμονόμηση της οθόνης.
Αλλά το χρώμα είναι ζωτικής σημασίας για το περιεχόμενο . Εάν θεωρήσετε έναν ιστότοπο αρκετά σημαντικό για να ξοδεψετε το χρόνο σας, τότε οι αναγνώστες θα το θεωρούν αρκετά σημαντικό για να περάσουν την ανάγνωση του χρόνου. Οι καλές επιλογές χρωμάτων κάνουν αυτό να συμβεί.
Σε αυτό το άρθρο θα αναθεωρήσουμε μερικές τεχνικές για να επιτύχουμε όμορφες παλέτες χρωμάτων για τα σχέδια σας στο διαδίκτυο.
Ο καλύτερος τρόπος για να κάνετε μια ιστοσελίδα να φαίνεται απρογραμμάτιστη είναι να επιλέξετε τα χρώματα της τυχαία.
Ακόμη και όταν οι επισκέπτες επισκέπτονται την αρχική σελίδα μιας ιστοσελίδας για πρώτη φορά, τα χρώματα επηρεάζουν τη στάση τους απέναντι στο περιεχόμενο . Είναι αυτή η ιστοσελίδα συναρπαστική; Καθησυχαστικός? Τόλμη? Ήπιος? Πολιτικός? Επίσημος?
Το χρώμα επηρεάζει τον τρόπο με τον οποίο οι άνθρωποι ερμηνεύουν αυτό που βλέπουν όσο και η τυπογραφία.
Η εύρεση των σωστών χρωμάτων δεν είναι εύκολη, αλλά η διαδικασία μπορεί να είναι συστηματική.
Η καλή στρατηγική σχεδίασης περιλαμβάνει ένα χρωματικό σχήμα (δηλαδή ένα φάσμα χρωμάτων που επιλέγεται για να επικοινωνήσει μια διάθεση ή ένα μήνυμα) και μια διάταξη αυτού του σχεδίου.
Ας υποθέσουμε ότι σας ζητήθηκε να σχεδιάσετε έναν επαγγελματικό ιστότοπο. (Και αυτό θα μπορούσε πολύ καλά να μετατραπεί σε ένα παιχνίδι πόσιμου: παίρνετε έναν πυροβολισμό κάθε φορά που ο πελάτης χρησιμοποιεί τη λέξη "επαγγελματική", "καθαρή" ή "μοντέρνα." Δύο βολές για "Μου αρέσει αυτός ο άλλος ιστότοπος.
Το χρωματικό σχήμα θα εξαρτηθεί από την ιδιαίτερη φύση της ιστοσελίδας. Για παράδειγμα, τόσο οι τράπεζες όσο και οι ανθοπωλεία μπορούν να έχουν ιστοσελίδες επαγγελματικής εμφάνισης.
Αλλά οι άνθρωποι μπορεί να είναι λιγότερο διατεθειμένοι να αγοράσουν λουλούδια από μια ιστοσελίδα που είναι εταιρική μπλε και ωκεανό γκρι. Και φανταστείτε την ιστοσελίδα της Τράπεζας της Αμερικής σε πασχαλιά και κίτρινο-πράσινο.
Ένας "επαγγελματικός" σχεδιασμός λέει στους επισκέπτες ότι έχουν βρει έναν ιστότοπο που παίρνει σοβαρά το θέμα του, ακόμα και αν το θέμα είναι ανοιχτό. Όποια και αν είναι οι αποχρώσεις και οι αξίες, το "επαγγελματικό" σημαίνει συντονισμένο, προγραμματισμένο και μελετημένο .
Ο καλύτερος τρόπος για να εργαστείτε με το χρώμα είναι να ξεκινήσετε με κανένα.
Η αφαίρεση του χρώματος από ένα σχέδιο αποκαλύπτει θεμελιώδη προβλήματα που πρέπει να αντιμετωπιστούν προτού να ανησυχείτε για το ποια απόχρωση του χαρτογράφου λειτουργεί καλύτερα. Εάν ο σχεδιασμός δεν αισθάνεται δεξιά σε ασπρόμαυρο, τότε είναι καιρός να κάνετε αλλαγές.
Έχει κάθε σελίδα σαφή σκοπό; Μήπως ο σχεδιαστής καθοδηγεί τους αναγνώστες μέσω του περιεχομένου; Είναι το περιεχόμενο συναρπαστικό, εμπνευσμένο ή ενημερωτικό; Οι γραμμές είναι σαφείς; Οι σύνδεσμοι αντιβαίνουν με το άλλο κείμενο; Το χρώμα βελτιώνει αυτά τα αποτελέσματα, αλλά τα προβλήματα στη διάταξη, τον τύπο και την οργάνωση δεν μπορούν να λυθούν μόνο με χρώμα .
Για να κάνετε επανασχεδιασμό, πρώτα βγάλτε το χρώμα. Η απλή πράξη της έκπλυσης υπερβολικά κορεσμένων πρωτευόντων δείχνει πραγματικά πού βρίσκεται ένας ιστότοπος. (Στην πραγματικότητα, θα πρέπει πραγματικά να αρχίσετε έναν επανασχεδιασμό επαναξιολογώντας τους στόχους και το περιεχόμενό σας, αλλά αυτή είναι μια άλλη ιστορία.)
Μερικές φορές η αφαίρεση του χρώματος είναι μια λύση από μόνη της .
Κάποτε δούλευα με μια εταιρεία σχεδιασμού ιστοσελίδων για να επανασχεδιάσω τη δική τους ιστοσελίδα. Οι ιδιοκτήτες ήταν προσωπικοί για το έργο και ήθελαν να το κάνουν σωστό. Αλλά αν νομίζετε ότι ο σχεδιασμός για τον εαυτό σας είναι δύσκολος, προσπαθήστε να το κάνετε με την επιτροπή. Μέχρι το τέλος, οι τρεις από εμάς κοιτούσαμε σε ένα στιγμιότυπο οθόνης του ένατου αλεξίπτωτο για μερικά ποτά.
Απότομα, χαλάρωσα τα στρώματα του Photoshop και έριξα "Desaturate", μετατρέποντας το ζωντανό σχέδιο χαλκού και ναυτικού σε αποχρώσεις του γκρι. Προς έκπληξη όλων, λειτούργησε.
Μέχρι το τέλος της εβδομάδας, είχαμε ένα "ζεστό" γκρι σχέδιο με κόκκινους τόνους. Γνωρίζαμε ότι είχαμε έναν νικητή όταν οι προηγούμενοι πελάτες τους συμπλήρωσαν τη νέα εμφάνιση και περισσότερες κλήσεις ήρθαν από υποψήφιους πελάτες.
Αναλύστε το συνδυασμό χρωμάτων με τη δοκιμή Photoshop "squint" :
Αυτό δείχνει ποια χρώματα είναι πραγματικά κυρίαρχα. Όσο περισσότερο κυριαρχούν τα χρώματα, τόσο πιο έντονα το σχέδιο αποτυπώνεται στο μυαλό του επισκέπτη.
Μόλις η διάταξη και η οργάνωση του ιστοτόπου λειτουργούν χωρίς χρώμα, ήρθε η ώρα να επιλέξετε μια παλέτα. Αλλά ποιο; Και πόσο να χρησιμοποιήσετε;
Το χρώμα έχει τρεις ιδιότητες: απόχρωση, κορεσμό και αξία (μερικές φορές ονομάζεται ελαφρότητα).
Ο κορεσμός είναι πόσο πλούσια είναι η απόχρωση: τα χρώματα των νέον είναι πολύ κορεσμένα, ενώ τα παστέλ είναι λιγότερο κορεσμένα.
Η τιμή υποδηλώνει πόσο φωτεινό (δηλαδή πόσο κοντά στο μαύρο ή το λευκό) είναι ένα χρώμα.
Η απόχρωση αναφέρεται σε ποιο μέρος του ουράνιου τόξου ανήκει ένα χρώμα, όπως το κόκκινο ή το πράσινο. είναι η ιδιοκτησία που ταξιδεύουν οι άνθρωποι.
Τίποτα δεν σκοτώνει ένα χρωματικό σχέδιο, όπως οι συγκρούσεις αποχρώσεων. Ένα σχέδιο μπορεί να έχει εκατό αποχρώσεις μιας απόχρωσης, από το παστέλ έως το νέον, και να φαίνεται ακόμα προγραμματισμένο. Αλλά αν οι αποχρώσεις είναι αναμεμειγμένες με λάθος τρόπο, το σχέδιο καταρρέει.
Ένας τρόπος να αποφευχθεί η σύγκρουση των αποχρώσεων είναι με το διαχωρισμό τους με ένα τρίτο χρώμα. Ένα buffer μαύρου, γκρι ή λευκού είναι ασφαλέστερο, επειδή η κλίμακα του γκρι είναι ουδέτερη απόχρωση: μπορείτε να συντονίσετε οποιοδήποτε τμήμα του ουράνιου τόξου με μαύρο, λευκό και γκρι χρώμα.
Μια δεύτερη λύση είναι να χρησιμοποιήσετε τις αποχρώσεις σε διαφορετικές αναλογίες . Εάν ένα χρωματικό σχέδιο έχει, για παράδειγμα, ιώδες και καφέ, τότε ο σχεδιασμός θα μπορούσε να έχει πολλές αποχρώσεις καφέ με λίγα φωτεινά ιώδη χαρακτηριστικά.
Μια άλλη επιλογή είναι να μεταβάλλουμε τις τιμές. Το καθαρό μπλε και το φωτεινό κυανό κάνουν έναν τόσο τόσο συνδυασμό, αλλά το σκούρο μπλε (ναυτικό) και το ανοιχτό κυανό (γαλάζιο του ουρανού) αντιπαραβάλλουν αρκετά για να απομονώνονται. Το κόκκινο και το ιώδες μπορεί να είναι αρκετά διαφορετικό ώστε να μην συγκρούονται, αλλά αρκετά κοντά ώστε να μην φαίνονται σκόπιμα. Ανοιχτό κόκκινο (ροζ) και σκούρο ιώδες φέρνουν διάκριση.
Δυστυχώς, η αποφυγή ενός κακού συνδυασμού χρωμάτων δεν είναι το ίδιο με την επιλογή ενός καλού. Ένα χρωματικό σχέδιο δεν είναι επιτυχές όταν είστε ικανοποιημένοι, αλλά όταν το κοινό σας αισθάνεται άνετα.
Από πού προέρχονται τα μεγάλα σχέδια χρωμάτων; Με εκατοντάδες χρώματα και χιλιάδες συνδυασμούς, πώς αποφασίζετε;
Οι σχεδιαστές μικρών στατικών ιστότοπων πρέπει να σχεδιάζουν χρώμα από το περιεχόμενο . Αυτό συνήθως σημαίνει φωτογραφίες.
Ο σχεδιασμός ενός οκτώ σελίδων ιστότοπου που χτίστηκα πρόσφατα ολοκληρώθηκε με ένα περίτεχνο σετ μεταλλικών σκαλωσιών εναντίον ενός ουρανού indigo. Ορίζοντας το εργαλείο σταγονόμετρου του Photoshop σε μέση τιμή 5 × 5, ελάμβανα από τα πιο σκοτεινά και ελαφρύτερα μέρη του ουρανού και έδωσα την πλαϊνή μπάρα, τις συνδέσεις, τις επικεφαλίδες και το υποσέλιδο σε αυτές τις λίγες αποχρώσεις.
Όταν ο πελάτης ρώτησε πώς μπορούσαμε να σχεδιάσουμε έναν ιστότοπο τόσο καλά - και τόσο γρήγορα - η απάντησή μας ήταν: "Αυτό κάνουμε." Αλλά το χρώμα ήταν ήδη εκεί. Απλά έπρεπε να το ψάξω.
Ενώ οι φωτογραφίες των αποθεμάτων εργάζονται για γρήγορες ιστοσελίδες, οι σχεδιαστές μεγαλύτερων και πιο δυναμικών δικτυακών τόπων θα πρέπει να αναζητήσουν έμπνευση από το ακροατήριό τους .
Ένας εξαιρετικός δείκτης των χρωμάτων που είναι ελκυστικά για το ακροατήριό σας είναι τα καθημερινά ρούχα τους. Μάθετε τι φορούν οι επισκέπτες σας και θα ξέρετε ποια χρώματα τα κάνουν άνετα. Αν ο ιστότοπός σας είναι για παράδειγμα, ας πούμε, αθλητικά πρωταθλήματα, μάθετε ποιοι φορούν τα παιχνίδια, αντί να δουλεύουν καθημερινά.
Αν είστε αρκετά τυχεροί για να τραβήξετε φωτογραφίες από το κοινό-στόχο σας, δείτε τις μαζικά. θέλετε τον μέσο όρο του πλήθους. Αλλά αν οι φωτογραφίες δεν είναι διαθέσιμες, πηγαίνετε για ψώνια.
Οι σχεδιαστές ενδυμάτων που είναι σε θέση να παραμείνουν στην επιχείρηση έχουν εξαιρετική αίσθηση χρώματος για κάθε διάθεση και τρόπο ζωής. Δεν χρειάζεται να είναι η 5η Avenue haute couture. Μια αναζήτηση Google για καταστήματα κατασκήνωσης, "ρούχα για μωρά", "σκι και μαγιό" και "casual living" θα αποκαλύψει πολλούς καλούς χρωματικούς συνδυασμούς.
Οι άνθρωποι φορούν ρούχα σύμφωνα με τις προτιμήσεις τους. Αν χρησιμοποιείτε χρώματα που τους αρέσει, θα αισθάνονται πιο άνετα στον ιστότοπό σας.
Ελαφρά παραλλαγές της απόχρωσης, του κορεσμού ή της αξίας δημιουργούν υφές .
Οι μονοχρωματικές υφές (δηλαδή υφές με μόνο μία απόχρωση) και τα μοτίβα παρέχουν λεπτή διάσταση στις περισσότερες ιστοσελίδες χωρίς σύγκρουση.
Τα απλά φόντα υφής, ειδικότερα, είναι εύκολο να κατασκευαστούν:
Το όνομα του στρώματος είναι σκόπιμο. Μπορείτε να παίξετε με περισσότερες από μία φωτογραφίες, αλλά αποφύγετε να δώσετε τα ονόματα των στρωμάτων όπως "υφή τοίχου" ή "υφή χαρτιού". Θέλετε να εστιάσετε στην επίδραση στον ιστότοπό σας, όχι από πού προέρχεται.
Ένα καλό χρωματικό σχήμα έχει ορισμένα χαρακτηριστικά. Σκεφτείτε το ως ένα πλαίσιο ή σύνολο οδηγιών για να διατηρήσετε ένα σχέδιο συνεπή. Το καθεστώς πρέπει:
Ακολουθεί ένα παράδειγμα:
Ο σχεδιαστής ξεκίνησε επιλέγοντας ως επί το πλείστον ζεστές αποχρώσεις που αισθάνθηκαν σωστά. Δεν υπήρχε λογική, μόνο ο ασαφής στόχος του "φθινοπώρου" και της διαίσθησής της.
Στο Photoshop, δύο στρώματα παρείχαν αποχρώσεις ασπρόμαυρων. Η λειτουργία ανάμειξης κάθε στρώματος είχε οριστεί σε "Soft Light". Το καθαρό μαύρο ήταν πολύ σκοτεινό για το πιο δεξί χρώμα, οπότε η αδιαφάνεια του μαύρου στρώματος ρυθμίστηκε.
Για να ενοποιήσετε τα χρώματα, δημιουργήθηκε ένα νέο στρώμα και γεμίστηκε με καθαρό κόκκινο χρώμα. Η λειτουργία μείξης ρυθμίστηκε στο "Χρώμα" και η αδιαφάνεια μειώθηκε σε περίπου 40%. (Σημείωση: η σειρά των επιπέδων είναι πολύ σημαντική. Τα χρώματα θα αλλάξουν εάν η στρώση "απόχρωσης" έχει οριστεί κάτω από τις ασπρόμαυρες στρώσεις.)
Αυτό έδωσε στον σχεδιαστή 15 χρώματα για να διαλέξετε. Πήρε τέσσερα που είχαν μια σειρά από τόνους και αποχρώσεις. Εδώ, τα χρώματα έχουν ρυθμιστεί σε λευκό.
Οι παραλλαγές είναι σημαντικές, οπότε ο σχεδιαστής πειραματίστηκε. Τι θα έλεγαν τα χρώματα ενάντια στο μαύρο; Τι συμβαίνει αν τα σκιάσουμε ελαφρά;
Τι γίνεται αν τα άλλαξαμε εντελώς; Χρησιμοποιώντας τη ρύθμιση Εικόνα → Ρυθμίσεις → Απόχρωση / Κορεσμός στο στρώμα "απόχρωση" δημιουργεί μια αισθητή αίσθηση φθινόπωρου, αλλά τα χρώματα εξακολουθούν να είναι συντονισμένα. Ίσως αυτή η παλέτα να μπορεί να χρησιμοποιηθεί για το Πάσχα.
Το τελικό αποτέλεσμα είναι ένα χρωματικό σχήμα: μία αναφορά που παρέχει διαφορετικές (αλλά όχι πολύ διαφορετικές) αποχρώσεις και μια ποικιλία αποχρώσεων που λειτουργούν καλά μαζί. Κάντε λήψη του αρχείου δείγματος.
Τα γραφικά, οι φωτογραφίες και τα εικονίδια του αύριο λειτουργούν με το χρωματικό σχέδιο του σήμερα; Ποιες εικόνες θα χρειαστεί ένας ιστότοπος σε έξι ημέρες, έξι εβδομάδες ή έξι μήνες; Είναι δύσκολο να πούμε, αλλά το περιεχόμενο είναι μέρος του χρωματικού σας σχεδίου .
Θα μπορούσατε να λύσετε αυτό το πρόβλημα είτε κάνοντας τις εικόνες σας να ακολουθούν το χρωματικό σχέδιο είτε κάνοντας το συνδυασμό χρωμάτων να ακολουθεί τις εικόνες σας.
Η επιβολή του χρωματικού σας σχήματος, ακόμα και με φωτογραφίες, είναι ένας πολύ καλός τρόπος για να έχετε μια ενοποιημένη ματιά σε όλες τις σελίδες .
Η πιο εύκολη λύση είναι να βρείτε εικόνες που να ταιριάζουν στο σχήμα σας. Θυμηθείτε ότι ένα χρωματικό σχήμα επιτρέπει την περιποίηση του δωματίου: εφ 'όσον ταιριάζουν με τις μεγάλες αποχρώσεις μιας εικόνας, η εικόνα θα πρέπει να λειτουργεί. Πολλοί ιστότοποι φωτογραφικών εικόνων σας επιτρέπουν να κάνετε αναζήτηση βάσει χρώματος (που σημαίνει απόχρωση: συνήθως πρωτεύουσες όπως κόκκινο, πράσινο και μπλε).
Αν μια εικόνα δεν ταιριάζει με το χρώμα σας, δώστε την απόχρωση:
Κανένα σύνολο χρωμάτων δεν φαίνεται "επαγγελματικό" από μόνο του. Αντίθετα, πρέπει να ακολουθήσετε μια διαδικασία για να επιτύχετε μια συντονισμένη, προγραμματισμένη αίσθηση.
Ανεξάρτητα από το τι είναι η ιστοσελίδα, ο ακροατής θα γνωρίζει ότι παίρνει τον εαυτό του σοβαρά.
Γράφτηκε αποκλειστικά για WDD από Ο Ben Gremillion . Είναι ανεξάρτητος σχεδιαστής ιστοσελίδων ο οποίος έχει μάθει ότι η ανελαστικότητα μιας προθεσμίας είναι αντιστρόφως ανάλογη με τον αριθμό των χαρακτηριστικών που ζητήθηκαν την τελευταία στιγμή.
Πώς δημιουργείτε επιτυχημένα σχέδια χρωμάτων; Τι λειτουργεί και τι δεν λειτουργεί για εσάς;