Δείγματα σχεδιασμού ιστότοπου

Πίνακας περιεχομένων:

Δείγματα σχεδιασμού ιστότοπου
Δείγματα σχεδιασμού ιστότοπου
Anonim

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

Εφέ έλξης

Συμφωνώ, όλοι έχουν ένα σύνολο συγκεκριμένων τοποθεσιών που επισκέπτονται καθημερινά. Είμαι σίγουρος ότι οι περισσότεροι από τους σελιδοδείκτες είναι αγαπημένοι ιστότοποι με ταινίες, βιβλία, ειδήσεις, παιχνίδια κ.λπ. Γιατί, αφού βρούμε έναν ιστότοπο, δεν προσπαθούμε να βρούμε έναν άλλο παρόμοιο, που μπορεί να είναι ακόμα καλύτερος; Η απάντηση είναι απλή! Οι ιστότοποι που προσθέτουμε σελιδοδείκτες είναι βολικοί στη χρήση - τέτοιοι ιστότοποι έχουν συνήθως μια βολική διάταξη στοιχείων, κατηγοριών και έναν ευχάριστο σχεδιασμό που δεν ερεθίζει το μάτι. Αυτό είναι το «φαινόμενο έλξης», η επίσκεψη σε έναν σωστά σχεδιασμένο ιστότοπο μία φορά - αφήνοντάς τονδεν θέλω πια.

Ας δούμε το παράδειγμα της πλατφόρμας συναλλαγών δύο τοποθεσιών:

Παραδείγματα τοποθεσιών
Παραδείγματα τοποθεσιών

Αναμφισβήτητα και αναμφισβήτητα, ο ιστότοπος νούμερο 1 θέλει να κλείσει το συντομότερο δυνατό και ο ιστότοπος νούμερο 2, αντίθετα, θέλει να καθυστερήσει. Γιατί συμβαίνει αυτό? Στην πρώτη τοποθεσία, εκτός από ένα τυχαία εντοπισμένο προϊόν, υπάρχει επίσης ένας υπερκορεσμός χρώματος, κάτι που δεν μπορεί να ειπωθεί για τη δεύτερη τοποθεσία. Υπάρχει μια τέτοια υπέροχη παροιμία: "Συναντιούνται με τα ρούχα τους, αλλά τους ξεφεύγουν από το μυαλό τους", ισχύει επίσης για ιστότοπους, μόνο αντί για ρούχα υπάρχει ένα σχέδιο και αντί για μυαλό υπάρχει μια δομή πλοήγησης. Ο επισκέπτης, έχοντας μπει στον ιστότοπο, το πρώτο πράγμα που βλέπει είναι ο συνδυασμός χρωμάτων και μόνο τότε προσέχει την εσωτερική πλοήγηση και τη δομή του ιστότοπου.

Αντίληψη χρώματος

Ο κύριος κανόνας όταν επιλέγετε χρώματα είναι να μην το παρακάνετε. Μερικές φορές ακόμη και δύο ή τρία σωστά επιλεγμένα χρώματα είναι υπεραρκετά, ένα ζωντανό παράδειγμα αυτού είναι ο ιστότοπος fb.ru. Πολλοί σχεδιαστές ιστοσελίδων χρησιμοποιούν έναν πίνακα με "ασφαλή" χρώματα για να σχεδιάσουν τον ιστότοπο html τους.

Πίνακας ασφαλών χρωμάτων
Πίνακας ασφαλών χρωμάτων

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

Συμβατότητα χρωμάτων

Κάθε χρώμα έχει το δικό του "φιλικό" χρώμα - αυτό είναι το χρώμα με το οποίο ταιριάζει καλύτερα. Δεν χρειάζεται να εφεύρετε ξανά τον τροχό και να πειραματιστείτε με την επιλογή, τα πάντα έχουν εφευρεθεί από καιρό και είναι δημόσια. Οι χρωματικοί τροχοί χρησιμοποιούνται για την επιλογή χρωμάτων. Itten. Η παρακάτω εικόνα δείχνει έναν χρωματικό τροχό για αντιστοίχιση 2 χρωμάτων.

