Αλλά, πριν ασχοληθούμε με τα εργαλεία που θα σας προτείνω, καλό ειναι να υπολογίσετε κάποια πράγματα που πρέπει να λάβετε σοβαρά υπόψη σας όταν επιλέγετε το σωστό συνδυασμό χρωμάτων για την ιστοσελίδα ή το λογότυπό σας.
Η σημασία της επιλογής ενός χρωματικού συνδιασμού
Η επιλογή ενός συνδυασμού χρωμάτων για έναν ιστότοπο ή για οποιοδήποτε τύπο σχεδίου δεν πρέπει ποτέ να γίνεται τυχαία. Θα πρέπει να δώσετε ιδιαίτερη προσοχή στην εξεύρεση των σωστών χρωμάτων που ταιριάζουν στο προιόν, τον πολιτισμό, το branding και τις ιδέες της επιχείρησης ή του ατόμου που αντιπροσωπεύει.
Σίγουρα θα αναρωτιέστε, αλήθεια παίζει τόσο σημαντικό ρόλο;
Όντως, δεν είναι λίγοι οι χρήστες που πραγματοποιούν αγορές από eshops με βάση τα χρώματα. Σίγουρα και εσεις όταν κάνατε αναζήτηση ενός προϊόντος και μπήκατε σε διαφορετικές σελίδες, επιλέξατε αυτή που σας κέντρισε περισσότερο στο μάτι!
Το χρώμα είναι ένα στοιχείο που θα κάνει το κοινό της σελίδας σας να προσέξει αυτό που έχετε να του δείξετε ή να διαφημίσετε, να αισθανθεί αυτό που θέλετε εσείς να αισθανθεί, ώστε να το προσεγγίσετε και να το κάνετε να νιώσει πιο οικεία για να μπορέσετε να μεταδώσετε το μήνυμά σας σε περισσότερους.
Ό, τι κι αν κάνετε, δεν θέλετε να καταλήξετε σε έναν ιστότοπο σαν αυτόν:
Είναι προφανές ότι οποιοσδήποτε επισκέπτεται έναν τέτοιο ιστότοπο θα αρχίσει πιθανώς να αισθάνεται πιο καταθλιπτικός απλά κοιτάζοντας αυτό το σχέδιο.
Ακόμη και αν τα σχέδιά σας δεν είναι τόσο τραγικά, θα χρειαστείτε μια εξωτερική προοπτική για να δείτε πραγματικά τα λάθη που κάνετε όταν επιλέγετε τα χρώματα για ένα σχέδιο ιστοσελίδας.
Για παράδειγμα, ξέρατε ότι το χρώμα έχει ισχυρή επίδραση στα ανθρώπινα συναισθήματα;
Η ψυχολογία των χρωμάτων
Η ψυχολογία των χρωμάτων είναι μια θεωρία που εξηγεί πώς ορισμένα χρώματα επηρεάζουν τα συναισθήματά μας ή πείθουν τους ανθρώπους να αναλάβουν δράση.
Σύμφωνα με μελέτες, οι άνθρωποι παίρνουν υποσυνείδητες αποφάσεις σχετικά με τα προϊόντα μέσα στα πρώτα 90 δευτερόλεπτα από την προβολή τους. Και το 90% αυτής της απόφασης βασίζεται μόνο στο χρώμα.
Αναρωτηθήκατε ποτέ γιατί τα μεγάλα banners "Πώλησης" στα καταστήματα είναι πάντα χρωματισμένα κόκκινα; Είναι επειδή το κόκκινο χρώμα είναι ένα από τα λίγα χρώματα που είναι σε θέση να τραβήξει την προσοχή ενός ατόμου αμέσως.
Και γιατί οι οργανισμοί που σχετίζονται με το περιβάλλον και οι επιχειρήσεις ακινήτων χρησιμοποιούν το πράσινο χρώμα στο branding τους; Λοιπόν, σίγουρα όχι λόγω του χρώματος του χόρτου και των δέντρων. Είναι επειδή το πράσινο χρώμα αντιπροσωπεύει την ανάπτυξη, τον πλούτο, την ειρήνη και την υγεία.
Σε γενικές γραμμές:
το κίτρινο, το πορτοκαλί, το φούξια και το κόκκινο θεωρούνται ζεστά, φωτεινά και ενεργά χρώματα, που προσελκύουν το ενδιαφέρον και ξεχωρίζουν.
Το λιλά, το γαλάζιο και το ασημένιο θεωρούνται κρύα, φωτεινά χρώματα που προσδίδουν φρεσκάδα, νεωτερισμό και επαγγελματισμό. Χρησιμοποιούνται συχνά από επιχειρήσεις που σχετίζονται με την υγεία και τα καλλυντικά.
Το βιολετί, το μπλε, το τιρκουάζ και το πράσσινο είναι κρύα, σκοτεινά χρώματα. Δίνουν το αίσθημα της σταθερότητας και της ποιότητας.
Το χρυσό, το μοβ και το καφέ θεωρούνται ζεστά, σκοτεινά χρώματα και εκφράζουν την παράδοση, το κλασικό, την χαλάρωση και την πολυτέλεια.
Τέλος, το λευκό, το γκρι και το μαύρο θεωρούνται ουδέτερα χρώματα. Βοηθούν στο να δημιουργούνται αντιθέσεις και λειτουργούν συνήθως συμπληρωματικά με άλλα χρώματα.
Η κατανόηση της ψυχολογίας του χρώματος θα διαδραματίσει σημαντικό ρόλο στην επιτυχία του σχεδιασμού της ιστοσελίδας σας. Έτσι, μάθετε πώς να το χρησιμοποιήσετε προς όφελός σας όταν επιλέγετε ένα συνδυασμό χρωμάτων.
Για να ξεκινήσετε, έχω συντάξει έναν γρήγορο οδηγό αναφοράς που καλύπτει τις βασικές συσχετίσεις με κάθε χρώμα (στον δυτικό κόσμο):
Κόκκινο (Παθιασμένο, Ισχυρό, Επικίνδυνο, Σημαντικό): Το κόκκινο είναι ένα εξαιρετικά διεγερτικό χρώμα. Δίνει την εντύπωση της ταχύτητας και της δύναμης, μεταφέρει την αίσθηση της σημασίας ή ειδοποιεί για τον κίνδυνο. Έχει αποδείξει τις φυσιολογικές επιδράσεις της αύξησης της κυκλοφορίας του αίματος και της αύξησης του μεταβολισμού.
Πορτοκαλί (παιχνιδιάρικο, ενεργητικό, ελκυστικό, φθηνό): Το πορτοκαλί χρώμα είναι ζεστό και ζωντανό. Έχει μια ενεργητική αύρα και είναι σε θέση να δημιουργήσει ένα φιλόξενο συναίσθημα για τους επισκέπτες σας.
Κίτρινο (χαρούμενο, φιλικό, διεγερτικό, επιφυλακτικό): Το κίτρινο μπορεί να είναι ένα πολύ ευέλικτο χρώμα ανάλογα με τη σκιά που επιλέγετε. Το ανοιχτό κίτρινο συχνά συνδέεται με τον ήλιο και επομένως επικοινωνεί θετικότητα και ζεστασιά. Οι σκοτεινές αποχρώσεις του κίτρινου δίνουν την εντύπωση της αρχαιότητας και της ηλικίας.
Πράσινο (φυσικό, ασφαλές, φρέσκο): Το πράσινο αντικατοπτρίζει την αίσθηση του περιβάλλοντος και της εγγύτητας στη φύση. Σημαίνει επίσης την ανάπτυξη και τον πλούτο και γι 'αυτό συσχετίζεται συχνά με μια κερδοφόρα επιχείρηση.
Μπλε (ασφάλεια, ηρεμία, χαλαρωση) Το μπλε χρώμα συχνά συνδέεται με ήρεμα και χαλαρωτικά συναισθήματα. Το μπλε εκπέμπει συναισθήματα εσωτερικής ασφάλειας. Γι 'αυτό μπορείτε να δείτε τις τράπεζες και τις επιχειρήσεις τεχνολογίας που χρησιμοποιούν το μπλε ως βασικό τους χρώμα.
Μωβ (Πολυτελέια, Μυστήριο, Ρομαντισμός, Πνευματικότητα): Ιστορικά συνδεδεμένο με τα δικαιώματα, το μοβ υπονοεί ότι ένα προϊόν είναι high-end.
Ροζ (Γυναικα, Αθωότητα, Νεολαία): Το ροζ είναι γνωστό για τις σχέσεις του με τη θηλυκότητα (πολλοί το θεωρούν «χρώμα των κοριτσιών»). Παρόλα αυτά, το ροζ δεν είναι το πιο δημοφιλές χρώμα μεταξύ των γυναικών (σύμφωνα με την έρευνα του Joe Hallock). Το ροζ χρησιμοποιείται συχνά για ρομαντικά θέματα.
Μαύρο (ισχυρό, εξελιγμένο, μυστηριώδες, άγριο): Το μαύρο είναι το πιο ισχυρό χρώμα του φάσματος - προσελκύει την προσοχή πιο γρήγορα από άλλα χρώματα, συμπεριλαμβανομένου του κόκκινου. Γι 'αυτό είναι πιο συχνά χρησιμοποιείται μόνο για κείμενο και τόνους. Όταν χρησιμοποιείται ως κύριο συστατικό σε ένα χρωματικό σχήμα, όπως ένα φόντο, το μαύρο είναι σε θέση να δημιουργήσει μια αίσθηση δύναμης ή πολυτέλειας.
Λευκό (Καθαρότητα, Υγεία, Αγνότητα, Αθώότητα): Το Λευκό τονίζει τα άλλα χρώματα γύρω του, καθιστώντας το μια δημοφιλής επιλογή για ένα δευτερεύον χρώμα. Όταν χρησιμοποιείται ως πρωτεύον χρώμα, το λευκό είναι σε θέση να παρέχει ένα "καθαρό" συναίσθημα και να εστιάζει την προσοχή του επισκέπτη σε σημαντικά στοιχεία (όπως τα κουμπιά παρότρυνσης για δράση).
Γκρι (ουδέτεροτητα, τυπικότητα, πολυπλοκότητα, στειρότητα): Το γκρι συσχετίζεται συχνά με την ουδετερότητα. Το χρωματικό σχέδιο με πρωτεύον το γκρι χρώμα, δημιουργεί μια αίσθηση διατύπωσης γι 'αυτό το γκρι είναι τόσο δημοφιλές στον επιχειρηματικό κόσμο.
Σε σχετική έρευνα ζητήθηκε από ορισμένα άτομα να επιλέξουν ένα χρώμα για συγκεκριμένες λέξεις. Παρακάτω τα βασικά αποτελέσματα.
Εμπιστοσύνη : Οι περισσότεροι επέλεξαν το μπλε χρώμα (34%), λιγότεροι το λευκό (21%) και το πράσινο (11%)
Ασφάλεια : Το μπλε ήρθε και πάλι πρώτο (28%), ακολουθούμενο από το μαύρο (16%) και το πράσινο (12%)
Ταχύτητα: Το κόκκινο ήταν συντριπτικά το φαβορί (76%)
Φτήνια - χαμηλό κόστος : Το πορτοκαλί ήρθε πρώτο (26%), ακολουθούμενο από το κίτρινο (22%) και το καφέ (13%)
Υψηλή ποιότητα : Το μαύρο ήταν ο ξεκάθαρος νικητής (43%) και ακολούθησε το μπλε (20%)
Υψηλή τεχνολογία : Την πρώτη επιλογή αποτέλεσε το μαύρο (26%) και ακολούθησαν το μπλε και το γκρι (και τα δύο 23%)
Αξιοπιστία : Το μπλε ήταν η κορυφαία επιλογή (43%), ακολουθούμενη από το μαύρο (24%)
Θάρρος : Οι περισσότεροι προτίμησαν το μωβ (29%), στη συνέχεια το κόκκινο (28%) και τέλος το μπλε (22%)
Φόβος: Το κόκκινο ήρθε και πάλι πρώτο (41%), ακολουθούμενο από το μαύρο (38%)
Διασκέδαση: Το πορτοκαλί ήταν η κορυφαία επιλογή (28%) και έπειτα ήρθε το κίτρινο (26%) και το μοβ (17%)
Συμβουλές για την επιλογή του τέλειου χρώματος
Υπάρχουν, όμως, πολλά πράγματα, ακόμα, που πρέπει να έχετε κατά νου όταν επιλέγετε τους σωστούς συνδυασμούς χρωμάτων για το σχεδιασμό της ιστοσελίδας σας, λαμβάνοντας υπόψη σας και το ότι η επιλογή ενός χρωματικού σχεδίου θα πρέπει να διαρκεί για πολύ καιρό και να μην ακολουθει τυφλα τις τρεχουσες τάσεις
Ακολουθούν μερικά πράγματα που πρέπει να θυμάστε κατά την επιλογή ενός συνδυασμού χρωμάτων.
Κάντε τα σχέδια πιο φιλικά για τα ατομα με αχρωματοψία
Οι σχεδιαστές σχεδόν πάντα ξεχνούν το πρόβλημα της αχρωματοψίας όταν χρησιμοποιούν χρώματα σε ένα σχέδιο και συχνά αγνοούν το πόσο επηρεάζει την βαρυτητα μιας επιχείρησης.
Όταν ο Mark Zuckerberg σχεδίασε το Facebook, χρησιμοποίησε το μπλε ως το κύριο χρώμα για τη διεπαφή χρήστη, επειδή είναι το χρώμα που τα μάτια του μπορούσαν να δουν καθαρότερα. Ίσως να μην γνωρίζατε ότι Ο Mark Zuckerberg έχει αχρωματοψία.
Μην αποκλείσετε, λοιπόν, τους λίγους για την πλειοψηφία. Κάντε τα σχέδιά σας προσιτά για όλους.
Σκεφτείτε το κοινό σας
Το ότι μια δημοφιλής ιστοσελίδα χρησιμοποιεί ένα συγκεκριμένο συνδυασμό χρωμάτων δεν σημαίνει ότι μπορείτε να το χρησιμοποιήσετε και εσείς για την δικιά σας. Πρέπει να εξετάσετε το κοινό σας.
Εάν ο ιστότοπός σας στοχεύει σε ένα διεθνές κοινό, θα πρέπει να προσπαθήσετε να επιλέξετε χρώματα που ταιριάζουν με διαφορετικούς πολιτισμούς και εθνικότητες. Για παράδειγμα, ενώ στις δυτικές χώρες το μαύρο αντιπροσωπεύει πολυτέλεια και τόλμη, στην ινδική κουλτούρα, το ίδιο χρώμα αντιπροσωπεύει το κακό, την αρνητικότητα και την έλλειψη ενέργειας.
Με βάση λοιπόν το κοινό σας, οι χρωματικοί συνδιασμοί θα είναι διαφορετικοί εάν το κοινό-στόχος σας είναι άντρες ή γυναίκες ή αν ειναι έφηβοι και νέοι ενήλικες.
Μπορεί να νομίζετε ότι δεν μπορεί να αποτύχετε με το ροζ εάν στοχεύετε σε γυναίκες, εν τουτοις θα εκπλαγείτε όταν διαπιστώσετε ότι περίπου το 35% των γυναικών προτιμούν το μπλε ως το αγαπημένο τους χρώμα, ακολουθούμενο από πράσινο και μοβ.
Η Estēe Lauder κάνει μεγάλη χρήση του μπλε στην ιστοσελίδα της:
Πολλά γυναικεία site επενδύουν επίσης στις μωβ αποχρώσεις.
Οι άντρες, από την άλλη πλευρά, προτιμούν το μαυρο, που προσδίδει δύναμη, ακολουθούμενο από μπλε και πράσινο, ενώ ο νεότερος πληθυσμός προτιμά μπλε, πράσινο και μοβ, με το μοβ να γίνεται ολοένα και πιο δημοφιλές σε ομάδες μεγαλύτερης ηλικίας.
Αν έχετε μία σελίδα που πουλάει π.χ βιομηχανικά εργαλεία ο καταλληλότερος συνδιασμός θα ήταν προφανώς το μαυρο με το κίτρινο, ενω μια ιατρική σελιδα θα πρεπει να εχει σαν βαση το μπλε το πρασινο και το πορτοκαλί
Τώρα, όπως σας υποσχέθηκα, ας δούμε μερικά από τα καλύτερα εργαλεία που μπορείτε να χρησιμοποιήσετε για να επιλέξετε ένα χρωματικό συνδιασμό για το σχεδιασμό της ιστοσελίδας σας.
Πρόκειται για ένα εργαλείο που χρησιμοποιείται από πολλούς επαγγελματίες. Δεδομένου ότι είναι κατασκευασμένο από την Adobe, τους προγραμματιστές του Photoshop, το Color CC συνοδεύεται από επιλογές και δυνατότητες υψηλής ποιότητας που μπορείτε να χρησιμοποιήσετε για να δημιουργήσετε ένα προηγμένο συνδυασμό χρωμάτων.
Ωστόσο, περιλαμβάνει επίσης πολλές προχωρημένες προσαρμογές και κανόνες χρωμάτων, όπως μονόχρωμία, σύνθεση και τριάδα, γεγονός που το καθιστά πιο κατάλληλο για τους εξελιγμένους σχεδιαστές.
Coolors
Το Coolors είναι μια γρήγορη γεννήτρια παλέτας χρωμάτων που μπορείτε να χρησιμοποιήσετε για να δημιουργήσετε αμέσως ένα υπέροχο συνδιασμό χρωμάτων για τον σχεδιασμό του ιστοτόπου σας.
Δεν χρειαζεται να έχετε καμία εμπειρία. Μπορείτε, επίσης, να εξερευνήσετε τους συνδιασμούς χρωμάτων που δημιουργούνται από άλλους σχεδιαστές και να αντιγράψετε τις παλέτες χρωμάτων τους και για τα δικά σας έργα.
Colormind
Το Colormind ξεπερνά τις γενικές γεννήτριες χρωμάτων και προχωράει στο επόμενο επίπεδο διερευνώντας τα χρώματα σε μια παλέτα χρωμάτων πέρα από τα βασικά.
Μετά τη δημιουργία ενός συνδυασμού χρωμάτων, είτε τυχαία είτε με το χέρι, το εργαλείο σάς επιτρέπει να μάθετε περισσότερα για κάθε χρώμα στην παλέτα, υποδεικνύοντας ποια από αυτά θα χρησιμοποιηθούν σε αποχρώσεις, φωτισμό και φόντο. Και θα σας αφήσει να δείτε πώς μπορεί να μοιάζουν τα χρώματα με ορισμένα στοιχεία του UI, όπως κουμπιά και καρτέλες.
Είναι ένα εξαιρετικό εργαλείο για τους σχεδιαστές ιστοσελίδων και τους σχεδιαστές user interface
Color Safe
Το Color Safe είναι ένα ενδιαφέρον εργαλείο που σας βοηθά να δημιουργήσετε ένα συνδυασμό χρωμάτων με χρώματα που συμμορφώνονται με τις οδηγίες WCAG.
Έτσι μπορεί να αποβεί πολύ σημαντικό για τους σχεδιαστές που θέλουν να ακολουθήσουν τον κανόνα της διατήρησης των χρωμάτων του προσκηνίου και του φόντου σε αναλογία αντίθεσης 4.5: 1 (Επίπεδο ΑΑ). Η γεννήτρια θα σας βοηθήσει να βρείτε τα τέλεια χρώματα που πληρούν αυτές τις οδηγίες
Palettr
Το Palettr διαφέρει από τις άλλες γεννήτριες χρωμάτων. Αντί να επιλέγετε χειροκίνητα τα χρώματα, αυτό το εργαλείο σάς επιτρέπει να δημιουργήσετε ένα χρωματικό σχέδιο που βασίζεται σε ένα θέμα ή σε ένα μέρος, όπως η Νέα Υόρκη, το Παρίσι, η Ρώμη ή ο χειμώνας και το καλοκαίρι.
Colordot
Αυτή η απλή και εύκολη στη χρήση γεννήτρια χρωμάτων είναι ιδανική για κάθε σχεδιαστή ιστού που αναζητά να δημιουργήσει αμέσως μια παλέτα χρωμάτων με βάση τo ένστικτό του.
Για να ξεκινήσετε, το μόνο που έχετε να κάνετε είναι να μετακινήσετε το ποντίκι σας γύρω από την οθόνη μέχρι να βρείτε ένα χρώμα που σας αρέσει και στη συνέχεια αριστερό κλικ για να επιλέξετε αυτό το χρώμα. Μπορείτε να κάνετε κλικ μέχρι να επιλέξετε όσα χρώματα θέλετε.
Colourcode
Το Colourcode είναι ένα άλλο απλό εργαλείο για την γρήγορη επιλογή ενός συνδυασμού χρωμάτων. Λειτουργεί παρόμοια με το εργαλείο Colordot.
Ωστόσο, το εργαλείο ColourCode κάνει προσαρμογή λίγο περισσότερο, επιτρέποντας στους σχεδιαστές να βρίσκουν άμεσα συνδυασμούς χρωμάτων μονόχρωμη, αναλογική, τριάδα, αντίθεση και άλλα στυλ χρώματος.
Αφού επιλέξετε το χρωματικό σας σχήμα, μπορείτε επίσης να κάνετε λήψη της παλέτας ως .scss, .less, ή ακόμα και ως PNG.
