Σχεδιασμός συμβουλών και παραδειγμάτων εντατικής διαμόρφωσης περιεχομένου

Για να δημιουργήσετε ολοκληρωμένες διατάξεις για τον ιστό απαιτούνται δεξιότητες και μεγάλη αφοσίωση. Οι σχεδιαστές ιστοσελίδων εκτελούν μια δουλειά όπου οι περισσότεροι δεν μπορούν να κάνουν, και με πολύ εξελιγμένο τρόπο. Καθώς οι ιστοσελίδες έχουν εξελιχθεί, έχουμε δει την ανάγκη να γεμίσουμε περισσότερο χώρο και να διατηρήσουμε περισσότερο περιεχόμενο από ποτέ άλλοτε. Αν καταλαβαίνετε ήδη πώς να σχεδιάσετε έναν ιστότοπο, αυτό είναι ένα τεράστιο επίδομα για την καλύτερη κατανόηση αυτών των μεθόδων. Τα βασικά χαρακτηριστικά σε έναν ιστότοπο σπάνια αλλάζουν. Ωστόσο, με περιεχόμενο που υπερβαίνει το μέσο όρο, εμφανίζονται άλλοι παράγοντες, όπως ο λευκός χώρος, η τυπογραφία, η τοποθέτηση στοιχείων, μεταξύ άλλων.

Θα πάμε σε λεπτομέρειες για να καλύψουμε κάποιες σημαντικές συμβουλές για την οικοδόμηση έντασης περιεχομένου. Αυτά μπορεί να κυμαίνονται από εφαρμογές κοινωνικής δικτύωσης, μεγάλες επιχειρήσεις και εταιρικές ιστοσελίδες ή οτιδήποτε μεταξύ τους. Είναι σημαντικό να αναρωτηθείτε "τι προσπαθώ να επιτύχω με αυτό το σχέδιο?"όταν σχεδιάζετε σελίδες, καθώς θα σας βοηθήσει να προβλέψετε μια ευρύτερη προοπτική.

Προσαρμοσμένες ιστοσελίδες

Ανεξάρτητα από το πόσο έμπειρος είναι ο πρακτικός σχεδιασμός ιστοσελίδων, είναι αλήθεια ότι όλοι έπρεπε να ξεκινήσουμε κάπου. Ο σχεδιασμός προσαρμοσμένων ιστοσελίδων είναι γενικά το πρώτο βήμα προς την καριέρα στον προγραμματισμό web πριν από την εφαρμογή συμβατικών προδιαγραφών.

Συνιστώ πάντα τη δημιουργία μιας μικρής λίστας στοιχείων σελίδας που θεωρείται ότι έχουν εγκατασταθεί στο πρότυπο. Μόλις καταγραφούν όλα αυτά γίνεται ευκολότερο να εξαλείψει τις κακές ιδέες ή να πάρει στα χαμένα ή ξεχασμένα πολύτιμους λίθους. Αυτό επίσης ανοίγει το δρόμο για εύκολο σχεδιασμό για να ανακουφίσει το άγχος κάτω από το δρόμο.

Διάταξη Wireframe

Για τον γενικό ιστότοπο 5 σελίδων βλέπετε συχνά τα ίδια στοιχεία που επαναλαμβάνονται. Ένα λογότυπο της κορυφαίας γωνίας, σύνδεσμοι πλοήγησης κεφαλής, κύρια περιοχή περιεχομένου ενδεχομένως χωρισμένη με πλευρική γραμμή και άλλες λειτουργίες (login, πλαίσιο αναζήτησης κλπ).

Εξετάστε ένα καλό σημείο εκκίνησης για να αναπτύξετε λεπτομερείς διατάξεις σελίδας. Πολλοί σχεδιαστές θεωρούν χρήσιμο να σκιαγραφήσουν τα πιθανά σχέδια καλωδίων για να αποκλείσουν τα όχι τόσο προφανή ελαττώματα. Αυτό δεν απαιτεί κανένα φανταχτερό χαρτί και μπορεί να γίνει ακόμη και σε ένα σημειωμένο σημειωματάριο. Ο σκοπός ενός wireframe είναι να δώσει μια γενική ιδέα για το πού η διάταξη του χώρου θα πρέπει να είναι επικεφαλής με χώρο για να συμπληρώσετε τις λεπτομέρειες αργότερα.

