Τα Χρώματα στις Ιστοσελίδες
Το να χρησιμοποιείς σωστά τα χρώματα στις ιστοσελίδες θα είναι πάντα προς όφελός σου. Μπορεί για τους επισκέπτες κάποια από αυτά να μην είναι εμφανή, αλλά σίγουρα θα κάνουν τη διαφορά. Τα συναισθήματα που προκαλούν έχουν άμεση επίδραση στο κοινό.
Στο προηγούμενο άρθρο αναφερθήκαμε στη θεωρία των χρωμάτων και αναλύσαμε κάποια βασικά χρώματα. Πάμε να δούμε το δεύτερο μισό αυτού του ενδιαφέροντος θέματος!
Πού τα Χρησιμοποιώ;
Η απάντηση είναι παντού, αλλά υπάρχουν σημεία που πρέπει να είσαι πολύ προσεκτικός. Αυτά είναι:
- Επικεφαλίδες & Τίτλοι
- Φόντο ή για είμαστε ακριβής, η απόχρωση του φόντου (background color)
- Πληροφορίες που είναι σημαντικές
- Υπερσύνδεσμους, γνωστά και ως hyperlinks
- Banners
- Pop – ups
- Κουμπιά που έχουν σχέση με επικοινωνία (contact buttons)
Logo – Αρχική Σελίδα – Εικόνες
Κάποιες από τις βασικές αρχές για τα χρώματα στις ιστοσελίδες, είναι λίγο – πολύ γνωστές σε όλους, αλλά καλό είναι να τις θυμίζουμε για να μην ξεχνιόμαστε.
Το κυρίαρχο χρώμα στην ιστοσελίδα σου (εκτός του φόντου) θα πρέπει να είναι αυτό που βρίσκεται στο logo της επιχείρησης σου. Με αυτό τον τρόπο βοηθάς τους επισκέπτες σου να συνδεθούν ακόμα περισσότερο με το brand και να το έχουν πάντα στο μυαλό τους.
Η αρχική σελίδα πρέπει να έχει ζωντανά και λαμπερά χρώματα (όχι τσίρκο). Είναι η πρώτη εντύπωση που σχηματίζει ο επισκέπτης για την ιστοσελίδα και θέλουμε να είναι θετική.
Η εικόνες έχουν και αυτές τη σημασία τους, καθώς από μόνες τους προσθέτουν περισσότερο χρώμα στην ιστοσελίδα. Τοποθέτησε τις στρατηγικά μέσα στο site και σε σημεία που θα βελτιώσουν την αισθητική του.
Όσο λιγότερα τόσο το καλύτερο
Μην κάνεις ποτέ το λάθος να χρησιμοποιήσεις πάρα πολλά χρώματα σε κάθε σελίδα του site. Θα φανεί ερασιτεχνικό και σίγουρα αντιεπαγγελματικό. Ο καλύτερος αριθμός χρωμάτων είναι το τρία. Οι περισσότεροι επισκέπτες προτιμούν απλούς συνδυασμούς.
Σε έρευνες που έχουν γίνει, οι περισσότεροι καταναλωτές προτιμούν έναν συνδυασμό χρωμάτων από δύο έως το πολύ τρία χρώματα. Με τη σωστή χρήση τους μπορείς να τραβήξεις την προσοχή του ματιού.
Η σημασία της χρωματικής αντίθεσης
Ένα από τα σημαντικότερα σημεία στα χρώματα στις ιστοσελίδες (και όχι μόνο) είναι η αντίθεση. Διευκολύνει τη διάκριση του ενός στοιχείου από το άλλο, ενώ μπορεί να καθοδηγήσει το μάτι εκεί που θέλεις. Ο επισκέπτης σαρώνει το site ή το διαβάζει πολύ γρήγορα, οπότε θα πρέπει να του τραβήξεις την προσοχή.
Η χρωματική αντίθεση στις ιστοσελίδες ορίζεται μεταξύ του κειμένου και του φόντου. Όταν υπάρχει σημαντικό περιεχόμενο ή κάποια βασικά στοιχεία που θέλεις να δει, όπως τα call to actions.
Σκέψου πόσο βαρετή θα ήταν μια ιστοσελίδα αν υπήρχαν μόνο αποχρώσεις από ένα χρώμα. Μην ξεχνάς ότι ο σκοπός κάθε website είναι να παρακινήσει τον χρήστη να το εξερευνήσει.
Όχι καθαρό μαύρο
Μπορεί να σου φαίνεται περίεργο, αλλά το καθαρό μαύρο πρέπει να αποφεύγεται για πολλούς λόγους. Καταρχάς καθαρό μαύρο θα βρεις πολύ δύσκολα. Όλα τα “μαύρα” αντικείμενα έχουν ποσότητα φωτός, οπότε θεωρούνται σκούρα γκρίζα.
Επίσης, μπορεί να εξουδετερώσει όλα τα υπόλοιπα χρώματα που βρίσκονται στην ιστοσελίδα σου. Το πιο σκούρο χρώμα της Apple δεν είναι το #000000, αλλά το #333333. Μια καλή συμβουλή είναι να μην επιλέξεις ποτέ αυτό το χρώμα.
Ο κανόνας 60-30-10
Τι λέγαμε πιο πάνω για τα τρία χρώματα στις ιστοσελίδες; Ήρθε η στιγμή να αναλύσουμε την αναλογία των χρωμάτων. Ο κανόνας 60-30-10 είναι ένας διαχρονικός κανόνας στη διακόσμηση που δίνει μια ισορροπία.
Το ποσοστό του 60% ανήκει στην κυρίαρχη απόχρωση. Το 30% είναι το δευτερεύον χρώμα, ενώ με 10% είναι το χρώμα έμφασης. Επειδή ο ορατός χώρος σε μία ιστοσελίδα είναι αρκετά περιορισμένος το 60-30-10 παίζει πολύ σημαντικό ρόλο.
Για να απεικονίσεις αυτόν τον κανόνα σκέψου έναν άνδρα με κουστούμι. Το 60% παρομοιάζεται με το παντελόνι & το σακάκι, το 30% με το πουκάμισο και το 10% είναι η γραβάτα.
Όμως, πώς μπορείς να χρησιμοποιήσεις τον κανόνα 60-30-10 σε ότι αφορά στα χρώματα στις ιστοσελίδες; Το πρωτεύον χρώμα – δηλαδή το 60% – είναι για μεγάλες περιοχές και το φόντο. Το δευτερεύον χρώμα (30%) μπορείς να το χρησιμοποιήσεις σε επισημάνσεις, επικεφαλίδες και sidebars. Τέλος, το 10% πρέπει να είναι ένα λίγο πιο τολμηρό χρώμα. Με αυτό θα καθοδηγήσεις τον επισκέπτη να κάνει τις ενέργειες που θέλεις στην ιστοσελίδα σου.
Εργαλεία για παιχνίδι
Ήρθε η στιγμή να εξασκηθείς και να παίξεις με τα χρώματα. Δεν μπορείς να φανταστείς πόσο διασκεδαστικό είναι. Όπως υποσχεθήκαμε στην αρχή του πρώτου άρθρου, θα αναφέρουμε μερικά εργαλεία που υπάρχουν στο διαδίκτυο για να επιλέξεις τον κατάλληλο χρωματικό συνδυασμό για την ιστοσελίδα σου.
Color CC
Είναι φτιαγμένο από τους προγραμματιστές του Photoshop και της Adobe. Λογικό είναι να βρίσκεται στις πρώτες μας επιλογές το Color CC. Έχει δυνατότητες και επιλογές υψηλής ποιότητας, και χρησιμοποιείται στη δημιουργία προηγμένου συνδυασμού χρωμάτων.
Επίσης, οι προχωρημένες προσαρμογές του είναι κατάλληλες για εξελιγμένους web designers και περιλαμβάνει κανόνες χρωμάτων όπως η σύνθεση, η τριάδα και η μονοχρωμία.
Coolors
Το Coolors είναι μια παλέτα χρωμάτων και φημίζεται για την απλότητα του. Ένα από τα βασικά του πλεονεκτήματα είναι ότι μπορείς να αντλήσεις ιδέες από δημιουργίες άλλων χρηστών. Δε χρειάζεται να έχεις κάποια μεγάλη εμπειρία. Μπορείς σε σύντομο χρονικό διάστημα να δημιουργήσεις έναν υπέροχο συνδυασμό χρωμάτων για την ιστοσελίδα σου.
Colordot
Αυτό το δωρεάν online εργαλείο είναι εξαιρετικό για κάθε χρήστη που θέλει να δημιουργήσει συνδυασμούς χρωμάτων, βάση του ενστίκτου του. Το Colordot είναι πολύ απλό στη χρήση και μπορείς να επιλέξεις όσα χρώματα θέλεις.
Colourcode
Το Colourcode έχει παρόμοια εφαρμογή με το Colordot. Όταν βρεις τον κατάλληλο συνδυασμό, σου επιτρέπει να κάνεις λήψη της παλέτας ως .less, .scss και .png.
Canva Color Palette Generator
Για εκείνους που θέλουν να συνδυάσουν τα χρώματα της ιστοσελίδας με μία εικόνα, το Canva Color Palette Generator δίνει τη λύση. Ανεβάζεις την εικόνα που θέλεις και η εφαρμογή σου εμφανίζει μία παλέτα με τα πέντε κύρια χρώματα της φωτογραφίας. Το μειονέκτημα του είναι ότι δεν μπορείς να ρυθμίσεις λεπτομερώς τα χρώματα αυτά.
Color Safe
Ένα χρήσιμο εργαλείο αν θέλεις να παίξεις με τα χρώματα του φόντου. Το Color Safe θα σε βοηθήσει να βρεις έναν συνδυασμό χρωμάτων του φόντου σε αναλογία με την αντίθεση.
147 Colors
Το 147 Colors περιέχει 17 τυποποιημένα χρώματα και άλλα 130 ονόματα χρωμάτων που είναι στα CSS. Αν θες να δημιουργήσεις ωραία CSS τότε μπορείς να πάρεις μια γεύση και να επιλέξεις εκείνα που σου ταιριάζουν καλύτερα.
Colormind
Η συγκεκριμένη εφαρμογή θα σε πάει στο επόμενο επίπεδο. Το Colormind έρχεται μετά τη δημιουργία του συνδυασμού χρωμάτων και σου υποδείχνει τις καλύτερες αποχρώσεις, φόντο και φωτισμό. Είναι ένα εξαιρετικό εργαλείο για κάθε web designer.
Palettr
Το Palettr είναι λίγο διαφορετικό από όλα τα άλλα εργαλεία. Δημιουργεί χρώματα βάση ενός θέματος ή ενός μέρους, όπως το Παρίσι, η Νέα Υόρκη, το Άργος (εκεί κυριαρχεί το μαύρο…), το Καλοκαίρι κλπ.
Digital Color Meter
Το εργαλείο χρωμάτων για τους χρήστες της Mac. Το Digital Color Meter είναι ένας ψηφιακός μετρητής, όπου μπορείς να τοποθετήσεις ένα χρώμα στην οθόνη σου και να πάρεις τιμές ως δεκαδικό ή ποσοστό.
Λέξη & Χρώμα
Με ποια λέξη ή χρώμα θα χαρακτήριζες την ιστοσελίδα σου, αν σου δινόταν μία επιλογή; Οκ, θα βοηθήσουμε. Για το τέλος αφήσαμε μια έρευνα που ταιριάζει σε όλους τους ιδιοκτήτες ιστοσελίδων και στα χρώματα που θέλουν να έχουν.
Ρωτήθηκε μια μεγάλη ομάδα ανθρώπων τι χρώμα θα επέλεγαν για μία συγκεκριμένη λέξη. Οι λέξεις είναι: Εμπιστοσύνη – Ασφάλεια – Ταχύτητα – Χαμηλό Κόστος – Υψηλή Ποιότητα – Υψηλή Τεχνολογία – Αξιοπιστία – Θάρρος – Φόβος – Διασκέδαση.
Πάμε να δούμε τα αποτελέσματα!
- Εμπιστοσύνη: Μπλε (34%) – Λευκό (21%) – Πράσινο (11%)
- Ασφάλεια: Μπλε (28%) – Μαύρο (16%) – Πράσινο (12%)
- Ταχύτητα: Κόκκινο (76%) Τα υπόλοιπα χρώματα απέχουν πολύ
- Χαμηλό Κόστος: Πορτοκαλί (26%) – Κίτρινο (22%) – Καφέ (13%)
- Υψηλή Ποιότητα: Μαύρο (43%) – Μπλε (20%) – Γκρι & Λευκό (9%)
- Υψηλή Τεχνολογία: Μαύρο (26%) – Γκρι & Μπλε (23%)
- Αξιοπιστία: Μπλε (43%) – Μαύρο (24%) – Λευκό (8%)
- Θάρρος: Μοβ (29%) – Κόκκινο (28%) – Μπλε (22%)
- Φόβος: Κόκκινο (41%) – Μαύρο (38%) – Γκρι (5%)
- Διασκέδαση: Πορτοκαλί (28%) – Κίτρινο (26%) – Μοβ (17%)
Αν θέλεις να δημιουργήσεις πραγματικά όμορφους και εντυπωσιακούς συνδυασμούς χρωμάτων ήρθε η στιγμή να βγεις έξω από τη ζώνη της άνεσής σου. Τα χρώματα στις ιστοσελίδες δεν είναι κάποια εύκολη υπόθεση, αλλά μπορούν να δημιουργήσουν στους επισκέπτες μια συγκεκριμένη εντύπωση ή διάθεση.
Χρωμάτισε την ιστοσελίδα και τον κόσμο σου!
