Μικρά γκρι γράμματα πάνω σε φορτωμένο φόντο. Τα μάτια σου κουράζονται πριν τελειώσεις την πρώτη πρόταση. Γι' αυτό μετράει το above the fold για την επωνυμία σου. Όταν η διάταξη και τα χρώματα παλεύουν με το μήνυμα, οι άνθρωποι φεύγουν χωρίς να σου πουν γιατί.
Το above the fold είναι το περιεχόμενο που φαίνεται πριν κάνεις scroll, σε ένα συγκεκριμένο μέγεθος οθόνης. Εδώ θα δεις τι σημαίνει αυτό με απλά λόγια, γιατί επηρεάζει την ιστοσελίδα και το μάρκετινγκ σου και πώς να το εφαρμόσεις χωρίς δυσνόητους όρους. Θα δεις επίσης πώς ο σχεδιασμός της αρχικής σελίδας χωράει στην ίδια εικόνα. Πάμε βήμα βήμα.
Τι είναι το above the fold και γιατί μετράει
Το above the fold είναι το περιεχόμενο που φαίνεται πριν κάνεις scroll, σε ένα συγκεκριμένο μέγεθος οθόνης.
Στην πράξη, το above the fold εμφανίζεται στις κεφαλίδες της ιστοσελίδας, στις σελίδες υπηρεσιών, στα γραφικά των social και στα έντυπά σου. Όταν το ονομάζεις σωστά, δίνεις οδηγίες σε σχεδιαστές πιο γρήγορα και ελέγχεις τα προσχέδια με σιγουριά.
Συγγενείς ιδέες, όπως ο σχεδιασμός αρχικής σελίδας, συνδέονται άμεσα. Κράτα τες στο μυαλό σου καθώς διαβάζεις την υπόλοιπη ενότητα.
Διαμορφώνει την πρώτη εντύπωση και καθορίζει αν οι επισκέπτες θα συνεχίσουν να διαβάζουν.
Γιατί μετράει το above the fold για την επιχείρησή σου;
Οι πελάτες κρίνουν την αξιοπιστία από τη διάταξη πριν διαβάσουν κάθε λέξη. Η καθαρή οπτική δομή μειώνει τις τριβές και κάνει τις προσφορές πιο εύκολες να γίνουν κατανοητές.
Ο σχεδιασμός της αρχικής σελίδας πρέπει να αντιμετωπίζει διαφορετικά το περιεχόμενο της πρώτης οθόνης σε κινητό και σε υπολογιστή.
Έλεγξε την πρώτη οθόνη σε διάφορα μεγέθη κινητών και όχι μόνο στο laptop σου.
Για να δεις πώς συνδέεται με τα γειτονικά θέματα, διάβασε μετά το πώς να σχεδιάσεις μια landing page και τις βέλτιστες πρακτικές σχεδιασμού landing page.
Πρακτική λίστα που μπορείς να χρησιμοποιήσεις σήμερα
Έλεγξε την πρώτη οθόνη σε διάφορα μεγέθη κινητών και όχι μόνο στο laptop σου.
Όταν ελέγχεις μια σελίδα, ρώτα αν το βασικό μήνυμα φαίνεται στο πρώτο scroll στο κινητό. Αν όχι, άλλαξε τη σειρά των ενοτήτων πριν γυαλίσεις τις λεπτομέρειες.
Κράτα στιγμιότυπα οθόνης πριν και μετά τις αλλαγές, για να δεις τι άλλαξε στην πρώτη οθόνη της δικής σου ιστοσελίδας.
Δώσε αυτή τη λίστα σε όποιον ενημερώνει την ιστοσελίδα σου, ώστε ο σχεδιασμός της αρχικής σελίδας να μένει συνεπής σε όλες τις νέες σελίδες.
Διάλεξε έναν δείκτη για αυτόν τον μήνα, όπως τον χρόνο στη σελίδα ή τις έναρξες φόρμας, ώστε οι αλλαγές στο design να συνδέονται με επιχειρηματικά αποτελέσματα και όχι μόνο με γούστο.
Πώς συνδέεται το θέμα με την υπόλοιπη επωνυμία σου
Οι οπτικές επιλογές σπάνια ζουν σε μία μόνο σελίδα. Ο σχεδιασμός της αρχικής σελίδας πρέπει να αντιμετωπίζει διαφορετικά το περιεχόμενο της πρώτης οθόνης σε κινητό και σε υπολογιστή.
Οι αναρτήσεις στα social, τα email και τα έντυπά σου πρέπει να επαναλαμβάνουν την ίδια ιεραρχία, τα ίδια χρώματα και τους ίδιους κανόνες γραμματοσειράς με το web.
Όταν τα οπτικά της επωνυμίας ξεφεύγουν, οι πελάτες νιώθουν μια διακριτική ασυμφωνία, ακόμη κι αν δεν μπορούν να την εξηγήσουν.
Δες το κεφάλαιο σχεδιασμός κουμπιών για να συγκρίνεις σημειώσεις με ένα συγγενικό κεφάλαιο αυτής της ενότητας.
Διαμορφώνει την πρώτη εντύπωση και καθορίζει αν οι επισκέπτες θα συνεχίσουν να διαβάζουν.
Ερωτήσεις που συχνά ξεχνάμε
Δευτερεύοντες όροι, όπως ο σχεδιασμός αρχικής σελίδας και η κεφαλίδα ιστοσελίδας, σε βοηθούν να ψάξεις βαθύτερα παραδείγματα και να συγκρίνεις τη δουλειά σου με τα συνηθισμένα πρότυπα.
Ο σχεδιασμός της αρχικής σελίδας πρέπει να αντιμετωπίζει διαφορετικά το περιεχόμενο της πρώτης οθόνης σε κινητό και σε υπολογιστή.
Γράψε μία αλλαγή «πριν και μετά» που θα δοκιμάσεις αυτή την εβδομάδα σε μια ζωντανή σελίδα. Οι μικρές αλλαγές με μέτρηση κερδίζουν τα αόριστα σχέδια.
Όταν η ομάδα σου μιλά την ίδια γλώσσα για το above the fold, γίνονται λιγότεροι γύροι διορθώσεων με σχεδιαστές και γραφεία.
Εργαλεία που κάνουν τις οπτικές αλλαγές πιο εύκολες
Δεν χρειάζεσαι custom κώδικα για να διορθώσεις πολλά θέματα διάταξης και στυλ. Ένας οπτικός editor σου επιτρέπει να ρυθμίσεις αποστάσεις, χρώματα και γραμματοσειρές.
Με τον δημιουργό ιστοσελίδων της WEMASY φτιάχνεις τις δικές σου σελίδες στην ιστοσελίδα σου. Άνοιξε τον δημιουργό ιστοσελίδων όταν είσαι έτοιμος να εφαρμόσεις όσα έμαθες.
Όταν δημοσιεύεις αλλαγές, ξαναδές το πώς να σχεδιάσεις μια landing page και τις βέλτιστες πρακτικές σχεδιασμού landing page, ώστε η ενότητα να μένει συνδεδεμένη στο μυαλό σου.
Τώρα έχεις έναν πρακτικό φακό για το above the fold. Χρησιμοποίησέ τον όταν ελέγχεις την ιστοσελίδα σου, εγκρίνεις υλικό μάρκετινγκ ή δίνεις οδηγίες σε σχεδιαστή. Συνέχισε με τις βέλτιστες πρακτικές σχεδιασμού landing page και τον σχεδιασμό κουμπιών για να κρατήσεις τον ρυθμό σε αυτή την ενότητα.
Συχνές ερωτήσεις
Πόσο χρόνο θέλει για να βελτιώσεις το above the fold;
Οι περισσότερες μικρές επιχειρήσεις βλέπουν πιο καθαρές σελίδες μέσα σε λίγες συγκεντρωμένες συνεδρίες, αφού εφαρμόσουν τα βασικά αυτού του κεφαλαίου. Ξεκίνα από την αρχική σελίδα και μετά πέρασε τους ίδιους κανόνες στις σελίδες υπηρεσιών και επικοινωνίας.
Χρειάζεσαι σχεδιαστή για το above the fold;
Ένας σχεδιαστής βοηθά σε σύνθετα rebranding, αλλά πολλές διορθώσεις γύρω από το above the fold γίνονται μόνος σου όταν ξέρεις τι να κοιτάξεις. Χρησιμοποίησε το πώς να σχεδιάσεις μια landing page μαζί με αυτό το κεφάλαιο για συναφείς οδηγίες.
Μπορεί η WEMASY να σε βοηθήσει με το above the fold στην ιστοσελίδα σου;
Με τον δημιουργό ιστοσελίδων της WEMASY φτιάχνεις τις δικές σου σελίδες στην ιστοσελίδα σου. Άνοιξε τον δημιουργό ιστοσελίδων για να ξεκινήσεις.
Ποιο είναι το πιο συνηθισμένο λάθος με το above the fold;
Οι άνθρωποι προσπαθούν να διορθώσουν τα πάντα μαζί αντί για μία σελίδα τη φορά. Διάλεξε μία προτεραιότητα, όπως την αναγνωσιμότητα ή την αντίθεση, και μετά δες τις βέλτιστες πρακτικές σχεδιασμού landing page για την επόμενη βελτίωση.
Πώς συνδέεται το above the fold με το SEO;
Η καθαρή οπτική ιεραρχία και η αναγνώσιμη γραμματοσειρά κρατούν τους επισκέπτες περισσότερο στη σελίδα, κάτι που στηρίζει τα σήματα αλληλεπίδρασης που παρακολουθούν οι μηχανές αναζήτησης. Συνδύασε τις διορθώσεις του design με σωστή δομή περιεχομένου για το καλύτερο αποτέλεσμα.
Τι να μάθεις μετά το above the fold;
Συνέχισε με το πώς να σχεδιάσεις μια landing page και τις βέλτιστες πρακτικές σχεδιασμού landing page σε αυτό το βιβλίο, για να χτίσεις ένα πλήρες οπτικό σύστημα για την επωνυμία σου στο διαδίκτυο.