7 Κανόνες για Σχέδια Χρώματος Ιστοσελίδας

7 Κανόνες για τη δημιουργία χρωμάτων ιστότοπουΣτο σχεδιασμό επωνυμίας και στον ιστότοπο, τα χρώματα έχουν μεγάλη σημασία.


Γιατί?

Η έρευνα δείχνει ότι 62-90% των αποφάσεων αγοράς καθοδηγούνται καθαρά από την αντίληψη των χρωμάτων.

Η επιλογή του σωστού συνδυασμού χρωμάτων ιστότοπου είναι αυτό που το καθιστά αξέχαστο, αξιόπιστο, ελκυστικό και κερδοφόρο. Η πρώτη εντύπωση είναι τα πάντα.

Κατά τη δημιουργία ενός ιστότοπου, θα πρέπει να εξετάσετε προσεκτικά ποια χρώματα θα προσθέσετε στο συνδυασμό χρωμάτων και γιατί. Διαφορετικά χρώματα θα στέλνουν διαφορετικά μηνύματα στους επισκέπτες σας, αλλάζοντας την κατανόησή τους για τον ιστότοπό σας, ακόμη και όταν δεν προοριζόταν.

Ανίκανος να αρχίσει καν; Ακολουθήστε αυτά τα βήματα για τη δημιουργία ενός συνδυασμού χρωμάτων ιστότοπου και αποφύγετε να κάνετε τα μεγαλύτερα λάθη σχεδίασης.

Ένας μέσος χρήστης έχει ένα διάρκεια προσοχής 8 δευτερολέπτων. Αυτός είναι ο χρόνος που πρέπει να τους πείσετε να συνεχίσουν να περιηγούνται στον ιστότοπό σας.

Η επιλογή του σωστού συνδυασμού χρωμάτων για τη σχεδίαση ιστού σας θα σας βοηθήσει να προσελκύσετε τους χρήστες με χρωματικές πινελιές, έντονα στοιχεία πλοήγησης και αξέχαστη επωνυμία.

Λοιπόν, εδώ πρέπει να ξεκινήσετε…

Contents

7 βήματα για να δημιουργήσετε τον δικό σας χρωματικό συνδυασμό ιστοτόπου

1. Βρείτε το κύριο χρώμα σας

Πιθανότητες έχετε ήδη επιλέξει το κύριο χρώμα σας. Εάν έχετε ένα λογότυπο ή κάποια υπάρχουσα επωνυμία, υπάρχει πιθανώς ένα κύριο χρώμα που κυριαρχεί στα σχέδια. Αυτό είναι το χρώμα με το οποίο θα συσχετιστεί η επωνυμία σας – το κύριο χρώμα της επωνυμίας σας.

Εάν δεν βρίσκεστε πουθενά στην τελική απόφαση, πάρτε αυτό το κουίζ για να καταλάβετε τις επιλογές σας, να πραγματοποιήσετε έρευνα αγοράς και να χρησιμοποιήσετε ιστότοπους όπως Ντρίμπλα ή Συμπεριφορά για λίγη έμπνευση.

Μπορείτε επίσης να περιηγηθείτε αυτή η λίστα παλετών κωδικού hex από μερικές από τις πιο γνωστές μάρκες στον κόσμο για να διευρύνει το σύνολο των ιδεών σας.

Όταν συναντήσετε μια ιδιαίτερα ευχάριστη σχεδίαση ή εικόνα, μην διστάσετε να χρησιμοποιήσετε ένα εργαλείο επιλογής χρωμάτων για να πάρετε τον δεκαεξαδικό κώδικα και να τον προσθέσετε στη λίστα αγαπημένων σας. ColorZilla φαίνεται να είναι ένα δημοφιλές εργαλείο. Και αν χρησιμοποιείτε το Chrome ως το κύριο πρόγραμμα περιήγησής σας, ρίξτε μια ματιά στο Επέκταση προγράμματος περιήγησης Eye Dropper καθώς είναι ένα από τα εργαλεία υψηλότερης κατάταξης εκεί έξω.

2. Αποφασίστε για τον αριθμό των χρωμάτων (Συνιστάται: 3)

Μόλις καρφώσετε το κύριο χρώμα, το επόμενο βήμα είναι να αποφασίσετε πόσα άλλα χρώματα θα προσθέσετε στο μείγμα.

Συνιστάται συνήθως να χρησιμοποιείτε έναν συνδυασμό τριών χρωμάτων. Ένα τριαδικό συνδυασμό χρωμάτων, που αποτελείται από τρία χρώματα ομοιόμορφα σε απόσταση γύρω από τον χρωματικό τροχό, είναι ένα καλό σημείο εκκίνησης. Μια τριαδική παλέτα μπορεί να είναι αρκετά δραματική αν διαθέτει τρία κύρια ζωντανά χρώματα, έτσι οι σχεδιαστές συχνά επιλέγουν έναν συνδυασμό δευτερευόντων τόνων.

Υπάρχει επίσης ένας κανόνας ενός παλιού σχεδιαστή που μπορεί να σας βοηθήσει κατά την εφαρμογή του συνδυασμού χρωμάτων σας στη σχεδίαση του ιστότοπου. Είναι γνωστό ως το 60-30-10 κανόνας.

Ο κανόνας 60-30-10 συνιστά να μην χρησιμοποιείτε ίσες ποσότητες των επιλεγμένων χρωμάτων, αλλά να τα διαιρέσετε σε ποσοστά και να εφαρμόσετε ανάλογα. Ένα καλό παράδειγμα αυτού του κανόνα στην πράξη είναι ένα ανδρικό κοστούμι: το σακάκι και τα σακάκια καταλαμβάνουν περίπου το 60% της εμφάνισης, το πουκάμισο αντιπροσωπεύει ένα άλλο 30% και το γραβάτα 10%.

3. Χρησιμοποιήστε δευτερεύοντα χρώματα όταν χρειάζεται

