Αυτό το wikiHow σας διδάσκει πώς να σχεδιάσετε έναν ιστότοπο που εμφανίζεται επαγγελματικά και έχει καλή απόδοση. Ενώ το μεγαλύτερο μέρος του σχεδιασμού του ιστότοπού σας εξαρτάται τελικά από εσάς, υπάρχουν ορισμένα κρίσιμα πράγματα που πρέπει να κάνετε και να αποφύγετε κατά τη δημιουργία ενός ιστότοπου.
Βήματα
Μέρος 1 από 2: Πώς να σχεδιάσετε τον ιστότοπό σας
Βήμα 1. Καθορίστε εάν θέλετε να χρησιμοποιήσετε έναν δημιουργό ιστότοπου
Οι ιστότοποι που δημιουργήθηκαν από την αρχή απαιτούν μια αρκετά λεπτομερή κατανόηση της κωδικοποίησης HTML, αλλά μπορείτε εύκολα να δημιουργήσετε έναν ιστότοπο χρησιμοποιώντας μια δωρεάν υπηρεσία φιλοξενίας όπως οι Weebly, Wix, WordPress ή Google Sites. Οι δημιουργοί ιστότοπων τείνουν να είναι πολύ ευκολότεροι για τους πρώτους σχεδιαστές να χρησιμοποιούν από το HTML.
- Εάν αποφασίσετε να κωδικοποιήσετε τον δικό σας ιστότοπο, θα πρέπει να μάθετε κωδικοποίηση HTML και CSS.
- Εάν η επένδυση χρόνου και ενέργειας για τη δημιουργία του ιστότοπού σας δεν ακούγεται ελκυστική, μπορείτε επίσης να προσλάβετε έναν σχεδιαστή ιστότοπου για να δημιουργήσει τον ιστότοπό σας για εσάς. Οι ανεξάρτητοι σχεδιαστές μπορούν να κοστίσουν οπουδήποτε μεταξύ $ 30 και πολύ πάνω από $ 100 την ώρα.
Βήμα 2. Χαρτογραφήστε τον ιστότοπό σας
Πριν ακόμη ανοίξετε έναν δημιουργό ιστότοπου, θα πρέπει να γνωρίζετε περίπου πόσες σελίδες θέλετε να έχει ο ιστότοπός σας, ποιο θα πρέπει να είναι το περιεχόμενο σε κάθε μία από αυτές τις σελίδες και τη γενική διάταξη σημαντικών σελίδων όπως η αρχική σελίδα και το "About" σελίδα.
Οι σελίδες του ιστότοπού σας μπορεί να είναι πιο εύκολο να απεικονιστούν εάν σχεδιάσετε τραχείες εικόνες καθενός από αυτές και όχι απλώς καθορίσετε ποιο περιεχόμενο πρέπει να εμφανίζεται
Βήμα 3. Χρησιμοποιήστε διαισθητικό σχεδιασμό
Παρόλο που πρέπει να ειπωθεί κάτι για νέες ιδέες, ο βασικός σχεδιασμός του ιστότοπού σας θα πρέπει να ακολουθεί καθορισμένες οδηγίες, όπως οι ακόλουθες:
- Οι επιλογές πλοήγησης (π.χ. καρτέλες για διαφορετικές σελίδες) πρέπει να βρίσκονται στο επάνω μέρος της σελίδας.
- Εάν χρησιμοποιείτε ένα εικονίδιο μενού (☰), θα πρέπει να βρίσκεται στην επάνω αριστερή γωνία της σελίδας.
- Εάν χρησιμοποιείτε μια γραμμή αναζήτησης, θα πρέπει να βρίσκεται κοντά στην επάνω δεξιά πλευρά της σελίδας.
- Οι χρήσιμοι σύνδεσμοι (π.χ. σύνδεσμοι προς τη σελίδα "Σχετικά με" ή τη σελίδα "Επικοινωνήστε μαζί μας") πρέπει να βρίσκονται στο κάτω μέρος κάθε σελίδας.
Βήμα 4. Να είστε συνεπείς
Όποια γραμματοσειρά κειμένου, παλέτα χρωμάτων, θέμα εικόνας και σχεδιαστικές επιλογές επιλέξετε, βεβαιωθείτε ότι χρησιμοποιείτε την ίδια απόφαση σε ολόκληρο τον ιστότοπό σας. Μπορεί να είναι απίστευτα ενοχλητικό να βλέπετε μια γραμματοσειρά ή ένα συνδυασμό χρωμάτων που χρησιμοποιείται για τη σελίδα "Σχετικά" όταν χρησιμοποιήθηκε μια εντελώς διαφορετική για την αρχική σελίδα.
- Για παράδειγμα, εάν χρησιμοποιείτε αποκλειστικά χρώματα ψυχρού τόνου για την αρχική σελίδα του ιστότοπού σας, μην εφαρμόζετε φωτεινά, δυνατά χρώματα στην επόμενη σελίδα.
- Λάβετε υπόψη ότι η χρήση δυνατών ή συγκρουόμενων χρωμάτων, ειδικά όταν τα χρώματα εμφανίζονται με δυναμικό τρόπο (π.χ. σε κίνηση), μπορεί να προκαλέσει επιληψία σε μικρό αριθμό χρηστών ιστού. Εάν αποφασίσετε να χρησιμοποιήσετε τέτοια χρώματα στον ιστότοπό σας, βεβαιωθείτε ότι έχετε προσθέσει μια προειδοποίηση επιληψίας πριν από οποιαδήποτε σχετική σελίδα.
Βήμα 5. Προσθέστε επιλογές πλοήγησης
Η τοποθέτηση άμεσων συνδέσμων σε σημαντικές σελίδες στον ιστότοπό σας στο επάνω μέρος της αρχικής σελίδας θα σας βοηθήσει να κατευθύνετε για πρώτη φορά επισκέπτες στο περιεχόμενο που έχει σημασία. Οι περισσότεροι δημιουργοί ιστότοπων προσθέτουν αυτούς τους συνδέσμους από προεπιλογή.
Είναι σημαντικό να βεβαιωθείτε ότι κάθε σελίδα στον ιστότοπό σας είναι προσβάσιμη κάνοντας κλικ στις επιλογές του ιστότοπού σας και όχι μόνο μέσω της διεύθυνσης της σελίδας
Βήμα 6. Χρησιμοποιήστε χρώματα που αλληλοσυμπληρώνονται
Όπως κάθε άλλο είδος σχεδίασης, ο σχεδιασμός ιστοσελίδων βασίζεται σε οπτικά ευχάριστους συνδυασμούς χρωμάτων. Εξαιτίας αυτού, η επιλογή χρωμάτων θεμάτων που συνδυάζονται είναι ζωτικής σημασίας.
Το μαύρο, το λευκό και το γκρι είναι ένας καλός συνδυασμός αν δεν ξέρετε από πού να ξεκινήσετε
Βήμα 7. Εξετάστε το ενδεχόμενο να χρησιμοποιήσετε ένα μινιμαλιστικό σχέδιο
Ο μινιμαλισμός ενθαρρύνει χρώματα ψυχρού τόνου, απλά γραφικά, σελίδες κειμένου ασπρόμαυρου κειμένου και όσο το δυνατόν λιγότερη διακόσμηση. Επειδή ο μινιμαλισμός απαιτεί ελάχιστα στοιχεία για φανταχτερά στοιχεία, είναι ένας εύκολος τρόπος να κάνετε τον ιστότοπό σας να φαίνεται επαγγελματικός και ελκυστικός χωρίς να απαιτεί πολλή δουλειά.
- Πολλοί δημιουργοί ιστότοπων θα έχουν ένα θέμα "μινιμαλιστικό" που μπορείτε να επιλέξετε κατά τη ρύθμιση του ιστότοπού σας.
- Μια εναλλακτική λύση στον μινιμαλισμό είναι η «βαρβαρότητα», η οποία χρησιμοποιεί πιο σκληρές γραμμές, έντονα χρώματα, έντονο κείμενο και ελάχιστες εικόνες. Ο βαρβαρισμός έχει λιγότερα ακόλουθα από τον μινιμαλισμό, αλλά ανάλογα με το περιεχόμενο του ιστότοπού σας, μπορεί να ταιριάζει καλύτερα στις σχεδιαστικές σας ανάγκες.
Βήμα 8. Κάντε μοναδικές επιλογές
Οι ευθείες γραμμές και τα στοιχεία ιστού που είναι κλειδωμένα στο πλέγμα είναι ασφαλή στοιχήματα, αλλά η λήψη μερικών μοναδικών στιλιστικών αποφάσεων θα προσδώσει προσωπικότητα στον ιστότοπό σας και θα βοηθήσει τον ιστότοπό σας να ξεχωρίσει.
- Μην φοβάστε να ρίξετε τις τάσεις τοποθετώντας ασύμμετρα στοιχεία ιστότοπου ή χρησιμοποιώντας επικαλυπτόμενα στοιχεία για να δημιουργήσετε μια πολυεπίπεδη εμφάνιση.
- Ενώ οι κομψές, αιχμηρές γωνίες και τα τετραγωνισμένα στοιχεία (γνωστά και ως παρουσίαση με βάση την κάρτα) είναι λιγότερο ευνοϊκά από τα στρογγυλεμένα, απαλά στοιχεία.
Μέρος 2 από 2: Πώς να μεγιστοποιήσετε την απόδοση του ιστότοπου
Βήμα 1. Επωφεληθείτε από τις επιλογές βελτιστοποίησης για κινητά
Τα προγράμματα περιήγησης για κινητά αντιπροσωπεύουν περισσότερη επισκεψιμότητα ιστού από ό, τι τα προγράμματα περιήγησης επιτραπέζιων υπολογιστών, πράγμα που σημαίνει ότι η προσοχή που δίνεις στην έκδοση για κινητά του ιστότοπού σου θα πρέπει τουλάχιστον να ισούται με την ανάπτυξη του ιστότοπου του επιτραπέζιου υπολογιστή σου. Οι περισσότερες υπηρεσίες δημιουργού ιστότοπου δημιουργούν αυτόματα μια έκδοση του ιστότοπού σας για κινητά, αλλά θα πρέπει να έχετε υπόψη τις ακόλουθες πληροφορίες για τον ιστότοπό σας για κινητά:
- Βεβαιωθείτε ότι τα κουμπιά (π.χ. σύνδεσμοι ιστότοπου) είναι μεγάλα και πατούν εύκολα.
- Αποφύγετε την εφαρμογή λειτουργιών που δεν μπορούν να προβληθούν σε κινητά (π.χ. Flash, Java, κ.λπ.).
- Σκεφτείτε να δημιουργήσετε μια εφαρμογή για κινητά για τον ιστότοπό σας.
Βήμα 2. Αποφύγετε τη χρήση πάρα πολλών φωτογραφιών ανά σελίδα
Τόσο τα προγράμματα περιήγησης όσο και τα προγράμματα περιήγησης για κινητά μπορούν να δυσκολευτούν να φορτώσουν σελίδες που εμφανίζουν μεγάλο αριθμό φωτογραφιών ή βίντεο. Παρόλο που οι εικόνες είναι σημαντικές στο σχεδιασμό ιστοσελίδων, η χρήση περισσότερων από λίγων ανά σελίδα μπορεί να προκαλέσει άσκοπα μεγάλους χρόνους φόρτωσης, πράγμα που θα εμποδίσει τους ανθρώπους να επισκεφτούν τις εν λόγω σελίδες.
Σε γενικές γραμμές, θέλετε οι σελίδες του ιστότοπού σας να φορτώνονται σε λιγότερο από τέσσερα δευτερόλεπτα
Βήμα 3. Προσθέστε μια σελίδα "Επικοινωνία"
Θα παρατηρήσετε ότι σχεδόν όλοι οι καθιερωμένοι ιστότοποι έχουν μια σελίδα "Επικοινωνήστε μαζί μας" που περιέχει στοιχεία επικοινωνίας (π.χ. έναν αριθμό τηλεφώνου και μια διεύθυνση ηλεκτρονικού ταχυδρομείου). Ορισμένοι ιστότοποι έχουν ακόμη μια ενσωματωμένη φόρμα ερωτήσεων σε αυτήν τη σελίδα. Η προσθήκη μιας σελίδας "Επικοινωνία" θα δώσει στους θεατές του ιστότοπου μια άμεση επικοινωνία μαζί σας, προσθέτοντας έτσι μια λύση σε πιθανές απογοητεύσεις.
Βήμα 4. Δημιουργήστε μια προσαρμοσμένη σελίδα 404
Όταν κάποιος επισκέπτεται μια συγκεκριμένη σελίδα στον ιστότοπό σας που είτε δεν έχει ρυθμιστεί είτε δεν υπάρχει, θα εμφανιστεί μια ιστοσελίδα "Σφάλμα 404". Τα περισσότερα προγράμματα περιήγησης έχουν προεπιλεγμένη σελίδα 404, αλλά ενδέχεται να μπορείτε να προσαρμόσετε τη δική σας μέσα από τις ρυθμίσεις του δημιουργού του ιστότοπού σας. αν ναι, βεβαιωθείτε ότι έχετε συμπεριλάβει τις ακόλουθες λεπτομέρειες:
- Ένα ελαφρύ μήνυμα σφάλματος (π.χ., "Συγχαρητήρια - βρήκατε τη σελίδα σφάλματος!")
- Ένας σύνδεσμος πίσω στην αρχική σελίδα του ιστότοπου
- Μια λίστα συνδέσμων που προβάλλονται συνήθως
- Εικόνα ή λογότυπο για τον ιστότοπό σας
Βήμα 5. Χρησιμοποιήστε μια γραμμή αναζήτησης, αν είναι δυνατόν
Εάν η μέθοδος δημιουργίας ιστότοπού σας υποστηρίζει την προσθήκη μιας γραμμής αναζήτησης στον ιστότοπό σας, συνιστάται ανεπιφύλακτα να το κάνετε. Αυτό θα διασφαλίσει ότι οι χρήστες μπορούν να μεταβούν γρήγορα σε μια συγκεκριμένη σελίδα ή στοιχείο χωρίς να χρειάζεται να κάνουν κλικ στις επιλογές πλοήγησης.
Οι γραμμές αναζήτησης είναι επίσης χρήσιμες όταν το κοινό σας θέλει να αναζητήσει έναν γενικό όρο χωρίς να χρησιμοποιεί δοκιμή και σφάλμα
Βήμα 6. Επενδύστε τον περισσότερο χρόνο στην αρχική σας σελίδα
Όταν κάποιος φτάνει στην αρχική σελίδα του ιστότοπού σας, θα πρέπει να πάρει αμέσως την ουσία του θέματος του ιστότοπού σας. Επιπλέον, όλα τα στοιχεία της αρχικής σελίδας θα πρέπει να φορτώνονται γρήγορα, συμπεριλαμβανομένων των επιλογών πλοήγησης και τυχόν εικόνων. Η αρχική σελίδα σας πρέπει να έχει τις ακόλουθες πτυχές:
- Κάλεσμα για δράση (π.χ. κουμπί για κλικ ή φόρμα για συμπλήρωση)
- Μια γραμμή εργαλείων πλοήγησης ή ένα μενού
- Ένα ελκυστικό γραφικό (π.χ. μία συμπαγής φωτογραφία, ένα βίντεο ή μια μικρή ομάδα φωτογραφιών με συνοδευτικό κείμενο)
- Λέξεις -κλειδιά που σχετίζονται με την υπηρεσία, το θέμα ή την εστίαση του ιστότοπού σας
Βήμα 7. Δοκιμάστε τον ιστότοπό σας σε πολλά προγράμματα περιήγησης σε πολλές πλατφόρμες
Αυτό είναι απίστευτα σημαντικό, καθώς διαφορετικά προγράμματα περιήγησης ενδέχεται να χειρίζονται διαφορετικά στοιχεία του ιστότοπού σας. Πριν ξεκινήσετε την προώθηση του ιστότοπού σας, δοκιμάστε να επισκεφθείτε και να χρησιμοποιήσετε τον ιστότοπό σας στα ακόλουθα προγράμματα περιήγησης σε πλατφόρμες Windows, Mac, iPhone και Android:
- Google Chrome
- Firefox
- Safari (μόνο για iPhone και Mac)
- Microsoft Edge και Internet Explorer (μόνο για Windows)
- Το ενσωματωμένο πρόγραμμα περιήγησης σε διάφορα τηλέφωνα Android (π.χ., Samsung Galaxy, Google Nexus, κ.λπ.)
Βήμα 8. Συνεχίστε να ενημερώνετε τον ιστότοπό σας καθώς μεγαλώνει
Οι τάσεις σχεδιασμού, οι σύνδεσμοι, οι φωτογραφίες, οι έννοιες και οι λέξεις -κλειδιά αλλάζουν όλα με την πάροδο του χρόνου, οπότε θα πρέπει να συνεχίσετε να κάνετε αλλαγές στον ιστότοπό σας για να είστε ενημερωμένοι. Αυτό θα απαιτήσει από εσάς να ελέγχετε την απόδοση του ιστότοπού σας μαζί με άλλους παρόμοιους ιστότοπους τουλάχιστον μία φορά κάθε τρεις μήνες (κατά προτίμηση συχνότερα).
Βασική Βοήθεια HTML
Δείγμα ιστοσελίδας με HTML
Υποστήριξη wikiHow και ξεκλειδώστε όλα τα δείγματα.
Φύλλο εξαπάτησης HTML
Υποστήριξη wikiHow και ξεκλειδώστε όλα τα δείγματα.
Δείγμα απλής ιστοσελίδας
Υποστήριξη wikiHow και ξεκλειδώστε όλα τα δείγματα.
Συμβουλές
- Η προσβασιμότητα στον ιστότοπο είναι μια άλλη σημαντική πτυχή της ανάπτυξης ιστοσελίδων. Αυτό περιλαμβάνει πράγματα όπως λεζάντες για ακροατήρια με προβλήματα ακοής, περιγραφές ήχου για τυφλούς επισκέπτες και προειδοποιήσεις φωτοευαισθησίας εάν ο ιστότοπός σας χρησιμοποιεί πιθανά εφέ πρόκλησης σπασμών.
- Οι περισσότεροι δημιουργοί ιστότοπου διαθέτουν ένα σύνολο προτύπων που μπορείτε να χρησιμοποιήσετε για να ενισχύσετε τη διάταξη και το σχεδιασμό του ιστότοπού σας πριν προσθέσετε τα στοιχεία που προτιμάτε.
Προειδοποιήσεις
- Οι περισσότεροι δημιουργοί ιστότοπων είναι δωρεάν. Ωστόσο, εάν θέλετε να χρησιμοποιήσετε τον δικό σας τομέα (π.χ. "www.yourname.com" αντί για "www.yourname.wordpress.com"), θα πρέπει να πληρώσετε μηνιαία ή ετήσια χρέωση.
- Αποφύγετε τη λογοκλοπή και τηρήστε όλους τους νόμους περί πνευματικών δικαιωμάτων: μην προσθέτετε τυχαίες εικόνες από τον ιστό, ή ακόμα και δομικά στοιχεία, χωρίς άδεια.