Με περιεχόμενο βαρύ σχεδιαγράμματα θα πρέπει να ληφθεί υπόψη πόση πλατφόρμα θα περιέχει. Η οικοδόμηση μιας κλειστής διαρρύθμισης 2-3 στηλών για να φιλοξενήσει 100+ σελίδες μεγάλου, περίπλοκου περιεχομένου δεν θα αφήσει πολύ περιθώριο για χώρο αναπνοής. Με το σκίτσο και τον προγραμματισμό μπροστά μπορείτε να ελέγξετε το μέγεθος του ευρύχωρου χώρου για το περιεχόμενο της σελίδας. Αυτό δεν περιλαμβάνει μόνο περιοχές κειμένου ή μπλοκ, αλλά ασχολείται και με εικόνες και βίντεο.

Brilliant White Space

Λευκή απόσταση είναι πιθανό ο σημαντικότερος παράγοντας που πρέπει να ληφθούν υπόψη σε σχεδιασμό έντασης περιεχομένου. Το περιεχόμενο του ιστότοπου το διέπει, περισσότερο από κάθε κανονικό ιστότοπο. Εάν οι αναγνώστες αδυνατούν να κατανοήσουν το περιεχόμενο επειδή δεν υπάρχει χώρος για να αφομοιώσετε τα λόγια σας, η επισκεψιμότητα θα είναι πεντανόστιμη και δυσαρεστημένη.

Οι παράγραφοι και οι κεφαλίδες σελίδων είναι μια εξαιρετική θέση για να ξεκινήσετε με προσαρμογές. Χρησιμοποιώντας ιδιότητες CSS θα πρέπει να είστε σε θέση να χειριστείτε τα εξωτερικά περιθώρια και να γεμίσετε κάθε στοιχείο κειμένου γραμμικής γραμμής. Αυτές περιλαμβάνουν όλες τις επικεφαλίδες 1-6, παραγράφους, blockquotes, λίστες, προκαθορισμένο κείμενο και μερικά μικρότερα στοιχεία.

Αν θέλετε να κρατήσετε την προσοχή του αναγνώστη σας, είναι σημαντικό να εφαρμόσετε απόσταση κάτω από σημαντικά στοιχεία κειμένου. Οι παράγραφοι και οι μικρότερες κλάσεις λειτουργούν καλύτερα με τα περιθώρια κάτω από 15px-25px. Για μεγαλύτερα στοιχεία σελίδας, όπως h1 ή h2, εξετάστε 35px + (αυτό θα εξαρτηθεί επίσης από το μέγεθος της γραμματοσειράς σας). Τα διάκενα μεταξύ των κάθετων στοιχείων είναι σημαντικά για την κύλιση και τη σάρωση "στιγμιαία". Ωστόσο ύψος γραμμής είναι μια άλλη σημαντική ιδιότητα CSS που επηρεάζει την απόσταση μεταξύ γραμμών σε ένα στοιχείο κειμένου. Οι παράγραφοι θα πρέπει να έχουν πολύ μεγαλύτερη τιμή γραμμής-ύψους σε σύγκριση με το μέγεθος γραμματοσειράς τους, ώστε να υπάρχει αφθονία επιπλέον παρεμβολής μεταξύ των γραμμών.

Εξετάστε δυναμικά στυλ

Εκτός από την απόσταση, ψηφιακή τυπογραφία θα πρέπει να χειραγωγούνται με τρόπους ώστε να ξεπεράσουν τη σελίδα. Με εκατοντάδες εκατομμύρια ιστοσελίδες στον κόσμο σήμερα, είναι κοινό να βλέπουμε τον ίδιο τύπο γραμματοσειράς παντού.