Η αντιστοίχιση των δευτερευόντων χρωμάτων με τα κύρια χρώματα της επωνυμίας σας μπορεί να είναι αγώνας, αλλά μην απελπιστείτε! Υπάρχουν πολλά έξυπνα δωρεάν εργαλεία διαθέσιμα στο διαδίκτυο που θα κάνουν αυτήν την εργασία πολύ πιο εύκολη. Για παράδειγμα, μπορείτε να κατευθυνθείτε προς ColorSpace, εισαγάγετε τον δεκαεξαδικό κωδικό του χρώματος που έχετε επιλέξει και καθίστε! (Περισσότερα εργαλεία δημιουργίας παλετών χρωμάτων παρακάτω…)

Ποιο είναι το νόημα της προσθήκης δευτερευόντων χρωμάτων ούτως ή άλλως; Μερικές φορές ένα σχέδιο θα απαιτεί περισσότερα από μερικά μόνο βασικά χρώματα. Αυτό ισχύει ιδιαίτερα για ιστότοπους που είναι γεμάτοι με περιεχόμενο και σελίδες προορισμού – προϊόντα, υλικό ενεργοποίησης, στοιχεία με δυνατότητα λήψης κ.λπ..

Η Mailchimp διαθέτει ένα ευρύ και μελετημένο πρόγραμμα ιστότοπων για όλο το επώνυμο περιεχόμενό της.
Για παράδειγμα, Mailchimp έχει ένα ευρύ και καλά μελετημένο πρόγραμμα ιστότοπων για όλο το επώνυμο περιεχόμενό του.

Η δυνατότητα διαχωρισμού οπτικών κεφαλίδων, πλευρικών γραμμών, λεζάντων, κουμπιών και άλλων στοιχείων αυξάνει το ποσοστό μετατροπών και βελτιώνει την εμπειρία του χρήστη.

Εάν βρίσκεστε σε αυτό το σκάφος, αξίζει να προσθέσετε διαφορετικές αποχρώσεις και αποχρώσεις των κύριων χρωμάτων σας αντί να αναζητήσετε επιπλέον. Μερικές φορές η απλότητα είναι η καλύτερη στρατηγική.

4. Μην ξεχάσετε τα ουδέτερα χρώματα σας (λευκό, μαύρο γκρι)

Θα χρειαστείτε ουδέτερα χρώματα για κείμενο, για να δημιουργήσετε αντίθεση για σημαντικά στοιχεία ή ως χρώματα φόντου.

Η λειτουργία του ουδέτερου χρώματος στη σύγχρονη σχεδίαση ιστού μοιάζει περισσότερο με αυτή του λευκού χώρου – για να δώσει στους χρήστες ένα διάλειμμα και να τους αφήσουν χρόνο να αφομοιώσουν καλύτερα και να δώσουν προτεραιότητα στις πληροφορίες στη σελίδα.

Είναι καλή ιδέα να έχετε ένα σκούρο και ένα ανοιχτό ουδέτερο χρώμα για διαφορετικές περιπτώσεις χρήσης. Τα πιο κοινά ουδέτερα χρώματα είναι λευκό, μαύρο και γκρι. Μπορείτε επίσης να χρησιμοποιήσετε αποχρώσεις των κυρίαρχων χρωμάτων σας ως ουδέτερα, αν και αυτό είναι λίγο πιο δύσκολο να εναρμονιστεί.

Οδηγίες επωνυμίας Spotify
Για παράδειγμα, Το Spotify προσφέρει τέσσερις πιθανές εκδόσεις του λογότυπου, με σαφή οδηγία για τη χρήση του μαύρου λογότυπου σε ανοιχτόχρωμα φόντα και του λευκού σε σκούρο φόντο.

Εάν έχετε κολλήσει για ιδέες, επιστρέψτε στο Ντρίμπλα ή Σχεδιασμός και χρησιμοποιήστε την έγχρωμη αναζήτηση για να δείτε τι κάνουν οι άλλοι.

5. Προσθέστε πρωτεύοντα, δευτερεύοντα και ουδέτερα χρώματα στα ακόλουθα μέρη:

Πώς θα εφαρμόσετε το συνδυασμό χρωμάτων ιστότοπου; Ποια χρώματα πηγαίνουν πού και γιατί?

  • Πρωτεύοντα χρώματα μεταβείτε στα “καυτά σημεία” στην ιστοσελίδα σας. Θα πρέπει να χρησιμοποιήσετε αυτά τα έντονα, ζωντανά χρώματα για να προσελκύσετε την προσοχή των χρηστών και να τους παροτρύνετε να αναλάβουν δράση. Τα κουμπιά CTA, οι επικεφαλίδες, τα εικονίδια παροχών, οι φόρμες λήψης και άλλες σημαντικές πληροφορίες θα πρέπει να επισημαίνονται χρησιμοποιώντας τα κύρια χρώματα.
  • Δευτερεύοντα χρώματα χρησιμοποιούνται για την επισήμανση των λιγότερο σημαντικών πληροφοριών στον ιστότοπο, όπως δευτερεύοντα κουμπιά, υπότιτλοι, ενεργά στοιχεία μενού, φόντο ή υποστηρικτικό περιεχόμενο όπως συχνές ερωτήσεις και μαρτυρίες.
  • Ουδέτερα χρώματα πιθανότατα θα χρησιμοποιηθεί για κείμενο και φόντο, αλλά θα μπορούσε να είναι χρήσιμο σε ιδιαίτερα πολύχρωμα τμήματα του ιστότοπου, απλώς για να τον βοηθήσετε να τονίσετε και να εστιάσετε ξανά το μάτι.

6. Περάστε τη διαδικασία αρκετές φορές

Όταν επινοήσετε τελικά την παλέτα χρωμάτων σας, δοκιμάστε τη σε διάφορα σενάρια. Θα λειτουργήσει σε έντυπη μορφή; Τι γίνεται αν αποφασίσετε να ξεκινήσετε μια γραμμή εμπορευμάτων; Έχει επίδραση στους επισκέπτες που περιμένατε να έχει?

Είναι καλύτερο να ακολουθήσετε αυτήν τη διαδικασία μερικές φορές και να δημιουργήσετε μερικές διαφορετικές παλέτες χρωμάτων. Εάν κάποιος δεν πληροί όλες τις απαιτήσεις σας, θα έχετε ένα σχέδιο Β.

7. Καταιγισμός ιδεών όταν χρειάζεται

