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

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

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

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

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

  • Ποια διάθεση πρέπει να ρυθμιστεί ώστε να προσελκύσει το σωστό κοινό-στόχο;
  • Πώς μπορεί η πρώτη εντύπωση μέσω της κεφαλίδας να ανακοινώσει τι είναι το blog;
  • Πώς μπορεί η κεφαλίδα του blog να δώσει την πρώτη εντύπωση, "Είμαι διαφορετικός από τους άλλους."
  • Ποια κομμάτια περιεχομένου πρέπει να είναι άμεσα αντιληπτά για να δημιουργήσουν καλύτερη δράση; (κάνοντας κλικ σε συνδέσμους, εγγραφείτε, κ.λπ.)

Ας σκάψουμε λίγο βαθύτερα ...


Ποια διάθεση πρέπει να ρυθμιστεί ώστε να προσελκύσει το σωστό κοινό-στόχο;

Όταν ο επισκέπτης αρχίζει για πρώτη φορά σε οποιοδήποτε τύπο ιστότοπου, το πρώτο πράγμα που καθορίζουν είναι η "προσωπικότητα" του blog - και αν είναι σωστό για αυτούς.

Αυτό είναι απαραίτητο για το σχεδιασμό του blog, επειδή τα blogs απαιτούν το σωστό κοινό-στόχο να είναι επιτυχές .

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


Πώς μπορεί η πρώτη εντύπωση μέσω της κεφαλίδας να ανακοινώσει τι είναι το blog;

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

Η πρώτη εντύπωση ανακαλύπτει την προσωπικότητα του blog, αλλά τι ακριβώς είναι όλα αυτά; Θα μπορούσαμε να συμπεριλάβουμε μια ετικέτα με ένα λογότυπο που να το λέει ή να περιλαμβάνει μια μικρή παράγραφο / φράση λέγοντας στον αναγνώστη τι είναι αυτό το blog και για ποιον είναι.


Πώς μπορεί η κεφαλίδα του blog να δώσει την πρώτη εντύπωση, "Είμαι διαφορετικός από τους άλλους";

Ένας άλλος τρόπος να τεθεί αυτό είναι: "Πώς θα θυμηθεί αυτό το blog; "

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

Η συνολική εμφάνιση και το περιεχόμενο που παρουσιάζονται με την πρώτη ματιά είναι αυτό που θα κολλήσει, αν παρουσιαστεί αρκετά καλά.


Ποια κομμάτια περιεχομένου πρέπει να είναι άμεσα αντιληπτά για να δημιουργήσουν καλύτερη δράση; (κάνοντας κλικ σε συνδέσμους, εγγραφείτε, κ.λπ.)

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

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

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

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

1. Tutorial9

Tutorial9

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

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

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

2. Σχεδίαση αρχικής σελίδας

Αρχική Σχεδίαση Εύρεση

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

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

Τέλος, οι εικόνες προς τα δεξιά οδηγούν το βλέμμα προς τα κάτω σε μια πιο περιγραφική φράση για το blog.

3. Ιστολόγιο Σχεδιασμού Blog

Blog Σχεδιασμός Blog

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

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

4. Kevin John Gomez

Kevin John Gomez

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

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

5. Naldz Graphics

Naldz Graphics

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

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

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

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

6. Pro Blog Design

Σχεδιασμός Problog

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

Στη συνέχεια, οι μεγάλες υπερμεγέθεις καρτέλες τίθενται σε εστίαση με 1) το προφανές μέγεθος τους και 2) ότι άλλο ποπ πράσινου χρώματος. Η άλλη πράσινη καρτέλα λέει στον αναγνώστη ότι αυτό δεν είναι απλώς ένα blog που μπορεί να σας βοηθήσει να σας δώσει ένα καλύτερο σχέδιο blog, αλλά έχει υπηρεσίες σχεδίου blog που προσφέρουν. Πάνω από αυτό, τα εικονίδια των κοινωνικών μέσων που ο αναγνώστης μπορεί να λάβει υπόψη για τις μεταγενέστερες ενέργειες.

7. Οκτώβριο

Tutorial9

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

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

8. Mark Forrester

Mark Forrester

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

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

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

9. Cult-Foo

