Πλήρης κατανόηση της αντίθεσης στο σχεδιασμό
Συνήθως το θέμα της αντίθεσης είναι αποκλειστικά για αρχάριους. Τα βιβλία θα πουν ότι "ο ασπρόμαυρος έχει αντίθεση, κόκκινο και πορτοκαλί δεν" - αλλά υπάρχουν πολλά περισσότερα σε αυτό.
Τα βιβλία αρχαρίων συνήθως αγγίζουν μόνο την αντίθεση χρώματος, αλλά τι γίνεται με το μέγεθος και την αντίθεση σχήματος; Συχνά ο ευκολότερος τρόπος για να πείτε έναν ερασιτέχνη σχεδιαστή από έναν επαγγελματία είναι να εξετάσει τη χρήση της αντίθεση.
Δημιουργώντας μια δομή της σημασίας χρησιμοποιώντας το μέγεθος, το σχήμα και το χρώμα είναι αυτό που δίνει μια σελίδα κρούση και ευανάγνωστο στον αναγνώστη.
Σε αυτήν την ανάρτηση, θα εξετάσουμε την αντίθεση με λεπτομέρεια, εξετάζοντας τη μεγάλη τυπογραφία, τα funky σχήματα, τα σαφή διαχωρίσματα, τις εικόνες και τον τρόπο με τον οποίο ταιριάζουν σωστά χρησιμοποιώντας την αντίθεση για μια καλή εμπειρία χρήστη.
Εισαγωγή στην αντίθεση
Η αντίθεση μπορεί να είναι ορίζεται ως "η διαφορά στις οπτικές ιδιότητες που κάνει ένα αντικείμενο (ή την αναπαράστασή του σε μια εικόνα) να διακρίνεται από άλλα αντικείμενα και το φόντο." Σε απλά αγγλικά που θα μπορούσε να περιγραφεί στο πιο βασικό επίπεδο ως "πράγματα που φαίνονται διαφορετικά μεταξύ τους. "
Για τους σχεδιαστές σε όλους τους περιπάτους της πρακτικής, αλλά κυρίως οι σχεδιαστές ιστοσελίδων, η αντίθεση είναι στη ρίζα σχεδόν όλων. Προσπαθούμε συνεχώς να δημιουργούμε ιεραρχίες σημαντικές, να προσελκύουμε ανθρώπους σε ορισμένες περιοχές μιας σελίδας και να επικοινωνούμε με ένα σαφές και συνοπτικό μήνυμα στην ίδια την καρδιά του έργου μας. Η δημιουργία σχέσεων μεταξύ διαφόρων στοιχείων ενός σχεδίου είναι μόνο το πιο σημαντικό πράγμα που μπορείτε να κάνετε. Ίσως το έχετε ήδη κάνει πολλά, συνειδητά ή όχι.
Τα εμφανή παραδείγματα της αντίθεσης είναι ασπρόμαυρα, μεγάλα και μικρά, γρήγορα και αργά, παχιά και λεπτά. Τα αντίθετα είναι ο ευκολότερος τρόπος να αντιληφθείς ποια αντίθεση είναι, αλλά όταν εφαρμόζεις την αντίθεση με το σχεδιαστικό έργο, δεν είναι ποτέ τόσο ασπρόμαυρο. Εάν αναρωτιέστε, εκεί έρχεται το ρητό για μια κατάσταση "ασπρόμαυρη", η οποία επίσης οδηγεί στο ρητό ότι κάτι είναι "γκρίζα περιοχή". Στο σχεδιασμό συγκρίνουμε συχνά πράγματα που είναι διαφορετικά αλλά όχι αντίθετα, για παράδειγμα ένα κουμπί H1 και ένα h1 ή ένα κουμπί "προσθέστε στο καλάθι" και ένα κουμπί "check out". Στο σημείο αυτό παίζουν περισσότερα επίπεδα αντίθεσης.
Ας ρίξουμε μια ματιά στους διαφορετικούς τύπους αντίθεση και μερικά παραδείγματα για το πώς χρησιμοποιούνται στο σχεδιασμό ιστοσελίδων.
Χρώμα Αντίθεση
Το πιο συνηθισμένο παράδειγμα όλων, αυτό είναι λίγο όπου όλα ξεκινούν. Εάν τα δύο χρώματα είναι διαφορετικά μεταξύ τους (ας πούμε, μαύρο και άσπρο) έχουν υψηλή αντίθεση, ενώ αν είναι πολύ παρόμοια (κόκκινο και πορτοκαλί) τότε έχουν χαμηλή αντίθεση.
Το TekRoc χρησιμοποιεί πολύ προφανή χρωματική αντίθεση εδώ, επικαλύπτοντας φωτεινή και ζωντανή εικόνα πάνω από ένα πολύ σκούρο φόντο. Το φωτεινό πορτοκαλί και το μπλε ξεχωρίζουν ξεκάθαρα και το μάτι αμέσως τραβιέται πάνω τους πάνω από όλα τα άλλα πράγματα στη σελίδα.
Ο Tim Van Damme κάνει εξαιρετική χρήση της αντίθεσης χρώματος στο σχεδιασμό της τοποθεσίας GoWalla. Όχι μόνο το πολύχρωμο περίγραμμα στην κορυφή της σελίδας ξεχωρίζει και δημιουργεί οπτικό ενδιαφέρον διαφορετικά από το ανοιχτό φόντο, αλλά έχει προσθέσει επίσης εξαιρετικά λεπτές σκιάσεις 1px στο κείμενο των κουμπιών. Το ελαφρώς πιο σκούρο πορτοκάλι βοηθά πραγματικά να δημιουργηθεί αντίθεση μεταξύ του λευκού κειμένου και του πορτοκαλί φόντου.
Envato είναι οι κύριοι των λεπτών αντιθέσεων και η τάση να χρησιμοποιείτε σύνορα 1px γι 'αυτό μπορεί πιθανώς να κατατεθεί σε αυτούς περισσότερο από οποιονδήποτε άλλο. Όλοι οι ιστότοποί τους διαθέτουν πολλαπλά σύνορα ενός εικονοστοιχείου για να δημιουργήσουν αντίθεση μεταξύ τμημάτων Στο στιγμιότυπο οθόνης επάνω από τις δύο περιοχές περιεχομένου θα μπορούσαν να χωριστούν μόνο από το διάστημα ή από μία γραμμή, ωστόσο χρησιμοποιώντας δύο γραμμές (ένα σκούρο, ένα φως) δημιουργούν μια λεπτή αντίθεση μεταξύ των δύο τμημάτων που είναι εξαιρετικά αποτελεσματική.
Μέγεθος Αντίθεση
Η επόμενη πιο κοινή μορφή αντίθεσης είναι η χρήση μεγέθους. Κάτι μεγάλο δίπλα σε κάτι μικρό γενικά υποδεικνύει ότι το μεγαλύτερο στοιχείο είναι πολύ σημαντικότερο. Αυτό είναι σωστό, λέμε ότι αυτό το μέγεθος έχει σημασία!
Το MadeByWater είναι το χαρτοφυλάκιο σχεδιασμού της Jordan Vitanov. Χρησιμοποιεί αντίθεση μεγέθους με εξαιρετικά μεγάλη τυπογραφία για να μεταφέρει αμέσως ένα απόσπασμα από τον Bruce Lee, ο οποίος καθορίζει τον λόγο για τον οποίο επέλεξε να μαρκαριστεί με το όνομα MadeByWater.
28Thiers είναι ένα ελκυστικό bar στην Γαλλία. Ο ιστότοπός τους κάνει μεγάλη χρήση της αντίθεσης μεγέθους για να τραβήξει την προσοχή σας αμέσως στη μεγάλη φωτογραφία του Martini με διάφορα συστατικά που το περιβάλλουν. Είναι άμεσα σαφές ότι αυτό είναι το πιο σημαντικό στοιχείο στη σελίδα και ο σχεδιαστής θέλει να κοιτάξετε την εικόνα και να πωληθείτε στο γεγονός ότι είναι ένα εξαιρετικά αριστοκρατικό ίδρυμα.
Το SlideScreen κάνει πολλαπλές χρήσεις της αντίθεσης μεγέθους στην τοποθεσία τους. Εκτός από την εμφάνιση του προϊόντος τους με ένα μεγάλο στιγμιότυπο οθόνης, χρησιμοποιούν επίσης πολύ μεγάλα κουμπιά για τις κύριες κλήσεις τους προς δράση. Θέλουν να παρακολουθήσετε το βίντεο του προϊόντος τους σε δράση και, στη συνέχεια, θέλουν να το κατεβάσετε. Αυτά είναι τα πιο σημαντικά στοιχεία της σελίδας, ώστε να είναι σημαντικά μεγαλύτερα από τα άλλα που τους περιβάλλουν.
Αντίθεση σχήματος
Η αντίθεση σχήματος σημαίνει ότι τα πράγματα είναι αξιοσημείωτα από τη διαφορά στη φυσική τους μορφή σε σύγκριση με άλλα πράγματα στη σελίδα. Στο πιο βασικό επίπεδο αυτό μπορεί να χρησιμοποιηθεί σε πράγματα όπως η προσθήκη στρογγυλεμένων γωνιών σε κουμπιά, αλλά σε πιο ακραία επίπεδα μπορεί να προσελκύσει πολύ περισσότερη προσοχή.
Το Anebstar χρησιμοποιεί αντίθεση σχήματος για να παρουσιάσει τρεις σημαντικές εικόνες στην κεφαλίδα. Επειδή τα περισσότερα πράγματα στον ιστό είναι ορθογώνια, ένας από τους ευκολότερους τρόπους για να επιτευχθεί η αντίθεση σχήματος είναι να χρησιμοποιήσετε έναν κύκλο. Φυσικά αυτό το παράδειγμα έχει επίσης μια μικρή αντίθεση μεγέθους αναμειγνύεται επίσης, αλλά μπορείτε να δείτε καθαρά πώς τα κυκλικά στοιχεία ξεχωρίζουν από οτιδήποτε άλλο στη σελίδα.
Το Carbonmade είναι μια εκπληκτική τοποθεσία με πραγματικό συνδυασμό υπέροχων εικονογραφήσεων και καλά παρουσιασμένου περιεχομένου. Ένα απλό κουμπί εγγραφής εδώ θα είχε δουλέψει, αλλά το μέγεθος και η χρωματική αντίθεση πιθανότατα δεν θα το είχαν ξεχωρίσει αρκετά από το πολυάσχολο φόντο. Προσθέτοντας ένα φιλικό χταπόδι πίσω από το κουμπί αυτό του δίνει αυτή τη διαφορά στο σχήμα για να τραβήξει το μάτι κατευθείαν σε αυτό.
Το WireframePlus χρησιμοποιεί ένα απλό αλλά εξαιρετικά αποτελεσματικό αντίγραφο σχήματος bit για να τονίσει την τιμή των υπηρεσιών του. Θέλουν να διαβάσετε το περιεχόμενό τους, αλλά πάνω απ 'όλα προσπαθούν να σας πουλήσουν με τη μεγάλη τιμή τους, τοποθετώντας πίσω τους ένα μεγάλο κύκλο.
Θέση αντίθεσης
Η δημιουργία αντίθεσης στη θέση είναι ένας πολύ προσεκτικός τρόπος για να δημιουργήσετε μια ιεραρχία στοιχείων καθαρά χρησιμοποιώντας διαφορετικές ευθυγραμμίσεις. Τον τελευταίο καιρό η τεχνική αυτή έγινε δημοφιλής από ανθρώπους όπως ο Elliot Jay Stocks, ο οποίος το χρησιμοποίησε στο έπακρο στην πιο πρόσφατη περιοχή χαρτοφυλακίου του.
Το Elliot Jay Stocks χρησιμοποιεί ένα λεπτομερές πλέγμα για να καθορίσει την ευθυγράμμιση όλων των στοιχείων στον ιστότοπό του. Προσοχή απευθύνεται σε συγκεκριμένους τομείς, με την τοποθέτηση τους προς τα αριστερά ή προς τα δεξιά αντίστοιχα. Σε αυτό το συγκεκριμένο στιγμιότυπο της οθόνης, η εισαγωγική παράγραφος ξεχωρίζει πραγματικά επειδή είναι ευθυγραμμισμένη πιο μακρινά προς τα αριστερά, όπου το μάτι κοιτάει πρώτα να διαβάσει κάτι. Αυτός ο τύπος ευθυγράμμισης έχει "εμπνεύσει" πολλούς άλλους σχεδιαστές τους τελευταίους δώδεκα μήνες για να δημιουργήσει σχέδια με αντίθεση θέσης στο ίδιο στυλ.
Το SimpleBits είναι το εμπορικό σήμα που δουλεύει ο Dan Cederholm, ίσως τον γνωρίζετε από έργα όπως Αποσπάστε . Στις πρώτες εμφανίσεις, ο ιστότοπος SimpleBits δεν φαίνεται να έχει κάποια αντίθεση θέσης, ωστόσο όταν ξεκινάτε την κύλιση, όλα γίνονται σαφή. Όπου ορισμένοι χρησιμοποιούν μια σταθερή εικόνα φόντου για να δημιουργήσουν ένα κομψό στυλιστικό αποτέλεσμα, ο Dan έχει κάνει το λογότυπό του και την πλοήγησή του πλήρως σταθεροποιημένα στη θέση τους, έτσι ώστε ανεξάρτητα από το πού μετακινηθείτε, πάντοτε να παραμένουν στην ίδια θέση στην οθόνη. Αυτό είναι ένα εξαιρετικό παράδειγμα μη τυπικής αντίθεσης θέσης.
Το SquaredEye είναι το κατάστημα σχεδίασης που διευθύνει ο Matthew Smith και οι σελίδες περιπτώσεων στο χαρτοφυλάκιό του κάνουν φανταστική χρήση της αντίθεσης θέσης. Πρέπει να δείτε ολόκληρη τη σελίδα για να πάρετε πραγματικά την ιδέα, αλλά ουσιαστικά ο Matthew δημιούργησε σχολαστικά συγκεκριμένη τοποθέτηση για κάθε τμήμα της σελίδας. Αυτό δημιουργεί φανταστική αντίθεση μεταξύ των τμημάτων και δημιουργεί μεγάλο οπτικό ενδιαφέρον για τον αναγνώστη χωρίς να σπρώχνει καθόλου την προσοχή.
Αντίληψη συμπέρασμα
Υπάρχει πολύ περισσότερη αντίθεση από το "ελαφρύ και σκοτεινό" - είναι μία από τις σημαντικότερες αρχές στο σχεδιασμό και σχεδόν ποτέ δεν έχετε πάρα πολλά από αυτό, υπό την προϋπόθεση ότι το χρησιμοποιείτε σωστά.
Η λήψη των σχεδίων σας στο επόμενο επίπεδο δεν αφορά την εύρεση της επόμενης ζώνης-βαγόνι για να χτυπήσει χρησιμοποιώντας στρογγυλεμένες γωνίες και να ρίξει σκιές για τα πάντα, είναι για την εύρεση καλύτερων και πιο αποτελεσματικών τρόπων επικοινωνίας του μηνύματος πίσω από το σχέδιο.
Η διεξοδική διερεύνηση της αντίθεσης και η πλήρης αξιοποίησή της είναι ένας από τους καλύτερους τρόπους για να γίνει αυτό.
Τι νομίζετε; Πόση προσοχή πληρώνετε για την αντίθεση μέσα στα σχέδιά σας; Είναι κάτι που σκέφτεστε όλη την ώρα ή είναι κάτι που έρχεται φυσικά;