Τα όμορφα σχέδια χρωμάτων δεν είναι τόσο δύσκολο να συναντήσετε όταν ξέρετε πού να κοιτάξετε. Ακολουθεί μια λίστα με χρήσιμα εργαλεία που θα σας καθοδηγήσουν στην αναζήτησή σας για τους καλύτερους συνδυασμούς χρωμάτων ιστότοπου.

  1. ColorSpace – αυτός ο ιστότοπος μπορεί να δημιουργήσει έναν ολόκληρο συνδυασμό χρωμάτων βάσει του δεκαεξαδικού κώδικα ενός επιλεγμένου χρώματος.
  2. Χρώμα Adobe – αυτό το εργαλείο Adobe βασίζεται στην έννοια του χρωματικού τροχού και σας επιτρέπει να αναπτύξετε οποιοδήποτε είδος χρωματικού σχήματος ιστότοπου με λίγα κλικ. Μπορείτε επίσης να ανεβάσετε μια εικόνα για να εξαγάγετε χρωματικούς κωδικούς σύροντας και ρίχνοντας το αρχείο σας στο εργαλείο.
  3. Παλέτον – Το Paletton είναι ένα άλλο φιλικό προς το χρήστη εργαλείο για τη δημιουργία όμορφων χρωμάτων χωρίς καμία τεχνική ή σχεδιαστική γνώση.
  4. Ψύκτες – αυτό το εργαλείο είναι πραγματικά βολικό για τη δοκιμή του τρόπου συνεργασίας διαφορετικών χρωμάτων. Με τη διεπαφή μεταφοράς και απόθεσης, μπορείτε να μετακινήσετε τα χρώματα και να δείτε αν συγκρούονται ή λειτουργούν μαζί.
  5. ColorSpire – μια άλλη γεννήτρια χρωμάτων ιστότοπου.
  6. Χρώμα τροχού Canva – αυτό το δωρεάν εργαλείο είναι εξαιρετικά φιλικό προς το χρήστη και μπορεί να σας βοηθήσει να καταλάβετε ποια χρώματα φαίνονται υπέροχα μαζί και ποιοι συνδυασμοί χρωμάτων είναι όχι-όχι. Επιπλέον, υπάρχει πολύ εκπαιδευτικό περιεχόμενο για να απαντήσετε σε τυχόν ερωτήσεις σας σχετικά με τη θεωρία χρωμάτων και τον χρωματικό τροχό.

Συνήθεις ερωτήσεις:

1. Γιατί είναι σημαντικό το σχέδιο χρωμάτων ιστότοπου?

Η επίδραση του χρώματος στον ανθρώπινο εγκέφαλο είναι ένα πραγματικό φαινόμενο. Είτε αισθανόμαστε συνειδητά τα αποτελέσματα είτε όχι, τα χρώματα έχουν σημαντικό αντίκτυπο στον τρόπο με τον οποίο ο εγκέφαλός μας επεξεργάζεται πληροφορίες και τον κόσμο γύρω μας.

Η επιστήμη έχει δείξει ότι το κόκκινο μπορεί να αυξήσει την κυκλοφορία, ενώ το μπλε παράγει ένα ηρεμιστικό αποτέλεσμα.

Για παράδειγμα, το 2000, Η Γλασκόβη εισήχθη μπλε φωτισμός δρόμου για τη βελτίωση του τοπίου της πόλης, το οποίο κατά λάθος οδήγησε σε αισθητή μείωση του αριθμού των εγκλημάτων σε περιοχές που φωτίζονται από τα μπλε φώτα. Ομοίως, Ο σιδηρόδρομος Yamanote του Τόκιο Η γραμμή επέλεξε να εγκαταστήσει μπλε φώτα στο τέλος των πλατφορμών τρένου για να μειώσει τον αριθμό των αυτοκτονιών. Ως αποτέλεσμα, οι αυτοκτονίες σε αυτούς τους σταθμούς μειώθηκαν κατά 74%.

Αυτό πιθανώς εξηγεί γιατί οι περισσότερες ιατρικές και φαρμακευτικές μάρκες επιλέγουν το μπλε ως το κύριο χρώμα τους.

Ένα πράγμα είναι ξεκάθαρο: όταν χρησιμοποιούνται σωστά, τα χρώματα μπορούν να έχουν μεγάλη δύναμη πάνω μας. Γι ‘αυτό ακριβώς είναι τόσο σημαντική η επιλογή του σωστού συνδυασμού χρωμάτων για τον ιστότοπό σας.

Συνδυάζοντας διαφορετικά χρώματα και αποχρώσεις, μπορούμε να δημιουργήσουμε παλέτες χρωμάτων που φέρνουν αρμονία στο σχεδιασμό, προκαλούν τα επιθυμητά συναισθήματα, επηρεάζουν τις διαθέσεις των χρηστών και διαμορφώνουν την αντίληψή τους για τη μάρκα.

2. Τι συναισθήματα σχετίζονται με διαφορετικά χρώματα?

Υπάρχει ένας ολόκληρος τομέας της επιστήμης αφιερωμένος στη μελέτη των επιπτώσεων του χρώματος στην ανθρώπινη συμπεριφορά – ονομάζεται έγχρωμη ψυχολογία. Μέσα από πολλά πειράματα και έρευνα, Οι επιστήμονες έχουν αποδείξει ότι τα χρώματα προκαλούν πράγματι συναισθήματα: μερικοί μας κάνουν να είμαστε χαρούμενοι, άγρυπνοι ή χαλαροί, ενώ άλλοι μπαίνουν σε πιο σκοτεινά συναισθήματα και μπορούν να μας κάνουν να ανησυχούμε.

στην πραγματικότητα, Το 85% των αγοραστών είπε αγοράζουν προϊόντα με βάση μόνο το χρώμα.

Επιλέγοντας τη σωστή παλέτα χρωμάτων για τον ιστότοπό σας, μπορείτε να αλλάξετε τον τρόπο με τον οποίο οι άνθρωποι σκέφτονται την επωνυμία σας και να δημιουργήσουν διαρκή συναισθήματα που θα ωθήσουν τις αποφάσεις αγοράς των καταναλωτών.

Αλλά από πού να ξεκινήσω?

Εδώ είναι έξι βασικά χρώματα που προκαλούν μια μοναδική συναισθηματική απόκριση στους θεατές:

