10 Κανόνες Web Design που μπορείτε να σπάσετε
Καθώς ο σχεδιασμός και ο σχεδιασμός ιστοσελίδων γενικά έχουν εξελιχθεί, έχουν θεσπιστεί κανόνες για τη διασφάλιση συνεκτικών και χρησιμοποιήσιμων σχεδίων.
Ορισμένοι από αυτούς τους κανόνες δημιουργήθηκαν απλώς και μόνο επειδή οι δημιουργοί ιστοτόπων κακοποίησαν ορισμένες αρχές χωρίς να λαμβάνουν υπόψη τους τους χρήστες τους.
Αλλά αυτοί οι κανόνες δεν επιβάλλονται από κανέναν και πρέπει να σπάσουν όταν είναι απαραίτητο, ειδικά όταν το σπάσιμο τους θα οδηγούσε σε εκπληκτική σχεδίαση.
Σε αυτό το άρθρο, παρουσιάζουμε 10 κανόνες που μπορείτε να σπάσετε αν ταιριάζει με τις ανάγκες σας στο σχεδιασμό.
Κανόνας # 1: Να μην εμφανίζεται η οριζόντια γραμμή κύλισης
Ένας σημαντικός αριθμός ποντικών δεν έχει οριζόντιο τροχό ποντικιού. Αυτό καθιστά δύσκολη την κύλιση αριστερά ή δεξιά όταν το περιεχόμενο μιας ιστοσελίδας εκτείνεται πέρα από τις πλευρές του προγράμματος περιήγησης.
Μπορεί να είναι ενοχλητικό να χρειάζεται να μεταφέρετε το δείκτη του ποντικιού στο κάτω μέρος του παραθύρου και να σύρετε τη γραμμή κύλισης μόνο για να δείτε μια ή δύο λέξεις που βρίσκονται πέρα από την προβαλλόμενη περιοχή της σελίδας. Τούτου λεχθέντος, εδώ είναι μερικές καλά σχεδιασμένες τοποθεσίες που έβαλαν το scroll bar να λειτουργήσει με αποτελεσματικούς τρόπους.
Benek
Benek χρησιμοποιεί JavaScript για να αλλάξει την κατεύθυνση κύλισης του τροχού του ποντικιού από κάθετη στην οριζόντια. Κάθε στοιχείο στο χαρτοφυλάκιο της Benek χωρίζεται στη δική του στήλη. Η περιοχή έχει μια εκπληκτικά φρέσκια αίσθηση και ρέει ομαλά.
Γκουρού παπουτσιών
Γκουρού παπουτσιών παίρνει μακριά με οριζόντια κύλιση επειδή εκμεταλλεύεται τον τρόπο που οι άνθρωποι κοιτάζουν τα παπούτσια. Οι άνθρωποι βλέπουν τα περισσότερα προϊόντα από πάνω προς τα κάτω, αλλά τα παπούτσια είναι διαφορετικά. Τα μάτια των ανθρώπων συνήθως μετακινούνται κατά μήκος του παπουτσιού. Χρησιμοποιώντας αυτή τη συνήθεια προς όφελός του, ο Shoe Guru κάνει τη ροή του σχεδιασμού του ιστότοπού του προς την ίδια κατεύθυνση, κάνοντας την κίνηση φυσική.
Στέφαν Ταρτέλιν
Στέφαν Ταρτέλιν χρησιμοποιεί την οριζόντια γραμμή κύλισης για να κάνει το έργο τέχνης να μοιάζει σαν να είναι σε μια γκαλερί τέχνης. Παρόλο που ο κάθετος τροχός του ποντικιού δεν λειτουργεί όπως φαίνεται στα παραπάνω παραδείγματα, το αποτέλεσμα λειτουργεί εκπληκτικά καλά. Θα μπορούσατε ακόμη και να υποστηρίξετε ότι το αποτέλεσμα θα μειωνόταν εάν ο τροχός του ποντικιού ήταν κωδικοποιημένος για οριζόντια κύλιση.
Γραφική Θεραπεία
Ενώ Γραφική Θεραπεία δεν εμφανίζει μια οριζόντια γραμμή κύλισης στη σελίδα του, αλλά επιτρέπει την οριζόντια κύλιση κάνοντας κλικ και σύροντας γύρω από την οθόνη. Η γραφική θεωρία χρησιμοποιείται οριζόντια πλοήγηση επειδή όλες οι εικόνες της έχουν το ίδιο ύψος αλλά όχι το ίδιο πλάτος. Η οριζόντια πλοήγηση βοηθάει στην ομαλή ροή της τοποθεσίας.
Ο οριζόντιος δρόμος
Ο οριζόντιος δρόμος είναι μια βιτρίνα των ιστότοπων που χρησιμοποιούν οριζόντια κύλιση. Τα εκπληκτικά γραφικά είναι όμορφα και ο ιστότοπος αυτός είναι μοναδικός όσον αφορά τις γκαλερί CSS.
Κανόνας # 2: Χρησιμοποιήστε έναν ελάχιστο αριθμό γραμματοσειρών
Πολλές γραμματοσειρές συνήθως έρχονται σε σύγκρουση μεταξύ τους και κατακλύζουν τον θεατή. Κάθε γραμματοσειρά έχει προσωπικότητα και πάρα πολλές προσωπικότητες μπορούν να δημιουργήσουν διαταραχές.
Για να χρησιμοποιήσετε αποτελεσματικά περισσότερο από λίγες γραμματοσειρές, ο σχεδιασμός πρέπει να είναι πολύ προσανατολισμένος στο κείμενο και το υπόλοιπο σχέδιο πρέπει να είναι σχετικά ήσυχο. Ακολουθούν ορισμένα παραδείγματα ιστότοπων που χρησιμοποιούν αυτήν την αίσθηση σύγκρουσης και διαταραχής για να εμπλέξουν τον χρήστη.
Σύνδεσμοι LA
Σύνδεσμοι LA χρησιμοποιεί πολλές γραμματοσειρές σε μη γραμμική διάταξη για να δημιουργήσει μια αίσθηση ενέργειας. Η σελίδα είναι δύσκολο να διαβαστεί γρήγορα, αλλά προσελκύει το χρήστη in. Αξίζει επίσης να σημειωθεί ότι καμία από τις γραμματοσειρές είναι υπερβολικά διακοσμητικά? κάθε λέξη είναι ευανάγνωστη, διατηρώντας το σχέδιο τραγανό και καθαρό.
Geo Elements Design Studio
Χρησιμοποιώντας μια ποικιλία γραμματοσειρών συνήθως μεταφέρει μια αίσθηση ενέργειας και χάος, αλλά Geo Elements Design Studio Η ιστοσελίδα του είναι πολύ ανοιχτή και καθαρή. Κάθε γραμματοσειρά δίνεται στον δικό της χώρο έτσι ώστε ο θεατής να μην το συσχετίζει με άλλη γραμματοσειρά. Η εικόνα του ουρανού στο παρασκήνιο συμβάλλει στην ενίσχυση της αίσθησης του ανοίγματος.
Richard Stelmach
Σε αντίθεση με το τελευταίο παράδειγμα, Richard Stelmach ωθεί τις διαφορετικές γραμματοσειρές του κοντά από κοντά. Ο σχεδιασμός λειτουργεί επειδή μόνο μία γραμματοσειρά δεν φαίνεται χέρι και οι άλλες δύο λειτουργούν καλά με την εικόνα. Οι γραμματοσειρές που έχουν σχεδιαστεί με το χέρι συνήθως λειτουργούν καλά, ακόμα και όταν υπάρχουν πολλά διαφορετικά πρόσωπα γραμματοσειράς.
Σάτσου
Σάτσου φαίνεται να έχει πολλές διαφορετικές γραμματοσειρές αλλά στην πραγματικότητα έχει μόνο τρεις (χωρίς να συμπεριλαμβάνει το στοιχείο του χαρτοφυλακίου του Συμβουλίου Αθλητισμού). Διαχωρίζοντας τα πάντα προσεκτικά, ο Satsu συνδέει ορισμένες γραμμές κειμένου μεταξύ τους, παρόλο που το κείμενο μπορεί να είναι σε διαφορετικές γραμματοσειρές.
Ο τίτλος του λογότυπου είναι σε μία γραμματοσειρά και οι δύο υποτίτλοι έχουν το καθένα τη δική τους γραμματοσειρά, αλλά ο θεατής φυσικά ομαδοποιεί αυτά τα τρία στοιχεία κειμένου μαζί. Ο Satsu είναι σε θέση να δημιουργήσει ενέργεια χωρίς να συντρίβει τη σελίδα με προσωπικότητες.
Κανόνας # 3: Μην χρησιμοποιείτε πάρα πολλά χρώματα
Ο φόβος να πάει πολύ μακριά με ένα σχέδιο είναι αυτό που χωρίζει τους επαγγελματίες από rookies και rookies από το notiavious. Οι λαμπερές προσπαθούν να κάνουν τα σχέδιά τους όσο το δυνατόν πιο ακραίες, με λέξεις στη φωτιά, αναβοσβήνει κείμενο και όσο το δυνατόν περισσότερα χρώματα.
Οι Rookies θέλουν να κρατήσουν τα σχέδια τους νευρικά και εύκολα στο μάτι, αλλά τελικά τα σχέδια τους μπορεί μερικές φορές να φαίνονται άψυχα. Τα ακόλουθα σχέδια που είναι ευχάριστα για τα μάτια είναι από ορισμένους πραγματικούς επαγγελματίες που πιέζουν τα όρια.
Matt Mullenweg
Το Matt Mullenweg το όμορφα χρωματισμένο σχέδιο μοιάζει με μια ζωγραφική ακουαρέλας (ο ιστότοπος έχει ενημερωθεί από τότε που γράφτηκε αυτό το άρθρο). Όλα τα χρώματα στο παρασκήνιο θα τραβήξουν την προσοχή κάποιου.
Γενικά, τα καλά σχέδια με έναν τόνο χρωμάτων θα έχουν αυτά τα χρώματα στο παρασκήνιο, με μια απλούστερη παλέτα μπροστά. Το κείμενο ανάγνωσης είναι πολύ δύσκολο όταν συμβαίνει πάρα πολλά πράγματα.
Τράβικ Ισαάκς
Ο Τράβις Ίσακς το σχεδιασμό έχει μια πολύχρωμη κατακόρυφη κλίση στο παρασκήνιο που κάνει το σχέδιο να φαίνεται πολύχρωμο σε όλο. Αυτός ο ιστότοπος έχει λαμπερό ροζ όπως το χρώμα του συνδέσμου, το οποίο είναι μια εξαιρετική επιλογή για τους σχεδιαστές που θέλουν να δημιουργήσουν ένα πολύχρωμο αποτέλεσμα.
James De Angelis
Ο James De Angelis ο ιστότοπος δείχνει ότι το κείμενο μπορεί να είναι πολύχρωμο χωρίς να συναντάται σαν νεοσύλλεκτος. Ο σχεδιασμός είναι πολύ εφεδρικός, και η λέξη είναι σίγουρα δοθεί στο επίκεντρο.
Κανόνας # 4: Ο στόχος του δικτυακού σας τόπου είναι εμφανής
Κάτι που πραγματικά γεμίζει στα αυτιά των νέων σχεδιαστών είναι ότι ένα σχέδιο πρέπει να λέει αμέσως στους θεατές αυτό που κοιτάζουν πριν διαβάζουν οποιοδήποτε κείμενο.
Η αναγνώριση σήματος είναι σημαντική για τις μεγάλες εταιρείες, αλλά μερικές φορές οι μικρότεροι πρέπει να είναι λίγο πιο έξυπνοι για να προσελκύσουν την προσοχή του θεατή. Η κατοχή πληροφοριών πίσω μπορεί να προκαλέσει τον θεατή και να "πειράξει" τους ανθρώπους να θέλουν να μάθουν περισσότερα.
Η εφαρμογή αυτής της τεχνικής στο σχεδιασμό ιστοσελίδων μπορεί να αυξήσει σημαντικά το χρόνο που παραμένουν οι χρήστες στον ιστότοπό σας.
Cetrotrees
Στα περισσότερα χαρτοφυλάκια σήμερα, ο ελεύθερος επαγγελματίας ή η εταιρεία συνήθως εισέρχονται και εξηγούν το έργο τους. Cerotreees αντίθετα βάζει κάποιους ασαφώς επισημασμένους συνδέσμους στα αριστερά και δείγματα του έργου του στα δεξιά, αλλά τίποτα δεν εξηγεί την ιδέα ή το άτομο πίσω από αυτό.
Ο αέρας του μυστηρίου που περιβάλλει την τοποθεσία προσελκύει τον χρήστη να μείνει.
Το τελευταίο Mixtape
Το τελευταίο Mixtape είναι ένα άλλο χαρτοφυλάκιο που δείχνει το έργο του και τίποτα περισσότερο. Τέτοια σχέδια αποπνέουν ένα αίσθημα ακραίας εμπιστοσύνης. Ποτέ δεν προσπαθούν να πουλήσουν τον εαυτό τους. απλώς αναμένουν ότι ο χρήστης θα ανατινάξει και θα έρθει να ζητήσει συμβόλαιο.
Peter Pearson
Η χρήση μιας οθόνης εκκίνησης είναι ένας καλός τρόπος για να επιβραδύνει τη διαδικασία σκέψης του χρήστη και να τον εμπνεύσει να σκάψει βαθύτερα. Ο στόχος του splash page είναι συνήθως να εξηγεί τον ιστότοπο γρήγορα με φωτογραφίες ή σύντομο κείμενο.
Αλλά σε Ο Peter Pearson's περίπτωση, ο στόχος του είναι να προκαλέσει ένα συναίσθημα. Ο μεγάλος ουρανός και το σπινθηρισμένο εφέ κειμένου κάνουν σπουδαία δουλειά στο να προκαλούν περιέργεια επειδή αυτά τα πράγματα συνήθως δεν εμφανίζονται μαζί. Αυτός ο ιστότοπος κάνει επίσης μεγάλη δουλειά στη συνέχιση του συναισθήματος που δημιουργείται από την splash σελίδα στο πραγματικό περιεχόμενο.
Η κίνηση της πλευρικής κύλισης και οι κινούμενες γραμμές που ακολουθούν τον χρήστη είναι πραγματικά αποτελεσματικές.
Piepmatzel
Ένας πολύ καλός τρόπος να ξεφύγετε από το γλωσσικό φράγμα είναι να μην χρησιμοποιήσετε καμία λέξη. Piepmatzel είναι μια γκαλερί CSS και οι άνθρωποι που έχουν δει μια γκαλερί CSS πριν θα το αναγνωρίσουν ως ένα αμέσως.
Εκείνοι που δεν έχουν, μπορεί να ενδιαφέρονται αρκετά για να δώσουν μερικές από τις μικρογραφίες ένα κλικ με την ελπίδα να υπολογίσουμε το μοτίβο. Η μικρή ποσότητα κειμένου στο κάτω μέρος της σελίδας βοηθάει στην ταξινόμηση και είναι περιττή.
Κανόνας # 5: Η πλοήγηση πρέπει να είναι εύκολο να καταλάβουμε
Η πλοήγηση δεν πρέπει να είναι η συμφόρηση ενός χώρου. Οι χρήστες θα πρέπει να μπορούν γρήγορα να βρουν αυτό που θέλουν. Μερικές φορές, όμως, η απρόσκοπτη αλλά ελκυστική πλοήγηση μπορεί να βοηθήσει τον χρήστη να αισθάνεται συνδεδεμένος με τον ιστότοπο και τι προωθεί.
Αλβιν Τανγκ
Όπως αναφέρθηκε στην προηγούμενη ενότητα, ένας αέρας εμπιστοσύνης μεταφέρεται όταν ένα χαρτοφυλάκιο δεν εξελίσσεται. Αυτή είναι η περίπτωση Ο Αλβιν Τανγκ χαρτοφυλακίου φωτογραφίας. Κατά την πρώτη άφιξη στον ιστότοπο, ο χρήστης δεν αναγνωρίζει αμέσως τις λέξεις που βλέπουν ως συνδέσμους.
Αυτή η αβεβαιότητα θα πρέπει να τους παρακινήσει να χτυπήσουν λίγο. Μετακινώντας το ποντίκι πάνω από μια λέξη αποκαλύπτει ότι είναι πράγματι ένας σύνδεσμος, και κάνοντας κλικ σε αυτό, ένα πανέμορφο φορτίο φωτογραφιών. Η φωτογραφία θα προσελκύσει τους χρήστες να συνεχίσουν την περιήγηση.
Για να δείτε περισσότερες φωτογραφίες, οι χρήστες πρέπει να κάνουν κλικ στο κουμπί "Πίσω" στο πρόγραμμα περιήγησής τους (κάτι που οι περισσότεροι καταλαβαίνουν να κάνουν) και στη συνέχεια κάντε κλικ σε έναν άλλο σύνδεσμο. Δεν υπάρχει χέρι-κράτησης στο σχεδιασμό, και λειτουργεί εξαιρετικά καλά. Αυτό δεν είναι ένα συμβατικό "πανέμορφο σχέδιο", αλλά προσφέρει ακριβώς αυτό που χρειάζεται.
Kasulo
Kasulo 'μικρό η πλοήγηση δεν είναι τρομερά δύσκολο να καταλάβει κανείς, αλλά ο μέσος χρήστης μπορεί να μην γνωρίζει ακριβώς τι πρέπει να κάνει κατά την άφιξη στον ιστότοπο. Μετά το πρώτο κλικ, όμως, όλα γίνονται προφανή.
Ο χρήστης περιηγείται στα κομμάτια του χαρτοφυλακίου σε στυλ 3-D και τα πιο πρόσφατα στοιχεία εμφανίζονται πιο κοντά στην αρχή. Η χρήση του τροχού του ποντικιού είναι ακόμα πιο διασκεδαστική.
Marcio Kogan
Ο Marcio Kogan site είναι ένα άλλο παράδειγμα εξαιρετικής πλοήγησης που δεν είναι άμεσα προφανές. Η εντολή "Drag me" είναι δύσκολο να αντισταθεί, και μόλις ο χρήστης το κάνει αυτό, είναι στο δρόμο για την κρουαζιέρα των στοιχείων του χαρτοφυλακίου. Οι προεπισκοπήσεις ποντικιών είναι μια μικρή λεπτομέρεια, αλλά πραγματικά εντυπωσιακές.
Ceranco
Εάν ένας πελάτης ζητήσει από έναν σχεδιαστή να κάνει τον ιστότοπό του σε 3-D, όπως ένα παιχνίδι βίντεο πρώτου προσώπου, οι περισσότεροι σχεδιαστές θα χαμογελούσαν σιωπηλά, θα πάρουν μια βαθιά ανάσα και αργότερα θα εξηγήσουν γιατί θα ήταν κακή ιδέα .
Ενώ η ιστοσελίδα για Ceranco δεν είναι ακριβώς ένα 3-D shooter, θα μπορούσε εύκολα να συγχέεται για κάποιο είδος παιχνιδιού υπολογιστή indie. Οι ιστότοποι όπως αυτό είναι τέλειο για τη συμμετοχή των χρηστών. Ενώ ο μεγάλος χρόνος φόρτωσης και η κακή βελτιστοποίηση μηχανών αναζήτησης καθιστούν αυτό λιγότερο από το ιδανικό για τα περισσότερα έργα, αξίζει σίγουρα μια δεύτερη σκέψη.
Κανόνας # 6: Χρησιμοποιήστε διαφορετικά χρώματα για το κείμενο και το φόντο
Αυτός ο κανόνας ίσως δεν είναι γραμμένος σε όλη τη χώρα, αλλά πολλοί αρχάριοι φοβούνται να κάνουν το κείμενο δυσανάγνωστο, ώστε να μην χρησιμοποιούν το ίδιο βασικό χρώμα τόσο για το φόντο όσο και για την ίδια την γραμματοσειρά. Μπορείτε να ακολουθήσετε μερικές απλές τεχνικές για να κάνετε τα παρόμοια χρώματα να λειτουργούν.
Linksys
ο Linksys ο ιστότοπος είναι καθαρός λόγω του τρόπου που έχει ένα μπλε για όλους τους συνδέσμους του, παρόλο που το χρώμα του φόντου είναι διάφορες αποχρώσεις του μπλε. Ενώ ένας κίνδυνος και ίσως όχι η μεγαλύτερη απόφαση χρώματος, λειτουργεί.
Brad Colbow
Ο Brad Colbow's το σχέδιο είναι παρόμοιο με το Linksys λόγω του μπλε κειμένου σε μπλε φόντο. Το μπλε στο μπλε είναι δύσκολο να τραβηχτεί ωραία, ειδικά με τόσα διαφορετικά μπλουζ σε όλο το site.
Powerset
Μέχρι στιγμής σε αυτή την ενότητα έχουμε δει μόνο μπλε ιστοσελίδες, επειδή το μπλε κείμενο είναι πιο δύσκολο για το ανθρώπινο μάτι να το διαβάσει και ο ευανάγνωστος μπλε τύπος είναι πάντα εντυπωσιακός. Εάν ένα εφέ κειμένου λειτουργεί με μπλε χρώμα, πιθανότατα θα λειτουργήσει σε οποιοδήποτε χρώμα.
Powerset χρησιμοποιεί ένα στυλ γραμματοσειράς για τη γραμματοσειρά του για να δημιουργήσει ένα εφέ 3-D που χωρίζει αποτελεσματικά το κείμενο από το φόντο.
Καλλιτέχνης Σχεδιασμός
Καλλιτέχνης Σχεδιασμός όχι μόνο έχει πράσινο κείμενο σε πράσινο φόντο και κίτρινο / μπεζ κείμενο σε κίτρινο φόντο αλλά έχει κείμενο απευθείας πάνω από μια φωτογραφία.
Ενώ μερικές ξεχωριστές επιστολές μπορεί να είναι δύσκολο να διαβαστούν, οι λέξεις στο σύνολό τους παραμένουν ευανάγνωστες. Αυτός ο τύπος αποτελέσματος θα πρέπει να είναι σχεδόν πάντα στο επίκεντρο ενός σχεδίου.
Ο Horacio Bella
Ο Horacio Bella χρησιμοποιεί ένα άλλο 3-D αποτέλεσμα στο χαρτοφυλάκιό του. Σε αυτή την περίπτωση, τα γράμματα εμφανίζονται να εμφανίζονται και όχι να διακλαδίζονται προς τα μέσα. Χωρίς αυτό το αποτέλεσμα, η αναγνωσιμότητα θα είχε μειωθεί σημαντικά. Ένα άλλο καλό αποτέλεσμα που χρησιμοποιείται εδώ είναι η σφιχτή κλίση των γραμμάτων, η οποία βελτιώνει περαιτέρω την αναγνωσιμότητα.
Κανόνας # 7: Μην βάζετε κινούμενα σχέδια με τον τρόπο του περιεχομένου σας
Σοβαρά, μην εμφανίζετε μικρές διαφημίσεις Flash ακριβώς εκεί που διαβάζει ο χρήστης. Το ίδιο ισχύει και για εκείνα τα κουτιά που εμφανίζονται κάθε φορά που ο χρήστης βρίσκεται στη μέση μιας πρότασης. Οι χρήστες δεν απολαμβάνουν να αποσπούν την προσοχή τους όταν βρίσκονται στη μέση μιας φράσης. Εκτός…
Είναι πραγματικά δύσκολο να μην ενθουσιαστεί από τη μικρή αράχνη ABA της ιστοσελίδας. Ο σχεδιασμός είναι καθαρός και παρόλο που η αράχνη είναι μια απόσπαση της προσοχής, είναι εντάξει. Μέχρι στιγμής, αυτή η ιστοσελίδα νομίζω ότι είναι η μόνη εξαίρεση στον κανόνα.
Κανόνας # 8: Προσέξτε στις γραμματοσειρές Safe-Web
Αν και οι τεχνικές αντικατάστασης προσώπου γραμματοσειράς είναι ακόμα μικρές, κάνουν ήδη μια μεγάλη εκτόξευση. sIFR ήταν η πρώτη, και πρόσφατα Cufón και Typefasce.js έχουν προκύψει.
Diseñorama
Στο Diseñorama ιστοσελίδα, το κόκκινο κείμενο "Recientemente" είναι επιλέξιμο. Ένα μειονέκτημα είναι ότι εάν ο ιστότοπος δεν φορτωθεί αμέσως, ο χρήστης θα δει σύντομα την αρχική απλή γραμματοσειρά.
Ένα άλλο μειονέκτημα είναι ότι εάν ο χρήστης έχει είτε JavaScript είτε Flash απενεργοποιηθεί, θα βλέπουν μόνο την αρχική γραμματοσειρά. Όλα τα πράγματα θεωρούνται, είναι ακόμα αρκετά δροσερό. Ας ελπίσουμε ότι είναι μια προεπισκόπηση του τι πρόκειται να έρθει τα επόμενα χρόνια.
Cactuslab
Cactuslab χρησιμοποιεί επίσης το sIFR για τις μπλε υποκεφαλίδες (όπως το "Winter Work"). Παρόλο που το sIFR είναι η πιο περίπλοκη από τις τεχνικές αντικατάστασης γραμματοσειράς, το κείμενο μπορεί να αντιγραφεί και να επικολληθεί, δίνοντας του ένα μεγάλο πλεονέκτημα έναντι των δύο άλλων τεχνικών.
Κανόνας # 9: Μην έχετε μια σελίδα εκτόξευσης / προσγείωσης
Πολλοί σχεδιαστές είχαν την ίδια παλιά συζήτηση με τους πελάτες τους για το γιατί μια σελίδα splash δεν είναι καλή ιδέα. Η Google τείνει να κατατάξει τις σελίδες αυτές σε χαμηλότερα επίπεδα και επιβραδύνει τον χρήστη από το περιεχόμενο που ακολουθεί. Αλλά μπορεί να είναι απίστευτα όμορφο και εμπνευσμένο αν γίνει σωστά.
Gloss Postproduction
Ο σκοπός του δείγματος χαρτοφυλακίου που εμφανίζεται στην αρχική σελίδα του Gloss Postproduction της ιστοσελίδας είναι να προκαλέσει μια συναισθηματική αντίδραση από το χρήστη.
Κατά τη διάρκεια κάθε επίσκεψης, φορτώνεται τυχαία φωτογραφία από το χαρτοφυλάκιο. Κάνοντας κλικ στη φωτογραφία, το κλιμακώνει και το τοποθετεί στη θέση του μεταξύ των άλλων κομματιών χαρτοφυλακίου στην περιοχή. Το αποτέλεσμα κλιμάκωσης και κίνησης παρέχει συνέχεια και βοηθά στη μεταφορά του συναισθήματος του χρήστη στο υπόλοιπο έργο της εταιρείας.
Issa London
Όταν ένας ιστότοπος έχει ολοκληρωθεί στο Flash, η γραμμή φόρτωσης μπορεί να χρησιμεύσει ως σελίδα εκκίνησης. Όταν ένας χρήστης βλέπει μια γραμμή φόρτωσης, είτε θα κλείσει τη σελίδα και θα πάει κάπου αλλού είτε θα μεταβεί σε άλλη καρτέλα και θα περιηγηθεί αλλού ενώ περιμένει.
Μόλις φορτωθεί η σελίδα, είναι καλύτερο να περιμένετε να επιστρέψει ο χρήστης πριν ξεκινήσει. Σε Issa London 's περίπτωση, η πύλη είναι μια τέλεια μεταφορά για να πει ότι η περιοχή είναι έτοιμη και ο χρήστης μπορεί να εισέλθει.
Όταν ο χρήστης κάνει κλικ στην πύλη, ανοίγει η πύλη και εμφανίζονται διάφορα εικονογραφημένα μοντέλα. Χρησιμοποιώντας την πύλη στην σελίδα εκκίνησης είναι μια μεγάλη ιδέα σχεδιασμού, επειδή κατά την είσοδο, ο χρήστης αισθάνεται εμπλακεί.
Κανόνας # 10: Μην χρησιμοποιείτε τους πίνακες
Οποιοσδήποτε σχεδιαστής ιστοσελίδων που χρησιμοποιεί πίνακες στα σχέδιά τους θα αποκαλείται αμέσως αρχάριος από έμπειρους σχεδιαστές. Οι πίνακες δεν εμφανίζονται το ίδιο σε όλα τα προγράμματα περιήγησης και μπορεί να κάνουν τον πηγαίο κώδικα να φαίνεται ακατάστατος, αλλά τουλάχιστον θα ξέρετε τι παίρνετε μαζί τους. Ακολουθούν ορισμένα παραδείγματα σχεδίων που περιλαμβάνουν πίνακες.
Αυτός ο πίνακας είναι ελαφρώς δυσδιάκριτος αλλά είναι τοποθετημένος ανάμεσα στις δύο καρέκλες. Είναι ένα ωραίο μικρό τραπέζι, αλλά δυστυχώς δεν συμβάλλει πολύ στη σχεδίαση αυτού του site.
Οι πίνακες είναι τρόπος στο φόντο αυτού του σχεδίου Εργασία στο Play , αλλά κρατούν τους φορητούς υπολογιστές των εργαζομένων και άλλα αντικείμενα εύκολα σε επαφή. Χωρίς αυτά τα τραπέζια, το δωμάτιο θα αισθανόταν πολύ πιο άδειο και η φωτογραφία φόντου δεν θα είχε το ίδιο αποτέλεσμα.
Παρόλο που το σχέδιο έχει κυρίως καρέκλες, εμφανίζεται ένα ωραίο τραπέζι στο πάνω δεξιά μέρος της μικρογραφίας. Μοιάζει με μια κατσαρόλα κάθεται πάνω σε αυτό.
Όσον αφορά τα σχέδια με τραπέζια, αυτό είναι ένα από τα καλύτερα. Με δύο τραπέζια που εμφανίζονται σε αυτό το κινούμενο σχέδιο Flash, ο σχεδιασμός τους δίνει μεγάλη προσοχή. Αυτός ο ιστότοπος θα πρέπει να είναι σε κάθε σχεδιαστή λίστα με τα μεγάλα σχέδια που χρησιμοποιούν πίνακες.
Σπάσε τους κανόνες!
Το σπάσιμο των κανόνων είναι εντάξει όταν ένα σχέδιο το απαιτεί. Πολλές από τις επιλογές σχεδιασμού που εξετάζονται εδώ δεν θα θεωρηθούν από τον μέσο σχεδιαστή. Αυτό είναι που χωρίζει τους μεγάλους σχεδιαστές από τους μέσους.
Εκείνοι που είναι αρκετά γενναίοι για να προχωρήσουν σε αυτά που έχουν διδαχθεί, ξεχωρίζουν πάντα.
Γράφτηκε αποκλειστικά για το WDD bt Eli Penner. Διαχειρίζεται τη δική του ιστοσελίδα στο SleepyHero.com
Παραβιάζετε τυχόν κανόνες στα σχέδια ιστού σας; Γιατί ή γιατί όχι? Παρακαλώ μοιραστείτε τις απόψεις σας μαζί μας ...