Περιεχόμενο

• Για να πας
• Μέθοδος 1 από 2: Οι 3 βασικοί κανόνες
• Μέθοδος 2 από 2: Οδηγίες
• Συμβουλές
• Προειδοποιήσεις

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

Για να πας

Μέθοδος 1 από 2: Οι 3 βασικοί κανόνες

1. Κανόνας 1:Ακούστε τον πελάτη σας. Ίσως σχεδιάζετε "τον καλύτερο ιστότοπο στον κόσμο στην ιστορία του σύμπαντος και όχι μόνο", με πλούσια μαύρα, εκλεπτυσμένες γραμματοσειρές και φωτεινά, καλλιτεχνικά χρώματα για έναν ιστότοπο που φωνάζει "εξερευνήστε με τώρα!" Δυστυχώς, ο πελάτης σας ήθελε μια πορτοκαλί γραμμή μενού με έντονα ροζ και πορτοκαλί γράμματα. Έχετε απολυθεί και ο καλύτερος ιστότοπός σας ποτέ - στον οποίο ο πελάτης έχει τα δικαιώματα - βρίσκεται κάπου στον εφεδρικό δίσκο του, χωρίς κανείς να τον δει ξανά.
   • Μελετήστε την εταιρική ταυτότητα του πελάτη σας. Ζητήστε από τον πελάτη να σας δείξει μερικούς ιστότοπους που αγαπούν. Αυτό όχι μόνο θα σας δώσει μια ιδέα για το τι τους αρέσει, αλλά θα σας δώσει επίσης μερικές ιδέες σχεδιασμού που ίσως δεν έχετε σκεφτεί.
   • Αν νομίζατε ότι αστειευόμαστε για τον πορτοκαλί και ροζ ιστότοπο, σκεφτείτε αυτόν τον δροσερό, εκλεπτυσμένο ιστότοπο:
2. Κανόνας # 2:Γνωρίστε το κοινό σας και τι ψάχνουν και προσαρμόστε ανάλογα το σχέδιό σας. Ο λόγος για τον οποίο οι χρήστες έχουν ιστότοπους είναι επειδή θέλουν να τους βλέπουν άλλοι. Μπορεί να είναι ενημερωτικό, ή εμπορικό, ή να διασκεδάσει ένα συγκεκριμένο κοινό-στόχο. Η δουλειά σας ως σχεδιαστής είναι να γνωρίζετε ποιος σχεδιάζετε και να τους κρατάτε στη σελίδα όταν φτάνουν εκεί.
   • Ίσως να σκεφτείτε, "Αν φαίνεται καλό, θα μείνουν." Αλλά αυτό δεν πρέπει απαραίτητα να ισχύει. Πάρτε για παράδειγμα ακίνητα. Εδώ είναι ένας ιστότοπος με καθαρό, διασκεδαστικό σχεδιασμό. Έχει πολύ λευκό χώρο που δίνει ανοιχτή εμφάνιση, φωτεινά χρώματα και μοντέρνα μορφή ευρείας οθόνης με συνδέσμους σε εξέχον σημείο:
   • Τώρα ρίξτε μια ματιά σε αυτήν την προσέγγιση για την πώληση ακινήτων στην ίδια περιοχή: γεμάτα και πολύ απασχολημένα, θαμπά χρώματα και καλυμμένα στη διαφήμιση.
   • Μαντέψτε ποιο λειτουργεί καλύτερα για όσους αναζητούν σπίτι; Σωστά, αυτό που σπίτια! Όταν οι άνθρωποι αναζητούν "σπίτια προς πώληση στη Σάντα Μόνικα", δεν ενδιαφέρονται για την εμφάνιση ενός ιστότοπου. Δεν θέλουν να διαβάσουν για τον κτηματομεσίτη ή να δουν όμορφες φωτογραφίες της πόλης. Θέλουν να δουν σπίτια.