το κόκκινο

Το κόκκινο συμβολίζει τη σημασία, το πάθος και την επιθετικότητα. Σκεφτείτε το κόκκινο χαλί, την καρδιά ως σύμβολο αγάπης ή το σήμα στοπ. Απαιτεί προσοχή και, όταν πρόκειται για σχεδιασμό, πρέπει να χρησιμοποιείται με φειδώ ώστε να μην κατακλύζεται ή να κουράζεται ο θεατής.

Vodafone.
Πιστωτική εικόνα: Vodafone.

Πορτοκάλι

Το πορτοκάλι σχετίζεται με ενέργεια, παιχνιδιάρικο και χαμηλές τιμές. Η χρήση πορτοκαλιού στο σχεδιασμό ιστοσελίδων μπορεί να συμβάλει στην ανάδειξη της νεότητας της μάρκας και ακόμη και να προσελκύσει το ενδιαφέρον των αγοραστών ώθησης.

easyGroup
Πιστωτική εικόνα: easyGroup.

Κίτρινος

Ως το χρώμα του ήλιου, το κίτρινο μπορεί να παίξει σε θέματα ευτυχίας και διασκέδασης. Αλλά ενεργοποιεί επίσης την περιοχή άγχους στον εγκέφαλο, οπότε θα πρέπει να χρησιμοποιείται με προσοχή και σε διάφορες αποχρώσεις.

Κάμπια
Πιστωτική εικόνα: Κάμπια.

Πράσινος

Το χρώμα της φύσης, το πράσινο έχει ισχυρή σχέση με την υγεία, την ευημερία και τις φιλικές προς το περιβάλλον πρωτοβουλίες. Προσφέρεται όμορφα σε όλα τα είδη βιολογικών ή φυσικών προϊόντων και εμπορικών σημάτων που επικεντρώνονται στην ύπαιθρο και τη φύση.

Starbucks
Πιστωτική εικόνα: Starbucks.

Μπλε

Το μπλε χρώμα εμπνέει αμέσως την εμπιστοσύνη και προκαλεί ένα αίσθημα ασφάλειας. Επιπλέον, έχει αποδειχθεί ότι έχει μια ηρεμιστική επίδραση στον εγκέφαλο, οπότε εμφανίζεται επίσης ως φιλόξενο και φιλικό. Όντας τόσο ευέλικτο και ζωντανό, το μπλε είναι μια από τις πιο δημοφιλείς επιλογές χρωμάτων μεταξύ των σχεδιαστών ιστοσελίδων.

NHS
Πιστωτική εικόνα: NHS.

Μωβ

Το μωβ είναι το χρώμα των δικαιωμάτων. Συχνά σχετίζεται με την κομψότητα, το μυστήριο και τη δημιουργικότητα, είναι ένα χρώμα για τις μάρκες που κυνηγούν την πολυτέλεια ή την πολυτέλεια ή θέλουν να δημιουργήσουν μια πιο αισθησιακή γοητεία με τη σχεδίαση του ιστότοπού τους.

Cadbury
Πιστωτική εικόνα: Cadbury.

Σκέφτεστε ποια πρωτεύοντα και δευτερεύοντα χρώματα θα χρησιμοποιήσετε για τον συνδυασμό χρωμάτων του ιστότοπού σας θα σας επιτρέψει να επηρεάσετε την αίσθηση των ανθρώπων για τον ιστότοπό σας και την επωνυμία σας.

3. Τι πρέπει να γνωρίζω για τις διαφορές χρώματος φύλου / ηλικίας?

Οι ιστότοποι με την καλύτερη απόδοση έχουν ένα κοινό κοινό – γνωρίζουν το κοινό-στόχο τους. Είτε μέσω έρευνας αγοράς ή πολυετούς εμπειρίας στον κλάδο σας, θα πρέπει να είστε σε θέση να πείτε σε ποιον θέλετε να απευθυνθείτε. Γιατί; Επειδή τα χρώματα, οι επιλογές σχεδιασμού, η τυπογραφία και πράγματα όπως ο τόνος της φωνής επηρεάζουν διαφορετικά τα δημογραφικά στοιχεία.

Και δεν είναι μόνο διαφορετικά δημογραφικά στοιχεία που βλέπουν τα χρώματα με διαφορετικό τρόπο. Αποδεικνύεται ότι οι άνδρες και οι γυναίκες προτιμούν επίσης διαφορετικά χρώματα.

Σε μια μελέτη του 2012, Σχεδόν 2.000 άνδρες και γυναίκες ρωτήθηκαν αν προτιμούσαν μοβ, μπλε, πράσινο, κίτρινο, πορτοκαλί, κόκκινο ή ροζ.

Το 42% των ανδρών είπε ότι το μπλε ήταν το αγαπημένο τους χρώμα, ακολουθούμενο από πράσινο (25%) και μοβ (12%). Οι γυναίκες δήλωσαν επίσης ότι το μπλε ήταν το προτιμώμενο χρώμα τους (29%), ακολουθούμενο στενά από μωβ (27%) και πράσινο (19%).

Γράφημα πίτας: Τα αγαπημένα χρώματα της ανθρωπότητας
Γράφημα πίτας: τα αγαπημένα χρώματα της ανθρωπότητας.

Αν και λεπτή, η διαφορά στις προτιμήσεις χρωμάτων μεταξύ ανδρών και γυναικών θα μπορούσε να επηρεάσει σημαντικά την επιτυχία μιας μάρκας. Δεν είναι μόνο αυτό. Κατά τη δημιουργία ενός συνδυασμού χρωμάτων ιστότοπου που απευθύνεται και στα δύο φύλα, είναι επίσης σημαντικό να λάβετε υπόψη τα λιγότερο αγαπημένα χρώματα.

Ποια χρώματα προτιμούν τα διαφορετικά φύλα;

Ποια χρώματα προτιμούν τα διαφορετικά φύλα; Μερικοί έρευνα έχει γίνει προς αυτή την κατεύθυνση.

Φθηνά ή ανεξήγητα χρώματα