Αν σχεδιάζετε μια διάταξη για έναν ιστότοπο με μεγάλη περιεκτικότητα, το αποτέλεσμα θα φανεί σαν ένα άλλο ήπιο πρότυπο μέχρι το τέλος. Υπάρχουν πολλές ιδιότητες για να παίξετε γύρω σας για προηγμένες τυπογραφικές μορφές. Σκιά κειμένου, λιγότερα / περισσότερα διαστήματα γραμμάτων, πλατφόρμες φόντου, εικονίδια ... ο κατάλογος είναι ατελείωτος.

Πραγματικά είστε ο σχεδιαστής και η τελευταία λέξη σας είναι νόμος. Ο σχεδιασμός μιας διάταξης δεν είναι συγκρίσιμος με έναν ενιαίο αυτοκινητόδρομο χωρίς λωρίδες. Κατά τη διάρκεια της διαδικασίας είστε σε θέση να επιστρέψετε και να αλλάξετε στυλ, να χειριστείτε νέα στοιχεία ή να απορρίψετε μια ιδέα εντελώς. Εξετάστε μερικές άλλες χρήσιμες συμβουλές CSS και παίξτε γύρω για να δείτε τι ταιριάζει καλύτερα!

Χρησιμοποιήστε τα μενού "Διόπτρες"

Με τόσο μεγάλο περιεχόμενο είναι απίθανο οι σύνδεσμοί σας να χωρέσουν σε μία σελίδα. Υπάρχουν πολλές επιλογές σχετικά με τον τρόπο αντιμετώπισης υπερφόρτωσης σελίδων. Η τοποθέτηση πρόσθετων συνδέσμων σε μπλοκ μπάρες ή ραμμένες σε στήλες στο υποσέλιδο τοποθεσίας είναι δύο χρήσιμες επιλογές.

Η πιο βολική και βολική επιλογή είναι να δημιουργήσετε ένα αναπτυσσόμενο σύστημα πλοήγησης με κατηγορίες κεφαλής και υποκατηγορίες. Υπάρχουν επίσης πολλά σενάρια ανοιχτού κώδικα που προσφέρουν υπο-υποκατηγορίες αν έχετε έντονα λεπτομερή θέματα.

Ενδεχομένως η πιο γρήγορη και λιγότερο απογοητευτική στρατηγική είναι να ξεκινήσετε με ένα πλαίσιο JavaScript. Μερικά από τα πιο δημοφιλή περιλαμβάνουν το jQuery, το MooTools, ή ενδεχομένως το Πρωτότυπο. Όλες αυτές οι βιβλιοθήκες προσφέρουν τεκμηρίωση και πολλές από αυτές διαθέτουν δωρεάν διαθέσιμα σενάρια μενού.

Προβολή προσφορών περιεχομένου

Στην πράξη, είναι πολύ πιο δύσκολο να δημιουργήσετε μια απλοϊκή περιοχή σώματος για να φιλοξενήσετε όλο το περιεχόμενο που περιέχει ο μέσος ιστότοπός σας. Με τη μετατόπιση των προτύπων του προγράμματος περιήγησης και την υποστήριξη της ημι-χαλαρής κινητής τηλεφωνίας, δεν είναι περίεργο ότι βλέπουμε τέτοιους ιστότοπους με ένταση περιεχομένου να κατεβαίνουν. Να είστε ευαίσθητοι σε κάθε στυλ της ιστοσελίδας στην οθόνη. Μερικοί θα περιέχουν πολλές εικόνες, άλλοι ενδέχεται να περιέχουν ένα πρωτεύον γραφικό ή βίντεο ή καθόλου γραφικά. Αφού ολοκληρώσετε την κωδικοποίηση της τελικής διάταξης, δημιουργήστε πολλές σελίδες HTML για να φιλοξενήσετε διαφορετικές προβολές.

Όλα αυτά θα έχουν την ίδια εσωτερική σήμανση εκτός από τα περιεχόμενα μέσα στην κύρια περιοχή περιεχομένου. Κάθε μεμονωμένη προβολή σελίδας μπορεί να μεταβληθεί και να δώσει μια εικόνα για ένα τελικό προϊόν. Αλλάξτε το για να συμπεριλάβετε όλες τις σημαντικές προβολές που πιστεύετε ότι θα χρειαστείτε με κάθε σελίδα. Άλλα παραδείγματα στοιχείων σελίδας θα μπορούσαν να περιλαμβάνουν κουτιά σχολίων, βίντεο ή ενσωματωμένες γκαλερί ή συνδέσμους διαχωριστικής σελίδας.

