Κορδέλες και ετικέτες στο σχεδιασμό ιστοσελίδων
Οι τάσεις μπορούν να γεννηθούν τόσο σιωπηλά και λεπτή, που σπάνια παρατηρούμε.
Και όταν εξετάζετε εκατοντάδες ιστότοπους, βλέπετε συχνά σχέδια που διαφορετικά θα χάνατε. Ένα τέτοιο μοτίβο είναι η συχνή χρήση ετικετών και κορδελών.
Αυτές οι μικρές ανθίζει έχουν γίνει όλο και πιο δημοφιλείς. Αυτό το άρθρο αντιμετωπίζει τα δύο στοιχεία επειδή χρησιμοποιούνται τόσο συχνά τόσο συχνά.
Ενώ οι κορδέλες είναι αυτονόητες, με ετικέτες εννοώ τις πλαστικές ετικέτες που κρέμονται από το επάνω μέρος της οθόνης, όπως μια ετικέτα σε ένα t-shirt.
Οι ιστότοποι που χρησιμοποιούν αυτά τα στοιχεία είναι πραγματικά εξαιρετικά σε ποιότητα. Η συναρμολόγηση αυτής της πανέμορφης βιτρίνας αποδείχθηκε εξαιρετικά εύκολη. Λίγες τάσεις είναι σαν αυτό: συνήθως πρέπει να περάσετε από πολλά φτωχά παραδείγματα για να βρείτε τα νόστιμα.
Γιατί να χρησιμοποιήσετε αυτές τις κορδέλες και ετικέτες;
Οι ετικέτες είναι χρήσιμες επειδή τραβούν την προσοχή του χρήστη δημιουργώντας την ψευδαίσθηση του βάθους. Προωθούν το περιεχόμενό τους στο χρήστη. Οι ετικέτες είναι επίσης συχνά στυλ με γροθιά, είτε μέσω 3-D εφέ ή έντονα χρώματα αντιθέσεις.
Αυτοί οι παράγοντες καθιστούν την ετικέτα μια εξαιρετική τοποθεσία για κρίσιμες πληροφορίες: λογότυπα, πλοήγηση, προσκλήσεις για δράση. Βλέπουμε αυτό στην βιτρίνα παρακάτω. Φυσικά, όπως πάντα, αξιολογείτε τις ανάγκες σας πριν εφαρμόσετε αυτό το στοιχείο στον δικό σας ιστότοπο.
Η κορδέλα μοιράζεται τις ίδιες ιδιότητες, πράγμα που είναι πράγματι ο λόγος που το βρίσκουμε και η ετικέτα μαζί τόσο συχνά: εφιστά την προσοχή και είναι ένας εξαιρετικός τόπος για σημαντικές πληροφορίες. Το σχήμα της κορδέλας το ξεχωρίζει από την ετικέτα. τα δύο βέλη στα άκρα τους φαίνεται να δείχνουν το περιεχόμενο μέσα, κατευθύνοντας με προσοχή την προσοχή του χρήστη.
Μια οικογένεια στυλ
Ένας άλλος λόγος που τα δύο αυτά στοιχεία συναντώνται συχνά σε ιστοσελίδες είναι ότι είναι και οι δύο ψηφιακές αναπαραστάσεις του υφάσματος. Δεν προκαλεί έκπληξη το γεγονός ότι πολλοί από τους παρακάτω ιστότοπους έχουν άλλα στοιχεία που σχετίζονται με το ύφασμα, συμπεριλαμβανομένων των λεπτών ραφών, των υφασμάτων και άλλων οργανικών στοιχείων.
Κορδέλες
Μαθητής της επιστολής
Η κορδέλα ωραία πλαισιώνει το όνομα Μαθητής της επιστολής εδώ. Επίσης, η σελίδα παρουσιάζεται ως μία στήλη. ο ακανόνιστος τίτλος ενθαρρύνει τον χρήστη να ξεκινήσει το ταξίδι του στην κορυφή και να ρεύσει από εκεί.
Κουνάβι
Κουνάβι Η κορδέλα είναι αρκετά λεπτή. Η άνθηση ζωντανεύει τη σελίδα, ενώ συνοψίζει την εστίαση της εταιρείας σε ένα slogan δύο λέξεων. Ένας τέλειος τρόπος για να ορίσετε τις προσδοκίες, επειδή το όνομα της εταιρείας δεν μας λέει τι κάνει.
Alex Pierce
Με το κείμενο να είναι τόσο τεράστιο στην αρχική σελίδα του Alex Pierce Του χαρτοφυλακίου, θα χρειαζόταν ένα αρκετά τολμηρό στοιχείο για την εξισορρόπησή του. Σε αυτή την περίπτωση, η κορδέλα κάνει καλή δουλειά να ξεκλειδώνει την κεφαλίδα. Λατρεύω επίσης πώς το διπλωμένο στρώμα στη μέση της κορδέλας προσθέτει εστίαση στο όνομα του σχεδιαστή.
Ροκχόλικο!
Στο μάλλον ασυνήθιστο Ροκχόλικο! , η κορδέλα κατευθύνει την προσοχή του χρήστη προς τα κάτω, παίζοντας ωραία στο κάθετο κύλινδρο της ιστοσελίδας και βοηθώντας τον χρήστη να ψάξει στο περιεχόμενο.
Παρίσι Τζόουνς
Το νόστιμο κόκκινο της κορδέλας κάνει το όνομα της μπάντας Παρίσι Τζόουνς βγείτε εδώ. Παρόλο που η επεξεργασία κειμένου είναι μάλλον λεπτή, το τολμηρό σχέδιο εξασφαλίζει ότι το παρατηρείτε.
Blog en Bois
Επί Blog en Bois , η επίδραση βέλους της κορδέλας είναι ιδιαίτερα ισχυρή, σε μεγάλο βαθμό εξαιτίας του αντίθετου σκούρου πίσω από το κίτρινο. Βρίσκω τον εαυτό μου πίσω ξανά στο λογότυπο. Είναι σίγουρα ένας ισχυρός τρόπος να αναβαθμιστεί η μάρκα στο μυαλό του χρήστη.
Πίνακας ελέγχου HTML5
Η δημοφιλής ιστοσελίδα Πίνακας ελέγχου HTML5 χρησιμοποιεί κορδέλες για να επιστήσει την προσοχή μας στα πιο σημαντικά στοιχεία της δράσης στη σελίδα. Λατρεύω ότι οι κορδέλες κάνουν τη δουλειά τους χωρίς να χρειάζεται να λένε "Κατεβάστε εδώ". Ο συνδυασμός των κορδελών και των ετικετών μας λέει ότι είναι εδώ για να κατεβάσετε τους πόρους.
Κονσέρβες ψαριών & τσιπς
Ο σκοπός της κορδέλας δεν είναι τόσο ξεκάθαρος Κονσέρβες ψαριών & τσιπς . Η λεπτομέρεια για το "Άνοιγμα 7 ημερών την εβδομάδα" φαίνεται σχετικά μικρή, αλλά είναι προφανώς μια σημαντική διάκριση για αυτό το εστιατόριο.
Wells Riley
Wells Riley είναι ένα τέλειο παράδειγμα κορδονιών στην υπηρεσία της αισθητικής. Οι κορδέλες φαίνονται υπέροχα εδώ και γίνονται το επίκεντρο της σελίδας.
Dhiraj Singh Karki
Πάντα αγαπώ σχέδια που ξεφεύγουν από τη σύμβαση. Το χαρτοφυλάκιο του σχεδιαστή UI Dhiraj Singh Karki είναι ακριβώς μια τέτοια ιστοσελίδα. Εδώ, η κορδέλα χρησιμοποιείται μάλλον έξυπνα και δεν πακετάρει σχεδόν την ίδια οπτική γροθιά όπως σε άλλες ιστοσελίδες. Αναμειγνύεται στη σελίδα και έχει αρκετό ύφος για να κρατήσει το σχέδιο πολύ απλό.
Είδος σκίουρου
Είδος σκίουρου είναι ένα εξαιρετικό παράδειγμα πόσο καλά μια κορδέλα μπορεί να λειτουργήσει με οργανικά στοιχεία. Η κορδέλα γύρω από την κύρια πλοήγηση ταιριάζει απόλυτα με τις πλούσιες εικόνες παρακάτω. Διατηρεί επίσης την πλοήγηση από το να χαθεί ανάμεσα στα ισχυρά έργα τέχνης.
Ryan M. Stryker
Για άλλη μια φορά βλέπουμε τη δύναμη της κορδέλας να εστιάσει την προσοχή. Η κεντρική του θέση και η έντονη αντίθεση εξασφαλίζουν ότι δεν θα χάσετε Ryan M. Stryker 'S όνομα.
Ετικέτες
Ennea
Δεδομένου ότι Ennea είναι μια μάρκα ειδών ένδυσης, δεν αποτελεί έκπληξη ότι η ετικέτα εδώ περιέχει το λογότυπο και το εμπορικό σήμα. Μερικές φορές μια απλή προσέγγιση λειτουργεί καλύτερα.
Philip Meissner Design
Η ετικέτα περιέχει την κύρια πλοήγηση Philip Meissner Design . Συνήθως θα έδιωχνα από αυτή την ασυνήθιστη διαμόρφωση των συνδέσμων, αλλά η διάταξη και τα χρώματα εδώ εξασφαλίζουν ότι οι σύνδεσμοι είναι εξαιρετικά εύκολο να βρεθούν.
Τον πεντικιούρ μαϊμού
Τι θα μπορούσε να είναι πιο σημαντικό σε έναν ιστότοπο ηλεκτρονικού εμπορίου και στη συνέχεια να καθοδηγεί τους χρήστες να το ελέγξουν; Τον πεντικιούρ μαϊμού έχει μια συμπαθητική μικρή τολμηρή ετικέτα για να βοηθήσει τους χρήστες να ολοκληρώσουν την αγορά τους.
Parkbud
Με όλες τις εφαρμογές smartphone εκεί έξω, οι καλές πρέπει να επικοινωνούν με τους βασικούς τους διαφοροποιητές. Parkbud είναι ελεύθερη και η τολμηρή κόκκινη ετικέτα φροντίζει να τη γνωρίζετε. Η ετικέτα είναι ωραία πτυχωμένη, αλλά πάντα ορατή από τη γωνία του ματιού σας, υπενθυμίζοντάς σας ότι αυτή η νόστιμη εφαρμογή είναι δωρεάν.
Λένα
Λένα είναι ένα τέλειο παράδειγμα ετικετών σε συνδυασμό με υφές υφασμάτων. Παρατηρήστε πρώτα το φόντο με υφή denim. επίσης, τα χτενισμένα σύνορα κάτω από την κύρια πλοήγηση αισθάνονται πολύ κλωστοϋφαντουργικά προσανατολισμένα.
Coreymade
Ενώ μια μικρή λεπτομέρεια, μου αρέσει πραγματικά ο τρόπος που η γραμματοσειρά δέσμης ενεργειών κάνει την ετικέτα Coreymade αισθάνεται περισσότερο σαν μια ετικέτα σε ένα πουκάμισο από ένα λογικό λογότυπο της ιστοσελίδας. Και το ψευδο-3D εφέ κάνει την ετικέτα πραγματικά pop για τον θεατή.
Netastica
Η ετικέτα στο Netastica είναι κυρίως εκεί για να φανεί όμορφη, αν και εξακολουθεί να περιέχει σημαντικές πληροφορίες και συνδέει τους επισκέπτες με την αρχική σελίδα.
Τζέιμς Τάιλορ
Η ετικέτα βρίσκεται σε μια τόσο ορατή θέση Τζέιμς Τάιλορ Της ιστοσελίδας ότι δεν χρειάζεται πολλή αντίθεση για να ξεχωρίσει. Λειτουργεί καλά με τη ροή του ιστοτόπου και εκτελεί το ρόλο του αβίαστα.
Κορδέλες και ετικέτες
Στο τελευταίο μέρος αυτής της βιτρίνας, θα δούμε τους ιστότοπους που χρησιμοποιούν τόσο κορδέλες όσο και ετικέτες.
ClearSpan Media
Οι κορδέλες και οι ετικέτες πηγαίνουν πολύ ωραία μαζί, όπως φαίνεται από ClearSpan Media . Εδώ θα βρείτε επίσης υφάσματα με μοτίβα, βελονιές και λεπτές χρωματικές παραλλαγές. Οι δύο ετικέτες επάνω και η κορδέλα κάτω κάτω λειτουργούν ως ένα είδος κύκλου ενδιαφέροντος για τον χρήστη.
Krichevtsova Alexandra
Ενώ Krichevtsova Alexandra Της ιστοσελίδας είναι μάλλον barebones στο περιεχόμενο, η ετικέτα και η κορδέλα προσθέτουν επιπλέον ζωή σε βασικά στοιχεία. Θα μπορούσατε να απολαύσετε αυτόν τον ιστοχώρο χωρίς να γνωρίζετε ακόμη τι κάνει το άτομο.
Wes Bos
Οι περισσότεροι από τους ιστότοπους αυτής της συλλογής έχουν μάλλον μεγάλες κορδέλες. Δεν είναι έτσι Wes Bos . Τα του είναι πολύ μικρότερα, μια καλή υπενθύμιση ότι δεν χρειάζεται να κυριαρχήσουν στο σχεδιασμό για να εκτελέσουν τη λειτουργία τους.
συμπέρασμα
Δεδομένης της ποιότητας των ιστοτόπων αυτής της συλλογής, κανένας από αυτούς τους σχεδιαστές δεν θέλησε να δημιουργήσει κάτι "μοντέρνο". Αντίθετα, αντιμετώπισαν ένα σύνολο αναγκών και από αυτές τις ανάγκες προέκυψε μια αποτελεσματική οπτική συσκευή για την εστίαση της προσοχής, και υπογραμμίζοντας σημαντικές ενέργειες.
Αν θα θέλατε μερικές ωραίες κορδέλες με βάση το CSS για τη δική σας ιστοσελίδα, το διαδικτυακό 3-D γεννήτρια κορδέλας είναι ένα εύχρηστο εργαλείο για τη δουλειά.