Σύμφωνα με αυτήν την έρευνα, τόσο οι άνδρες όσο και οι γυναίκες αντιπαθούν το καφέ και το πορτοκαλί. Το 17% των γυναικών έβαλε επίσης γκρίζο στη λίστα των τριών πρώτων λιγότερο αγαπημένων χρωμάτων. Είναι ενδιαφέρον ότι και τα δύο φύλα θεωρούν αυτά τα ίδια χρώματα ως «φθηνά» ή «φθηνά».

4. Ποια χρώματα προσελκύουν τη μεγαλύτερη προσοχή?

Οι σωστοί χρωματικοί συνδυασμοί είναι απαραίτητοι στο σχεδιασμό ιστοσελίδων καθώς βοηθούν τους σχεδιαστές καθιέρωση οπτικής ιεραρχίας. Η οπτική ιεραρχία, με τη σειρά της, επιτρέπει στους χρήστες να διακρίνουν τα βασικά στοιχεία σχεδόν αμέσως και να εντοπίζουν πρώτα τις πιο σημαντικές πληροφορίες.

Μουσείο Guggenheim
Για παράδειγμα, το Μουσείο Guggenheim χρησιμοποιεί το χρώμα για να τονίσει διαφορετικές τοποθεσίες και να επισημάνει τις πιο σημαντικές πληροφορίες στον ιστότοπο.

Αλλά δεν είναι μόνο διάφοροι συνδυασμοί χρωμάτων που δίνουν τη δομή της σχεδίασης. Τα χρώματα έχουν φυσικά τη δική τους ιεραρχία, η οποία καθορίζεται καλύτερα από την επίδραση που κάθε χρώμα κάνει στα συναισθήματα, τις αισθήσεις και τη συμπεριφορά μας.

Υπάρχουν έντονα χρώματα, όπως κόκκινο, κίτρινο ή πορτοκαλί, που είναι πρακτικά απαράδεκτο και απαιτούν την αδιαίρετη προσοχή μας. Και υπάρχουν πιο αδύναμα χρώματα, όπως γκρι, λευκό ή ανοιχτό μπλε, που βοηθούν στη δημιουργία αντίθεσης και στην εμφάνιση σημαντικών στοιχείων.

Οι σχεδιαστές λατρεύουν να χρησιμοποιούν έντονα χρώματα για να οξύνουν την πλοήγηση και να δημιουργούν μια πιο διαισθητική εμπειρία χρήστη. Εκτός αυτού, τα έντονα χρώματα μπορούν να χρησιμοποιηθούν για να δημιουργήσουν συνέπεια σε διαφορετικές σελίδες και να βοηθήσουν τους χρήστες να βρουν αυτό που χρειάζονται γρηγορότερα. Για παράδειγμα, χρησιμοποιώντας κόκκινο χρώμα για κουμπιά παρότρυνσης για δράση σε ολόκληρο τον ιστότοπό σας μπορεί να αυξήσει το ποσοστό μετατροπών σας και να κάνει το σχεδιασμό διεπαφής χρήστη πιο διαισθητικό.

5. Ποιες βιομηχανίες προτιμούν διαφορετικά χρώματα?

Έχουμε ήδη συζητήσει πόσο σημαντική είναι η έγχρωμη ψυχολογία για το branding, την ταυτότητα και το σχεδιασμό λογότυπου και πώς κάθε απόχρωση έχει διαφορετικό ψυχολογικό αντίκτυπο στον πελάτη.

Επομένως, δεν είναι καθόλου περίεργο να μαθαίνουμε ότι διαφορετικοί κλάδοι προτιμούν διαφορετικά χρώματα, καθώς προσπαθούν να προκαλέσουν συγκεκριμένα συναισθήματα και να δημιουργήσουν συσχετισμούς που σχετίζονται με τη βιομηχανία.

Μία μελέτη ανέλυσε 520 λογότυπα σε μια σειρά βιομηχανιών για να προσδιορίσετε ποιος τομέας προτιμά ποιο χρώμα. Τα ευρήματα συγκεντρώθηκαν σε ένα πολύχρωμο γράφημα, το οποίο αντιπροσωπεύει τις 20 κορυφαίες μάρκες σε κάθε κλάδο και τα κυρίαρχα χρώματα τους.

6. Πώς μπορώ να βελτιώσω την αναγνώριση επωνυμίας?

Το χρώμα είναι ένα από τα πιο σημαντικά στοιχεία μιας αξέχαστης μάρκας – παράλληλα με την τυπογραφία, το εμπορικό σήμα και τα γραφικά.

Γνωρίζουμε ότι το δικό μας ο εγκέφαλος λαχταρά τις οπτικές πληροφορίες. Η δημιουργία συναρπαστικού οπτικού περιεχομένου που χρησιμοποιεί τα σωστά χρώματα και την ευχάριστη σχεδίαση προκαλεί το ενδιαφέρον των χρηστών και κλειδώνει την προσοχή τους πολύ πριν από την επεξεργασία των πληροφοριών. Χρειάζεται ένα τέταρτο του δευτερολέπτου για τον εγκέφαλο να επεξεργαστεί οπτικά στοιχεία, ενώ η μέση διάρκεια προσοχής των καταναλωτών είναι μόλις 8 δευτερόλεπτα.

Ας κάνουμε ένα γρήγορο πείραμα. Κλείστε τα μάτια σας και σκεφτείτε αυτές τις τρεις μάρκες: Milka Chocolate, IKEA και Carlsberg. Είδατε τα χρώματα της επωνυμίας τους; Σίγουρα ο εγκέφαλός σας πλημμύριζε αμέσως με μωβ, μπλε-με-κίτρινο και πράσινες εικόνες.

Μίλκα
Πιστωτική εικόνα: Μίλκα.

Η έρευνα έχει δείξει ότι το χρώμα αυξάνει την αναγνώριση της μάρκας κατά 80%. Η οικοδόμηση καλύτερης αναγνώρισης επωνυμίας, με τη σειρά της, βοηθά τις εταιρείες να αποκτήσουν οικειότητα. Και όσο πιο οικείο είναι κάτι, τόσο περισσότερο το εμπιστευόμαστε.

Σπουδές ψυχολογίας χρώματος μπορεί επίσης να σας βοηθήσει να διασφαλίσετε ότι η επωνυμία σας σχετίζεται με τα σωστά συναισθήματα και να δημιουργήσετε ένα θετικό συναίσθημα στους καταναλωτές.

