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