Σχεδιασμός Στρατηγικές Απόλυτα

Στην πραγματικότητα, δεν είναι απολύτως δύσκολο να δημιουργήσετε μια διάταξη Ιστού Powerhouse. Πολλοί σχεδιαστές έχουν συλληφθεί με τις μικρές λεπτομέρειες, όπως πώς να φυτέψουν στοιχεία μπλοκ ή υπερ-συνδέσεις χρώματος. Αυτές οι λεπτομέρειες είναι σημαντικές καθώς στέλνουν ένα μήνυμα επωνυμίας, ακόμη και από μικρότερα στοιχεία το μήνυμα πρέπει να έρθει μαζί με ολόκληρη τη σελίδα. Σχεδιάστε μυαλά τα στάδια του σχεδιασμού σας για να καταλάβετε πώς είναι η καλύτερη προσέγγιση για κάθε εμπόδιο. Εάν εργάζεστε με έναν πελάτη, θα ήταν καλό να συζητήσετε τι είδους περιεχόμενο θα γεμίσει τις σελίδες εκ των προτέρων. Αυτό σας δίνει την ευκαιρία να προγραμματίσετε και να στρατηγικήτε την καλύτερη προσέγγιση για μια γενική διάταξη.

Ένα άλλο ιδιαίτερα droll θέμα είναι το κινητό σχέδιο. Αυτή η νέα αγορά βλέπει τεράστια επέκταση όχι μόνο σε smartphones αλλά και σε ισχυρούς tablet PCs. Αυτό σημαίνει ότι οι χρήστες ενδέχεται να έχουν πρόσβαση στη διάταξή σας από οθόνη κινητής τηλεφωνίας - βεβαιωθείτε ότι το περιεχόμενο δεν είναι υπερχείλισης και παρουσιάζει με προσοχή.

7 Παραδείγματα ιστότοπων με βαρύ περιεχόμενο

Ακολουθούν μερικά στιγμιότυπα οθόνης από δημοφιλείς ιστότοπους με μεγάλο περιεχόμενο. Αυτά είναι κυρίως γνωστά σήματα τόσο σε φυσικές όσο και σε ψηφιακές αγορές. Ελέγξτε μερικές από τις παρακάτω ιδέες για να βρείτε κάποια έμπνευση στα δικά σας έργα. Επίσης, μπορείτε να μοιραστείτε και άλλα περιεχόμενα βαρύ web layouts στην ενότητα σχολίων.

Κλικ

Το Clicker είναι μια νέα εφαρμογή κοινωνικής δικτύωσης για τους λάτρεις της τηλεόρασης και των ταινιών. Μπορείτε να εγγραφείτε για ένα νέο λογαριασμό και να βρείτε μερικές από τις αγαπημένες σας κλασσικές τηλεοπτικές εκπομπές, αρχειοθετημένες κατά την καταγραφή εποχής και επεισοδίων. Θα μπορούσατε να συγκρίνετε τον ιστότοπο με το IMDB με λιγότερες πληροφορίες και περισσότερο περιεχόμενο βίντεο!

Το μέλλον του Σχεδίου Ιστού

Το μέλλον του Web Design 2011 θα ξεκινήσει πράγματα μακριά στο Λονδίνο αυτή την ερχόμενη άνοιξη. Ανατρέξτε στην αρχική σελίδα για περισσότερες πληροφορίες και ένα εξαιρετικό παράδειγμα σχεδιασμού σχεδίασης με βάση το κείμενο. Όλες οι λεπτομέρειες είναι πραγματικά μοιρασμένες και προσφέρουν ομιλητές, χρονοδιαγράμματα, εργαστήρια, χορηγούς και πολλά άλλα.

Λόρδος Likely