Αυτό μπορεί να μοιάζει με πολλή δουλειά για κάτι τόσο βασικό όσο το συνδυασμό χρωμάτων ιστότοπου, αλλά είναι ένα ζωτικό βήμα στη διαδικασία σχεδιασμού ιστότοπου. Για να μπορέσουμε να επηρεάσουμε πώς βλέπουν και αισθάνονται οι χρήστες για την επωνυμία σας, πρέπει να κατανοήσουμε καλύτερα τη σχέση μεταξύ χρωμάτων και συναισθημάτων.

7. Τι είναι τα ουδέτερα χρώματα?

Μπορείτε να δημιουργήσετε έναν ελκυστικό σχεδιασμό ιστότοπου χωρίς να χρησιμοποιήσετε κανένα χρώμα; Η απάντηση είναι ναι, αλλά αυτό απαιτεί καλή κατανόηση άλλων στοιχείων σχεδίασης, όπως η τυπογραφία, το πλέγμα και η διάταξη, για να προσελκύσουν την προσοχή των επισκεπτών.

Ο ασπρόμαυρος σχεδιασμός ιστότοπου είναι γνωστός ως μονοχρωματικός συνδυασμός χρωμάτων. Ο συνδυασμός ασπρόμαυρων χρωμάτων είναι ένα ασφαλές στοίχημα – αυτά είναι τα δύο χρώματα που δεν θα ξεφύγουν ποτέ από τη μόδα. Ωστόσο, ένα μονοχρωματικό συνδυασμό χρωμάτων μπορεί να βασίζεται σε οποιοδήποτε χρώμα, αρκεί να προέρχεται από μία μόνο απόχρωση και να επεκτείνεται χρησιμοποιώντας τις αποχρώσεις, τις αποχρώσεις και τους τόνους του.

Ένας καλά εκτελεσμένος μονοχρωματικός σχεδιασμός διασφαλίζει ότι ένας ιστότοπος ξεχωρίζει ως εξελιγμένος, κομψός και διαχρονικός.

Ειδική Προσφορά Στούντιο
Εδώ είναι παράδειγμα μονοχρωματικού συνδυασμού χρωμάτων που χρησιμοποιεί το κόκκινο ως βασική απόχρωση.

Στο μειονέκτημα, μπορεί να είναι μια πρόκληση να λάβετε μια συναισθηματική απάντηση από τους επισκέπτες σας. Χωρίς χρώμα, τα μονοχρωματικά σχέδια ιστοσελίδων στερούνται επίσης προσωπικότητας και συναισθημάτων. Οι σχεδιαστές πρέπει να σκεφτούν δημιουργικά την ανάπτυξη μιας συναρπαστικής εμπειρίας περιήγησης όταν επιλέγουν ένα μονοχρωματικό συνδυασμό χρωμάτων.

Η έρευνα σχετικά με τον μινιμαλισμό δείχνει το σχεδιασμό ιστοσελίδων ότι η χρήση ενός χρώματος προφοράς σκόπιμα και με συνέπεια σε όλη τη σχεδίαση βοηθά στην ανάδειξη των πιο σημαντικών πληροφοριών και παρακινεί τους χρήστες να αναλάβουν δράση.

Μία μελέτη ανέλυσε 520 λογότυπα
Μία μελέτη ανέλυσε 520 λογότυπα.

Το μπλε, το κόκκινο και το πράσινο είναι τα τρία κυρίαρχα χρώματα που εμφανίζονται σχεδόν σε κάθε κλάδο.

Ωστόσο, υπάρχει ένας εξαίρεση που ισχύει για το μπλε χρώμα. Σύμφωνα με τους ερευνητές τροφίμων, όταν οι άνθρωποι έψαχναν για τρόφιμα, έμαθαν να αποφεύγουν τοξικά ή χαλασμένα αντικείμενα, τα οποία ήταν συχνά μπλε, μαύρο ή μοβ. Όταν σερβίρεται φαγητό βαμμένο μπλε για να μελετήσει θέματα, χάνει την όρεξη.

Εάν κάθε άλλη μάρκα στον κλάδο σας χρησιμοποιεί τα ίδια χρώματα, μπορεί να φαίνεται αδύνατο να ξεχωρίσετε και να δημιουργήσετε μια αναγνωρίσιμη μάρκα. Γι ‘αυτό είναι σημαντικό να συντάξετε ένα ευρύτερο συνδυασμό χρωμάτων που θα ισχύει για όλα τα υλικά επωνυμίας και μάρκετινγκ, αντί να πηγαίνετε με έναν απλό συνδυασμό πρωτογενών και δευτερευόντων χρωμάτων.

8. Υπάρχουν παραδείγματα καλών χρωμάτων ιστότοπου;?

Υπάρχουν! Ακολουθούν 20 παραδείγματα για να εμπνεύσετε το συνδυασμό χρωμάτων του ιστότοπού σας.

1. Φωτεινό χρώμα έμφασης

Crescosa
Πιστωτική εικόνα: Crescosa.

Η χρήση ενός χρώματος έμφασης στο συνδυασμό χρωμάτων του ιστότοπού σας είναι ένας από τους πιο αποτελεσματικούς τρόπους για να κατευθύνετε την προσοχή του επισκέπτη στα πιο σημαντικά στοιχεία της σελίδας. Στο παρακάτω παράδειγμα, τρία έντονα χρώματα – κίτρινο, μοβ και κόκκινο – χρησιμοποιούνται για να ξεχωρίσουν τις βασικές υπηρεσίες και να δημιουργήσουν μια αξέχαστη ιδέα.

2. Ένα φωτεινό αλλά ισορροπημένο σχέδιο χρωμάτων

Τέλεια καταιγίδα
Πιστωτική εικόνα: Τέλεια καταιγίδα.

Αυτός ο συνδυασμός χρωμάτων ιστότοπου ισορροπεί δύο ζωντανά χρώματα, χρησιμοποιώντας το έντονο κόκκινο ως χρώμα έμφασης.

Ανακαλύψτε πιο φωτεινά χρώματα χρωμάτων έμφασης Χρώμα Adobe.