3. Κανόνας # 3:Ακούστε τον εαυτό σας. Καταλαβαίνετε τι θέλει ο πελάτης και ξέρετε τι ψάχνει η αγορά σας. Τώρα είναι καιρός να δώσετε προσοχή σε εσάς, τον σχεδιαστή!
   • Δημιουργήστε ένα πρότυπο στο λογισμικό γραφικών της επιλογής σας. Δημιουργήστε τα στοιχεία της σελίδας σας σε διαφορετικά επίπεδα (ώστε να μπορείτε να τροποποιήσετε τα πράγματα αργότερα χωρίς να καταστρέψετε ολόκληρο το πρότυπο). Αυτά τα στοιχεία μπορεί να είναι:
     • Επί κεφαλής. Αυτό είναι ένα στοιχείο που είναι το ίδιο σε κάθε σελίδα του ιστότοπού σας. Η κεφαλίδα αποτελείται από τον τίτλο και το λογότυπο του ιστότοπου, καθώς και συνδέσμους προς τα άλλα μέρη του ιστότοπου (π.χ. Σχετικά, Επικοινωνία, κ.λπ.). Οπτικά και πρακτικά αυτό θα τα συνδέσει όλα μαζί. Είναι καλή πρακτική να συνδέσετε το πρώτο κουμπί στη γραμμή μενού πίσω στην αρχική σελίδα.
     • Για παράδειγμα, ας ρίξουμε μια ματιά στην Apple:
     • Όπως με τα περισσότερα προϊόντα της Apple, η αρχική σελίδα τους έχει έναν πολύ καθαρό, απλό σχεδιασμό. Σημειώστε τη γραμμή μενού στο επάνω μέρος, με λογικά θέματα για κάθε κουμπί, καθώς και ένα πεδίο αναζήτησης - πάντα καλή ιδέα εάν το υποστηρίζει ο ιστότοπός σας. Τώρα ας δούμε μια σελίδα προορισμού για ένα από τα κουμπιά, το iPad, για να δείτε μερικά στοιχεία:
     • Η γραμμή μενού αλλάζει μόνο όταν σκουραίνει το κουμπί iPad.
     • Το θέμα της σελίδας προορισμού εμφανίζεται με μεγάλα μαύρα γράμματα.
     • Θα εμφανιστεί ένα νέο υπομενού για να μάθετε περισσότερα για το προϊόν. Εάν κάνετε κλικ σε ένα από αυτά τα κουμπιά, θα δείτε ότι κάθε σελίδα προσφέρει νέο περιεχόμενο ανάλογα με το θέμα, αλλά θα είναι πανομοιότυπο στη διάταξη και το σχεδιασμό.
     • Συχνά, κάθε κύριο θέμα στη γραμμή μενού θα έχει διαφορετικούς υπότιτλους για να το συμπληρώσετε. Αντί να δημιουργήσετε μια δεύτερη γραμμή μενού, μπορείτε να χρησιμοποιήσετε αναδυόμενα μενού όπως αυτό το παράδειγμα από το Musicians Friend:
     • Πλευρική γραμμή. Αυτό θα εμφανίζεται σε πολλές σελίδες του ιστότοπού σας, αλλά όχι απαραίτητα σε όλες - το πλαίσιο καθορίζει. Ωστόσο, είναι ένα πολύ σημαντικό στοιχείο και πρέπει να είναι προσεκτικά σχεδιασμένο ώστε να είναι διαισθητικό και να μην είναι πολύ γεμάτο. Σε αντίθεση με τη γραμμή μενού, το περιεχόμενο μιας πλευρικής γραμμής μπορεί να είναι πολύ δυναμικό. Δείτε αυτές τις δύο πλευρές από τον έμπορο ακινήτων Trulia Η πρώτη είναι για αγοραστές:
       
       

Μέθοδος 2 από 2: Οδηγίες

1. Σχεδιάστε μια καλή διεπαφή χρήστη. Τοποθετήστε τα διάφορα στοιχεία του ιστότοπου όπως ο τίτλος, οι πλευρικές γραμμές, τα λογότυπα, οι εικόνες και το κείμενο στο ίδιο μέρος σε κάθε σελίδα για να κάνετε τον ιστότοπό σας πλοήγηση και διαισθητικό.
   • Διατηρήστε την ίδια κεφαλίδα στο πάνω μέρος κάθε σελίδας. Είτε το περιεχόμενο του ιστότοπού σας επιτρέπει είτε πολλά επαναλαμβανόμενα στοιχεία, βεβαιωθείτε ότι το επάνω μέρος κάθε σελίδας είναι το ίδιο.
   • Χρησιμοποιήστε τη λογική στο σχέδιό σας. Τα στοιχεία σε μία σελίδα πρέπει να ταξινομούνται λογικά κατά σημασία ή θέμα. οι διαφορετικές σελίδες στον ιστότοπο πρέπει να είναι επίσης.
2. Δημιουργήστε ένα σταθερό στυλ. Όπου η διάταξη πρέπει να δίνει στον ιστότοπό σας δομική συνοχή, το στυλ πρέπει να παρέχει θεματική αρμονία.
   • Κολλήστε σε δύο ή τρία κύρια χρώματα και βεβαιωθείτε ότι ταιριάζουν καλά.
   • Αποφύγετε να χρησιμοποιείτε πάρα πολλά στυλ γραμματοσειράς ή μεγέθη. Αν θέλετε να εναλλάξετε μερικά, χρησιμοποιήστε τα με τον ίδιο τρόπο σε κάθε σελίδα.
   • Χρησιμοποιήστε Cascading Style Sheets (CSS) για να διατηρήσετε ένα ομοιόμορφο στυλ και για να διευκολύνετε την αλλαγή στοιχείων σε έναν ολόκληρο ιστότοπο χωρίς να χρειάζεται να μεταβείτε σε κάθε σελίδα ξεχωριστά.
