Αυτό το wikiHow σας διδάσκει πώς να σχεδιάσετε έναν ομαλό, επαγγελματικό ιστότοπο. Ενώ είστε ελεύθεροι να αποφασίσετε για το σχεδιασμό του ιστότοπού σας, υπάρχουν μερικά σημαντικά πράγματα που πρέπει να κάνετε και να αποφύγετε κατά τη δημιουργία ενός ιστότοπου.
Βήμα
Μέρος 1 από 2: Δημιουργία σχεδίασης ιστότοπου
Βήμα 1. Αποφασίστε εάν θέλετε να χρησιμοποιήσετε έναν δημιουργό ιστότοπου
Η δημιουργία ενός ιστότοπου από την αρχή απαιτεί λεπτομερή κατανόηση του κώδικα HTML, αλλά μπορείτε να δημιουργήσετε έναν ιστότοπο χρησιμοποιώντας μια δωρεάν υπηρεσία φιλοξενίας όπως οι Weebly, Wix, WordPress ή Google Sites. Οι δημιουργοί ιστοσελίδων τείνουν να είναι πολύ πιο εύκολο για τους αρχάριους σχεδιαστές από το HTML.
- Εάν αποφασίσετε να κωδικοποιήσετε μόνοι σας, θα πρέπει να μάθετε κωδικοποίηση HTML και CSS.
- Εάν είστε απρόθυμοι να αφιερώσετε χρόνο και ενέργεια στη δημιουργία του δικού σας ιστότοπου, μπορείτε να προσλάβετε έναν σχεδιαστή ιστοσελίδων. Οι υπηρεσίες ελεύθερων σχεδιαστών ποικίλλουν σε μεγάλο βαθμό, ορισμένες χρεώσεις ανά ώρα και άλλες ανά έργο, με συνολικό εύρος από εκατομμύρια έως δεκάδες εκατομμύρια ρουπίες.
Βήμα 2. Δημιουργήστε έναν χάρτη ιστότοπου
Πριν ανοίξετε τον δημιουργό του ιστότοπου, θα πρέπει να έχετε καθορίσει πόσες σελίδες υπάρχουν στον ιστότοπο, ποιο είναι το περιεχόμενο σε κάθε σελίδα και τη γενική διάταξη σημαντικών σελίδων όπως "Αρχική σελίδα" και "Σχετικά".
Θα είναι ευκολότερο για σας να απεικονίσετε τις σελίδες του ιστότοπού σας δημιουργώντας τραχιές εικόνες, όχι μόνο σκιές
Βήμα 3. Χρησιμοποιήστε ένα διαισθητικό σχέδιο
Ενώ οι νέες ιδέες είναι συνήθως ενδιαφέρουσες, τα βασικά σχέδια θα πρέπει να ακολουθούν αυτές τις γενικές οδηγίες:
- Οι επιλογές πλοήγησης (για παράδειγμα, πολλές καρτέλες για διαφορετικές σελίδες) πρέπει να τοποθετούνται στο επάνω μέρος της σελίδας.
- Εάν χρησιμοποιείτε το εικονίδιο μενού (☰), θα πρέπει να βρίσκεται στην επάνω αριστερή γωνία της σελίδας.
- Εάν χρησιμοποιείτε τη γραμμή αναζήτησης, τοποθετήστε την κοντά στην επάνω δεξιά πλευρά της σελίδας.
- Χρήσιμοι σύνδεσμοι (για παράδειγμα, σύνδεσμοι προς σελίδες "Πληροφορίες" ή "Επικοινωνήστε μαζί μας") πρέπει να βρίσκονται στο κάτω μέρος της σελίδας.
Βήμα 4. Να είστε συνεπείς
Ανεξάρτητα από το κείμενο, την παλέτα χρωμάτων, το θέμα εικόνας και το σχέδιο που επιλέγετε, βεβαιωθείτε ότι εφαρμόζετε τις ίδιες αποφάσεις σε ολόκληρο τον ιστότοπό σας. Οι χρήστες θα εκπλαγούν όταν δουν ότι η γραμματοσειρά και ο συνδυασμός χρωμάτων στη σελίδα "Σχετικά" είναι πολύ διαφορετικοί από εκείνους που χρησιμοποιούνται για την αρχική σελίδα.
- Για παράδειγμα, εάν χρησιμοποιείτε ένα απαλό χρώμα για την αρχική σας σελίδα, μην χρησιμοποιείτε έντονο χρώμα στην επόμενη σελίδα.
- Σημειώστε ότι η χρήση φωτεινών ή συγκρουόμενων χρωμάτων, ειδικά δυναμικά (ή κινούμενων) χρωμάτων, μπορεί να προκαλέσει επιληπτικές κρίσεις ή επιληπτικές κρίσεις σε μια μειοψηφία χρηστών. Εάν αποφασίσετε να χρησιμοποιήσετε ένα τέτοιο χρώμα, βεβαιωθείτε ότι έχετε συμπεριλάβει μια προειδοποίηση "κίνδυνος κατάσχεσης" πριν από την εν λόγω σελίδα.
Βήμα 5. Προσθέστε επιλογές πλοήγησης
Η τοποθέτηση άμεσων συνδέσμων σε σημαντικές σελίδες πάνω από την αρχική σελίδα θα βοηθήσει τους νέους επισκέπτες στο περιεχόμενο που τους ενδιαφέρει. Οι περισσότεροι δημιουργοί ιστότοπου προσθέτουν αυτόν τον σύνδεσμο ως προεπιλογή.
Είναι σημαντικό να διασφαλίσετε ότι όλες οι σελίδες του ιστότοπου μπορούν να έχουν πρόσβαση κάνοντας κλικ σε μια επιλογή εντός του ιστότοπου και όχι μόνο μέσω της διεύθυνσης της σελίδας
Βήμα 6. Χρησιμοποιήστε αντίστοιχα χρώματα
Όπως όλοι οι τύποι σχεδιασμού, ο σχεδιασμός ιστοσελίδων βασίζεται επίσης σε ευχάριστους συνδυασμούς χρωμάτων. Επομένως, η επιλογή ενός χρώματος θέματος που ταιριάζει είναι πολύ σημαντική.
Εάν είστε μπερδεμένοι, ξεκινήστε με μαύρο, άσπρο και γκρι
Βήμα 7. Εξετάστε ένα μινιμαλιστικό σχέδιο
Η μινιμαλιστική ιδέα ενθαρρύνει τη χρήση ψυχρών τόνων, απλά γραφικά, μαύρες σελίδες κειμένου σε λευκό φόντο και όσο το δυνατόν λιγότερη διακόσμηση. Δεδομένου ότι ένας μινιμαλιστικός σχεδιασμός απαιτεί πολύ λίγα στοιχεία, είναι μια εύκολη επιλογή να κάνετε τον ιστότοπό σας να φαίνεται επαγγελματικός και ελκυστικός χωρίς υπερβολική προσπάθεια.
- Οι περισσότεροι δημιουργοί ιστότοπων παρέχουν ένα "μινιμαλιστικό" θέμα από το οποίο μπορείτε να επιλέξετε όταν δημιουργείτε έναν ιστότοπο.
- Η μινιμαλιστική εναλλακτική λύση είναι η «βαρβαρότητα», η οποία χρησιμοποιεί πιο σκληρές λέξεις, έντονα χρώματα, έντονο κείμενο και ελάχιστα γραφικά. Υπάρχουν πολύ λιγότεροι χρήστες βρουλιστικών σχεδίων από τους μινιμαλιστές, αλλά αν το περιεχόμενο είναι κατάλληλο, αυτός ο σχεδιασμός μπορεί να είναι μια καλή επιλογή.
Βήμα 8. Εφαρμόστε μοναδικές επιλογές
Τα στοιχεία πλέγματος και γραμμής είναι ασφαλείς επιλογές, αλλά μερικά μοναδικά στυλ θα προσθέσουν μια προσωπική πινελιά και θα ξεχωρίσουν τον ιστότοπό σας από τα υπόλοιπα.
- Μην φοβάστε να αλλάξετε την τάση τοποθετώντας ασύμμετρα στοιχεία ιστότοπου ή χρησιμοποιώντας στοιβαγμένα στοιχεία για να δημιουργήσετε μια πολυεπίπεδη εμφάνιση.
- Παρόλο που τα κομψά, κοφτερά τετράγωνα στοιχεία (γνωστά ως παρουσίαση με βάση την κάρτα) είναι λιγότερο επιθυμητά από τα μαλακά, στρογγυλεμένα στοιχεία.
Μέρος 2 από 2: Μεγιστοποίηση της απόδοσης του ιστότοπου
Βήμα 1. Εκμεταλλευτείτε τις επιλογές βελτιστοποίησης αυτοκινήτου
Τα προγράμματα περιήγησης για κινητά φέρνουν περισσότερη κίνηση από τα προγράμματα περιήγησης για επιτραπέζιους υπολογιστές. Αυτό σημαίνει ότι η προσοχή που δίνετε στην έκδοση για κινητά θα πρέπει να είναι τουλάχιστον ίδια με την ανάπτυξη ιστότοπου για επιτραπέζιους υπολογιστές. Οι περισσότεροι ιστότοποι αυτόματης δημιουργίας έχουν ήδη δημιουργήσει μια έκδοση αυτοκινήτου, αλλά λάβετε υπόψη τις ακόλουθες πληροφορίες για ιστότοπους για κινητά:
- Βεβαιωθείτε ότι τα κουμπιά (για παράδειγμα, οι σύνδεσμοι ιστότοπου) είναι μεγάλα και πατούν εύκολα.
- Αποφύγετε τις δυνατότητες που δεν μπορείτε να δείτε σε φορητές συσκευές (π.χ. Flash, Java, κ.λπ.).
- Εξετάστε το ενδεχόμενο να δημιουργήσετε μια εφαρμογή αυτοκινήτου για τον ιστότοπό σας.
Βήμα 2. Μην συμπεριλάβετε πάρα πολλές φωτογραφίες ανά σελίδα
Τα προγράμματα περιήγησης για επιτραπέζιους υπολογιστές και φορητούς υπολογιστές έχουν μερικές φορές πρόβλημα στη φόρτωση σελίδων με πολλές φωτογραφίες ή βίντεο. Ενώ οι εικόνες είναι πολύ σημαντικές στο σχεδιασμό ιστοσελίδων, οι υπερβολικές ποσότητες μέσων ανά σελίδα μπορούν να παρατείνουν τους χρόνους φόρτωσης και αυτό αποθαρρύνει τους χρήστες να επισκεφθούν αυτές τις σελίδες.
Γενικά, η φόρτωση μιας σελίδας πρέπει να διαρκεί λιγότερο από τέσσερα δευτερόλεπτα
Βήμα 3. Προσθέστε μια σελίδα "Επικοινωνία"
Ενδέχεται να παρατηρήσετε ότι οι περισσότεροι ιστότοποι παρέχουν μια σελίδα "Επικοινωνήστε μαζί μας" που περιέχει στοιχεία επικοινωνίας (όπως αριθμός τηλεφώνου και διεύθυνση ηλεκτρονικού ταχυδρομείου). Στην πραγματικότητα, ορισμένοι ιστότοποι παρέχουν μια αυτοματοποιημένη φόρμα ερωτήσεων σε αυτήν τη σελίδα. Η σελίδα "Επικοινωνία" είναι μια απευθείας γραμμή επικοινωνίας μεταξύ των επισκεπτών του ιστότοπου και εσάς, πράγμα που σημαίνει ότι είναι επίσης μια λύση στην ερώτηση ή την απογοήτευση ενός επισκέπτη.
Βήμα 4. Δημιουργήστε μια προσαρμοσμένη σελίδα 404
Όταν ένας επισκέπτης φτάσει σε μια συγκεκριμένη σελίδα που δεν έχει δημιουργηθεί ή δεν υπάρχει, θα εμφανιστεί μια σελίδα "Σφάλμα 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. Διατηρήστε τον ιστότοπο ενημερωμένο
Οι τάσεις σχεδιασμού, οι σύνδεσμοι, οι φωτογραφίες, οι έννοιες και οι λέξεις -κλειδιά αλλάζουν πάντα. Έτσι, και εσείς πρέπει πάντα να κάνετε αλλαγές για να συμβαδίσετε με την εποχή. Θα πρέπει να ελέγχετε την απόδοση του ιστότοπού σας και να τον συγκρίνετε με παρόμοιους ιστότοπους τουλάχιστον μία φορά κάθε τρεις μήνες (κατά προτίμηση συχνότερα).
Συμβουλές
- Η προσβασιμότητα είναι επίσης μια εξίσου σημαντική πτυχή στην ανάπτυξη ιστοσελίδων. Η προσβασιμότητα περιλαμβάνει περιγραφές για επισκέπτες με προβλήματα ακοής, περιγραφές ήχου για επισκέπτες με προβλήματα όρασης και ειδοποιήσεις φωτοευαισθησίας εάν ο ιστότοπός σας χρησιμοποιεί εφέ δυνητικά σπασμών.
- Οι περισσότεροι δημιουργοί ιστότοπου παρέχουν πρότυπα που μπορείτε να χρησιμοποιήσετε για να καθορίσετε τη διάταξη και το σχεδιασμό πριν προσθέσετε τα επιθυμητά στοιχεία.
Προειδοποίηση
- Οι περισσότεροι ιστότοποι δημιουργών είναι δωρεάν, αλλά αν θέλετε να χρησιμοποιήσετε τον δικό σας τομέα (όπως "www.yourname.com" αντί για "www.yourname.wordpress.com"), θα πρέπει να πληρώσετε ένα μηνιαίο ή ετήσιο τέλος.
- Αποφύγετε τη λογοκλοπή και μάθετε όλους τους νόμους περί πνευματικών δικαιωμάτων. Μην συμπεριλαμβάνετε τυχαίες εικόνες από το διαδίκτυο ή δομικά στοιχεία χωρίς άδεια.