3. Φρέσκο ​​και οργανικό χρώμα

Ηρεμία
Πιστωτική εικόνα: Ηρεμία.

Το ρητό ότι τρώμε πρώτα με τα μάτια μας είναι ακριβές. Ο εγκέφαλός μας λαμβάνει ένα σήμα από τα μάτια πολύ πριν αρχίσουν να δουλεύουν οι γεύσεις μας. Το χρώμα είναι συχνά το πρώτο στοιχείο που παρατηρούν τα μάτια μας για ένα προϊόν διατροφής, το οποίο προκαθορίζει πώς αντιλαμβανόμαστε τη γεύση και τη γεύση αυτού που πρόκειται να φάμε. Στο παρακάτω παράδειγμα, βλέπουμε πώς η χρήση ενός συνδυασμού φυσικών χρωμάτων, που κυριαρχείται από κίτρινα, άσπρα και πράσινα χρώματα, δημιουργεί μια οργανική και φρέσκια εμφάνιση.

4. Γήινοι τόνοι

LaunchBuzz
Πιστωτική εικόνα: LaunchBuzz.

Αυτός ο συνδυασμός χρωμάτων ιστότοπου χρησιμοποιεί ένα ουδέτερο χρώμα φόντου για να αναδείξει το χρώμα ροδάκινου του προϊόντος.

Ανακαλύψτε περισσότερα φρέσκα χρώματα Χρώμα Adobe.

5. Ήρεμο και μινιμαλιστικό σχέδιο χρωμάτων

Εργαστείτε με υπευθυνότητα
Πιστωτική εικόνα: Εργαστείτε με υπευθυνότητα.

Αυτός ο απλός συνδυασμός γήινων, ήρεμων χρωμάτων δημιουργεί μια χαλαρωτική ατμόσφαιρα και θέτει τον κατάλληλο τόνο για το μήνυμα του ιστότοπου – ξεπερνώντας το άγχος και το άγχος. Είναι επίσης ένα παράδειγμα του πώς μια περιορισμένη παλέτα χρωμάτων μπορεί να εξακολουθεί να είναι ισχυρή, επηρεάζοντας τη διάθεση και τη συμπεριφορά ενός επισκέπτη.

6. Κομψό και χαλαρό χρωματικό σχέδιο

Εσοχή
Πιστωτική εικόνα: Εσοχή.

Συνδυάζοντας διαφορετικές αποχρώσεις του μπλε με ταιριαστές παστέλ, αυτό το κομψό συνδυασμό χρωμάτων ιστότοπου δημιουργεί μια ήρεμη και ονειρική ατμόσφαιρα.

Ανακαλύψτε περισσότερα μινιμαλιστικά χρώματα Χρώμα Adobe.

7. Σχέδιο παστέλ και σίγασης χρωμάτων

Συνένοχος
Πιστωτική εικόνα: Συνένοχος.

Χρησιμοποιώντας ένα απαλό, παστέλ χρωματικό συνδυασμό, αυτός ο σχεδιασμός ιστότοπου καταφέρνει να δημιουργήσει μια εντύπωση οργανικής ροής και οπτικής δομής. Είναι ευχάριστο και ισορροπημένο, προσελκύοντας τον επισκέπτη να κολλήσει και να συνεχίσει την περιήγησή του.

8. Μαλακό και ελκυστικό συνδυασμό χρωμάτων

Cédric Pereira
Πιστωτική εικόνα: Cédric Pereira.

Αυτός ο συνδυασμός χρωμάτων ιστότοπου συνδυάζει πολλά παστέλ χρώματα για να δημιουργήσει μια απαλή και ελκυστική εμφάνιση.

Ανακαλύψτε περισσότερα παστέλ χρώματα Χρώμα Adobe.

9. Ζωντανό και έντονο χρωματικό σχήμα

MA Αληθινή κάνναβη
Πιστωτική εικόνα: MA Αληθινή κάνναβη.

Αυτή η ζωντανή παλέτα χρωμάτων συνδυάζει έντονο χρώμα και ενέργεια, συνδυάζει έντονο κίτρινο και ζωντανό μπλε, δημιουργώντας έναν ισχυρό συνδυασμό. Με έντονα χρώματα και ενδιαφέροντα στοιχεία σχεδίασης, ο ιστότοπος αφήνει μια εντυπωσιακή εντύπωση και μια γεύση εσπεριδοειδών.

10. Ζωντανή αντίθεση

Σχεδιασμός Dropbox
Πιστωτική εικόνα: Σχεδιασμός Dropbox.

Σε αυτό το συνδυασμό χρωμάτων, δύο ζωντανά χρώματα χρησιμοποιούνται για τη δημιουργία μιας αντίθεσης που τραβάει τα μάτια.

Ανακαλύψτε περισσότερα ζωντανά χρώματα Χρώμα Adobe.

11. Πολύχρωμο και μοντέρνο συνδυασμό χρωμάτων

Επιβεβαιώνουμε
Πιστωτική εικόνα: Επιβεβαιώνουμε.

Αυτός ο ιστότοπος δημιουργεί έναν εκλεπτυσμένο και μοντέρνο σχεδιασμό συνδυάζοντας προϊόντα με έντονα χρώματα και ουδέτερο φόντο. Με ένα χρώμα έμφασης για κουμπιά CTA, ο σχεδιασμός της ιστοσελίδας λειτουργεί εξαιρετικά για να καθοδηγήσει τον επισκέπτη στην επιθυμητή δράση.

12. Διασκεδαστικό και παιχνιδιάρικο

Το σχέδιό σας, ο πλανήτης σας
Πιστωτική εικόνα: Το σχέδιό σας, ο πλανήτης σας.

Συνδυάζοντας πολλά διαφορετικά χρώματα και αποχρώσεις, αυτός ο ιστότοπος δημιουργεί ένα παιχνιδιάρικο συνδυασμό χρωμάτων που χρησιμοποιεί το χρώμα για τη δημιουργία κατηγοριών πληροφοριών.

Ανακαλύψτε περισσότερα πολύχρωμα χρώματα Χρώμα Adobe.

13. Μονοχρωματικό σχήμα χρωμάτων

Περιστρέψτε το στούντιο
Πιστωτική εικόνα: Περιστρέψτε το στούντιο.

