21 Συμβουλές για τέλειο web design
Πως να σχεδιάσετε μια ιστοσελίδα με τα τέλεια γραφιστικά χαρακτηριστικά για υψηλή απόδοση
Όταν κάποιος ξεκινάει την κατασκευή της νέας του ιστοσελίδας είναι λίγο δύσκολο να συνδυάσει όλα όσα χρειάζονται για να μπορέσει να χτίσει ένα πρωτότυπο σύνολο σχεδιαστικά που είναι σύμφωνο με τις αρχές του SEO και φυσικά του μάρκετινγκ στο ίντερνετ.
Όμως μια ιστοσελίδα χρειάζεται εκτός και από τη λογική διάταξη του περιεχομένου μέσα σε αυτήν, τις λέξεις κλειδιά και πολλά άλλα, και μια δόση έμπνευσης, μία πινελιά πρωτοτυπίας ώστε να είναι διαφορετική από τις άλλες τόσο αισθητικά αλλά και λειτουργικά.
Στην προσπάθεια μου αυτή να σας δώσω περισσότερες πληροφορίες για το τι πρέπει να κάνετε στον σχεδιασμό της ιστοσελίδας σας και το τι πρέπει να αποφύγετε, σας δίνω 21 συμβουλές για πρωτότυπο web design, λειτουργικό web design που θα έχει πολλαπλάσια απόδοση για την επιχείρηση σας.
1 Κάντε την έρευνα σας πριν σχεδιάσετε οτιδήποτε
Πριν ξεκινήσετε να κάνετε οτιδήποτε, θα πρέπει να κάνετε την έρευνα σας και να ασχοληθείτε πολύ σοβαρά με την αγορά στόχο σας υποβάλλοντας την ερώτηση στον εαυτό σας:
Σε ποιους απευθύνεται η ιστοσελίδας σας;
Θα πρέπει να γνωρίζετε την αγορά σας και να στοχεύετε αποκλειστικά στο να εξυπηρετήσετε τις ανάγκες της αγοράς και να ασχοληθείτε με το πως να μετατρέψετε τους επισκέπτες σε πελάτες σας μέσα από ένα πρωτότυπο web design.
Βρείτε ποιοι είναι οι άμεσα πετυχημένοι ανταγωνιστές σας και αναλύστε τους καθώς και τις ιστοσελίδες που έχουν. Βρείτε ποια στοιχεία των ανταγωνιστών σας είναι τα καλύτερα και τα δυνατότερα και χρησιμοποιήστε τα για να χτίσετε και εσείς το δικό σας site.
Προσοχή, δεν λέμε ότι πρέπει να αντιγράψετε τα πάντα από τους ανταγωνιστές σας, αλλά να πάρετε μερικά από τα καλύτερα στοιχεία των ιστοσελίδων τους για να δημιουργήσετε το δικό σας πρωτότυπο site το οποίο θα έχει καλύτερο ποσοστό μετατροπής από τους άλλους.
2 Περιορίστε τα χρώματα
Όταν σχεδιάζετε μια καινούρια ιστοσελίδα από την αρχή το δέλεαρ της δημιουργικότητας είναι μεγάλο και ειδικά άμα είστε πολύ δημιουργικά άτομα σαν και μένα που δεν τους αρέσει τίποτα, τότε είναι λίγο δύσκολο να μην μπείτε στον πειρασμό να δοκιμάσετε πολλά χρώματα και τον συνδυασμό τους.
Όμως τα πολλά χρώματα κουράζουν τον επισκέπτη και μάλλον τον μπερδεύουν, οπότε καλό θα ήταν να περιοριστείτε σε ένα ή δύο το πολύ βασικά χρώματα για την ιστοσελίδα σας χρησιμοποιώντας το άσπρο σαν βασικό φόντο.
Σχετικά με το ένα χρώμα, για παράδειγμα άμα επιλέξετε το μπλε και βασικό χρώμα της ιστοσελίδας σας, που σημαίνει ότι θα έχετε χρησιμοποιήσει και το ίδιο για τον σχεδιασμό της εταιρικής σας ταυτότητας, του λογότυπου σας δηλαδή και του brand σας, είναι ένα πολύ καλό χρώμα.
Με βάση το μπλε μπορείτε στη συνέχεια να χρησιμοποιήσετε μερικές διαφορετικές αποχρώσεις του για σχεδιάσετε άλλα στοιχεία όπως τα κουμπιά των συνδέσμων, το μενού σας, τα widgets κτλ.
Σιγουρευτείτε ότι έχετε επιλέξει τα σωστά χρώματα και ότι είναι αρμονικά όλα αυτά μεταξύ τους. Για να μην πέσετε σε χρωματικές γκάφες μπορείτε να χρησιμοποιήσετε μερικούς οδηγούς χρωμάτων που υπάρχουν ήδη στο ίντερνετ.
3 Branding και λογότυπα
Το λογότυπο σας είναι μάλλον το πιο βασικό πράγμα ή σχεδιαστικό στοιχείο που υπάρχει στην ιστοσελίδα σας, αφού καθορίζει την εταιρική σας ταυτότητα και λέει πολλά για εσάς και τη φίρμα σας.
Όλη αυτή η διαδικασία σχεδιασμού του λογότυπου σας λέγεται branding και στόχο έχει να κάνει το brand name σας αναγνωρίσιμο και διακριτό ανάμεσα σε δεκάδες άλλα brands.
Πάλι στο branding και στον σχεδιασμό του λογότυπου, η επιλογή των σωστών χρωμάτων είναι το άλφα και το ωμέγα καθώς και τα σχεδιαστικά στοιχεία που θα χρησιμοποιήσετε για να απεικονίσετε αυτό που θέλετε.
Προσοχή όμως η πολυπλοκότητα στον σχεδιασμό του λογότυπου σας και στη δημιουργία του brand σας δεν βοηθάει καθόλου μα καθόλου. Προτιμήστε απλά σύμβολά και διακριτές γραμματοσειρές.
Επίσης θα πρέπει να υπάρχει συνοχή μεταξύ λογότυπου και ιστοσελίδας τόσο ως προς τα χρώματα όσο ως προς τις γραμματοσειρές.
4 Αντίθεση γραμματοσειράς
Η κλασσική ερώτηση είναι γιατί νομίζετε ότι τα βιβλία έχουν σελίδες με λευκό φόντο και μαύρα γράμματα; Γιατί προφανώς είναι πιο ευανάγνωστα. Το ίδιο ισχύει για τις ιστοσελίδες.
Από την αρχή καταβολής του ίντερνετ, οι ιστοσελίδες έχουν αλλάξει πάρα πολύ όμως ένα πράγμα παραμένει κλασικό το λευκό φόντο και τα μαύρα γράμματα με τη σωστή αντίθεση (contrast).
Άμα δεν έχει την σωστή αντίθεση η γραμματοσειρά που έχετε επιλέξει, τότε θα είναι λίγο δύσκολο να κρατήσετε τον επισκέπτη μέσα στην ιστοσελίδα σας γιατί θα είναι πολύ κουραστική η ανάγνωση του περιεχομένου.
5 Σχεδιαστική διάταξη
Είναι πολύ σημαντικό να μπορέσετε να ακολουθήσετε μια σωστή σχεδιαστική διάταξη στην ιστοσελίδα σας η οποία θα έχει διάρκεια και θα μετατρέπει τον επισκέπτη σε πελάτη.
Καλό θα είναι να σχεδιάσετε μερικές προτάσεις πριν καταλήξετε στο τελικό σχέδιο και φυσικά καλό θα ήτανε να αποφύγετε το parallax design, για λόγους SEO και μόνο.
6 Απλότητα
Το να κρατήσετε τα πράγματα σε όσο πιο απλό επίπεδο γίνεται είναι απαραίτητο για να βάλετε σε τάξη το χάος και να μην δημιουργήσετε μεγαλύτερο χάος από αυτό που θα πρέπει να διαχειριστείτε.
Αφαιρέστε όλα τα μη σημαντικά στοιχεία από την ιστοσελίδα σας ή μεταφέρετε τα στο τέλος ή πάνω από το footer για να μην αποσπούνται οι πελάτες σας από αυτά.
Θα πρέπει να δώσετε έμφαση στα 20% πιο σημαντικά στοιχεία που θα θέλατε να αναδείξετε σύμφωνα με την αρχή του Parreto.
7 Σχεδιαστικές τάσεις
Οι ιστοσελίδες αλλάζουν συνεχώς. Νέες τάσεις προστίθενται στις ήδη υπάρχουσες και ενώ η ιστοσελίδα σας έμοιαζε μοντέρνα σχεδιαστικά πριν δυο χρόνια, φέτος ίσως να μοιάζει και να είναι σχεδιαστικά παλιά και ξεπερασμένη.
Δείξτε μου ένα site και αμέσως θα σας πω πότε κατασκευάστηκε! Γιατί έχοντας δημιουργήσει την πρώτη μου ιστοσελίδα στο πανεπιστήμιο το 1998, έχω περίπου 20 χρόνια σχεδιαστικής εμπειρίας και έχω δει τάσεις και τεχνολογίες να έρχονται και να παρέρχονται.
Συνήθως μια ιστοσελίδα έχει από την κατασκευή της μια ορισμένη διάρκεια ζωής περίπου 2 με τρία χρόνια. Μετά θα μοιάζει και θα φαίνεται παλιά και δεν θα έχει τον ίδιο ψυχολογικό αντίκτυπο στους υποψήφιους πελάτες σας.
Δεν λέμε να γίνετε θύμα της μόδας στο web design και να αλλάζετε τον σχεδιασμό της ιστοσελίδας σας ανά δύο μήνες, ανάλογα με την μόδα στα ρούχα, απλά προτιμήστε ένα όσο πιο κλασσικό web design γίνεται και αποφύγετε τα extreme trends που ίσως να σβήσουν του χρόνου.
8 Δοκιμάστε τα web designs σας
Καλό είναι να τεστάρετε το web design που έχετε επιλέξει για μέγιστη απόδοση. Ανεβάστε την ιστοσελίδα σας και στείλτε λίγο κόσμο να μπει μέσα σε αυτή. Παρατηρήστε τις αντιδράσεις τους.
Ακόμα και η πιο μικρή αλλαγή στο design μπορεί να σας αποφέρει μεγάλη αύξηση εσόδων!
Για παράδειγμα όταν η Microsoft έκανε δοκιμές σχετικά με τις αποχρώσεις του μπλε που της ταιριάζουν στην ιστοσελίδα της, η σωστή επιλογή μπλε την οδήγησε σε αύξηση των ηλεκτρονικών πωλήσεων κατά 80 εκ. δολάρια το χρόνο.
Καλό θα ήταν να τρέξετε μερικά A/B τεστ για να βρείτε το επικρατέστερο web design.
9 Φόρτωση σε λιγότερο από 5 δευτερόλεπτα
Το πιο χρησιμοποιημένο κουμπί στον firefox είναι το back button ή το κουμπί της επιστροφής γιατί η ιστοσελίδα δεν ανοίγει ή ανοίγει πολύ αργά!
Άμα η ιστοσελίδα σας κάνει περισσότερο από 5 δευτερόλεπτα για να φορτώσει τότε μάλλον θα πρέπει να αναθεωρήσετε το web design σας.
Με τον τέλειο χρόνο φόρτωσης στα 2 δευτερόλεπτα, καλύτερα να ξεφορτωθείτε ότι δεν χρειάζεστε και να εστιαστείτε στην ταχύτητα φόρτωσης.
10 Responsive design
Η χρήση του ίντερνετ σήμερα έχει επεκταθεί σε όλο και περισσότερες κινητές αλλά και σταθερές συσκευές με διαφορετική ανάλυση οθόνης. Έτσι θα πρέπει να προσαρμόσουμε τον σχεδιασμό της ιστοσελίδας μας σε όλες τις κινητές συσκευές, smaprthones, webtvs, και σε όλες τις δυνατές αναλύσεις για να μεγιστοποιήσουμε την χρηστικότητα και την εμπειρία του χρήστη.
Αυτό ονομάζεται responsive design και είναι πολύ σημαντικό σήμερα να το έχετε συμπεριλάβει και στο δικό σας site.
11 Πλοήγηση
Η πλοήγηση σε μια ιστοσελίδα είναι ένα από τα σημαντικότερα τμήματα του έργου της κατασκευής, αφού η γρήγορη πλοήγηση με λίγα επίπεδα βάθος, κατά προτίμηση ένα είναι η ιδανική για να ικανοποιήσει τον χρήστη αλλά και τις μηχανές αναζήτησης.
Η ερώτηση που θα πρέπει να απαντηθεί στον σχεδιασμό της πλοήγησης σε μια ιστοσελίδα είναι: Μπορεί ο χρήστης να βρει αυτό που θέλει γρήγορα και εύκολα;
Αν όχι μάλλον θα πατήσει το κουμπί της εξόδου από την ιστοσελίδα μας και ίσως να μην έρθει ποτέ ξανά.
Τα πιο συνηθισμένα μενού είναι τα οριζόντια και είναι αυτά που λατρεύουν περισσότερο οι χρήστες.
Φροντίστε στα μενού σας να συμπεριλάβετε μόνο τα σημαντικότερα πράγματα και φυσικά τις σημαντικότερες σελίδες από το site σας παραλείποντας ότι δεν χρειάζεται ο τελικός χρήστης.
12 Scroll ή κλικ;
Κάποιοι προτιμάνε το κλικ για να φτάσουν στην σελίδα προορισμού τους ενώ άλλοι το scroll, την κύλιση προς τα κάτω δηλαδή.
Κάθε είδος πλοήγησης σε κάθε ιστοσελίδα έχει τα αρνητικά και τα θετικά του και θα πρέπει να προτιμάτε ανάλογα με το κοινό στόχο σας.
Για παράδειγμα το facebook ευνοείτε από το άπειρο scroll, ενώ κάποιες άλλες ιστοσελίδες ίσως να μην ευνοούνται από αυτό.
13 Αφαιρέστε τα περιττά
Πριν ξεκινήσετε το σχεδιασμό της ιστοσελίδας σας, θα πρέπει να επιλέξετε ποια στοιχεία θα χρησιμοποιήσετε και ποια όχι. Το θέμα είναι να αφαιρέσετε όλα τα σχεδιαστικά στοιχεία που αποσπούν την προσοχή από τον τελικό χρήστη για να επιτελέσει τον στόχο που έχετε θέσει με την είσοδο του στην ιστοσελίδα σας.
Ναι μπορείτε να θέσετε στόχους και στο Google Analytics για να δείτε που πάει ποιος και να μετρήσετε την αποτελεσματικότητα του σχεδιασμού της ιστοσελίδας σας.
Ίσως στην αρχή να θέλετε να έχετε συγκεντρώσει πάρα πολύ υλικό που εν τέλει θα είναι άχρηστο για την ιστοσελίδα σας και θα επιβαρύνει αντί να βοηθήσει στη λήψη των απαραίτητων πληροφοριών από τον τελικό χρήστη.
Τα κινούμενα γραφικά, τα gifs και γενικά τα πολλά γραφικά κουράζουν τον χρήστη και η κόπωση τον ωθεί στο να πατήσει το κουμπί της εξόδου από το site σας. Ποιο είναι αυτό το κουμπί; Δεν υπάρχει τέτοιο κουμπί επίσημα, αλλά οποιοδήποτε κουμπί πατήσει κάποιος και φύγει από την ιστοσελίδα μας θεωρείται κουμπί εξόδου.
Επίσης, οι πολλές διαφημίσεις και τα pop up κουράζουν και καλύπτουν το οπτικό πεδίο του χρήστη. Λιγότερες διαφημίσεις σημαίνει περισσότερη επισκεψιμότητα και μετατροπές.
14 Χρήση κενών χώρων
Η χρήση των κενών χώρων και του λευκού ανάμεσα στις σελίδες και στα σχεδιαστικά στοιχεία, η παραγραφοποίηση και ο λευκός ακάλυπτος χώρος ξεκουράζουν το μάτι και βοηθάνε στο να δημιουργηθεί η ανάλογη ένταση ή όχι σε ένα θέμα.
Ένταση εννοούμε με την έννοια της έμφασης. Ο λευκός χώρος μας βοηθάει να κατανοήσουμε καλύτερα το νόημα και το κείμενο μιας ιστοσελίδας και θα πρέπει να υπάρχει αναγκαστικά.
15 Εξωτερικοί σύνδεσμοι
Μια πολύ σημαντική λεπτομέρεια, αν και μικρή, είναι η χρήση των συνδέσμων που οδηγούν έξω από την ιστοσελίδα μας. Οι εξωτερικοί σύνδεσμοι είναι απαραίτητοι για να συσχετίσουν οι μηχανές αναζήτησης το περιεχόμενο μας με τις ιστοσελίδες που δείχνει το site μας. Που έχει δηλαδή backlinks προς αυτές.
Ένας εξερχόμενος σύνδεσμος θα πρέπει να ανοίγει την ιστοσελίδα προορισμού σε νέο παράθυρο και θα πρέπει να μην έχετε υπερβολικά πολλά εξερχόμενα links από την ιστοσελίδα σας ειδικά στα κύρια μέρη της ιστοσελίδας σας γιατί έτσι διώχνετε αντί να κρατάτε τον επισκέπτη.
16 Χρησιμοποιήστε μικρές φόρμες
Όσο πιο λίγα είναι τα στοιχεία που ζητάτε από τον επισκέπτη να συμπληρώσει, τόσο περισσότερα μηνύματα ή εγγραφές θα έχετε. Για παράδειγμα, όταν πρόκειται για φόρμες εγγραφής στο newsletter, μόνο το email είναι αρκετό γιατί περισσότερα στοιχεία μειώνουν το ποσοστό εγγραφής του χρήστη.
Πάρτε ένα παράδειγμα τη δική μου φόρμα εγγραφής στο newsletter.
17 Επιτρέψτε την αυτόματη συμπλήρωση
Επιτρέψτε την αυτόματη συμπλήρωση της φόρμας εγγραφής ή της φόρμας επικοινωνίας από τους web browsers. Ο καλύτερος τρόπος για να αυξήσετε το ποσοστό εγγραφής σας είναι να επιτρέπεται το auto fill πλην του κωδικού πρόσβασης στην αρχική εγγραφή.
Αυτή την πρακτική ακολουθούν όλα τα μεγάλα sites αλλά και το facebook.
18 Στοιχεία επικοινωνίας
Μια φόρμα επικοινωνίας με ευανάγνωστα στοιχεία και πεδία θα πρέπει να υπάρχει σε περίοπτη θέση στην ιστοσελίδα σας ή κάπου στο μενού. Προσοχή στο NAP, το οποίο είναι το ακρωνύμιο για τα Name, Address, Phone γιατί θα πρέπει να είναι τα ίδια παντού για να σας βρίσκουν οι μηχανές αναζήτησης.
Καλό θα ήταν να υπάρχει το NAP σας κάπου στο footer ή στην προμετωπίδα πάνω από το μενού και το logo.
19 Περιορίστε τις σελίδες
Ένα πετυχημένο website με ένα υψηλό ποσοστό μετατροπής είναι αυτό που έχει απλοποιήσει το σχεδιαστικό του κομμάτι τόσο που γίνεται κατανοητό από ένα παιδί 10 ετών. Θα πρέπει δηλαδή στην ιστοσελίδα σας να κάνετε ότι κάνουν όλοι οι μεγάλοι ποιητές: να χωρέσετε κάτι πολύ μεγάλο σε κάτι πολύ μικρό.
Έτσι και ενώ το site σας μπορεί να έχει πολλές σελίδες και υποσελίδες, καλό θα ήτανε στο μενού να συμπεριλάβετε μόνο τις σελίδες που χρειάζεται κάποιος για να πλοηγηθεί και αυτές είναι μόνο το 20% όλων των σελίδων από το site σας.
Οι πολλές επιλογές δεν βοηθάνε κάποιον να πάρει μια απόφαση για το που θα κάνει κλικ αλλά τον αποπροσανατολίζουν και τον παραλύουν.
20 Η αρχική σελίδα
Η αρχική σελίδα από το site σας είναι ίσως η πιο σημαντική σελίδα από όλο το website. Οι πληροφορίες που θα απεικονίσετε και θα συμπεριλάβετε, οι λέξεις κλειδιά και γενικά τα κείμενα και οι φωτογραφίες θα πρέπει να είναι πολύ συγκεκριμένες και επιλεγμένες πολύ προσεκτικά.
Μπορείτε να σχεδιάσετε μερικά παραδείγματα αρχικών σελίδων για να επιλέξετε το επικρατέστερο, απλούστερο και ταχύτερο. Σημασία έχει να μπορείτε να αιχμαλωτίσετε τον χρήστη όχι με φανφάρες αλλά με ουσία.
21 Το περιεχόμενο είναι βασιλιάς
Σίγουρα το έχετε ακούσει πολλές φορές ότι Το Περιεχόμενο Είναι Βασιλιάς γιατί όντως έτσι είναι η αλήθεια. Το καλύτερο περιεχόμενο, οι καλύτερες εφαρμογές και οι πιο χρηστικές ή τα πιο δημοφιλή βίντεο είναι αυτά που συγκεντρώνουν τις περισσότερες προβολές, τα περισσότερα backlinks και τα περισσότερα like και share στα social media.
Φτωχό περιεχόμενο σημαίνει αυτομάτως κουμπί εξόδου, πλούσιο δωρεάν περιεχόμενο είναι το μυστικό για να καταπλήξετε τον τελικό χρήστη και να σας αγαπήσει εσάς και την ιστοσελίδα σας.
Δείτε περισσότερα για web design:
- Web design guide: 69 website design tips for breathtaking websites
- Για ποιο λόγο να επιλέξετε εμάς για την κατασκευή της ιστοσελίδας σας;
- ατασκευη Ιστοσελιδων: Μήπως το site σας θέλει redesign?
Ζητήστε μια προσφορά σήμερα για κατασκευή ιστοσελίδας ή προώθηση ιστοσελίδας
Αν είστε πριν την κατασκευή ιστοσελίδας ή την ανακατασκευή της ιστοσελίδας σας, πριν κάνετε οτιδήποτε ζητήστε μια προσφορά για web design ή κατασκευή eshop.
Ζητήστε προσφορά κατασκευής ή προώθησης ιστοσελίδας
Δωρεάν Μαθήματα SEO Αξίας 129€
Πάρτε εντελώς δωρεάν τον οδηγό μαθημάτων αξίας 129€ SEO εντελώς δωρεάν! Αυξήστε την επισκεψιμότητα και τις πωλήσεις της ιστοσελίδας σας κατακόρυφα ακολουθώντας μικρά βήματα βελτιστοποίησης.
Αγαπητέ Γιάννη… Είσαι ένας θησαυρός και ‘συ και οι πληροφορίες σου και χαίρομαι που βρέθηκε -τυχαία- στα βήματά μου το paramarketing. Θεωρώ υποχρέωση μου (το λιγότερο) να σου πω ότι με βοήθησες και στο μέλλον θα με βοηθήσεις κι άλλο… είμαι σίγουρη γι αυτό. Σ’ ευχαριστώ πολύ… Φιλικά Κατερίνα
Σε ευχαριστώ Κατερίνα, χαίρομαι που σε βοήθησα αν και δεν είχα ποτέ στόχο να βοηθάω με γνώσεις τον κόσμο, όμως η προσπάθεια μου για την προώθηση της ιστοσελίδας μου στις μηχανές αναζήτησης με δωρεάν ποιοτικό περιεχόμενο είχε και παράπλευρα οφέλη!