Οπτική κατεύθυνση περιεχομένου Τι πρέπει να ξέρετε

ο οπτική κατεύθυνση του περιεχομένου είναι μια λιγότερο ευρέως διατυπωμένη, αλλά κρίσιμη πτυχή της υψηλής μετατροπής του web design. Κάθε επισκέπτης "απορροφά" έναν νέο ιστό στο φορτίο της πρώτης σελίδας - είτε το κάνει συνειδητά είτε όχι.

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

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

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

Εστίαση στη σύνθεση

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

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

Αυτός είναι ο λόγος για τον οποίο οι σχέσεις μεταξύ διαφορετικών τμημάτων του περιεχομένου (γραφικά, κείμενο, κουμπιά κλπ.) Έχουν σημασία τόσο για το σχεδιασμό τους.

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

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

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

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

ΕΝΑ παρόμοια αισθητική σχεδιασμού μπορείτε να βρείτε στον ιστότοπο Picjumbo, μια σελίδα προορισμού για ένα addon φωτογραφιών για χρήστες του Photoshop και Sketch.

Η αρχική σελίδα εστιάζει στο λογότυπο και στο βίντεο προεπισκόπησης. Κατά την κύλιση, θα παρατηρήσετε προσαρμοσμένες κινούμενες εικόνες που μετακινούνται σε ολόκληρη τη σελίδα. Αυτό το animation πραγματικά συλλαμβάνει την προσοχή, και παίρνει το θεατή ενδιαφέρεται να κρατήσει κύλιση.

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

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

Δεν υπάρχει απόλυτη απάντηση, διότι είναι διαφορετική για κάθε τοποθεσία. Για παράδειγμα, μερικές συνδέσεις πλοήγησης φαίνονται καλύτερα όταν είναι μεγάλες και υπερμεγέθεις. Άλλοι ταιριάζουν καλύτερα όταν είναι μικρό με κεφαλαία γράμματα.

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

Θέματα Σχεδίου Τύπου

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

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

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

Μερικά πράγματα που μπορείτε να εξετάσετε:

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

Για παράδειγμα, δείτε την αρχική σελίδα του Monitor Campaign. Οι κορυφαίοι σύνδεσμοι πλοήγησης χρησιμοποιούν όλα τα καπάκια με μικρά γράμματα. Άλλες κεφαλίδες στη σελίδα ακολουθήστε το ίδιο σχέδιο όλων των καπακιών οι οποίες δημιουργεί μια αίσθηση ομοιομορφίας.

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

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

Για να μάθετε λίγο περισσότερο, συστήνω ανεπιφύλακτα τους ακόλουθους συνδέσμους:

• Αρχές σχεδίασης: Οπτικό βάρος και κατεύθυνση
• Εργασία με οπτικό βάρος στα σχέδιά σας
• 19 Παράγοντες που επηρεάζουν την ισορροπία της σύνθεσης

Καθοδηγητικό Περιεχόμενο

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

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

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

Οι μέθοδοι σχεδιασμού που χρησιμοποιείτε για να κρατήσετε τους ανθρώπους που περιηγούνται στο site θα αλλάζει με το χρόνο. Αλλά γενικά, ο στόχος σας είναι να οδηγός επισκέπτες με οπτική κατεύθυνση περιεχομένου.

Ας ρίξουμε μια ματιά σε ένα σελίδα προορισμού και ένα σχεδιασμός blog για να εντοπίσετε τις διαφορές.

Το Cactus είναι μια στατική γεννήτρια τοποθεσιών για το OS X. Η αρχική σελίδα τους ακολουθεί στενά το στυλ σχεδιασμού της Apple - άφθονο λευκό κενό και λεπτές γραμματοσειρές sans-serif.

Το περιεχόμενο είναι οργανωμένο σε στήλες, μπλοκ και κομμάτια κειμένου με απλά γραφικά. Αυτές είναι οι ίδιες αισθητικές κοινές με τα προϊόντα της Apple, έτσι οι χρήστες Mac θα απολαύσουν αυτό το στυλ σχεδιασμού.

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

Ο στόχος εδώ είναι να παρέχει πληροφορίες υπάρχοντες χρήστες, και να πωλούν νέοι χρήστες την ιδέα του Κάκτου.

Τώρα συγκρίνετε αυτό το σχέδιο με την αρχική σελίδα του The Next Web. Το περιεχόμενο είναι πολύ πιο σποραδική σε μια αρχική σελίδα blog, γιατί υπάρχει πολλά διαφορετικά θέματα μετά.

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

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

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

Εμπιστευθείτε τα μάτια σας

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

Η εκμάθηση του σχεδιασμού είναι πάρα πολύ α οπτική διαδικασία. Το μάτι σας για το σχεδιασμό είναι η πιο σημαντική πτυχή. Πρέπει να το κάνετε δείτε τα πράγματα σωστά για να το εντοπίσει οπτική ιεραρχία. Αν μπορείτε να το δείτε σε άλλους ιστότοπους, τότε θα μπορείτε να το αναπαράγετε στις δικές σας τοποθεσίες.

Η καλύτερη συμβουλή που έχω είναι να απλώς εμπιστευτείτε τα μάτια σας. Δημιουργήστε μια λίστα με τους αγαπημένους σας ιστότοπους και περάστε 5 λεπτά σε κάθε μία. Καταγράψτε τα αγαπημένα σας στοιχεία στη σελίδα και πώς επηρεάζουν τη σχεδίαση. Αυτό θα σας βοηθήσει εσωτερικοποιήστε αυτές τις έννοιες από μια προοπτική UI / UX, αντί της προοπτικής του χρήστη.

Επίσης, μην φοβάστε να δοκιμάσετε πράγματα! Κανείς δεν πήρε καλή στο σχεδιασμό μόλις με την ανάγνωση άρθρων σχετικά με το σχεδιασμό. Ναι, βοηθούν - μπορούν πραγματικά να βοηθήσουν πολύ. Αλλά εσύ χρειάζομαι προς το δημιουργήστε πράγματα από το μηδέν για να μάθετε τι έργα και τι δεν το κάνει.

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

Τυλίγοντας

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

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