Web Design – Εισαγωγή στη θεωρία των χρωμάτων

Το άρθρο δημοσιεύτηκε από τον theodion

Ο Θεόδωρος Διονυσίου εργάζεται στην Novel Web Designs και ειδικεύεται στο χώρο της κατασκευής ιστοσελίδων και προώθησης ιστοσελίδων (SEO).


Web design – Η σημασία των χρωμάτων

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

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

Ορολογία χρωμάτων

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

χρωματικός τροχός

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

Τα τρία βασικά χρώματα είναι το κόκκινο, το μπλε και το κίτρινο. Αυτά τα χρώματα είναι τα χρώματα βάσης που συνθέτουν όλα τα άλλα χρώματα στον τροχό.

Ανακατέψτε τα βασικά χρώματα μαζί, και παίρνετε τα δευτερεύοντα χρώματα. Αυτά είναι το πορτοκαλί, το πράσινο και το μοβ.

Τα τριτοβάθμια χρώματα αποτελούνται από το μεσαία χρώματα όπως το κίτρινο-πράσινο και μπλε-πράσινο. Έχουν δημιουργηθεί με τη μίξη ενός βασικού και ενός δευτερεύοντος χρώματος.

Απόχρωση (hue), κορεσμός (saturation) και φωτεινότητα (value)

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

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

Στο διάγραμμα, στην εξωτερική πλευρά του χρωματικού τροχού βρίσκονται οι «καθαρές» αποχρώσεις (hues). Καθώς μετακινήστε προς το κέντρο, η απόχρωση κυριαρχεί όλο και λιγότερο.Όταν φτάσετε στο κέντρο του τροχού, δεν υπάρχει απόχρωση, μόνο άσπρο.

Hue Value Contrast

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

Tint: μίξη του χρώματος  με το άσπρο για την αύξηση της φωτεινότητας.

Shade: μίξη του χρώματος  με το μαύρο για μείωση της φωτεινότητας.

Tone: μίξη του χρώματος (pure hue) με το γκρίζο για αλλαγή του τόνου.

Συστήματα χρωμάτων και η χρήση τους στο web design

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

monochromatic

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

triad

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

analogous

Complementary: είναι τα χρώματα που “ζευγαρώνουν” με τα αυτά που βρίσκονται απέναντι στο χρωματικό τροχό. Λόγω του υψηλού contrast χρειάζεται ιδιαίτερη προσοχή ώστε το web design να μην είναι ενοχλητικό. Χρησιμοποιείστε αποχρώσεις και διαφορετικούς τόνους των συμπληρωματικών χρωμάτων ώστε να “μαλακώσετε” την εικόνα.

complements

Split Complements: To σύστημα βασίζεται σε τρία χρώματα. Χρησιμοποιεί ένα χρώμα και τα δύο αντίστοιχα που γειτνιάζουν με το συμπληρωματικό. Προσφέρει υψηλή αντίθεση χωρίς την ισχυρή ένταση του συμπληρωματικού (complementary) συστήματος.

split-complements

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

double-complementary

Θερμά και ψυχρά χρώματα

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

warm-cool

Πηγή: novelwebdesigns.com


Σημείωση: Μην βάζετε keywords στο πεδίο για το όνομα καθώς επίσης και links προς άσχετες ιστοσελίδες με τη θεματολογία του άρθρου. Οι διαχειριστές του ifeed θα μαρκάρουν αυτόματα αυτά τα σχόλια ως spam!

Σχολιάστε

Η ηλ. διεύθυνσή σας δεν δημοσιεύεται. Τα υποχρεωτικά πεδία σημειώνονται με *

Επιτρέπονται τα εξής στοιχεία και ιδιότητες HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Αποκτήστε τα Παρακάτω Δύο
ΔΩΡΕΑΝ Ebook

seo ebook

Τα συγκεκριμένα ebook θα σας αποκαλύψουν κάποια από τα μεγαλύτερα μυστικά για να αυξήσετε τις θέσεις σας στο Google, καθώς επίσης και τα έσοδα σας μέσω internet!!!

  • Ανεβείτε Εύκολα Στο Google
  • Αποκτήστε Υψηλή Επισκεψιμότητα
  • Κερδίστε Περισσότερα Χρήματα

Εγγραφείτε στο Εβδομαδιαίο NEWSLETTER

&

Αποκτήστε ΔΩΡΕΑΝ το SEO Ebook
"Αποτελεσματικό Link Building" & το Ebook "Χρήματα Μέσω Internet".