1. Ξεκίνησε με τα συναισθήματα που θέλεις να μεταφέρεις
Όταν επιλέγεις μια παλέτα χρωμάτων για το website σου, δεν μπορείς απλώς να σκεφτείς πώς φαίνονται τα «πράγματα» – πρέπει να σκεφτείς και τι συναίσθημα θέλεις να προκαλέσεις στους χρήστες.
Είναι γνωστό ότι τα χρώματα μπορούν να προκαλέσουν συναισθήματα.
Αυτές οι έννοιες θα έχουν άμεσο αντίκτυπο στον τρόπο με τον οποίο οι χρήστες σου αντιλαμβάνονται το προϊόν σου. Έτσι, πρέπει να υπολογίσεις τα συναισθήματα που θέλεις να μεταφέρεις στο κοινό.
Ρώτησε τον εαυτό σου: Τι συναισθήματα ή τι αίσθηση θέλω οι επισκέπτες μου να νιώσουν με το που θα μπουν στο website μου;
Πριν ξεκινήσεις, έχουμε συντάξει έναν οδηγό που καλύπτει τις βασικές συσχετίσεις με κάθε χρώμα (στο δυτικό κόσμο):
- Κόκκινο (παθιασμένο, ισχυρό, επικίνδυνο, σημαντικό): Το κόκκινο είναι ένα εξαιρετικά διεγερτικό χρώμα. Δίνει την εντύπωση της ταχύτητας και της δύναμης, μεταφέρει την αίσθηση της σημασίας ή ειδοποιεί για τον κίνδυνο.
- Πορτοκαλί (παιχνιδιάρικο, ενεργητικό, ελκυστικό, ʺφθηνόʺ): Το πορτοκαλί χρώμα είναι ζεστό και ζωντανό. Έχει μια ενεργητική αύρα και είναι σε θέση να δημιουργήσει ένα φιλόξενο συναίσθημα για τους επισκέπτες σου.
- Κίτρινο (χαρούμενο, φιλικό, διεγερτικό, επιφυλακτικό): Το κίτρινο μπορεί να είναι ένα πολύ ευέλικτο χρώμα ανάλογα με τη σκιά που επιλέγεις. Το ανοιχτό κίτρινο συχνά συνδέεται με τον ήλιο και επομένως επικοινωνεί θετικότητα και ζεστασιά. Οι σκοτεινές αποχρώσεις του κίτρινου δίνουν την εντύπωση της παλαιότητας.
- Πράσινο (φυσικό, ασφαλές, φρέσκο): Το πράσινο αντικατοπτρίζει την αίσθηση του περιβάλλοντος και της εγγύτητας στη φύση. Σημαίνει, επίσης, ανάπτυξη και γι’ αυτό συσχετίζεται συχνά με μια κερδοφόρα επιχείρηση.
- Μπλε (εμπιστοσύνη, ηρεμία, αξιοπιστία): Το μπλε χρώμα συχνά συνδέεται με ήρεμα και χαλαρωτικά συναισθήματα. Το μπλε εκπέμπει συναισθήματα εσωτερικής ασφάλειας. Γι ‘αυτό, μπορείς να δεις τις τράπεζες και τις επιχειρήσεις τεχνολογίας που χρησιμοποιούν αυτό το χρώμα.
- Μοβ (πολυτελές, μυστηριώδες, ρομαντικό, πνευματικό): Το μοβ υπονοεί ότι ένα προϊόν είναι ακριβό.
- Ροζ (γυναικείο, αθώο, εκπέμπει νεότητα): Το ροζ είναι γνωστό για τις σχέσεις του με τη θηλυκότητα (πολλοί το θεωρούν «χρώμα των κοριτσιών»). Παρόλα αυτά, το ροζ δεν είναι το πιο δημοφιλές χρώμα μεταξύ των γυναικών. Το ροζ χρησιμοποιείται συχνά για ρομαντικά θέματα.
- Μαύρο (ισχυρό, εκλεπτυσμένο, μυστηριώδες, άγριο): Το μαύρο είναι το ισχυρότερο χρώμα του φάσματος – προσελκύει την προσοχή πιο γρήγορα από άλλα χρώματα, συμπεριλαμβανομένου του κόκκινου. Γι ‘αυτό, πιο συχνά χρησιμοποιείται μόνο για κείμενο και τόνους. Όταν χρησιμοποιείται ως κύριο συστατικό σε ένα χρωματικό σχήμα, όπως ένα φόντο, το μαύρο είναι σε θέση να δημιουργήσει μια αίσθηση δύναμης ή πολυτέλειας.
- Λευκό (καθαρότητα, υγεία, αθωότητα): Το λευκό τονίζει άλλα χρώματα γύρω του, καθιστώντας το μια δημοφιλή επιλογή για ένα δευτερεύον χρώμα. Όταν χρησιμοποιείται ως πρωτεύον χρώμα, το λευκό είναι σε θέση να παρέχει ένα «καθαρό» συναίσθημα και να εστιάζει την προσοχή του επισκέπτη σε σημαντικά στοιχεία (όπως την αντίθεση σε κουμπιά, παρότρυνση για δράση).
- Γκρι (ουδέτερο, επιτήδευση, επίσημο): Το γκρι συσχετίζεται συχνά με την ουδετερότητα. Το χρωματικό σχέδιο με το γκρι χρώμα ως πρωτεύον χρώμα, δημιουργεί μια αίσθηση επισημότητας γι’ αυτό το γκρι είναι τόσο δημοφιλές στον επιχειρηματικό κόσμο.
2. Περιόρισε τον αριθμό των χρωμάτων
Όταν πρόκειται για τον αριθμό των χρωμάτων που χρησιμοποιείς σε ένα website, το ρητό «όσο λιγότερα τόσο καλύτερα» είναι ένας καλός κανόνας που θα πρέπει να ακολουθήσεις.
Πάρα πολλά χρώματα σε ένα website φαίνονται ερασιτεχνικά και αντιεπαγγελματικά.
Αντίστροφα, η χρήση του χρώματος στα σωστά σημεία, θα τραβήξει την προσοχή του ματιού περισσότερο από ένα website με πολλά διαφορετικά χρώματα.
Η καλή χρωματική αρμονία επιτυγχάνεται καλύτερα με το πολύ τρία διαφορετικάχρώματα.
Τα τέλεια χρώματα σε ένα website ενδέχεται να μην είναι ̎πραγματικάʺ χρώματα, αλλά μια συλλογή χρωμάτων σχεδιασμένων σε ένα κολάζ εικόνων, γραφικών ή εικονογραφήσεων.
Αυτή η τεχνική σχεδίασης λειτουργεί τέλεια και προσφέρεται εξίσου ωραία σε επιχειρήσεις στον τομέα των ταξιδιών και του τουρισμού, της αυτοκινητοβιομηχανίας ή της βιομηχανίας της μόδας.
Θα έχεις, λοιπόν, πολύ καλύτερα αποτελέσματα εάν περιορίσεις τον αριθμό των χρωμάτων που χρησιμοποιείς στο σχεδιασμό.
Κατά κανόνα, μείνε σε τρία βασικά χρώματα. Είναι αποδεδειγμένο ότι οι περισσότεροι χρήστες προτιμούν απλούς συνδυασμούς χρωμάτων.
Σύμφωνα με μια μελέτη του Πανεπιστημίου του Τορόντο, οι περισσότεροι άνθρωποι δήλωσαν ότι προτιμούν απλούς συνδυασμούς χρωμάτων που βασίζονται σε δύο ή τρία χρώματα.
Συμβουλή: Εάν χρειάζεσαι επιπλέον χρώματα πέρα από αυτά που έχεις ορίσει στην παλέτα σου, χρησιμοποίησε αποχρώσεις αυτών.
3. Απόφυγε να χρησιμοποιήσεις καθαρό μαύρο
Ένα από τα πιο σημαντικά τεχνάσματα που θα πρέπει να ακολουθήσεις, είναι να αποφεύγεις τη χρήση του μαύρου χρώματος στο website σου.
Ακούγεται περίεργο στην αρχή, αλλά είναι μία καλή συμβουλή αν σκεφτείς ότι στην ζωή σου όταν βλέπεις σκούρα πράγματα, υποθέτεις ότι είναι μαύρα ενώ ίσως τελικά να μην είναι.
Αυτό συμβαίνει καθώς στην πραγματικότητα είναι πολύ δύσκολο να βρεθεί κάτι που να είναι καθαρό μαύρο.
Οι δρόμοι δεν είναι μαύροι. Η καρέκλα του γραφείου σου δεν είναι μαύρη. Οι λέξεις στις ιστοσελίδες δεν είναι μαύρες.
Όλα τα «μαύρα» αντικείμενα γύρω σου έχουν κάποια ποσότητα φωτός που αναπηδά από αυτά, πράγμα που σημαίνει ότι δεν είναι πραγματικά μαύρα, αλλά σκούρα γκρίζα.
Όταν βάζεις καθαρό μαύρο δίπλα σε ένα σύνολο χρωμάτων, το μαύρο εξουδετερώνει τα πάντα. Ξεχωρίζει γιατί δεν είναι φυσικό.
Πολλές από τις εφαρμογές που χρησιμοποιείς και τα website που επισκέπτεσαι σε καθημερινή βάση, χρησιμοποιούν μαύρο που δεν είναι πραγματικό μαύρο, αλλά σκοτεινό γκρίζο.
Όλα χρησιμοποιούν χρώματα κοντά στο μαύρο, αλλά ελαφρώς πιο ανίσχυρα από αυτό, ώστε να μην ξεπερνούν τα υπόλοιπα στοιχεία στην οθόνη.
Για παράδειγμα, το πιο σκούρο χρώμα στην κορυφαία γραμμή της Apple δεν είναι # 000000, είναι # 333333.
4. Προσπάθησε να ακολουθείς τον κανόνα 60-30-10
Εάν δεν είσαι σίγουρος για την προσθήκη χρώματος στο website σου, σκέψου να χρησιμοποιήσεις τον κανόνα χρώματος 60-30-10.
Αυτός είναι ένας εύκολος διαχρονικός κανόνας διακόσμησης που μπορεί να σε βοηθήσει να ορίσεις ένα σωστό συνδυασμό χρωμάτων.
Το ποσοστό 60% + 30% + 10% δίνει ισορροπία στα χρώματα που χρησιμοποιούνται σε οποιοδήποτε χώρο.
Ο κανόνας αυτός είναι απίστευτα απλός στη χρήση: το 60% είναι η κυρίαρχηαπόχρωση, το 30% είναι το δευτερεύον χρώμα και το 10% είναι το χρώμαέμφασης.
Η ιδέα είναι ότι το δευτερεύον χρώμα υποστηρίζει το πρωτεύον χρώμα, αλλά είναι αρκετά διαφορετικό ώστε να ξεχωρίζει. 10% είναι το χρώμα έμφασης.
Κατά το σχεδιασμό website, αυτός ο κανόνας χρώματος 60-30-10 παίζει σημαντικό ρόλο επειδή ο ορατός χώρος που έχεις είναι αρκετά περιορισμένος.
Είναι σημαντικό να γνωρίζεις πώς να ισορροπήσεις τα χρώματα για να επιτευχθεί συνεκτική αισθητική.
Για να απεικονίσεις αυτό το 60-30-10, σκέψου έναν άνδρα με επαγγελματικό κοστούμι: το 60% είναι το παντελόνι και το σακάκι, το 30% είναι το πουκάμισο και το 10% είναι η γραβάτα.
Ο κανόνας 60-30-10 βοηθά στην οργάνωση του χρώματος που θα χρησιμοποιηθεί για το σχεδιασμό ενός website, καθώς με αυτό τον τρόπο θα αποφύγεις την αλόγιστη χρήση του.
Ο χώρος στο διαδίκτυο είναι πολύ διαφορετικός από το χώρο της διακόσμησης, οπότε όταν σκέφτεσαι το 60-30-10 για το website σου, αυτό μπορεί να μεταφραστεί:
Χρησιμοποίησε το πρωτεύον χρώμα (60%) για φόντο και μεγάλες περιοχές κειμένου.
Χρησιμοποίησε το δευτερεύον χρώμα (30%) για επικεφαλίδες, πλευρικές ράβδους, επισημάνσεις ή επεξηγήσεις κειμένου.
Στη συνέχεια, χρησιμοποίησε το χρώμα τόνου (10%), συνήθως το πιο τολμηρό χρώμα σου, για να καθοδηγήσεις τον χρήστη να κάνει μια συγκεκριμένη ενέργεια.
Χρησιμοποίησε το για περιοχές που θέλεις να τραβήξεις τη προσοχή του χρήστη, όπως κουμπιά και συνδέσμους παρότρυνσης για δράση.
5. Σχεδίασε σε κλίμακα του γκρι
Το παιχνίδι με το χρώμα είναι διασκεδαστικό.
Γι’ αυτό, η επιλογή ενός χρώματος είναι συνήθως ένα από τα πρώτα πράγματα που κάνουμε όταν ξεκινάμε ένα νέο έργο.
Είναι πραγματικά δελεαστικό να παίζεις με διαφορετικούς χρωματικούς συνδυασμούς από την αρχή, αλλά σου συνιστώ να αποφύγεις να μπεις σ’αυτόν τον πειρασμό και να επικεντρωθείς πρώτα στο σχεδιασμό του σε γκρι αποχρώσεις.
Ο σχεδιασμός σε κλίμακα του γκρι πριν την προσθήκη χρωμάτων σου δίνει τη δυνατότητα να εστιάσεις στη δομή της σελίδας.
6. Όρισε τι είναι σημαντικό χρησιμοποιώντας τη χρωματική αντίθεση
Η αντίθεση είναι ένα ισχυρό εργαλείο που μπορεί να βοηθήσει στην καθοδήγηση του ματιού.
Η αντίθεση διευκολύνει τη διάκριση ενός πράγματος από το άλλο.
Στο σχεδιασμό website, η αντίθεση συνήθως αναφέρεται στη διαφορά μεταξύ του προσκηνίου και του φόντου του κειμένου.
Με άλλα λόγια, πόσο διαφορετικές είναι οι λέξεις στην οθόνη από το φόντο στο οποίο προβάλλονται.
Γενικά, η μεγάλη αντίθεση είναι η καλύτερη επιλογή για το σημαντικό περιεχόμενο ή τα βασικά στοιχεία.
Όσο περισσότερο θέλεις να ξεχωρίσεις κάτι, τόσο περισσότερο θα πρέπει να βασιστείς σε αντιπαραβαλλόμενα χρώματα.
Υπάρχουν πολλοί λόγοι για την αντίθεση!
Τα άτομα που επισκέπτονται ένα website δεν διαβάζουν, αλλά σαρώνουν ή διαβάζουν γρήγορα, οπότε θα πρέπει με κάποιο τρόπο να τους τραβήξεις την προσοχή.
Χρησιμοποιώντας κείμενο υψηλής αντίθεσης που καθιστά τα σχήματα αυτά εύκολα αναγνωρίσιμα, χρησιμοποιείς λιγότερες οπτικές πληροφορίες και γνωστικές «πιέσεις», οι οποίες απαιτούνται για την ανάγνωση και την εμπλοκή σε ένα website.Δες τα ακόλουθα παραδείγματα.
Στο πρώτο παράδειγμα, μόλις που βλέπεις το κύριο πλήκτρο κλήσης για δράση «Get Evernote, it’s free», καθώς το χρώμα του φόντου και του κουμπιού είναι σχεδόν το ίδιο.
Στο δεύτερο παράδειγμα, μπορείς εύκολα να εντοπίσεις το CTA.
Η χρωματική αντίθεση, με λίγα λόγια, παρέχει οπτική ίντριγκα και διατηρεί το ενδιαφέρον για τους χρήστες.
Σκέψου για λίγο, πόσο βαρετό θα είναι ένα website εάν είχε μόνο ένα χρώμα ή εάν συμπεριλαμβάνει μόνο αποχρώσεις από την ίδια οικογένεια χρωμάτων.
Θυμήσου ο σκοπός ενός website είναι να κάνει τους χρήστες να το εξερευνήσουν!
7. Ακολούθησε τον κανόνα της συνέχειας
Εξέτασε τη συνέχεια των χρωμάτων σε ολόκληρο το website σου.
Η συνέχεια δεν σημαίνει ότι πρέπει να χρησιμοποιείς τα ίδια χρώματα σε κάθε σελίδα, αυτό θα ήταν πολύ βαρετό!
Σημαίνει να κάνεις μια ομαλή μετάβαση χρώματος από τη μια σελίδα στην άλλη χρησιμοποιώντας κάποιο χρώμα.
Αυτό θα δημιουργήσει μια αίσθηση οικειότητας όταν οι επισκέπτες θα εξερευνήσουν το website σου.
Αυτό μπορεί να γίνει χρησιμοποιώντας μόνο ένα χρώμα σύνδεσης.
Για παράδειγμα, όταν οι επισκέπτες μετακινούνται στη σελίδα του προϊόντος από την αρχική σελίδα, μπορείς να χρησιμοποιήσεις το χρώμα της επωνυμίας σου για τους τίτλους για να δημιουργήσεις αίσθηση σταθερότητας, στο χρήστη του website σου.
8. Σκέψου την προσιτότητα στο θέμα του σχεδιασμού
Η προσιτότητα αποτελεί βασικό στοιχείο κατά το σχεδιασμό το χρώμα.
Τα σημερινά προϊόντα πρέπει να είναι προσιτά για όλους – ανεξάρτητα από τις ικανότητες ενός ατόμου.
Ακολουθούν μερικές στρατηγικές που πρέπει να έχεις κατά νου όταν εξετάζεις την προσιτότητα και το χρώμα στο σχεδιασμό:
Απόφυγε να χρησιμοποιείς ένα μόνο χρώμα ως δείκτη
Περίπου το 8% των ανδρών και το 0,5% των γυναικών έχουν προσβληθεί από κάποια μορφή χρωματικής τύφλωσης. Αυτό σημαίνει ότι ένας στους 12 άνδρες και μια στις 200 γυναίκες έχουν κάποια μορφή τύφλωσης.
Ενώ υπάρχουν πολλαπλές μορφές της κατάστασης, η τύφλωση κόκκινου / πράσινου χρώματος είναι η πιο κοινή.
Ένα άτομο που πάσχει από αυτή τη μορφή χρωματικής τύφλωσης, έχει γενικά πρόβλημα να δει παραλλαγές του κόκκινου και του πράσινου.
Χρώματα όπως φαίνονται με πλήρη όραση (αριστερά) και τα ίδια χρώματα με τα κόκκιναπράσινα χρώματα (κέντρο και δεξιά).
Τα περισσότερα website που σχεδιάζουμε, έχουν στοιχεία που με το χρώμα μπορούν να κάνουν τη ζωή του χρήστη, που πάσχει από χρωματική τύφλωση, δύσκολη.
Ας δούμε μια κοινή περίπτωση: έχεις δει ποτέ ένα μήνυμα σφάλματος όταν συμπληρώνεις μια φόρμα εγγραφής σε έναν ιστότοπο ο οποίος λέει κάτι σαν: «Τα πεδία που σημειώνονται με κόκκινο χρώμα απαιτούνται»;
Ενώ μπορεί να μην μοιάζει σοβαρό, αυτό το μήνυμα σφάλματος μπορεί να είναι μια εξαιρετικά απογοητευτική εμπειρία για τους ανθρώπους που πάσχουν από χρωματική τύφλωση.
Αριστερά: Πλήρης όραση. Δεξιά: Πρόβλημα όρασης.
Από τη στιγμή, λοιπόν, που υπάρχουν άνθρωποι που δεν αντιλαμβάνονται τα χρώματα με τον ίδιο τρόπο, λόγω του προβλήματος όρασης που αναφέραμε παραπάνω, είναι σημαντικό να χρησιμοποιείς πολλαπλές οπτικές ενδείξεις για την επικοινωνία σημαντικών στοιχείων στον ιστότοπό σου.
Εκτός από χρώμα, χρησιμοποίησε στοιχεία όπως, σχέδια ή κείμενο για να περιγράψεις ενέργειες και περιεχόμενο.
Αριστερά: Πλήρης όραση. Δεξιά: Πρόβλημα όρασης.
Απόφυγε τη χαμηλή αντίθεση για κείμενο
Η αντίθεση χρώματος είναι ζωτικής σημασίας για τη χρησιμότητα ενός σχεδίου.
Όταν χρησιμοποιείς χρώματα σε κείμενο, πρέπει να γνωρίζεις ότι η χρήση δύο χρωμάτων με χαμηλή αντίθεση μεταξύ τους, μπορεί να κάνει το αποτέλεσμα πολύ δύσκολο να το διαβάσεις.
Το κείμενο με χαμηλή αντίθεση είναι κάτι που μπορεί ενδεχομένως να χαλάσει την ευχρηστία πολλών ιστοσελίδων.
Έλεγξε τις αντιθέσεις για να βεβαιωθείς ότι τα χρώματα φόντου και τα χρώματα σε πρώτο πλάνο εμφανίζονται με αρκετή αντίθεση για ένα άτομο που είναι χρωματικά τυφλό ή που έχει χαμηλή όραση. Δεν είναι τόσο δύσκολο: το μόνο που χρειάζεται να κάνεις είναι να ελέγξεις την αναλογία αντίθεσης.
Οι αναλογίες αντίθεσης αντιπροσωπεύουν πόσο διαφορετικό είναι ένα χρώμα από ένα άλλο (συνήθως γραμμένο ως 1: 1 ή 21: 1).
Όσο μεγαλύτερη είναι η διαφορά μεταξύ των δύο αριθμών στην αναλογία, τόσο μεγαλύτερη είναι η διαφορά στη σχετική φωτεινότητα μεταξύ των χρωμάτων.
Το W3C (Κοινοπραξία του Παγκόσμιου Ιστού, γνωστή ως World Wide Web Consortium) συνιστά τις ακόλουθες αναλογίες αντίθεσης για σώμα κειμένου και κείμενο εικόνας:
- Το μικρό κείμενο πρέπει να έχει αναλογία αντίθεσης τουλάχιστον 4,5: 1 στο φόντο του.
- Το μεγάλο κείμενο (σε 14pt bold / 18pt regular και πάνω) θα πρέπει να έχει αναλογία αντίθεσης τουλάχιστον 3: 1 σε σχέση με το φόντο του.
Τα καλά νέα είναι ότι δεν χρειάζεται να το ελέγξεις με το χέρι. Χρησιμοποιώντας το εργαλείο Color Contrast Checker, μπορείς να ελέγξεις τους χρωματικούς συνδυασμούς με μερικά μόνο κλικ.
Χρωμάτισε τον κόσμο σου
Τα χρώματα μπορούν να φτιάξουν ή να καταστρέψουν το website σου, οπότε είναι σημαντικό να τα επιλέγεις με σύνεση όταν σχεδιάζεις οτιδήποτε, ιδίως website.
Ελπίζουμε ότι οι συμβουλές που σου δώσαμε θα σε βοηθήσουν να βρεις τους σωστούς συνδυασμούς χρωμάτων για το website σου.
Τώρα δεν έχεις παρά να εξασκηθείς. Παίξε με τα χρώματα! Πίστεψε μας, είναι διασκεδαστικό!