Σε αυτήν την κωμική διάταξη, ο κύριος χαρακτήρας Λόρδος Likely έχει «γελοιογραφηθεί» και διατρυπάται σε μια απεικόνιση. Ο ιστότοπος χωρίζεται σε 3 στήλες με κάθε νέο αθλητικό περιεχόμενο, διαφημίσεις, συνδέσμους ροών και αρχεία. Το ίδιο το σχέδιο είναι πολύ ρετρό και μια έξυπνη ανάληψη στα σχέδια απεικόνισης.

Microsoft

Οι περισσότεροι tech-enthusiasts είναι εξοικειωμένοι με τη Microsoft. Στην πραγματικότητα, οι περισσότεροι άνθρωποι που καταλαβαίνουν τι είναι ένας υπολογιστής μπορούν να σας δώσουν μια σύντομη περιγραφή της Microsoft και του Bill Gates. Η αρχική σελίδα τους φιλοξενεί περιεχόμενο για δεκάδες πακέτα λογισμικού, ενημερώσεις ειδήσεων, δελτία τύπου και πληροφορίες προγραμματιστών. Με λίγους τρόπους κάτω από τη σελίδα μπορείτε να εντοπίσετε ένα μενού κατακόρυφων καρτελών με δυναμική εναλλαγή περιεχομένου.

Μηχανή αναζήτησης εδάφους

Το Search Engine Land είναι ένα δημοφιλές διαδικτυακό περιοδικό που επικεντρώνεται στις μηχανές αναζήτησης και το μάρκετινγκ στο Διαδίκτυο. Συχνά ενημερώνονται με καταπληκτικές θέσεις ποιότητας και οδηγούν εκατοντάδες χιλιάδες ανθρώπους στο site τους κάθε μέρα. Η κύρια σελίδα χωρίζεται σε 3 στήλες που χρησιμοποιούνται για τη συγκράτηση κάθε ενότητας περιεχομένου και διαφήμισης.

Ο λευκός Οίκος

Ο σχεδιασμός του Λευκού Οίκου των Ηνωμένων Πολιτειών φαίνεται πολύ καθαρός και επαγγελματικός. Υπάρχουν πολλές πληροφορίες σχετικά με το χρονοδιάγραμμα του προέδρου και άλλα σημαντικά πολιτικά γεγονότα. Ένα τέχνασμα για την ανακούφιση της αίθουσας σελίδας ήταν η προσθήκη ενός μικρού ρυθμιστικού περιεχομένου προς την κατεύθυνση της σελίδας. Αυτό είναι ιδανικό για προβολή 3-4 μεγάλων ειδήσεων ειδήσεων όταν οι επισκέπτες σας προσγειώνονται στη σελίδα.

Yahoo Portal

Όσον αφορά τους μεγάλους ιστότοπους περιεχομένου, το Yahoo! πρέπει να τείνει προς την κορυφή. Yahoo! προσφέρει εκατοντάδες υπηρεσίες στους πελάτες τους, όπως το webmail, τα νέα, τα βίντεο και ακόμη και η αναζήτηση στο διαδίκτυο. Ελέγξτε μερικά από τα Y! συνδέσεις πύλης από την πλαϊνή γραμμή για να δείτε πώς τα πρότυπα τους συγκρίνουν.

συμπέρασμα

Αυτά είναι μόνο μερικά από τα βασικά σημεία και τα βήματα για την οικοδόμηση συγκεκριμένων σχεδίων περιεχομένου απαιτητικών. Οι ιστοσελίδες με μεγάλες δεξαμενές περιεχομένου θεωρούνται συχνά ως επιβάρυνση που κρατάει χορτονομές SEO και τίποτε πραγματικής αξίας. Σχεδιασμός είναι όλα, όπως είναι η πρώτη εντύπωση που ένας χρήστης παίρνει από κάθε δικτυακό τόπο. Με μεγάλους όγκους περιεχομένου αυτό μπορεί να γίνει καταστροφή με ακαταστασία και γενικεύσεις. Ποτέ μην σταματήσετε να ασκείστε και με μερικά μόνο έργα, θα αποκτήσετε κυριολεξία για να οραματιστείτε διατάξεις σχετικές με το περιεχόμενο.