3. Μεγιστοποιήστε την αναγνωσιμότητα. Για να διευκολύνετε την ανάγνωση του κειμένου σας, μπορείτε να το χωρίσετε σε μικρότερα μέρη.
   • Χρησιμοποιήστε υπότιτλους και κατάλληλη απόσταση για να διαχωρίσετε κάθε ένα από τα μέρη.
   • Χρησιμοποιήστε έντονα γράμματα ή διαφορετικά μεγέθη για να δείξετε την ιεραρχία και τη σημασία των θεμάτων.
   • Δώστε προσοχή στον τρόπο με τον οποίο χειρίζεστε το κείμενο. Μην κάνετε τη γραμματοσειρά πολύ μικρή και αυξήστε το διάστιχο για να κάνετε ευκολότερα την ανάγνωση μεγάλων κομματιών κειμένου. Τα μεγάλα τμήματα κειμένου είναι πιο δύσκολο να διαβαστούν. χωρίστε το σε μικρότερες παραγράφους.
4. Κάντε τον ιστότοπό σας ευανάγνωστο. Χρησιμοποιήστε τυπικό HTML και αποφύγετε ετικέτες, δυνατότητες και προσθήκες που είναι διαθέσιμες μόνο για μία επωνυμία ή έκδοση ενός προγράμματος περιήγησης.
   • Ενώ τα περισσότερα σύγχρονα προγράμματα περιήγησης και υπολογιστές μπορούν να χειριστούν πολύπλοκες εικόνες, όλα θα φαίνονται πιο ομαλά εάν συρρικνωθείτε και βελτιστοποιήσετε τις εικόνες σας για τον ιστό. Ζυγίστε τη σημασία της ποιότητας έναντι της σημασίας της ταχύτητας.
5. Δοκιμάστε τον ιστότοπό σας. Σιγουρέψου ότι κάθε σύνδεσμος λειτουργεί όπως θα περίμενε κανείς, και οι εικόνες εμφανίζονται σωστά.
   • Ίσως θελήσετε να οργανώσετε κάποιες δοκιμές χρηστών ζητώντας από τα μέλη του κοινού-στόχου σας να δοκιμάσουν τη σαφήνεια και την ευκολία χρήσης του σχεδιασμού σας και να δώσετε σχόλια σχετικά με τον ιστότοπό σας.
6. Δημοσιεύστε τον ιστότοπό σας. Αγοράστε ένα όνομα τομέα εάν δεν το έχετε κάνει ήδη. Ελέγχετε περιοδικά εάν οι σύνδεσμοι εξακολουθούν να λειτουργούν και ακούστε προτάσεις που σας στέλνουν οι επισκέπτες μέσω email.

Συμβουλές

• Ενώ είστε ελεύθεροι να σχεδιάσετε τη διάταξη με βάση το δικό σας όραμα ή πράγματα που έχετε δει σε άλλους ιστότοπους, μπορεί να είναι ευκολότερο να αγοράσετε ένα έτοιμο σχέδιο.
• Μην βομβαρδίζετε τον επισκέπτη με χαριτωμένες, ειδικές φωτογραφίες. Τα κινούμενα σχέδια Flash, τα φωτεινά χρώματα, το φόντο με μοτίβο και η μουσική που αναπαράγεται αυτόματα κατά τη φόρτωση της σελίδας ήταν διασκεδαστικά πειράματα τη δεκαετία του '90, αλλά τώρα θα τρομάξουν τους χρήστες. Παραμείνετε σε απλά φόντα που έρχονται σε αντίθεση με το χρώμα του κειμένου για μέγιστη αναγνωσιμότητα.
• Μπορείτε πάντα να χρησιμοποιήσετε CSS για να βελτιστοποιήσετε το διάστιχο.
• Για επισκέπτες με προβλήματα ακοής ή όρασης, μπορείτε να υποτίτλους βίντεο, να μεταγράψετε ήχο και να προσθέσετε ένα μήνυμα προσβασιμότητας. Ενώ οι πίνακες μπορούν να είναι ένας αποτελεσματικός τρόπος οργάνωσης πληροφοριών, οι επισκέπτες με προβλήματα όρασης που χρησιμοποιούν λογισμικό ανάγνωσης οθόνης ενδέχεται να μην ακούσουν το υλικό με τη σωστή σειρά.
• Αφήστε τους επισκέπτες σας να εξοικονομήσουν μελάνι: χρησιμοποιήστε ένα ξεχωριστό φύλλο στυλ για σελίδες εκτύπωσης.
  • Απενεργοποιήστε τις εικόνες φόντου κατά τον καθορισμό των παραμέτρων εκτύπωσης.
  • Χρησιμοποιήστε μαύρο κείμενο σε λευκό φόντο.
  • Αφαιρέστε τη γραμμή μενού και τις περιττές εικόνες.

Προειδοποιήσεις

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