Εάν θέλετε να σχεδιάσετε και να δημιουργήσετε ιστοσελίδες, αυτή η διαδικασία θα είναι πολύ πιο εύκολη εάν σχεδιάζετε εκ των προτέρων. Στη φάση του σχεδιασμού, ο σχεδιαστής και ο πελάτης μπορούν να συνεργαστούν για να βρουν μια μορφή και διάταξη που ταιριάζει στις ανάγκες τους. Η διαδικασία σχεδιασμού επηρεάζει το στυλ ή το στυλ του ιστότοπου, θα μπορούσατε να πείτε ότι αυτή είναι η πιο σημαντική πτυχή στο σχεδιασμό ιστοσελίδων, ειδικά αν πρόκειται για επιχειρηματικούς σκοπούς.
Βήμα
Μέρος 1 από 4: Δημιουργία της βασικής δομής
Βήμα 1. Καθορίστε τη λειτουργία της ιστοσελίδας
Εάν δημιουργείτε έναν προσωπικό ιστότοπο, πιθανότατα γνωρίζετε ήδη την απάντηση. Ωστόσο, εάν δημιουργείτε έναν ιστότοπο για έναν άλλο οργανισμό, εταιρεία ή άτομο, πρέπει να μάθετε τι θέλουν και τη λειτουργικότητα του ιστότοπου. Όλα όσα καθορίζετε εδώ θα ισχύσουν όταν τελειώσει η ιστοσελίδα.
- Ο ιστότοπος απαιτεί Βιτρίνα; Πρέπει να γίνουν σχόλια χρηστών; Θα χρειαστεί ο χρήστης να δημιουργήσει λογαριασμό αργότερα; Είναι προσανατολισμένο το άρθρο της ιστοσελίδας; Image προσανατολισμένη στην εικόνα; Όλες αυτές και άλλες ερωτήσεις θα σας βοηθήσουν στο σχεδιασμό και τον σχεδιασμό του ιστότοπου.
- Αυτή η διαδικασία σχεδιασμού μπορεί να μετατραπεί σε σχέδιο, ειδικά αν πρόκειται για μια μεγάλη εταιρεία και πολλοί άνθρωποι συμμετέχουν στη δημιουργία αυτού του έργου.
Βήμα 2. Δημιουργήστε ένα διάγραμμα χάρτη τοποθεσίας (χάρτης τοποθεσίας)
Ένα διάγραμμα χάρτη ιστότοπου είναι παρόμοιο με ένα διάγραμμα ροής, που δείχνει πώς οι χρήστες μετακινούνται από τη μια σελίδα στην άλλη. Δεν χρειάζεστε μια ιστοσελίδα σε αυτό το στάδιο, μόνο μια γενική ροή εννοιών. Μπορείτε να χρησιμοποιήσετε ένα πρόγραμμα υπολογιστή για να δημιουργήσετε διαγράμματα ή να σχεδιάσετε το δικό σας σε χαρτί. Χρησιμοποιήστε αυτό το διάγραμμα για να δείξετε τις έννοιες της ιεραρχικής διάταξης και της συνδεσιμότητας ιστοσελίδων.
Βήμα 3. Δοκιμάστε τη μέθοδο σύνταξης της κάρτας
Μια δημοφιλής μέθοδος ανάπτυξης ομαδικού ιστού είναι η χρήση πολλών καρτών για να μάθετε τις προσδοκίες όλων. Πάρτε μια σειρά από κάρτες σημειώσεων και σημειώστε το βασικό περιεχόμενο μιας ιστοσελίδας σε κάθε μία ξεχωριστά. Τακτοποιήστε αυτές τις κάρτες μαζί με την ομάδα σας για να βρείτε την καλύτερη ιδέα. Αυτή η μέθοδος είναι κατάλληλη για χρήση όταν συνεργάζεστε με άλλους για τη δημιουργία ιστοσελίδων.
Βήμα 4. Χρησιμοποιήστε χαρτί και έναν πίνακα ανακοινώσεων ή έναν πίνακα
Αυτή είναι μια πρωτότυπη μέθοδος σχεδιασμού με μικρό προϋπολογισμό, μπορείτε να διαγράψετε ή να αλλάξετε γρήγορα περιεχόμενο και να αλλάξετε τη ροή. Σχεδιάστε το σχέδιο ιστού σας σε χαρτί και, στη συνέχεια, συνδέστε τα χαρτιά με νήμα ή σχεδιάστε γραμμές στον πίνακα. Αυτή η μέθοδος είναι πολύ κατάλληλη για χρήση σε συνεδρίες καταιγισμού ιδεών.
Βήμα 5. Δημιουργήστε ένα απόθεμα περιεχομένου
Στην πραγματικότητα τείνει να είναι πιο κατάλληλο να χρησιμοποιηθεί στον επανασχεδιασμό ιστών παρά σε νέα σχέδια ιστού. Εισαγάγετε κάθε τελειωμένο κομμάτι περιεχομένου ή ιστοσελίδας σε υπολογιστικό φύλλο. Σημειώστε τον σκοπό κάθε περιεχομένου ή σελίδας, χρησιμοποιώντας αυτήν τη λίστα για να καθορίσετε τι θα αφαιρέσετε και τι θα κρατήσετε. Μπορείτε να απλοποιήσετε τη δομή του ιστού και να απλοποιήσετε τη διαδικασία επανασχεδιασμού αργότερα.
Μέρος 2 από 4: Δημιουργία βασικού περιγράμματος HTML
Βήμα 1. Δημιουργήστε ένα wireframe για να δημιουργήσετε την ιεραρχία της ιστοσελίδας
Το βασικό πρότυπο HTML είναι το σχέδιο του ιστότοπου που θα δημιουργήσετε, χρησιμοποιώντας μόνο τις πιο βασικές ετικέτες και δείγμα (μπλοκ/πρότυπα) περιεχομένου. Αυτό το πλαίσιο απαντά στην ερώτηση "Τι είναι ορατό στον ιστό και πού;" Δεν απαιτείται μορφοποίηση και στυλ στη δημιουργία αυτού του περιγράμματος.
- Μπορείτε να δείτε τη δομή και το γράφημα ροής του περιεχομένου με ένα βασικό περίγραμμα πριν επιλέξετε μια ρύθμιση στυλ.
- Τα βασικά πρότυπα HTML δεν είναι στατικά όπως PDF ή εικόνες, μπορείτε να σύρετε γρήγορα δείγμα περιεχομένου για να δημιουργήσετε νέες δομές.
- Το βασικό πλαίσιο είναι διαδραστικό που ωφελεί τόσο τους προγραμματιστές ιστού όσο και τους πελάτες. Δεδομένου ότι αυτό το βασικό πλαίσιο είναι γραμμένο με απλό κώδικα HTML, μπορείτε ακόμα να το περιηγηθείτε και να γνωρίζετε πώς λειτουργεί η εναλλαγή ιστοσελίδων. Αυτό δεν μπορεί να γίνει με PDF.
Βήμα 2. Δοκιμάστε τη μέθοδο Gray Box
Αποκλείστε ή επισημάνετε το περιεχόμενο της ιστοσελίδας σας στο Gray Box, το πιο σημαντικό περιεχόμενο βρίσκεται στην κορυφή. Ταξινόμηση των περιεχομένων σε μία στήλη. Για παράδειγμα, εάν η σελίδα είναι "Σχετικά με την εταιρεία", τότε αναλυτικές πληροφορίες σχετικά με την εταιρεία βρίσκονται στην κορυφή, ακολουθούμενη από μια λίστα προσωπικού, κατόπιν στοιχεία επικοινωνίας κ.λπ.
Αυτό δεν περιλαμβάνει κεφαλίδες και υποσέλιδα. Το Grey Box είναι μια οπτική αναπαράσταση του περιεχομένου που θα εμφανιστεί στον ιστό
Βήμα 3. Δοκιμάστε ένα βασικό πρόγραμμα δημιουργίας περιγράμματος
Υπάρχουν διάφορα προγράμματα που μπορείτε να χρησιμοποιήσετε στη διαδικασία δημιουργίας ενός βασικού πλαισίου ιστού. Το ποσό του κώδικα προγραμματισμού ιστού (γλώσσας) που πρέπει να καταλάβετε είναι διαφορετικό για κάθε πρόγραμμα. Μερικά από τα προγράμματα που είναι αρκετά δημοφιλή περιλαμβάνουν:
- Pattern Lab. Αυτός ο ιστότοπος είναι αφιερωμένος στον "ατομικό σχεδιασμό", κάθε περιεχόμενο θεωρείται "μόριο" που συνθέτει μια μεγαλύτερη ιστοσελίδα.
- Jumpcharts. Αυτή η ιστοσελίδα παρέχει υπηρεσίες σχεδιασμού και πλαισίωσης μέσω διαδικτύου. Αυτοί οι ιστότοποι πληρώνονται και απαιτούν συνδρομή, αλλά μπορείτε να δημιουργήσετε γρήγορα πλαίσια ιστού χωρίς να χρειάζεται να κατακτήσετε πολλούς κώδικες προγραμματισμού ιστού.
- Wirefy. Το Wirefy είναι ένας άλλος ιστότοπος που προσφέρει "ατομικό σχεδιασμό". Οι προγραμματιστές ιστού μπορούν να αποκτήσουν το εργαλείο δωρεάν.
Βήμα 4. Χρησιμοποιήστε απλή σήμανση HTML
Ένα καλό βασικό πρότυπο θα μετατραπεί εύκολα στον αρχικό ιστότοπο. Μην σκέφτεστε πολύ το στυλ ιστού κατά τη διαδικασία δημιουργίας αυτού του προτύπου. Χρησιμοποιήστε σήμανση που μπορεί εύκολα να κατανοηθεί και να αλλάξει.
Ένα απλό βασικό πλαίσιο είναι πολύ καλύτερο. Ο σκοπός της δημιουργίας μιας σήμανσης είναι η κατασκευή μιας δομής. Η οπτική εμφάνιση μπορεί να προσαρμοστεί αργότερα με CSS και προηγμένη σήμανση
Βήμα 5. Δημιουργήστε ένα βασικό περίγραμμα για κάθε ιστοσελίδα
Μπορεί να μπείτε στον πειρασμό να εξισώσετε κάθε ιστοσελίδα με ένα βασικό περίγραμμα. Στην πραγματικότητα, αυτό θα κάνει τον ιστότοπό σας απλό και βαρετό. Δημιουργήστε ένα διαφορετικό περίγραμμα για κάθε σελίδα, θα καταλάβετε ότι κάθε σελίδα χρειάζεται το δικό της σχέδιο.
Μέρος 3 από 4: Δημιουργία περιεχομένου
Βήμα 1. Προετοιμάστε το περιεχόμενο πριν δημιουργήσετε μια ιστοσελίδα
Θα είναι πολύ πιο εύκολο να κάνετε προεπισκόπηση της προβολής ιστού, εάν έχετε ήδη πραγματικό περιεχόμενο αντί να χρησιμοποιείτε δείγματα ή σύμβολα κράτησης θέσης. Δεν χρειάζεται να έχετε υπερβολικό περιεχόμενο, αλλά το mockup σας θα φαίνεται πολύ καλύτερο εάν χρησιμοποιήσετε ένα αντίγραφο της αρχικής εικόνας.
Δεν χρειάζεται να έχετε όλο το υλικό του άρθρου, αλλά τουλάχιστον θα πρέπει να έχει έναν πραγματικό τίτλο
Βήμα 2. Θυμηθείτε ότι το υπέροχο περιεχόμενο δεν είναι μόνο κείμενο
Το Διαδίκτυο είναι πολύ πιο περίπλοκο από μια απλή ιστοσελίδα κειμένου. Χρειάζεστε μια ποικιλία διαφορετικού περιεχομένου για να δημιουργήσετε έναν υπέροχο ιστότοπο για να προσελκύσετε και να προσκαλέσετε επισκέπτες. Για παράδειγμα:
- Εικόνα.
- Φωνή.
- Βίντεο.
- Μετάδοση Ιστού ή διαδικτυακή ροή (Twitter)
- Ενσωμάτωση στο Facebook
- RSS
- Ροή Ιστού
Βήμα 3. Ζητήστε βοήθεια από έναν επαγγελματία φωτογράφο
Εάν θέλετε να συμπεριλάβετε φωτογραφίες στον ιστότοπό σας, η πρώτη εντύπωση που θα πάρετε από τον ιστότοπό σας θα είναι πολύ καλύτερη αν γεμίσει με επαγγελματική φωτογραφία. Μία καλή φωτογραφία αξίζει περισσότερο από είκοσι φωτογραφίες χαμηλής ποιότητας.
Αναζητήστε έναν νέο πτυχιούχο της τέχνης της φωτογραφίας ως φθηνότερη λύση από έναν επαγγελματία φωτογράφο που ασχολείται με την επιχείρηση εδώ και πολύ καιρό
Βήμα 4. Γράψτε ποιοτικά άρθρα
Το γραπτό περιεχόμενο στην ιστοσελίδα θα καθορίσει το ποσό της επισκεψιμότητας ιστού σας. Παρόλο που δεν χρειάζεται να ανησυχείτε πολύ για τη δημιουργία περιεχομένου σε αυτήν τη διαδικασία σχεδιασμού, δεν βλάπτει να αρχίσετε να το σκέφτεστε, καθώς θα χρειαστείτε επίσης περιεχόμενο σε τακτική βάση μόλις ξεκινήσει να λειτουργεί ο ιστότοπός σας.
Εκτός από το περιεχόμενο του άρθρου, υπάρχει γραπτό υλικό που πρέπει επίσης να έχετε στη διαδικασία σύνταξης μιας ιστοσελίδας. Για παράδειγμα, στοιχεία επικοινωνίας, όνομα εταιρείας ή οτιδήποτε άλλο θα χρησιμοποιηθεί πολλές φορές στον ιστότοπο
Μέρος 4 από 4: Μετατροπή εννοιών σε ιστότοπους
Βήμα 1. Τακτοποιήστε τα βασικά στοιχεία
Αυτή η διάταξη στοιχείων ισχύει για κάθε σελίδα στον ιστότοπό σας, όπως κεφαλίδες, υποσημειώσεις και μενού πλοήγησης. Ρυθμίστε το σε πολύ απλό στυλ, ώστε να μπορείτε να ελέγξετε την εμφάνιση όλων των σελίδων. Αυτό είναι ιδιαίτερα χρήσιμο καθώς προχωράτε στη διαδικασία διάταξης ιστού.
Μην ανησυχείτε πολύ για λεπτομέρειες, προσπαθήστε να κάνετε προεπισκόπηση (προεπισκόπηση) πώς φαίνεται η κεφαλίδα
Βήμα 2. Δημιουργήστε μια απλή διάταξη
Ξεκινήστε μετατοπίζοντας τη θέση του ρολογιού από τη στήλη περιγράμματος βάσης στην πραγματική τοποθεσία της σελίδας. Για παράδειγμα, μπορεί να θέλετε να μετακινήσετε το δείγμα μενού πλοήγησης στα αριστερά της σελίδας και τη λίστα των επικεφαλίδων στα δεξιά.
Συνεχίστε να πειραματίζεστε με διατάξεις ιστού για πολλές σελίδες, προτού προχωρήσετε στο επόμενο βήμα. Επιτρέψτε σε άλλους να το ρίξουν μια ματιά για να δουν αν η διάταξη που δημιουργείτε είναι ζωντανή
Βήμα 3. Δημιουργήστε ένα mockup
Χρησιμοποιήστε ένα πρόγραμμα όπως το Photoshop για να δημιουργήσετε μακέτες ή δείγματα σελίδων του ιστότοπού σας. Χρησιμοποιήστε τη διάταξη που έχετε συντάξει ως οδηγό. Μπορείτε να κάνετε μακέτες γρηγορότερα και να έχετε τα αποτελέσματα που θέλετε με ένα πρόγραμμα επεξεργασίας εικόνας. Τα αποτελέσματα αυτών των εικόνων μπορούν αργότερα να χρησιμοποιηθούν ως αναφορά στη διαδικασία εγγραφής κώδικα προγραμματισμού ιστού.
Βάλτε το πραγματικό περιεχόμενο στο mockup για να φαίνεται καλό
Βήμα 4. Αντικαταστήστε την έννοια του δείγματος με το αρχικό περιεχόμενο
Προσθέστε περιεχόμενο και στοιχεία στις ιστοσελίδες. Μην ιδρώνετε τις ρυθμίσεις στυλ ιστού προς το παρόν, απλώς τοποθετήστε τα πάντα στη σωστή τοποθεσία. Αυτό θα σας βοηθήσει να ελέγξετε τις αλλαγές στο στυλ ιστού που κάνετε αργότερα.
Βήμα 5. Δημιουργήστε έναν οδηγό στυλ ιστού
Είναι πολύ σημαντικό να διατηρήσετε ένα μείγμα στυλ, ειδικά για μεγάλους ιστότοπους. Εάν ο ιστότοπος προορίζεται για επαγγελματικούς σκοπούς και έχει ήδη τη δική του μάρκα ή στυλ, θα πρέπει να ενσωματωθεί στο σχεδιασμό του ιστότοπου. Πράγματα που πρέπει να λάβετε υπόψη κατά τη δημιουργία ενός οδηγού στυλ ιστοσελίδας:
- Πλοήγηση
- Κεφαλή σημείωση
- Παράγραφος
- Πλάγιος χαρακτήρας
- Τολμηρός χαρακτήρας
- Σύνδεσμοι (ενεργός, ανενεργός, τοποθετήστε το δείκτη του ποντικιού)
- Χρήση εικόνας
- Εικόνισμα
- Λαβή
- λίστα
Βήμα 6. Εφαρμόστε το στυλ ιστού
Μόλις βρείτε το σωστό στυλ και σχέδιο, εφαρμόστε το. Το CSS είναι ένας από τους ευκολότερους τρόπους υλοποίησης στυλ σε μια ιστοσελίδα ή σε ολόκληρο τον ιστότοπο. Δείτε τις παρακάτω οδηγίες για να κατανοήσετε καλύτερα τις λεπτομέρειες χρήσης του CSS.
