6 τρόποι βελτίωσης του σχεδιασμού του ιστολογίου σας
Τα blogs συχνά μπορούν να παραμείνουν στο κρύο όταν πρόκειται για το σχεδιασμό. Πολλοί από εμάς αποκλείουν την ανάγκη για εντατικό σχεδιασμό όταν πρόκειται για τα blogs μας - είτε για τις εταιρείες μας είτε για εμάς.
Αλλά είναι σημαντικό να συνειδητοποιήσουμε ότι κάθε πτυχή της διαδικτυακής μας ταυτότητας θα πρέπει να σχεδιάζεται με καθαρό και διαισθητικό τρόπο με όποιο στυλ προτιμάτε. Αυτή η αόριστη πτυχή της εργασίας στο διαδίκτυο είναι κάτι που πρέπει να προσπαθούμε συνεχώς. Και ναι, αυτό περιλαμβάνει το χρόνο που περνάμε να δουλεύουμε με τα blogs.
Πολλά από τα ιστολόγια του χρόνου χάνουν στην ανακατεύθυνση επειδή θεωρούμε τους ως τεράστιους «κελύφους κειμένου» όταν πρόκειται για την αρχιτεκτονική των πληροφοριών και αυτό είναι σίγουρα μια πτυχή της ταυτότητάς τους, αλλά έχουν περισσότερες δυνατότητες από αυτό.
Ορισμένα ιστολόγια, όταν έχουν σχεδιαστεί σωστά, είναι εξαιρετικά χρήσιμα για την προβολή της ροής των σκέψεών μας καθώς και μερικές πληροφορίες χαρτοφυλακίου, ενώ άλλες είναι εξαιρετικές για την προβολή ειδήσεων και φωτογραφίας.
Το θέμα είναι ότι ένα blog μπορεί να είναι μια μεγάλη δεξαμενή αποθήκευσης για μια ποικιλία θεμάτων και η εμφάνιση της οποίας έρχεται κάτω από τις συγκεκριμένες επιλογές σχεδιασμού που κάνετε σε όλη την έκταση. Τα τελευταία πέντε χρόνια πολλά πράγματα έχουν έρθει για να κάνουν τον κόσμο του blogging πολύ πιο εύκολο από ό, τι πριν. Για παράδειγμα, το WordPress είναι υπέροχο και τα θέματα κάνουν πολύ για το σχεδιαστικό έργο για εμάς, αλλά αν θέλετε να το φτιάξετε, τότε υπάρχουν μερικά πράγματα που πρέπει να θυμάστε.
Ομοίως, αν θέλετε να επεξεργαστείτε την πλοήγηση ή τη διάταξη του θέματος, υπάρχουν και κάποια πράγματα που θέλετε να γνωρίζετε. Αυτό ισχύει για σχεδόν οποιαδήποτε μηχανή blogging, ή όταν εργάζεστε μόνοι σας. Εδώ είναι μερικές από τις σκέψεις μου για το τι πιστεύω ότι είναι αυτά τα σημαντικά κομμάτια.
Εργασία με εφέ κειμένου με σκιά
Τα εφέ κειμένου είναι εξαιρετικοί τρόποι παρουσίασης των τίτλων κεφαλίδων, των γραμμών πλοήγησης ή των εισαγωγών περιεχομένου στο ιστολόγιό σας, υπό την προϋπόθεση ότι χρησιμοποιούνται με φειδώ. Ας δούμε μερικά από τα πιο κοινά αποτελέσματα που βλέπουμε υπερβολικά χρησιμοποιημένα στον ιστό και πώς να τα χρησιμοποιήσουμε σωστά.
Αναδρομικό κείμενο
Είναι συχνά ένας πόνος με τον οποίο συνεργάζεστε, αλλά φαίνεται ότι έχει κάνει τους γύρους το περασμένο έτος και μισό παρά το γεγονός αυτό. Και με την έλευση του CSS3 είναι πολύ πιο εύκολο να χειριστείτε και να βρείτε αυτή την τέλεια σκίαση. Έχω ένα παράδειγμα εδώ για να μας βοηθήσει να καταλάβουμε πώς να δημιουργήσουμε αυτό το αποτέλεσμα σωστά, τότε θα πάω πότε και πότε δεν θα το χρησιμοποιήσω. Το όνομα του παιχνιδιού με ρετρό εφέ δεν είναι ακτίνα θόλωσης και με διπλές σκιές. Ας πούμε ότι δουλεύουμε με μια σκούρα γραμματοσειρά (# 707070I), θέλουμε να χρησιμοποιήσουμε μια διπλή σκιά κειμένου για να το πετύχουμε αυτό. Θα φαινόταν κάτι τέτοιο:
text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;
Αυτό θα πρέπει να σας δώσει ένα ωραίο φαινόμενο διπλό σύνορο, με μια πολύ 70 το βλέμμα σε αυτό. Φυσικά, για να πάρετε αυτό το αληθινό 70 του vibe μπορεί να χρειαστεί να προσθέσετε όλα τα είδη χειρισμού χρώματος, αλλά τουλάχιστον έχουμε το βασικό αποτέλεσμα κάτω. Θυμηθείτε όμως, μην πάτε πολύ τρελός με το χρωματισμό - και σίγουρα μην πάτε πολύ τρελός με το offset x και y για τις σκιές κειμένου (όπως θα μπορούσε να αποδειχθεί δυσανάγνωστη πολύ γρήγορα). Όταν πρόκειται για τη χρήση ενός ρετρό αποτέλεσμα, η καλύτερη χρήση είναι στους τίτλους κεφαλίδων. Αυτό δεν είναι αποτέλεσμα που θα λειτουργούσε καλά με κείμενο μικρού μεγέθους ή περιγραφικές πληροφορίες. Καλύτερα να αφήσετε να παραμείνει στην κορυφή του ιστολογίου σας και να το αφήσετε μόνο του.
Έγγραφο με γράμματα & κείμενο
Ένα άλλο δημοφιλές χαρακτηριστικό ότι η προσφορά σκιάς του CSS3 είναι ένα ένθετο είδος στυλ, γνωστό και ως "letterpress". Αυτό είναι σίγουρα ένα καυτό θέμα στον κόσμο των εφέ κειμένου CSS3, οπότε ας δούμε πώς να τα κάνουμε σωστά. Ένα ενσωματωμένο styling επιτυγχάνεται συνήθως με την αντιστάθμιση του μικρού μεγέθους του άξονα Υ για να δώσει την εντύπωση ενός λεπτού φωτισμού μέσα στο άμεσο φόντο του κειμένου. Συχνά οι χρόνοι θα δείτε ότι χρησιμοποιείται ως αντίθετο προς την αντίθεση του φόντου (φως / σκοτάδι) έτσι ώστε το αποτέλεσμα να έχει περισσότερο αντίκτυπο στον αναγνώστη. Ας δούμε ένα παράδειγμα.
Ελαφρύ φόντο, σκοτεινό κείμενο:
body { background-color: #888; text-shadow: 0px 2px 3px #666;}
Σκούρο φόντο, ελαφρύ κείμενο
body {background-color: #666; text-shadow: 0px 2px 3px #888;}
Αυτό θα δώσει ένα πραγματικά ωραίο αποτέλεσμα σε στρώσεις / ένθετα που μπορεί να χρησιμοποιηθεί για κεφαλίδες ή τίτλους ιστολογίου. Χρησιμοποιήστε το με φειδώ σε ολόκληρο τον ιστότοπο, επειδή τίποτα δεν είναι χειρότερο από κάποιον που υπερβαίνει τις επιπτώσεις του κειμένου. Σε αυτήν την περίπτωση, θα ήταν εντάξει να χρησιμοποιείτε σε διάφορες δευτερεύουσες κεφαλίδες ή με διάφορες πλευρικές ή υποστυλωτές - αλλά βεβαιωθείτε ότι δεν χρησιμοποιείτε αυτό σε περιγραφικές πληροφορίες. Και πάλι, τα εφέ κειμένου που βασίζονται σε σκιά δεν πρέπει να χρησιμοποιούνται για κάτι τέτοιο.
Εργασία με εικόνες στο ιστολόγιό σας
Ας το παραδεχτούμε, όπως οι σχεδιαστές ιστοσελίδων μας αρέσει να αναδείξουμε τη δουλειά μας. Μας αρέσει τόσο πολύ που ακόμη και τα προσωπικά μας ιστολόγια μπορούν να γλιστρήσουν με εικόνες χαρτοφυλακίου, και οι λεζάντες γύρω από. Γιατί λοιπόν να μην εδραιώσουμε αυτά τα δύο; Ο καλύτερος τρόπος για να εργαστείτε με τις πληροφορίες λεζάντας είναι να περιέχει σχετικές πληροφορίες μέσα στην ίδια την εικόνα και ο καλύτερος τρόπος να γίνει αυτό είναι να εφαρμόσει ένα αποτέλεσμα CSS3 απευθείας στην εικόνα.
Εάν είστε περίεργοι γιατί πιστεύω ότι αυτή είναι μια τόσο σημαντική πτυχή της εργασίας με τις εικόνες, απλά επικεφαλής πάνω στο κατάστημα web του Google Chrome (add-ons). Είναι σε θέση να εμφανίζουν χιλιάδες εικόνες χωρίς κανένα κείμενο γύρω τους και παρ 'όλα αυτά μας δίνουν αρκετές πληροφορίες σχετικά με την εν λόγω εικόνα για να μάθουμε αν θέλουμε να κάνουμε κλικ σε αυτό ή όχι. Αυτό είναι λαμπρό και πολλοί περισσότεροι από εμάς πρέπει να εφαρμόζουν μια τέτοια τεχνική όχι μόνο για να καθαρίσουν το περιττό κείμενο λεζάντας αλλά και για να δώσουν ώθηση στην εμπειρία των χρηστών.
Ας δημιουργήσουμε ξανά αυτό για το προσωπικό σας blog, αλλά με το δικό σας άγγιγμα, ώστε να μπορείτε να εμφανίσετε πληροφορίες πελάτη για εικόνες στον ιστότοπο στις οποίες έχετε δουλέψει:
Πρώτα πρέπει να δημιουργήσουμε ένα κοντέινερ για την εικόνα και στη συνέχεια μέσα σε αυτό πρέπει να δημιουργήσουμε ένα άλλο δοχείο για το κείμενο που θέλουμε να χρησιμοποιήσουμε. Σε αυτήν την περίπτωση, θα χρησιμοποιήσουμε μια δευτερεύουσα κεφαλίδα, ένα κομμάτι κειμένου και μια σύνδεση. τότε μέσα από αυτό δημιουργεί ένα δοχείο για το κείμενο και συνδέσεις με τον ιστότοπο του πελάτη που εμφανίζουμε.
Σε αυτή την ενότητα, αυτό που κάνουμε είναι να βγάλουμε την πραγματική εικόνα στην μετάβαση και να προετοιμάσουμε το κείμενο για μετάβαση. Αναγνωρίζουμε επίσης ότι θέλουμε η εικόνα να αποχωρήσει κατά μήκος του άξονα Χ και όχι του άξονα Υ, έτσι ώστε να σημαίνει θα έχουμε ένα αποτέλεσμα τύπου συρόμενης πόρτας.
Τώρα θα ρυθμίσουμε το φαινόμενο του hover-over ποντικιού και θα πάρουμε τη μετάβαση για να ξεκινήσουμε από αυτό το γεγονός.
.image_container:hover .text_container { transform: translateX(0px);}.image_container:hover img { transform: translateX(300px);transition-delay: 0.1s;}.image_container:hover p { opacity: 1; transition-delay: 0.4s; }Όπως μπορείτε να δείτε εδώ, αυτό που κάναμε ήταν παρόμοιο με αυτό που κάναμε παραπάνω για την εικόνα. Έχουμε απλά φέρει το κείμενο μετά την εικόνα αριστερά, και έδωσε μια 0.1s καθυστέρηση για να βεβαιωθείτε ότι πηγαίνει ομαλά. Και αυτό είναι.
Υπάρχει μια δέσμη άλλων τρόπων που μπορείτε να προσαρμόσετε αυτό, και σίγουρα έναν τόνο άλλων εφέ μετάβασης που μπορείτε να χρησιμοποιήσετε. Θυμηθείτε όμως ότι αν εργάζεστε με πιο προηγμένες μεταβάσεις, μην τις χρησιμοποιείτε με τέτοιο επαναλαμβανόμενο τρόπο όπως θα κάνατε με κάτι τόσο απλό. Χρησιμοποιούνται καλύτερα για να τονιστούν οι βασικές εικόνες.
Εργασία με δημιουργικές διατάξεις
Συχνά, ως σχεδιαστές ιστοσελίδων, θα δούμε τις υπερβολικά χρησιμοποιούμενες τάσεις που έχουν καταστρατηγηθεί σε χρόνο και χρόνο και θέλουμε να είμαστε μια φωνή για αλλαγή σχετικά με αυτούς. Ωστόσο, η εναντίωση των σιτηρών μπορεί να είναι μια επικίνδυνη πρακτική, ειδικά αν δεν το κάνετε σωστά (ως σημείωμα - δεν λέω ότι πρέπει να είσαι δημιουργικός με τον «σωστό τρόπο» επειδή δεν υπάρχει «σωστός τρόπος» να να είσαι δημιουργικός). Ανέφερα ότι επειδή θεωρώ ότι είναι δημιουργική είναι από τον ίδιο τον ορισμό της η αποδέσμευση των εαυτών μας από περιορισμούς ή δημιουργικούς κανόνες και στην πραγματικότητα θα το ενθάρρυναν, αλλά πιστεύω επίσης ότι πρέπει να είμαστε επιφυλακτικοί για το λόγο ότι τέτοιες προδιαγραφές έχουν βυθιστεί στο web να σχεδιάσουμε θέματα και τι μπορούμε να κάνουμε για να είμαστε καινοτόμοι μαζί τους, έχοντας κατά νου αυτά.
Μοναδική ευθυγράμμιση κειμένου
Όταν εργάζεστε με κείμενο με δημιουργικούς ή μοναδικούς τρόπους (δηλαδή όχι 12pt Arial στο κέντρο), είναι σημαντικό να θυμάστε ότι το κείμενό σας δεν είναι πια το κύριο περιεχόμενο της σελίδας. Έχει υποβιβαστεί σε ένα στοιχείο στήριξης, αν και σημαντικό.
Μια ερώτηση που πρέπει πάντα να αναρωτηθείτε όταν εργάζεστε με το κείμενο είναι: "Μήπως αυτή η ισορροπία είναι καλή με την υπόλοιπη σελίδα;" Μπορεί να είναι δίπλα σε κάποια εργασία χαρτοφυλακίου, κάποια τυχαία εικόνα ή ίσως μόνο σε διάφορες άλλες στήλες κειμένου εκατέρωθεν της η σελίδα.
Αλλά ανεξάρτητα από το τι είναι δίπλα ή κάθετα σε εσάς πρέπει να προσπαθήσετε να το εξισορροπήσετε όσο καλύτερα μπορείτε. Σκεφτείτε τις γραμμές δικτύου και μελετήστε τα συστήματα πλέγματος εκεί έξω εάν πρέπει ( 960 σύστημα πλέγματος είναι αυτό που θα πρότεινα). Μελετήστε όπου έχουν τοποθετήσει τη διάταξη του πλέγματος στη σελίδα και στη συνέχεια αναρωτηθείτε γιατί - τότε συμπεραίνω αν και η δική σας είναι εξίσου ισορροπημένη. Φανταστείτε ότι βάζετε το περιεχόμενό σας κατά μήκος του ίδιου του συστήματος πλέγματος και προσπαθείτε να σκεφτείτε τι θα μοιάζει σε εκείνη την περίπτωση - και στη συνέχεια να το αντιγράψετε στο CSS.
Δημιουργία υποσέλιδων
Τα υποσέλιδα δημιουργικής δημιουργίας μπορούν πραγματικά να προσθέσουν μια μεγάλη προσωπικότητα σε ένα ιστολόγιο ή έναν ιστότοπο και μοιάζει να είναι αντίθετο-διαισθητικό να το σκεφτείτε. Είτε μιλάμε για jQuery κύλιση που μας προσγειώνεται σε ένα όμορφο υποσέλιδο θέμα σε ένα «κάτω από τη γη» στυλ, ή απλά για το κάτω μέρος της ιστοσελίδας μιας εταιρείας ή ένα blog, είναι ένα πολύ μικρό μέρος ενός δικτυακού τόπου, αλλά ένα που μπορεί να έχει πολύ ισχυρό αντίκτυπο. Οι απόψεις διαχωρίζονται σε ποιο βαθμό συμβαίνει αυτό και γιατί μπορεί να είναι. Έχω τη δική μου θεωρία: όταν διαβάζουμε μια ιστοσελίδα ξεκινάμε από την κορυφή και προχωρούμε προς τα κάτω και είναι στα πρόθυρα της σελίδας που βγάζουμε τα συμπεράσματά μας για το τι έχουμε διαβάσει.
Όταν εργάζεστε με ένα δημιουργικό υποσέλιδο, υπάρχουν μερικά πράγματα που θέλετε να έχετε κατά νου και μερικές καλές πρακτικές που παρατηρήσαμε να χρησιμοποιείτε στα υποσέλιδα που αγαπώ περισσότερο. Για μένα το πιο σημαντικό μέρος της χρήσης ενός υποσέλιδου με αυτόν τον τρόπο είναι να χρησιμοποιήσετε το ίδιο σχέδιο χρώματος με τον ιστότοπό σας, αλλά με διαφορετική αντίθεση. Αυτό είναι εξαιρετικά σημαντικό και φυσικά μπορείτε να αντλήσετε την αντίθεση πάνω ή κάτω στο χρώμα της γραμματοσειράς σε σχέση με την αντίθεση με την οποία εργάζεστε για το συνολικό θέμα στο υποσέλιδο.
Το σημαντικό πράγμα που πρέπει να θυμάστε είναι ότι θέλετε να έχετε μια ωραία βαθιά στυλ για αυτό το τμήμα. Δίνει μια ωραία αίσθηση ολοκλήρωσης στην περιοχή. Όταν χρησιμοποιείτε αυτήν την τεχνική, μπορείτε να κάνετε το υποσέλιδο όσο το δυνατόν περισσότερο, στο λόγο, διότι με το αντιπαραβαλλόμενο σχέδιο χρώματος είναι προφανές ότι πρόκειται για τμήμα υποσέλιδου.
Όσον αφορά το περιεχόμενο, στον κόσμο του νέου υποσέλιδου μπορεί να είναι σωστό να προσθέσετε την εικονογράφηση του λογότυπου και το όνομα του ιστολογίου σας, τις εικόνες ή συνδέσμους του κοινωνικού σας δικτύου, το τελευταίο σας tweet και ακόμη και μια ωραία απλοϊκή φόρμα επικοινωνίας. Αυτό μπορεί φυσικά να ποικίλλει με βάση τις προσωπικές σας προτιμήσεις, αλλά το σημείο μου με την εμφάνιση όλων αυτών των επιλογών είναι να απεικονίσει την εξέλιξη από το παρελθόν στο παρόν σε αυτό που είναι κατάλληλο να εμφανιστεί στο κάτω μέρος μιας ιστοσελίδας ή ενός blog.
jQuery κύλιση
Αυτός είναι ένας από τους αγαπημένους μου τρόπους να κάνω πλοήγηση σε έναν ιστότοπο και πιστεύω επίσης ότι είναι ιδιαίτερα εφαρμόσιμο για την πλοήγηση των δημοσιεύσεων σε ένα blog. Υπάρχουν μερικοί διαφορετικοί τρόποι για να εργαστείτε με το jQuery γι 'αυτό, οπότε εδώ θα αναφερθώ σε έναν από τους αγαπημένους (και ευκολότερους) μου τρόπους να κάνω μια ομαλή κύλιση και στη συνέχεια να περάσω από αυτό που συμβαίνει και πώς να το εφαρμόσει.
Αυτός είναι ο κώδικας για την κάθετη κύλιση, καθώς η οριζόντια κύλιση δεν είναι τόσο επιθυμητή.
$(function() {$('ul.nav a').bind('click',function(event){var $anchor = $(this);$('html, body').stop().animate({scrollTop: $($anchor.attr('href')).offset().top} , 1000), event.preventDefault (),}),}).Αυτό που συμβαίνει εδώ μπορεί να φαίνεται περίπλοκο, αλλά είναι πραγματικά πολύ απλό. Ανοίγουμε μια λειτουργία στο ".class" του στοιχείου πλοήγησης στο οποίο πρόκειται να κάνουμε κλικ (ονομάζουμε αυτό ένα click-event). Έτσι το πιο σημαντικό μέρος εδώ είναι να τιτλοφορείται η κλάση της λίστας (ul) στο "nav". Ή αντικαταστήστε το "nav" στον κώδικα με ό, τι έχετε ονομάσει αυτή την τάξη. Και αυτό είναι λίγο πολύ για ένα λειτουργικό jQuery κύλισης, απλά ρίξτε αυτό στο δικτυακό σας τόπο και συνδέστε με το εκκαθαρισμένο jQuery (προτιμότερο) και είστε έτοιμοι να πάνε.
Όσον αφορά τη χρήση με μια κάθετη κύλιση όπως αυτή, είναι αρκετά απεριόριστη. Πολλοί άνθρωποι απολαμβάνουν να μην χρειαστεί να μετακινηθούν προς τα κάτω χειροκίνητα, απολαμβάνουν πραγματικά τη σελίδα που το κάνει γι 'αυτούς και είναι επίσης ένας λαμπρός τρόπος για να μετακινηθείτε από το post σε post σε έναν ιστότοπο, ειδικά εάν αυτές οι θέσεις είναι μεγάλες. Συχνά θα το χρησιμοποιήσω για να μεταφέρω σε διάφορα υποτομέα χαρτοφυλακίων μέσα στα blog μου ή μέσω κατηγοριών σε ιστότοπους. Είναι επίσης μια τέλεια τεχνική, αν είστε theming site σας, όπως να κάνετε ένα θέμα σε μέρα στη νύχτα, ή θέματα για τις κατηγορίες σας ή θέματα blog.
Ελπίζω ότι ορισμένες από αυτές τις τεχνικές ήταν χρήσιμες για όλους εσάς προσπαθώντας να εφαρμόσετε διάφορες αισθητικές σχεδίασης στο blog σας. Θυμηθείτε, χρησιμοποιήστε τα με φειδώ και προσπαθήστε να βεβαιωθείτε ότι ενεργείτε με την καλύτερη κρίση σας όταν χρησιμοποιείτε φανταχτερά εφέ. Έχουμε την υποχρέωση να δημιουργήσουμε ένα διαδίκτυο που δεν είναι τόσο άσχημο όσο έχουν γίνει ορισμένες πτυχές του εξωτερικού κόσμου. Αν και είναι ένα μεγάλο και συντριπτικό έργο, είναι ένα που μπορούμε να πετύχουμε αν το πάρουμε μόνο ένα σχέδιο κάθε φορά και μία μέρα τη φορά. Κρατήστε το απλό, κρατήστε το ειλικρινές, κρατήστε το αληθινό και βάλτε πάντα πάθος σε αυτό που κάνετε- καθώς πάντα θα λάμψει.
Ποιες είναι οι καλύτερες συμβουλές σχεδίου blog σας; Τι κάνει για ένα πραγματικά μεγάλο σχέδιο blog; Ενημερώστε μας στα σχόλια!