Συμπληρωματικός συνδυασμός χρωμάτων
Συμπληρωματικός συνδυασμός χρωμάτων

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

Τριάδα - συνδυασμός 3 χρωμάτων
Τριάδα - συνδυασμός 3 χρωμάτων

Και υπάρχουν πολλοί τέτοιοι κύκλοι, μπορείτε να επιλέξετε περισσότερα χρώματα που ταιριάζουν. Για παράδειγμα, τέσσερα.

Tetrad - ένας συνδυασμός τεσσάρων χρωμάτων
Tetrad - ένας συνδυασμός τεσσάρων χρωμάτων

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

Εσωτερική δομή ιστότοπου

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

Όλα τα στοιχεία πλοήγησης πρέπει να μελετηθούν εκ των προτέρων και ακόμα καλύτερα - να καταγραφούν. ΔομήΟ ιστότοπος πρέπει πρώτα απ 'όλα να είναι κατανοητός και βολικός για τους επισκέπτες. Πολλοί ιστότοποι χάνουν τους επισκέπτες τους μόνο και μόνο επειδή οι τελευταίοι, όταν μπαίνουν στον ιστότοπο, δεν καταλαβαίνουν πού και τι βρίσκεται. Δεν χρειάζεται να γεμίσετε με μια μάζα κουμπιών και να κρεμάσετε μια δέσμη λειτουργιών. Πρέπει πάντα να κοιτάτε μέσα από τα μάτια του επισκέπτη, εάν ο χρήστης δεν χρειάζεται κάποια λειτουργία, τότε είναι καλύτερα να την αφαιρέσετε. Και πάλι, ένα φωτεινό και σωστό παράδειγμα σχεδιασμού ιστότοπου είναι ο ιστότοπος Fb.ru, στον οποίο όλες οι ενότητες βρίσκονται με τρόπο κατανοητό και βολικό για τον επισκέπτη.

Το μεγαλύτερο λάθος

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

Κακή πλοήγηση στον ιστότοπο
Κακή πλοήγηση στον ιστότοπο

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

Φόρμα εγγραφής

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

Λάθος φόρμα εγγραφής
Λάθος φόρμα εγγραφής

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

Σωστή φόρμα εγγραφής
Σωστή φόρμα εγγραφής

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

Πρότυπα ιστότοπου

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

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

  • Το πρώτο και ίσως το μοναδικό πλεονέκτημα είναι η απλότητα. Το πλαίσιο του ιστότοπου είναι ήδη, κατά κανόνα, διαμορφωμένο σε τέτοιους πόρους από έμπειρους σχεδιαστές, ο σχεδιασμός του ιστότοπου υπόκειται σε ορισμένες απαιτήσεις και κανόνες. Μένει μόνο να το γεμίσουμε με θεματικό υλικό και να περιμένουμε τους πρώτους επισκέπτες. Ως εκ τούτου, η απλότητα και η ευκολία τέτοιων υπηρεσιών προσελκύει αρχάριους. Αλλά εάν ο ιστότοπος έχει δημιουργηθεί για σοβαρή ανάπτυξη και ανταγωνισμό γιαtop-1 στις μηχανές αναζήτησης, τότε είναι καλύτερα να αρνηθείτε μια τέτοια υπηρεσία.
  • Από τα μειονεκτήματα - τα παρεχόμενα πρότυπα στις περισσότερες περιπτώσεις δεν μπορούν να υποβληθούν σε επεξεργασία ή αλλαγή, θα πρέπει να χρησιμοποιείτε συνεχώς αυτό που παρέχεται. Η μονοτονία είναι το κύριο μειονέκτημα, για το οποίο μιλήσαμε στην αρχή, γιατί κάθε ιστότοπος πρέπει να είναι ατομικός και να διαφέρει σε εμφάνιση από τους άλλους. Πολλοί περιορισμοί που θα είναι αδύνατο να περιγραφούν, αφού κάθε τέτοια υπηρεσία έχει τη δική της.

Τελικό μέρος

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

Συνιστάται: