Το Dos και Don'ts του Dark Web Design
Τα σκοτεινά σχέδια web είναι πολύ δημοφιλή και μπορούν να έχουν μια κομψή και δημιουργική έκκληση.
Είναι επίσης τέλεια για πολλούς τύπους εργασιών πελατών, ωστόσο, δεν είναι κατάλληλοι για κάθε ιστότοπο και θα πρέπει να χρησιμοποιούνται μόνο όταν είναι απαραίτητο.
Παρά την εντυπωσιακή οπτική επίδραση που αυτά τα σκοτεινά σχέδια μπορούν να έχουν, πολλοί σχεδιαστές δεν ξέρουν πώς να τις απομακρύνουν αποτελεσματικά χωρίς να σβήσουν τον επισκέπτη.
Με ένα σκοτεινό σχέδιο έρχεται λιγότερο ευανάγνωστη , λιγότερο ελκυστική για τους περισσότερους αναγνώστες και λιγότερες ευκαιρίες για συμβατικά σχεδιαστικά στοιχεία.
Σε αυτήν την ανάρτηση, θα συζητήσουμε μερικές συμβουλές για να κάνετε την επόμενη σκοτεινή σας έκκληση για το σχεδιασμό ιστοσελίδων σε ένα ευρύτερο κοινό , ενώ ταυτόχρονα θα σας αφήσει, ο σχεδιαστής, να εκφράσετε τη δημιουργικότητά σας.
ΕΝΑ πρόσφατη δημοσκόπηση υποδηλώνει ότι τα ελαφριά σχέδια προτιμώνται από το γενικό κοινό στο διαδίκτυο από ένα επιβλητικό 47%. Ο κύριος λόγος είναι η αναγνωσιμότητα . Οι περισσότεροι άνθρωποι δεν τους αρέσει να βλέπουν φως κείμενο σε ένα σκοτεινό υπόβαθρο στους ιστότοπους, διότι στενεύουν τα μάτια τους, κάνοντας μια πολύ λιγότερο ευχάριστη εμπειρία.
Αντίθετα, το 10% των ερωτηθέντων δήλωσε ότι προτιμούσαν πάντα το σκοτεινό υπόβαθρο για τους ιστότοπους, ενώ ένα άλλο 36% δήλωσε ότι η καλύτερη επιλογή θα εξαρτηθεί από τον τύπο του ιστότοπου.
Λοιπόν, ποια είναι η σωστή απάντηση; Όταν καταλήγουμε σε αυτό, όλοι έχουν τη δική τους γνώμη και αυτό είναι.
Αλλά με ένα τόσο μεγάλο ποσοστό χρηστών λέγοντας ότι τα σκοτεινά σχέδια ιστοσελίδων είναι ανεκτά και μερικές φορές προτιμούν, εμείς ως σχεδιαστές ιστοσελίδων πρέπει να μάθουμε πώς να δημιουργούμε αποτελεσματικά σκοτεινά σχέδια για τον εαυτό μας και τους πελάτες μας.
Αυτό σημαίνει να πεισθούν όλοι οι αληθινοί πιστοί φωτός υποβάθρου ότι ο σκούρος σχεδιασμός μπορεί να είναι πιο αναγνώσιμος και φιλικός προς το χρήστη.
Χρησιμοποιήστε περισσότερο λευκό χώρο
Ή μήπως πρέπει να ονομάζεται "μαύρος χώρος"; Η αποτελεσματική χρήση του λευκού χώρου είναι σημαντική για κάθε τύπο σχεδίου, αλλά είναι απαραίτητη για ιστοσελίδες με σκοτεινό υπόβαθρο.
Τα σκοτεινά σχέδια έχουν την τάση να αισθάνονται «βαριά» και η συσσώρευση τους μπορεί να ενισχύσει αυτό το συναίσθημα. Ρίξτε μια ματιά σε μερικά δημοφιλή σχέδια σκοτεινού ιστού παρακάτω και σημειώστε τη φιλελεύθερη χρήση του λευκού χώρου για μεγάλη επιτυχία.
Μαύρη περιουσία φαίνεται σε όλο το Διαδίκτυο σε σκούρες βιτρίνες σχεδιασμού ιστοσελίδων. Είναι πράγματι ένα όμορφο σχέδιο και αξίζει όλη την προσοχή. Πολύ λευκός χώρος χρησιμοποιείται σε όλο το σχέδιο, και αυτό που κάνει αυτό το συγκεκριμένο σχέδιο μοναδικό είναι το πώς ο λευκός χώρος χρησιμοποιείται για να περιγράψει ορισμένα στοιχεία τόσο αποτελεσματικά.
Το λογότυπο έχει πολύ λευκό χώρο γύρω του και είναι το πρώτο πράγμα που βλέπουμε ως επισκέπτες. Βλέπουμε το κύριο περιεχόμενο και το μπουκάλι στα δεξιά στη συνέχεια. Όπως βλέπετε, ο λευκός χώρος χρησιμοποιείται τέλεια για να επισημάνει το κείμενο στη φιάλη και τον τίτλο του κύριου περιεχομένου.
Το χαρακτηρισμένο περιεχόμενο στο Tictoc και η συνοδευτική εικόνα σε αυτό το σχέδιο πλαισιώνεται με τον πιο λευκό χώρο. Καθώς κατεβαίνουμε, βλέπουμε λιγότερο λευκό χώρο, γεγονός που μας κάνει να δώσουμε προσοχή στο περιεχόμενο που παρουσιάζεται.
Το σημείο εδώ είναι ότι ο λευκός χώρος καθοδηγεί προοδευτικά τον χρήστη μέχρι το τέλος της σελίδας .
Το σκούρο φόντο προσθέτει βάθος στο σχέδιο. Επειδή ο ιστότοπος βασίζεται τόσο πολύ σε λευκό χώρο, θα ήταν λιγότερο ενδιαφέρον χωρίς τη δημιουργική επίδραση του σκούρου φόντου.
ο Mark Dearman ο ιστότοπος έχει φιλελεύθερο και ομοιόμορφα κατανεμημένο λευκό χώρο καθ 'όλη τη διάταξή του.
Ο λευκός χώρος που πλαισιώνει κάθε κομμάτι χαρτοφυλακίου παρέχει άφθονο χώρο αναπνοής για το περιεχόμενο που κατέχει και είναι ένα ωραίο σημείο ανάπαυσης προτού προχωρήσουμε στο επόμενο κομμάτι.
Πολύς λευκός χώρος είναι απαραίτητος για τα σκοτεινά σχέδια, διότι βοηθά όχι μόνο στην αποσυμφόρηση της διάταξης αλλά στη διαμόρφωση σημαντικών στοιχείων και στην προσθήκη της κομψότητας στη συνολική εμφάνιση.
Τεχνητό Λευκό Διάστημα
Επειδή η αναγνωσιμότητα είναι η νούμερο ένα ανησυχία για όσους δεν θέλουν το σκούρο φόντο, οι σχεδιαστές πρέπει να δώσουν ιδιαίτερη προσοχή στο ίδιο το κείμενο.
Όπως και στο γενικό σχεδιασμό, ένας τρόπος για να βελτιωθεί η αναγνωσιμότητα σε σκοτεινούς ιστότοπους είναι να αυξηθεί ο λευκός χώρος, προσαρμόζοντας το μέγεθος της παραγράφου, τον πυρήνα και την κορυφή .
Το παρακάτω παράδειγμα δείχνει ποια είναι η διαφορά μεταξύ των χαρακτήρων και των χαρακτήρων κατά τη σύγκριση των σκοτεινών και ελαφρών διατάξεων.
Ένας άλλος τρόπος για να βελτιώσετε την αναγνωσιμότητα σε σκοτεινά σχέδια ιστού είναι να αυξήσετε το μέγεθος της γραμματοσειράς . Όπως και οι περισσότεροι από τους άλλους κανόνες αυτής της δημοσίευσης, τα μεγαλύτερα μεγέθη γραμματοσειρών σημαίνουν περισσότερο λευκό χώρο. Όσο μεγαλύτερα είναι τα γράμματα, τόσο περισσότερο λευκός χώρος θα εμφανίζεται γύρω και μέσα σε κάθε γράμμα.
Για παράδειγμα, το γράμμα "a" παρακάτω παίρνει περισσότερο λευκό χώρο καθώς μεγαλώνει, τόσο στην περιοχή γύρω από αυτό όσο και στο χώρο μέσα στο περίβλημα του a και κάτω από την προεξοχή.
Σημειώστε πως η ανάγνωση μικρού κειμένου είναι τόσο ευκολότερη σε ένα ελαφρύ φόντο παρά σε ένα σκοτεινό. Κατά τη ρύθμιση της τυπογραφίας για έναν νέο ιστότοπο, βεβαιωθείτε ότι έχετε δει κάποιο εικονικό κείμενο για να βεβαιωθείτε ότι είναι ευανάγνωστο . Εάν όχι, δείτε αν αυξάνεται το μέγεθος του κειμένου βοηθά.
Αντίθεση κειμένου
Πολλοί άνθρωποι θα συμφωνούσαν ότι οι πιο κακώς σχεδιασμένες σκοτεινές ιστοσελίδες προκαλούν μάτι-στέλεχος. Η υπερβολική ή πολύ μικρή αντίθεση είναι συνήθως ο ένοχος. Πώς μπορεί κανείς να βρει την τέλεια ισορροπία;
Εάν βρίσκεστε σε ένα δωμάτιο που είναι μαύρο, ξαφνικά κοιτάζοντας απευθείας στο φως δεν είναι ευχάριστο. Αλλά κοιτάζοντας ένα λιγότερο φωτεινό φως σε ένα λιγότερο σκοτεινό δωμάτιο είναι ωραία. Η ίδια αρχή ισχύει και για το σχεδιασμό ιστοσελίδων.
Η εύρεση της τέλειας αντίθεσης σημαίνει να εξισορροπείτε το σκοτάδι του φόντου με την ελαφρότητα του κειμένου .
Παρακάτω είναι ένας (πολύ) τραχύς οδηγός που δείχνει πώς λειτουργεί η αντίθεση μεταξύ κειμένου και φόντου. Κάποιος παρατηρεί ότι καθώς το φόντο γίνεται ελαφρύτερο, το ίδιο συμβαίνει και με το κείμενο.
Η εύρεση μιας ευχάριστης αντίθεσης για το κείμενο είναι πολύ πιο δύσκολη με ένα καθαρό μαύρο φόντο.
Για να βρείτε την τέλεια ισορροπία, πειραματιστείτε με διαφορετικές αποχρώσεις. Το καλύτερο αποτέλεσμα είναι συνήθως ένα φόντο που δεν είναι καθαρό μαύρο και κείμενο που δεν είναι καθαρό λευκό.
Αντιμετώπιση των γραμματοσειρών
Οι γραμματοσειρές διαδραματίζουν σημαντικό ρόλο στο σχεδιασμό και σίγουρα θα πρέπει να ληφθούν υπόψη προσεκτικά με τις σκοτεινές διατάξεις. Η παρακάτω εικόνα εμφανίζει μια γραμματοσειρά 14 σημείων σε σκούρο φόντο σε γραμματοσειρές serif και sans-serif.
Η γραμματοσειρά sans-serif είναι προφανώς πιο ευανάγνωστη . Αλλά πολλοί σχεδιαστές εξακολουθούν να επιλέγουν γραμματοσειρές serif για την κομψότητα τους.
Το κόλπο, όμως, είναι να βάλουμε μόνο μεγαλύτερο κείμενο σε γραμματοσειρές serif, έτσι ώστε ο επιπλέον λευκός χώρος να πλημμυρίζει γύρω από κάθε χαρακτήρα και να κάνει το κείμενο πολύ ευανάγνωστο.
Το παρακάτω στιγμιότυπο οθόνης είναι ενός ιστότοπου που συζητήθηκε προηγουμένως σε αυτό το άρθρο. Διαθέτει γραμματοσειρές serif και sans-serif, αλλά τις χρησιμοποιεί με έξυπνο τρόπο.
Μεγαλύτερο κείμενο, όπως τίτλους, πλοήγηση και κεφαλίδες, είναι σε μια γραμματοσειρά serif για πρόσθετη κομψότητα. Για καλύτερη αντίθεση και βελτιωμένη αναγνωσιμότητα, το κείμενο του σώματος είναι σε καθαρή γραμματοσειρά sans-serif.
Χρησιμοποιήστε σχέδια ελάχιστων χρωμάτων
Για να δώσουν τα σκοτεινά σχέδια τους μια καθαρή και ξεκάθαρη εμφάνιση, οι σχεδιαστές θα πρέπει πάντα να επιλέγουν ελάχιστα χρωματικά σχήματα .
Από τα λίγα παραδείγματα που ακολουθούν, μπορούμε να δούμε ότι τα πολυάσχολα σχέδια χρωμάτων αποτρέπουν πραγματικά το σκούρο φόντο, επειδή η αντίθεση είναι πολύ έντονη.
Προσέξτε σε ένα ή δύο χρώματα . Για να προσθέσετε περισσότερο χρώμα, δοκιμάστε ένα σκούρο φόντο.
Χορηγηθεί, πολλά σκοτεινά σχέδια ιστού έχουν πιο συναρπαστικά σχέδια χρωμάτων. Έτσι, αυτός ο κανόνας είναι συχνά σπασμένος, αλλά μόνο με τις σωστές τεχνικές.
Σε γενικές γραμμές, όμως, το χρώμα είναι συχνά αυτό που κάνει έναν ιστότοπο να φαίνεται πολύ απασχολημένος . Επειδή οι πιο σκούρες ιστοσελίδες έχουν ήδη βάθος, χρησιμοποιήστε χρώμα με προσοχή.
Προσφέρετε έναν διακόπτη στυλ
Παρόλο που έχουμε πολλές καλές πρακτικές στη διάθεσή μας για να κάνουμε τα σκοτεινά σχέδια ιστοσελίδων πιο ελκυστικά, καμία προσπάθεια δεν θα ικανοποιήσει κάθε χρήστη.
Βεβαιωθείτε ότι έχετε συμπεριλάβει έναν διακόπτη στυλ , έτσι ώστε οι χρήστες να έχουν τελικά την επιλογή να βλέπουν σκοτεινό κείμενο σε ανοιχτό φόντο.
Απαιτούνται δύο φύλλα στυλ για αυτό, ένα για την προεπιλεγμένη σκοτεινή διάταξη και ένα για την εναλλακτική διάταξη φωτός.
Το SitePoint έχει ένα εξαιρετικό φροντιστήριο για αυτό: Δημιουργήστε έναν απλό διακόπτη στυλ στο CSS . Αντί να χρησιμοποιήσετε τις εκδόσεις "πορτοκαλί", "μπλε" και "άσπρο" στο σεμινάριο, απλά χρησιμοποιήστε φύλλα στυλ "ελαφρύ" και "σκούρο".
Όταν το Dark Web Design λειτουργεί καλύτερα
Όπως αναφέρθηκε, ένα μεγάλο μέρος των χρηστών του ιστού πιστεύει ότι ένα σκοτεινό σχέδιο ιστού θα μπορούσε να λειτουργήσει για ορισμένους τύπους ιστοτόπων. Αλλά η μελέτη είναι ασαφής για το τι ακριβώς είναι αυτοί οι τύποι.
Σε γενικές γραμμές, το σκοτάδι λειτουργεί καλύτερα για δημιουργικά ή κομψά σχέδια . Για μοντέρνες κομψές ιστοσελίδες, σκούρα φόντα προσθέτουν κομψότητα. Για στυλ grungy ή χέρι, σκοτεινά υπόβαθρα ενισχύουν τη δημιουργικότητα της διάταξης.
Κομψό σκούρο σχέδιο
Το σκοτάδι μπορεί να είναι βαθύ, έγκυρο και ισχυρό και συχνά φαίνεται κομψό όταν χρησιμοποιείται σωστά. Ακολουθούν μερικά παραδείγματα και μερικές τεχνικές για να αναδείξουμε την κομψότητα σε ένα σκοτεινό σχέδιο.
Η ιστοσελίδα για Λάρισα Μεκ έχει ένα απλό μοτίβο vintage-style στο παρασκήνιο, ορίζοντας έναν κομψό τόνο. Άλλα χαρακτηριστικά πιο περίεργα προσθέτουν μια προσωπική πινελιά στο σχέδιο.
Αυτή η τεχνική μπορεί να χρησιμοποιηθεί για πολλά είδη ιστοτόπων. Vintage ή κλασικά μοτίβα και υφές μπορούν να δημιουργήσουν ένα βλέμμα τόσο κομψό όσο και κατάλληλο για την ηλικία .
Οι περισσότεροι από εμάς συσχετίζουν τα vintage μοτίβα με την υψηλή τάξη, δημιουργώντας έτσι έναν υψηλής ποιότητας ιστότοπο με αυτό τον τρόπο είναι εύκολο.
Βάθος πυρήνα έχει ένα πολύ καθαρό σχέδιο, με ένα σκούρο φόντο που προσθέτει στυλ και τάξη. Μια αίσθηση εξουσίας είναι επίσης εμφανής στο σχεδιασμό. Αυτή η κομψότητα μπορεί επίσης να κάνει το χαρτοφυλάκιο του σχεδιαστή να εμφανίζεται πιο πολύτιμο ως αποτέλεσμα.
Σημειώστε ότι αυτό το σχέδιο δεν έχει υφή ή εικόνες εκτός από τα κομμάτια χαρτοφυλακίου και το λογότυπο. Διαφορετικά, το σχέδιο θα ήταν πολύ απασχολημένο. όπως είναι, το περιεχόμενο είναι δεμένη μαζί καλά.
Μια καλή διαδικασία που πρέπει να ακολουθήσετε είναι να προσθέσετε πρώτα το ουσιαστικό περιεχόμενο και έπειτα να φέρετε στοιχεία σχεδίασης όπως είναι απαραίτητο . Ο σχεδιαστής μπορεί στη συνέχεια να σταματήσει και να προβληματιστεί καθώς προστίθεται κάθε νέο στοιχείο, διασφαλίζοντας ότι η διάταξη δεν τροφοδοτείται υπερβολικά.
Ακριβώς όπως τα έργα τέχνης μπορεί να εμφανίζονται πιο πολύτιμα σε ένα κομψό σχέδιο, έτσι μπορούν τα προϊόντα. Ένα σκοτεινό και κομψό σχέδιο, όπως Tapbots και τόσοι πολλοί άλλοι, βοηθούν στην προβολή του προϊόντος που πωλείται.
Ο σχεδιασμός αντικατοπτρίζει την ίδια τη συσκευή , με τις κλίσεις και τα εφέ φωτισμού. ορισμένα σχέδια μιμούνται ακόμη και την υφή των προϊόντων υψηλής τεχνολογίας τους.
Δημιουργικό σκοτεινό σχέδιο
Πέρα από τα κομψά, σκοτεινά σχέδια ιστοσελίδων μπορούν επίσης να προκαλέσουν πιο συναισθηματικές απαντήσεις από τα τυπικά σχέδια φωτισμού, καθιστώντας τα ιδανικά για δημιουργικά έργα. Ας δούμε μερικά παραδείγματα από τα είδη των δημιουργικών σχεδίων που είναι δυνατά.
ο ιστοσελίδα παρακάτω έχει πολύ λίγο περιεχόμενο αλλά έχει μια μοναδική διάταξη και σκούρα χρώματα για βάθος. Τα σκούρα φόντα είναι ιδανικά για ιστότοπους με πολύ μικρό περιεχόμενο .
Και επειδή χρειάζονται περισσότερο λευκό χώρο, ο σχεδιαστής έχει περισσότερο χώρο για να δουλέψει.
Grunge web design έρχεται σε πολλές μορφές, και επειδή το grunge είναι "σκοτεινό και βρώμικο", τα σκούρα φόντα είναι μία από αυτές τις μορφές.
Σκοτεινά σχέδια grunge όπως Trozo φαίνεται να σπάει όλους τους κανόνες: πολυάσχολη υφή, γεμάτη διάταξη και μεγάλη ποικιλία χρωμάτων. Και όμως αυτός ο ιστότοπος εξακολουθεί να λειτουργεί. Πώς γίνεται αυτό?
Με τόσα πολλά ακατάστατα στοιχεία για να συνεργαστεί, το σχέδιο grunge μπορεί να είναι δύσκολο για αρχάριους. Αυτό που κάνει αυτή την εργασία είναι η οργάνωσή της .
Το φόντο έχει σαφώς καθορισμένα μπλοκ που καθοδηγούν το μάτι του χρήστη και βοηθούν στη διάσπαση του περιεχομένου σε διαχειρίσιμα τμήματα.
Δεύτερον, έχει έναν τόνο λευκού χώρου . Το φόντο μπορεί να είναι υφή, αλλά το επαναλαμβανόμενο μοτίβο θεωρείται από το χρήστη ως λευκός χώρος, συμβάλλοντας στο φωτισμό του σχεδίου.
Αυτός ο λευκός χώρος είναι πιο εμφανής στα αριστερά του λογότυπου, κάτω από την πλοήγηση και κατά μήκος της δεξιάς πλευράς.
Ακόμα και μεταξύ του "Εκθέματος 01" και του "Εκθέματος 02" υπάρχει περισσότερος λευκός χώρος από κάποιος που συνήθως θα βρεθεί σε έναν ιστότοπο σαν αυτό.
Ο λευκός χώρος εξισώνει τα πράγματα, αν και δεν μοιάζει με λευκό χώρο επειδή έχει υφή . Το ελάχιστο κείμενο και λίγα τμήματα (μόνο τρία) συμβάλλουν στην εμφάνιση της απλότητας.
Ο σχεδιασμός του Drew Wilson σίγουρα σπάει τον κανόνα χρήσης ελάχιστου χρώματος. Εξακολουθεί να λειτουργεί, επειδή η έντονα χρωματισμένη κεφαλίδα είναι ένα από τα λίγα χαρακτηριστικά γνωρίσματα αυτού του αραιού σχεδιασμού, οπότε τίποτα δεν υπερβαίνει τις εξουσίες.
Και το σκούρο φόντο κάνει την κεφαλίδα να εμφανίζεται ακόμη πιο φωτεινή και πιο εκπληκτική.
Τα σκοτεινά υπόβαθρα χρησιμοποιούνται συχνά για να κάνουν τα εφέ φωτισμού και τα φωτεινά χρώματα να ξεχωρίζουν περισσότερο .
Τέτοια σχέδια είναι μια θαυμάσια δημιουργική εξαίρεση από τον κανόνα του ελάχιστου χρώματος. Αλλά ο κανόνας θα πρέπει να σπάσει με προσοχή: αποφύγετε να αποσπάτε τις κλίσεις, τις υφές και το χρώμα πιο κάτω στη σελίδα.
Τυλίγοντας
Τα σκούρα φόντα δίνουν μια κομψή και δημιουργική αίσθηση στα σχέδια του ιστού, καθιστώντάς τα τέλεια για μερικά χαρτοφυλάκια, αλλά δεν είναι κατάλληλα για κάθε τοποθεσία.
Για μεγαλύτερες ιστοσελίδες, ειδικά για άτομα με προβλήματα όρασης και άλλες αναπηρίες, τα σκοτεινά σχέδια είναι ένα όχι-όχι, ακόμη και με διακόπτη στυλ.
Ας ελπίσουμε ότι όταν έρθει η ώρα που πρέπει να σχεδιάσετε μια ιστοσελίδα με σκοτεινό υπόβαθρο, αυτές οι συμβουλές και στρατηγικές θα σας βοηθήσουν.
Γράφτηκε αποκλειστικά για WDD από Kayla Knight .
Υπάρχουν πολλές περισσότερες τεχνικές και στρατηγικές για τη βελτίωση των σχεδίων σκοτεινού ιστού, επομένως παρακαλώ μοιραστείτε αυτά που έχετε τραβήξει στην παρακάτω ενότητα σχολίων.