Cult-f

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

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

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

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

10. Vectips

Vectips

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

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

Η απεικόνιση διασκέδασης προς τα δεξιά θέτει τη διάθεση και οδηγεί το μάτι στην επάνω πλοήγηση.

11. Δημοσίευση μερικής απασχόλησης

Μερική απασχόληση

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

Η απεικόνιση στα δεξιά οδηγεί τον θεατή να λάβει υπόψη τη ροή RSS και μετά το μάτι οδηγεί περαιτέρω το δικαίωμα να προωθήσει τη σελίδα ανεμιστήρων της εταιρείας στο Facebook.

12. TutCandy

TutCandy

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

Στα δεξιά υπάρχει μια ετικέτα που εξηγεί τι είναι το blog και πώς είναι διαφορετικό: "Μόνο τα Tastiest Tutorials Design". Παρά το γεγονός ότι είναι ένα απλό και διασκεδαστικό παιχνίδι λέξεων, υπάρχουν μερικές λέξεις-κλειδιά που χτυπούν τον αναγνώστη προκαλούν θετική κρίση. "Μόνο" - είναι μοναδικό, πρωτότυπο, μοναδικό.

Απαντά στο ερώτημα "Πώς είναι αυτό το blog διαφορετικό από άλλα;". "Tastiest" - η ετικέτα θα μπορούσε να είναι "Tasty Design Tutorials". Όχι μόνο αυτό ακούγεται λίγο παράξενο, αλλά δεν υποδηλώνει καμιά προτεραιότητα σε σχέση με άλλα μαθήματα σχεδιασμού ή άλλα blogs tutorial.

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

13. Yoast

Γυναίκα

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

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

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

14. Αυτό το Indie Dude

Αυτό το Indie Dude

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

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

15. Ozon3

Ozon3

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

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

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

16. nDesign Studio

nDesign Studio

Αυτή η πολύχρωμη κεφαλίδα είναι το κύριο πλεονέκτημα αυτού του σχεδιασμού ιστοσελίδων και το λογότυπο λέει στον επισκέπτη ότι πρόκειται για στούντιο σχεδιασμού.

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

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

17. Τοίχος Σχεδιαστής Ιστού

Τείχος Σχεδιαστής Ιστού

Αυτό είναι ένα άλλο μεγάλο blog του Nick La του nDesign Studio, και βλέπουμε μια παρόμοια τεχνική: ένα εκπληκτικό μεγάλο φόντο / κεφαλίδα, επικυρώντας τα ταλέντα και την τεχνογνωσία του σχεδιαστή. Το λογότυπο είναι μεγαλύτερο εδώ, παρέχοντας μια ετικέτα που συνδέει το όνομα του ιστολογίου με το σκοπό του.

Το υπόλοιπο περιεχόμενο στην κεφαλίδα είναι η αρχική πλοήγηση, η επαφή / RSS και η γραμμή αναζήτησης. Είναι όλα διακοσμημένα με παρόμοιο τρόπο με την κεφαλίδα, συνδέοντάς τα.

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

18. Ma.tt

Ma.tt

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

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

Το λογότυπο είναι μεγάλο, και καθώς ο ιστότοπος είναι ένα όνομα, αναλαμβάνει τη θέση ενός προσωπικού ιστολογίου. Η ροή RSS είναι επίσης στην επάνω αριστερή πλευρά, λέγοντας στον θεατή ότι είναι πράγματι ένα blog από την αρχή. Τέλος, η πλοήγηση είναι αυτό που φαίνεται τελευταία, και αυτό προκαλεί στον επισκέπτη να συνεχίσει μέσα από το blog.

19. Pixel Resort

Ma.tt

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

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

20. Webdesigner Depot

Web Designer Depot

Αχ, ναι - το ιστολόγιο που βλέπετε αυτήν τη στιγμή. Είτε είστε επισκέπτης για πρώτη φορά, είτε έχετε διαβάσει για μεγάλο χρονικό διάστημα το Webdesigner Depot, η επικεφαλίδα προσεγγίζει σίγουρα την προσοχή σας.

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

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

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


Τυλίγοντας

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

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


Γράφτηκε αποκλειστικά για WDD από Kayla Knight .

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