Βασικά στοιχεία του καλού σχεδιασμού ιστοσελίδων

Ανακαλύψτε βασικές αρχές σχεδιασμού ιστοσελίδων για να κατανοήσετε τα βασικά στοιχεία του καλού σχεδιασμού ιστοσελίδων.

Σκοπός

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

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

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

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

Απλότητα

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

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

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

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

Πλοήγηση

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

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

Εικαστικά

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

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

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

Οργάνωση

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

Space: Αυτό αναφέρεται στο κενό διάστημα του ιστότοπού σας —τον αρνητικό χώρο χωρίς στοιχεία. Το Whitespace δίνει στις λειτουργίες χώρο για αναπνοή και βοηθά στην εστίαση σε συγκεκριμένα στοιχεία που θέλετε να επισημάνετε.
Οπτική ιεραρχία: Αυτό αναφέρεται στην οργάνωση του ιστότοπού σας για να ιεραρχήσετε ορισμένες λειτουργίες έναντι άλλων. Εάν υπάρχει κάτι στο οποίο θέλετε να δώσετε σημασία, όπως μια παρότρυνση για δράση (CTA) ή μια φωτογραφία προϊόντος, μπορείτε να το επισημάνετε με έντονα χρώματα ή να το τοποθετήσετε στο κέντρο της σελίδας. Η ιεραρχία σχεδιάζεται γύρω από την ψυχολογία Gestalt .
Αντίθεση: Αυτό αναφέρεται στη σχέση μεταξύ πολλαπλών στοιχείων σχεδίασης με διαφορές που τονίζονται όταν εμφανίζονται μαζί, όπως λευκή γραμματοσειρά σε μαύρο φόντο. Η αντίθεση χρησιμοποιείται συχνά για να αναδείξει τη σημασία ενός στοιχείου ή να τονίσει τις διαφορές μεταξύ δύο πραγμάτων. Μπορείτε να δημιουργήσετε αντίθεση με το χρώμα, το μέγεθος, το διάστημα και τη θέση.
Κλίμακα: Αναφέρεται στον τρόπο με τον οποίο τα στοιχεία έχουν μέγεθος σε σχέση το ένα με το άλλο. Οι εικόνες προϊόντων, για παράδειγμα, μπορεί να είναι μεγαλύτερες από τις περιγραφές ή τις τιμές τους. Κάθε στοιχείο πρέπει να είναι ανάλογο με τον σκοπό του χωρίς να διακυβεύεται η χρηστικότητα. Επομένως, μην κάνετε το κείμενο πολύ μικρό και μην αφήνετε τα γραφικά να κατακλύζουν τη σελίδα.
Αυτό απλώς ξύνει την επιφάνεια. Για όποιον θέλει να βελτιώσει τις σχεδιαστικές του δεξιότητες, συνιστούμε να μελετήσει στη συνέχεια αυτές τις δέκα αποτελεσματικές τάσεις και αρχές σχεδιασμού ιστοσελίδων .

Προσβασιμότητα

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

ΘΕΛΕΤΕ ΟΙΚΟΝΟΜΙΚΗ ΙΣΤΟΣΕΛΙΔΑ? ΠΑΤΗΣΤΕ ΕΔΩ!

ΘΕΛΕΤΕ ΟΙΚΟΝΟΜΙΚΟ ΛΟΓΟΤΥΠΟ? ΠΑΤΗΣΤΕ ΕΔΩ!