Σύμφωνα με στατιστικές, μας παίρνει μόνο 1/10 του δευτερολέπτου για να σχηματίσουμε τη πρώτη μας εντύπωση για έναν άνθρωπο. Το ίδιο ακριβώς συμβαίνει και με τις ιστοσελίδες. Μέσα σε ελάχιστο χρονικό διάστημα οι χρήστες, έχουν ήδη αποφασίσει αν θα παραμείνουν στον ιστότοπό σας ή αν θα τον αφήσουν. Ο ρόλος των χρωμάτων στο web design είναι καθοριστικός.
Πάντοτε η πρώτη εντύπωση μετράει. Αυτή που λαμβάνει ένας χρήστης από την ιστοσελίδα σας εξαρτάται από πολλούς παράγοντες, όπως η δομή, η απόσταση, οι γραμματοσειρές και φυσικά τα χρώματα και οι συνδυασμοί των χρωμάτων που εμφανίζονται σε αυτή.
Τα χρώματα παίζουν καθοριστικό ρόλο στο σχεδιασμό της ιστοσελίδας σας. Συνεπώς, και στην εντύπωση που θα κάνει αυτή στους χρήστες που θα την επισκεφτούν. Για να γίνει αυτό πιο κατανοητό, ας φανταστούμε ένα κόσμο χωρίς καθόλου χρώματα. Σίγουρα, δε θα έχει ιδιαίτερο ενδιαφέρον, καθώς τα χρώματα ασκούν τεράστια επιρροή πάνω στα συναισθήματά μας. Έχετε επίσης σκεφτεί πως κάποια χρώματα σας ελκύουν περισσότερο και άλλα σας απωθούν; Αυτό ακριβώς συμβαίνει και στην περίπτωση μιας ιστοσελίδας. Άρα, τι είναι αυτό που κάνει το σχεδιασμό σας να φαίνεται επαγγελματικός; Η σωστή απάντηση είναι: το χρώμα!
Τι είναι η ψυχολογία των χρωμάτων (Color psychology);
Η ψυχολογία των χρωμάτων (Color psychology) είναι η επιστήμη που μελετάει πώς το χρώμα επηρεάζει την ανθρώπινη συμπεριφορά. Ουσιαστικά, πρόκειται για έναν κλάδο του ευρύτερου τομέα της γνωστικής-συμπεριφοριστικής ψυχολογίας (cognitive psychology). Είναι ένας τομέας που αφορά πολλούς επαγγελματίες. Για παράδειγμα τους ηγέτες, τους αρχιτέκτονες, τους κηπουρούς, τους διευθυντές γραφείων, τους αρχιμάγειρες, τους σχεδιαστές προϊόντων και τους ιδιοκτήτες των καταστημάτων. Η επιτυχία τους εξαρτάται σε μεγάλο βαθμό από τον τρόπο που θα χρησιμοποιήσουν το χρώμα.
Ο ανθρώπινος εγκέφαλος παίζει σημαντικό ρόλο στην αντίληψη του χρώματος. Στην πραγματικότητα, αν και έχουμε την τάση να σκεφτόμαστε το χρώμα ως ένα φυσικό αντικείμενο, στην πραγματικότητα είναι ένα ψυχολογικό φαινόμενο. Μάλιστα, οι επιστήμονες επισημαίνουν πως η αντίληψη μας για το χρώμα ελέγχεται πολύ περισσότερο από το μυαλό μας παρά από τα μάτια μας.
Το χρώμα ασκεί τεράστια επίδραση στη στάση και τα συναισθήματά μας. Όταν τα μάτια μας εντοπίζουν ένα χρώμα, επικοινωνούν με μια περιοχή του εγκεφάλου, τον υποθάλαμο, που με τη σειρά του στέλνει σήματα στους θυρεοειδείς αδένες. Εκείνοι, σηματοδοτούν την απελευθέρωση ορμονών. Οι ορμόνες αυτές προκαλούν διακυμάνσεις της διάθεσης, της συγκίνησης και της συμπεριφοράς. Επομένως, όχι μόνο τα χρώματα γίνονται αντιληπτά από τον ανθρώπινο εγκέφαλο, αλλά επηρεάζουν βαθιά την ψυχοσύνθεση μας. Μάλιστα, οι ειδικοί ισχυρίζονται ότι οι άνθρωποι συνδέουν υποσυνείδητα συγκεκριμένα χρώματα με συγκεκριμένα κοινωνικά ή πολιτιστικά μηνύματα. Για παράδειγμα, στον δυτικό κόσμο, το μαύρο χρώμα συνδέεται με το πένθος, ενώ στη Νότια Αφρική είναι το κόκκινο.
Τι είναι η θεωρία των χρωμάτων (Color theory);
Ως σχεδιαστές ιστοσελίδων, μία από τις σημαντικότερες επιλογές που έχετε να κάνετε αφορά τις επιλογές των χρωμάτων. Ο ρόλος των χρωμάτων στο web design έχει μεγάλη σημασία. Τα χρώματα που θα επιλέξετε μπορούν να έχουν ψυχολογικό αντίκτυπο σε όσους βλέπουν την ιστοσελίδα σας. Αλλά πώς θα γνωρίζετε ποια χρώματα ταιριάζουν μεταξύ τους; Το θέμα του χρώματος θα μπορούσε να είναι ένα ολόκληρο βιβλίο.
Η θεωρία των χρωμάτων (Color theory) αναφέρεται, στο μεγαλύτερο μέρος της, στην αλληλεπίδραση των χρωμάτων σε ένα σχέδιο, μέσω της συμπλήρωσης, της αντίθεσης και της φωτεινότητας. Τι σημαίνουν όμως αυτοί οι τρεις τελευταίοι όροι;
- Συμπλήρωση (complementation): αναφέρεται στον τρόπο με τον οποίο βλέπουμε τα χρώματα όσον αφορά τη σχέση τους με άλλα χρώματα. Τα συμπληρωματικά χρώματα συμπληρώνουν το ένα το άλλο και αναδεικνύονται μέσω της αντίθεσης. Αυτά είναι τα χρώματα που βρίσκονται απέναντι το ένα από το άλλο στο τροχό των χρωμάτων. Για παράδειγμα, το συμπληρωματικό του μωβ είναι το πράσινο.
- Αντίθεση (contrast): είναι μία ιδιότητα των χρωμάτων που βοηθάει το χρήστη να εστιάσει την προσοχή του σε συγκεκριμένα στοιχεία της σελίδας, διαχωρίζοντας τα από τα υπόλοιπα που βλέπει. Μπορείτε να χρησιμοποιήσετε το τροχό των χρωμάτων για να βρείτε το αντίθετο κάθε χρώματος. Για παράδειγμα, μπορείτε να χρησιμοποιήσετε στη σελίδα σας ένα ανοιχτόχρωμο χρώμα για το φόντο και ένα πολύ σκούρο για το κείμενο.
- Φωτεινότητα (vibrancy): συνδέεται με τις διαθέσεις και τα συναισθήματα που προκαλεί κάθε χρώμα. Τα φωτεινότερα χρώματα κάνουν το χρήστη να αισθάνεται πιο ενεργητικός, κάτι που είναι ιδιαίτερα αποτελεσματικό όταν προσπαθείτε να διαφημίσετε ένα προϊόν. Οι σκοτεινότερες αποχρώσεις χαλαρώνουν το χρήστη και τον κάνουν να εστιάσει σε άλλα πράγματα. Για παράδειγμα, ο ιστότοπος του CNN διαθέτει ένα έντονο κόκκινο banner, προκειμένου να αυξήσει την εγρήγορση των χρηστών. Πρόκειται δηλαδή για μια χρωματική επιλογή που ταιριάζει με τον τομέα των ειδήσεων.
Με ποια συναισθήματα συνδέονται τα ίδια τα χρώματα;
Ως σχεδιαστές ιστοσελίδων, για να πετύχετε τον καλύτερο συνδυασμό χρωμάτων θα πρέπει να γνωρίζετε και τη σημασία των ίδιων των χρωμάτων που θα χρησιμοποιήσετε. Με την πάροδο του χρόνου, ο δυτικός κόσμος έχει συνδέσει τα χρώματα με τις ακόλουθες ιδέες και συναισθήματα.
Κόκκινο:
Δύναμη, ενέργεια, πάθος, αγάπη, ενθουσιασμός, νεανικότητα, θυμός. Είναι το χρώμα που θα προσελκύσει την περισσότερη προσοχή. Γι’ αυτό χρησιμοποιείται συνήθως για προειδοποιήσεις και σημαντικές ειδοποιήσεις. Είναι μία ιδιαίτερα έξυπνη επιλογή αφού δίνει έμφαση στο πρωταρχικό μήνυμα της σελίδας σας. Επειδή όμως μπορεί να προκαλέσει και θυμό, εάν πρόκειται για μια σελίδα με χαλαρή ατμόσφαιρα, χρησιμοποιήστε το με φειδώ ή και καθόλου.
Κίτρινο:
Χαρά, αισιοδοξία, φιλικότητα, ελευθερία, ζεστασιά, ενθουσιασμός. Είναι το χρώμα του ήλιου και το πιο ενεργητικό από όλα τα άλλα, χωρίς να έχει τη σοβαρότητα του κόκκινου. Οι μεσαίες αποχρώσεις του δίνουν μια αίσθηση άνεσης, ενώ οι σκοτεινότερες (συμπεριλαμβανομένου του χρυσού) προσδίδουν σοφία, διαχρονικότητα και περιέργεια.
Πράσινο:
Ηρεμία, ελπίδα, γενναιοδωρία, ασφάλεια, αρμονία, ανάπτυξη, σταθερότητα, υγεία. Το χρώμα αυτό έχει χαλαρωτικά αποτελέσματα και δημιουργεί μια πολύ ισορροπημένη και σταθερή ατμόσφαιρα. Επίσης, συνδέεται συχνά με περιβαλλοντικά θέματα καθώς και με την οικονομική ευημερία.
Μπλε:
εμπιστοσύνη, ασφάλεια, αξιοπιστία, ηρεμία, δύναμη. Είναι το χρώμα του ουρανού, του νερού και της ειρήνης. Ανάλογα με την απόχρωση του προκαλεί διαφορετικά συναισθήματα. Οι μεσαίες και πιο ελαφριές αποχρώσεις του προσδίδουν ασφάλεια και χαλάρωση στο χρήστη. Γι’ αυτό και χρησιμοποιούνται συχνά στα social media, όπως το Facebook και το Twitter. Οι πιο σκούρες αποχρώσεις του προτιμώνται από τους εταιρικούς ιστότοπους, καθώς προσδίδουν δύναμη και αξιοπιστία στους χρήστες που τις εμπιστεύονται.
Μαύρο:
δύναμη, κύρος, εκλεπτυσμός, σοβαρότητα. Το χρώμα αυτό είναι το ισχυρότερο από τα ουδέτερα χρώματα και υπάρχει σχεδόν σε κάθε ιστοσελίδα. Μπορεί να προσδώσει άλλη σημασία ανάλογα με τα υπόλοιπα χρώματα που θα το συνοδεύουν. Με άλλα λόγια, υπάρχει περίπτωση να κυριαρχήσει σε όλα τα άλλα, αν χρησιμοποιηθεί σε υπερβολικό βαθμό. Για τους περισσότερους ιστότοπους, η χρήση του μαύρου γίνεται για να δημιουργήσει την αίσθηση της κομψότητας και της διαχρονικότητας. Ειδικά, όταν συνδυάζεται με λευκή γραμματοσειρά προσδίδει μια μινιμαλιστική διάθεση στη σελίδα σας.
Λευκό:
απλότητα, αρετή, αθωότητα, καθαρότητα. Στους δυτικούς πολιτισμούς το χρώμα αυτό συνδέεται περισσότερο με την αγνότητα και τη καλοσύνη. Οι μινιμαλιστικές και πιο απλοϊκές ιστοσελίδες χρησιμοποιούν τις περισσότερες φορές το λευκό ως φόντο, αφού είναι το καλύτερο για να δώσει έμφαση στα άλλα χρώματα της σελίδας τους. Θεωρείται, συνεπώς, η πιο ασφαλή επιλογή.
Γκρι:
ουδετερότητα, ισορροπία, επισημότητα, ηρεμία, μελαγχολία. Αν και σε ορισμένες περιπτώσεις μπορεί να προκαλέσει αισθήματα θλίψης, είναι από τις πιο δημοφιλείς επιλογές. Ένα από τα μεγαλύτερα πλεονεκτήματα του είναι η δυνατότητα μεταβολής των αποχρώσεων του, αφού πρόκειται ουσιαστικά για ένα μείγμα του λευκού και του μαύρου.
Πορτοκαλί:
φιλικότητα, ενέργεια, μοναδικότητα, ενθουσιασμός, αυτοπεποίθηση. Είναι ένα χρώμα που ενεργοποιεί τον χρήστη, αφού δημιουργεί την αίσθηση της κίνησης και της ενέργειας. Με άλλα λόγια, παρακινεί τον επισκέπτη μιας ιστοσελίδας να προβεί σε κάποια δράση, όπως αγορά, πώληση, συνδρομή. Δεν είναι τυχαίο το γεγονός πως η εταιρία Fanta χρησιμοποιεί στο λογότυπο της αυτό το χρώμα που αποπνέει τη δημιουργικότητα αλλά διατηρεί παράλληλα την εξοικείωση.
Μοβ:
πολυτέλεια, ρομαντισμός, μυστήριο, επιτυχία, σοφία, πλούτος. Γενικότερα, οι πιο ανοιχτές του αποχρώσεις όπως η λεβάντα (σε συνδυασμό με ροζ αποχρώσεις) προσδίδουν ρομαντισμό, ενώ οι πιο σκούρες δείχνουν συνήθως πολυτέλεια και μυστήριο. Στο τομέα του μάρκετινγκ, χρησιμοποιείται συχνά σε ιστοσελίδες που σχετίζονται με θέματα ομορφιάς και προϊόντα αντιγήρανσης. Αντιπροσωπεύει τη δημιουργικότητα και τη φαντασία σε μία εταιρία.
Πού πρέπει να χρησιμοποιήσω χρώματα;
Ο ρόλος των χρωμάτων στο web design είναι πολύ σημαντικός. Τα χρώματα που χρησιμοποιείτε ενδέχεται να μην είναι εμφανή μερικές φορές, αλλά κάνουν τη διαφορά. Οι βασικοί τομείς στους οποίους πρέπει να είστε προσεκτικοί είναι:
- Αναδυόμενα παράθυρα (pop-ups)
- Τίτλοι, επικεφαλίδες
- Απόχρωση του φόντου (background-color)
- Banners
- Κουμπιά που σχετίζονται με την επικοινωνία (contact button)
- Σημαντικές πληροφορίες
- Υπερσύνδεσμοι (hyperlinks)
Για την αρχική σας σελίδα, θα χρειαστεί να χρησιμοποιήσετε λαμπερά και ζωντανά χρώματα. Η πρώτη εντύπωση των χρηστών για τον ιστότοπό σας σχηματίζεται στην αρχική σελίδα.
Επίσης, η επιλογή των χρωμάτων εξαρτάται και από το κοινό στο οποίο απευθύνεστε. Για παράδειγμα, αν απευθύνεστε σε ανδρικό κοινό θα πρέπει να γνωρίζεται πως οι άνδρες προτιμούν το μπλε, το πράσινο και το μαύρο και δε τους αρέσει συνήθως το μοβ, το πορτοκαλί και το καφέ. Αντίθετα, οι γυναίκες προτιμούν το μοβ, το μπλε και το πράσινο και αντιπαθούν, το γκρι, το καφέ και το πορτοκαλί.
Επιπλέον, δε πρέπει να ξεχνάτε τη σημασία των εικόνων, αφού αυτές από μόνες τους προσθέτουν πολύ χρώμα στην ιστοσελίδα σας. Όπου κρίνεται αναγκαίο, τοποθετήστε και κάποιες εικόνες που θα βελτιώσουν την αισθητική της σελίδας σου.
Μία τελευταία συμβουλή: Το κυρίαρχο χρώμα στον ιστότοπό σας θα πρέπει να είναι και αυτό που υπάρχει στο λογότυπό σας. Για παράδειγμα, η Coca-Cola έχει το κόκκινο χρώμα. Με τον τρόπο αυτό, θα βοηθήσετε τους χρήστες και τους καταναλωτές σας να συνδέσουν τη σελίδα σας, τα προϊόντα και τις υπηρεσίες σας με το συγκεκριμένο χρώμα. Θα είναι το χρώμα που θέλετε να θυμάται το κοινό σας, όταν σας έχει στο μυαλό του.
Χρήσιμα εργαλεία για τη σωστή χρήση των χρωμάτων.
Όπως αναφέραμε και παραπάνω, ο ρόλος των χρωμάτων στο web design έχει σπουδαία σημασία. Ευτυχώς, υπάρχει μια πληθώρα από εργαλεία στο διαδίκτυο που μπορούν να σας βοηθήσουν να εφαρμόσετε τη θεωρία των χρωμάτων στη πράξη. Αξιοποιήστε τα παρακάτω εργαλεία για να πετύχετε τα καλύτερα δυνατά αποτελέσματα.
1. Coolors.co
Δεν είναι απλώς ένα εργαλείο για να δημιουργήσετε μια παλέτα χρωμάτων. Σας επιτρέπει, επίσης, να δείτε ολοκληρωμένες δημιουργίες από άλλους χρήστες, ώστε να μπορείτε να αντλήσετε έμπνευση. Διαθέτει εκατοντάδες (αν όχι χιλιάδες) παλέτες που μπορείτε να δείτε, να αποθηκεύσετε και να επεξεργαστείτε. Είναι διαθέσιμο σε επιτραπέζιους υπολογιστές ακόμη και ως μια επέκταση του Google Chrome για εύκολη πρόσβαση.
2. Adobe Color CC
Το δωρεάν αυτό εργαλείο είναι ένα από τα καλύτερα για την επιλογή μιας παλέτας χρωμάτων. Όχι μόνο μπορείτε να δημιουργήσετε τα δικά σας σχέδια χρωμάτων, αλλά μπορείτε επίσης να διερευνήσετε τι έχουν δημιουργήσει οι άλλοι χρήστες. Επιλέξτε ένα χρώμα από τον τροχό ή από μια εικόνα και ξεκινήστε τους πειραματισμούς. Ως πρόσθετο πλεονέκτημα, μπορείτε να αποθηκεύσετε τα θέματα που δημιουργείτε στη βιβλιοθήκη Adobe.
3. Colordot
Αποτελεί ένα εξαιρετικό δωρεάν OnLine εργαλείο για τη δημιουργία μιας παλέτας χρωμάτων. Χρησιμοποιώντας απλά το δείκτη του ποντικιού μπορείτε να επιλέξετε και να αποθηκεύσετε χρώματα. Μετακινήστε το προς όλες τις κατευθύνσεις για να δημιουργηθεί το αποτέλεσμα που επιθυμείτε. Κάντε κλικ στο εικονίδιο επιλογής για να δείτε τις τιμές RGB και HSL κάθε χρώματος.
4. 147 Colors
Όταν είστε υπεύθυνοι για τη δημιουργία εύχρηστου CSS, μερικές φορές πρέπει να χρησιμοποιήσετε τα τυπικά χρώματα και τα ονόματα χρωμάτων. Χάρη στα 147 χρώματα που διαθέτει η εφαρμογή μπορείτε να πάρετε μια γεύση από όλα αυτά, και να επιλέξετε εκείνα που σας ταιριάζουν. Περιέχει 17 τυποποιημένα χρώματα, καθώς και άλλα 130 ονόματα χρωμάτων που υπάρχουν στη CSS.
5. Canva Color Palette Generator
Είναι το ιδανικό εργαλείο, σε περίπτωση που θέλετε να δημιουργήσετε μια παλέτα χρωμάτων που θα βασίζεται σε μία συγκεκριμένη εικόνα. Η χρήση του είναι αρκετά απλή: Ανεβάζετε μια εικόνα και η εφαρμογή θα σας παρουσιάσει μια παλέτα από τα πέντε κύρια χρώματα που αυτή περιέχει. Το μοναδικό μειονέκτημα είναι ότι δε μπορείτε στη συνέχεια να ρυθμίσετε εσείς τα χρώματα αυτής της παλέτας.
6. Digital Color Meter (Mac)
Αυτή η εφαρμογή απευθύνεται αποκλειστικά στους χρήστες της Mac. Με το ενσωματωμένο εργαλείο ψηφιακού μετρητή χρωμάτων, μπορείτε να «τραβήξετε» ένα χρώμα από οποιοδήποτε σημείο της οθόνης σας και στη συνέχεια να λάβετε τις τιμές για αυτό το χρώμα ως δεκαδικό, δεκαεξαδικό ή ποσοστό. Επιπλέον, μπορείτε ακόμη και να αντιγράψετε το επιλεγμένο χρώμα ως κείμενο ή εικόνα.
Συμπερασματικά
Ως σχεδιαστές ιστοσελίδων, η επιλογή των χρωμάτων στον ιστότοπό σας δεν είναι τόσο εύκολη υπόθεση. Όμως ο ρόλος των χρωμάτων στο web design έχει καθοριστική σημασία και πρέπει να δώσετε ιδιαίτερη προσοχή. Ένας καλός σχεδιασμός ιστοσελίδων είναι αυτός που πάντα λαμβάνει υπόψη το ακροατήριο του. Επιλέξτε το χρώμα που απευθύνεται στο κοινό-στόχο σας, ώστε να μπορείτε να ξεχωρίσετε από τους ανταγωνιστές σας. Εξάλλου, τα χρώματα μπορούν να δημιουργήσουν μια πολύ συγκεκριμένη διάθεση ή εντύπωση στους επισκέπτες της σελίδας σας.
Εάν το χρώμα ενός ιστότοπου δίνει λάθος εντύπωση, τότε θα μειωθεί και η επισκεψιμότητα της σελίδας σας, καθώς αυτή θα υποδηλώνει απειρία, αντιεπαγγελματισμό ή ακόμα και έλλειψη αξιοπιστίας από τη δική σας πλευρά. Αντίθετα, εάν επιλέξετε τα σωστά χρώματα, η σελίδα σας αμέσως θα αποπνέει στους χρήστες-επισκέπτες της επαγγελματισμό και αξιοπιστία.
Όμως, θυμηθείτε να μην αφήσετε τα χρώματα να ξεπεράσουν το περιεχόμενό σας, διότι αυτό είναι το σημαντικότερο! Θα πρέπει να χρησιμοποιήσετε τα χρώματα με τον σωστό τρόπο, την κατάλληλη στιγμή, στο σωστό κοινό, για το σωστό σκοπό. Εμπιστευτείτε τη θεωρία των χρωμάτων και τα συναισθήματα που αυτά προκαλούν στους επισκέπτες της σελίδας σας και θα έχετε σημαντικά οφέλη!
Αφήστε μια απάντηση