Παίζοντας με υφή και διάφορες αποχρώσεις του μαύρου και του γκρι, αυτή η χρωματική παλέτα βοηθά στη δημιουργία ενός μυστηριώδους αλλά προσεγγίσιμου σχεδιασμού ιστότοπου. Η έλλειψη χρώματος σε αυτόν τον σχεδιασμό ιστοσελίδων αναγκάζει τον επισκέπτη να επικεντρωθεί σε άλλα στοιχεία, όπως αντίγραφο, σχήματα και γραφικά.

14. Κομψό και ειρηνικό

Μόουλενς
Πιστωτική εικόνα: Μόουλενς.

Παίζοντας με μερικές αποχρώσεις του πράσινου, αυτός ο σχεδιασμός ιστότοπου δημιουργεί βάθος και χρησιμοποιεί ένα ήρεμο, καθαρό συνδυασμό χρωμάτων για να διατηρεί τους επισκέπτες αφοσιωμένους.

Ανακαλύψτε περισσότερα μονοχρωματικά χρώματα Χρώμα Adobe.

15. Ζωντανό και έντονο χρώμα

Μεγάλα ελάφια ματιών
Πιστωτική εικόνα: Μεγάλα ελάφια ματιών.

Διαθέτοντας ένα ευκρινές συνδυασμό χρωμάτων, αυτός ο σχεδιασμός ιστότοπου δημιουργεί μια ισχυρή πρώτη εντύπωση. Μη φοβισμένος να οδηγήσει με έντονα χρώματα, ο σχεδιασμός της ιστοσελίδας συνδυάζει διαφορετικές αποχρώσεις για να δημιουργήσει μια έντονη αντίθεση και να προσελκύσει το βλέμμα του επισκέπτη – από βαθύ ροζ έως πράσινο κιρκίρι και πλούσιο μπλε, ο συνδυασμός χρωμάτων είναι εκλεκτικός αλλά ισορροπημένος.

16. Δεν φοβάμαι τα τολμηρά χρώματα

Χρώμα στον κωδικό
Πιστωτική εικόνα: Χρώμα στον κωδικό.

Με υψηλή αντίθεση και τρία ζωντανά χρώματα στο παιχνίδι, αυτός ο συνδυασμός χρωμάτων ιστότοπου δημιουργεί μια τολμηρή εντύπωση.

Ανακαλύψτε περισσότερα ζωντανά χρώματα Χρώμα Adobe.

17. Κομψό και πολυτελές χρωματικό σχέδιο

Τσερ Άμι
Πιστωτική εικόνα: Τσερ Άμι.

Αυτό το όμορφο συνδυασμό χρωμάτων αποπνέει μια βασιλική, κομψή εμφάνιση συνδυάζοντας βαθύ μπλε με χρυσές αποχρώσεις. Πρόκειται για ένα κλασικό συνδυασμό χρωμάτων με μια μοντέρνα πινελιά που προσφέρει μια ισχυρή οπτική εμπειρία και τοποθετεί αμέσως τη μάρκα ως παίκτη υψηλών προδιαγραφών.

18. Με ένα άγγιγμα χρυσού

Paola Krauze
Πιστωτική εικόνα: Paola Krauze.

Το παρακάτω παράδειγμα δείχνει πώς ρίχνετε σε ένα χρώμα που έχει ισχυρούς πολιτιστικούς συλλόγους – σε αυτήν την περίπτωση. χρυσός – μπορεί να αλλάξει τη δυναμική ολόκληρου του σχεδιασμού και να το κάνει πιο μαγευτικό.

Ανακαλύψτε πιο κομψά χρώματα Χρώμα Adobe.

19. Εταιρικό αλλά ενεργητικό σχέδιο χρωμάτων

Πλήθος μπαμπού
Πιστωτική εικόνα: Πλήθος μπαμπού.

Στηριζόμενη σε μια ζωντανή αλλά μάλλον παραδοσιακή παλέτα χρωμάτων, αυτός ο σχεδιασμός ιστότοπου καταφέρνει να προκαλέσει εμπιστοσύνη δημιουργώντας μια εντύπωση μιας σύγχρονης μάρκας μελλοντικής σκέψης. Με έντονη αντίθεση και μεγάλη αναγνωσιμότητα, ο συνδυασμός κόκκινου και μπλε δίνει στον ιστότοπο μια δυναμική και ισχυρή ατμόσφαιρα.

20. Παραδοσιακό αλλά ενδιαφέρον

Creddy
Πιστωτική εικόνα: Creddy.

Ο κλασικός συνδυασμός κόκκινου και μπλε ζωντανεύει σε αυτόν τον δροσερό σχεδιασμό ιστότοπου.

Ανακαλύψτε περισσότερα εταιρικά χρώματα Χρώμα Adobe.

Τώρα ξέρετε πώς να σχεδιάσετε τον εαυτό σας ένα σχέδιο χρωμάτων ιστότοπου

Η αλήθεια είναι ότι δεν χρειάζεται να είστε σχεδιαστής για να συντάξετε ένα όμορφο συνδυασμό χρωμάτων ιστότοπου. Με μια ευρεία κατανόηση της ψυχολογίας χρώματος, των θεμελιωδών στοιχείων της θεωρίας χρωμάτων και ενός οπλοστάσιου χρήσιμων εργαλείων, μπορείτε να αναπτύξετε μια παλέτα χρωμάτων που δίνει στην επωνυμία σας μια ισχυρή οπτική ταυτότητα.

Αφιερώστε χρόνο για να εξερευνήσετε δημιουργικά παραδείγματα, δοκιμάστε διαφορετικούς συνδυασμούς χρωμάτων και βρείτε συμπληρωματικά χρώματα που λειτουργούν μαζί. Η εξαιρετική σχεδίαση είναι σχετική – αν λειτουργεί για την επωνυμία σας, ενισχύει την αφοσίωση και ενισχύει την αναγνώριση της επωνυμίας, αυτό είναι που έχει σημασία.

Τώρα φορέστε το καπέλο του σχεδιαστή σας και αρχίστε να πειραματίζεστε με τις παλέτες χρωμάτων σας!

Εγγραφείτε στο Newsletter μας

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map