Τι πρέπει να κάνετε και να μην κάνετε του υπέροχου σχεδιασμού ιστοσελίδων

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

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

«μια διαδικασία σύλληψης, σχεδιασμού, μοντελοποίησης και εκτέλεσης παράδοσης ηλεκτρονικών μέσων μέσω Διαδικτύου με τη μορφή γλώσσας σήμανσης κατάλληλης για ερμηνεία από το πρόγραμμα περιήγησης Ιστού και εμφάνιση ως γραφική διεπαφή χρήστη» .

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

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

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

Υπάρχουν μερικά πράγματα που θα χρειαστείτε για να σχεδιάσετε και να σχεδιάσετε αποτελεσματικά τον ιστότοπό σας:

• ένα μυαλό
• ένα στυλό και ένα χαρτί
• (προαιρετικό) λογισμικό διαγράμματος ροής
• μια γενική ιδέα για τις διάφορες ενότητες του ιστότοπού σας

Για να ξεκινήσετε, πιάστε το στυλό και το χαρτί σας ή ξεκινήστε το αγαπημένο σας λογισμικό διαγράμματος ροής. Χρησιμοποιούμε το OmniGraffle Professiona για Mac OS X, το οποίο κοστίζει 150 $ ανά άδεια χρήσης, αλλά αξίζει τον κόπο αν δημιουργείτε ιστότοπους σε τακτική βάση. Εάν χρησιμοποιείτε υπολογιστή, τότε το SmartDraw είναι ένα εξαιρετικό ΔΩΡΕΑΝ λογισμικό διαγράμματος ροής που μπορείτε να χρησιμοποιήσετε. Ωστόσο, ένα στυλό και ένα χαρτί λειτουργούν μια χαρά.

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

Δείτε το διάγραμμα ροής που δημιουργήσαμε κατά τη σύλληψη των Chromatic Sites. (1) Στην κορυφή του διαγράμματος ροής παραθέτουμε το όνομα του ιστότοπού μας. (2) Στη συνέχεια, περιλαμβάνουμε κάθε κύρια ενότητα του ιστότοπού μας: Αρχική σελίδα, Πληροφορίες και Υπηρεσίες. Αυτές οι ενότητες είναι η κύρια πλοήγηση για τον ιστότοπό σας. Το ποια θα είναι τα ονόματα κάθε ενότητας εξαρτάται εξ ολοκλήρου από το περιεχόμενο του ιστότοπού σας. Προσπαθήστε να χρησιμοποιείτε όσο το δυνατόν λιγότερες ενότητες, ώστε οι επισκέπτες σας να μην κατακλύζονται κατά την πλοήγηση στον ιστότοπό σας.

(3) Στη συνέχεια, προσθέστε όλες τις δευτερεύουσες σελίδες (υποενότητες) που θα παρατίθενται σε κάθε μία από τις κύριες σελίδες. Για το Home, έχουμε συμπεριλάβει την επαγγελματική σχεδίαση ιστοσελίδων, την ανάπτυξη ιστού και τη βελτιστοποίηση μηχανών αναζήτησης. Η δευτερεύουσα πλοήγηση πρέπει να είναι πιο περιγραφική από την κύρια πλοήγηση. Όσο πιο βαθιά πηγαίνει η ιεραρχία πλοήγησης των ιστοτόπων σας, τόσο πιο περιγραφική θα πρέπει να είναι κάθε ετικέτα.

Τα Dos

• Λιγότερο είναι περισσότερο; διατηρήστε τον αριθμό των κύριων τμημάτων στο ελάχιστο. Χρησιμοποιούμε 6 ενότητες στον ιστότοπό μας που είναι υπεραρκετές
• Είτε χρησιμοποιείτε στυλό και χαρτί είτε λογισμικό διαγράμματος ροής, κρατήστε τα πράγματα όσο το δυνατόν πιο καθαρά και οργανωμένα. Αν και εσείς (και οποιοσδήποτε συνεργάζεται μαζί σας) είστε οι μόνοι που θα χρησιμοποιούν το διάγραμμα ροής, πρέπει να έχει νόημα - Οι κύριες ενότητες σας θα πρέπει να χρησιμοποιούν ευρύτερους όρους, ενώ οι δευτερεύοντες και οι τριτογενείς όροι θα πρέπει να είναι πιο περιγραφικοί

Οι Donts
Η δημιουργία ενός διαγράμματος ροής είναι αρκετά απλή. Ωστόσο, υπάρχουν μερικά λάθη που μπορούν εύκολα να γίνουν:

• Μην χρησιμοποιείτε πολύ περιγραφικούς όρους στην κύρια πλοήγησή σας, εκτός εάν ολόκληρος ο ιστότοπός σας εστιάζει σε ένα στενό θέμα - Μην προσπαθήσετε να συγκεντρώσετε πολλά θέματα στην ίδια σελίδα. Δημιουργήστε μια γενική ενότητα για αυτά τα θέματα και από αυτήν την ενότητα δημιουργήστε υποενότητες. Αυτό θα κάνει τις ιστοσελίδες της υποενότητας (περιγραφικές) πιο πιθανό να έχουν καλύτερες κατατάξεις στις μηχανές αναζήτησης (Google, Yahoo, MSN, Ask) Αφού δημιουργήσετε ένα συνοπτικό και περιγραφικό διάγραμμα ροής, είστε έτοιμοι να προχωρήσετε στο δεύτερο στάδιο της διαδικασίας σχεδιασμού ιστοσελίδων:

Στάδιο 2: Μοντελοποίηση
Στο στάδιο της μοντελοποίησης, δημιουργούνται στατικά μακέτα "wireframe". Κάθε μακέτα απεικονίζει έναν γυμνό σκελετό της διάταξης για κάθε μία από τις ιστοσελίδες που θα συμπεριληφθούν στον ιστότοπό σας. Αυτό το στάδιο είναι σημαντικό γιατί μας δίνει μια ιδέα για το πού θα τοποθετηθούν διαφορετικά στοιχεία στο σχέδιό μας. Μερικά από αυτά τα στοιχεία είναι:

• λογότυπο
• μενού πλοήγησης
• περιεχόμενο
• εικόνες, βίντεο

Για να δημιουργήσετε αυτές τις μακέτες, μπορείτε να χρησιμοποιήσετε στυλό και χαρτί ή το προτιμώμενο λογισμικό μακέτας. Στο παρελθόν χρησιμοποιούσαμε το Photoshop, αλλά τελευταία χρησιμοποιούσαμε το OmniGraffle Professional. Το OmniGraffle δεν απαιτεί τόσο πόρους όσο το Photoshop και μας επιτρέπει να συναρμολογούμε τις μακέτες του wireframe πολύ πιο γρήγορα.

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

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

Συνήθως ξεκινάμε από πάνω αριστερά και κατεβαίνουμε προς τα κάτω. Δεν υπάρχει συγκεκριμένος τρόπος εμφάνισης ενός wireframe. Χρησιμοποιήστε τη φαντασία σας. Ωστόσο, βεβαιωθείτε ότι όταν δημιουργείτε τα καλώδια σας δεν ξεχνάτε να συμπεριλάβετε τα πιο σημαντικά στοιχεία ενός ιστότοπου (λογότυπο, μενού πλοήγησης, τοποθέτηση περιεχομένου, τοποθέτηση εικόνων/βίντεο).

Εάν ορισμένες από τις σελίδες σας θα χρησιμοποιούν την ίδια διάταξη, τότε δεν είναι απαραίτητο να κοροϊδεύετε όλες αυτές τις σελίδες (αν και σίγουρα μπορείτε). Απλώς φροντίστε να κάνετε mockup κάθε μοναδικής διάταξης που θα έχει ο ιστότοπός σας. Θα ευχαριστήσεις τον εαυτό σου αργότερα.

Τα Do's

• μακέτα όλων των μοναδικών σελίδων
• συμπεριλάβετε σημαντικά στοιχεία (λογότυπο, πλοήγηση, τοποθέτηση περιεχομένου, εικόνες/τοποθέτηση βίντεο) -ξεκινήστε από την κορυφή και προχωρήστε προς τα κάτω -αναφέρετε το διάγραμμα ροής που δημιουργήθηκε στο στάδιο 1 για να μην ξεχάσετε να κάνετε mockup οποιασδήποτε σελίδας -αποθήκευση, αποθήκευση, αποθήκευση – όπως με οτιδήποτε στον υπολογιστή, αποθηκεύστε τα μακέτα σας κάθε 10 λεπτά περίπου
• επικεντρωθείτε σε καθαρές, φιλικές προς τον χρήστη διατάξεις -τοποθετήστε ετικέτες στα στοιχεία σας ώστε να μην ξεχνάτε ποια είναι όταν τα αναφέρετε στο στάδιο 3, εκτέλεση -χρησιμοποιήστε άλλους ιστότοπους ως έμπνευση. Δεν υπάρχει τίποτα κακό με το να παίρνετε στοιχεία από άλλους ιστότοπους και να τα κάνετε δικά σας (βλ. "δεν")

Το Dont's

• Μην συμπεριλάβετε γραφικά ή χρώματα (αυτό είναι για το επόμενο στάδιο) - μην κάνετε τις μακέτες σας πολύ «απειλημένες». επικεντρωθείτε σε καθαρές, καλά οργανωμένες, φιλικές προς τον χρήστη διατάξεις - μην παραλείψετε αυτό το στάδιο. είναι εξίσου σημαντικό με το πρώτο και το τελευταίο - εάν παίρνετε στοιχεία από άλλους ιστότοπους, βεβαιωθείτε ότι δεν κάνετε λογοκλοπή. υπάρχει διαφορά μεταξύ του να εμπνέεσαι από έναν άλλο ιστότοπο για να δημιουργήσεις ορισμένα στοιχεία του σχεδίου σου και να ξεκόψεις κατάφωρα τη διάταξη και τα χρώματά τους

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

Μέχρι να φτάσετε στο τρίτο στάδιο, θα πρέπει να έχετε μια ξεκάθαρη ιδέα:

• πώς θα μεταβούν οι επισκέπτες σας από το ένα μέρος στο άλλο (στάδιο 1, διάγραμμα ροής) - πώς θα είναι διατεταγμένες οι ιστοσελίδες σας (στάδιο 2, μακέτες wireframe)

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

Αφαιρέστε το στυλό και το χαρτί
Στο στάδιο 3, πρέπει να χρησιμοποιείτε το Photoshop ή άλλο πρόγραμμα επεξεργασίας εικόνας, καθώς θα χρησιμοποιείτε χρώματα και γραφικά για να δημιουργήσετε τη διάταξη για τον ιστότοπό σας.

Συνήθως αρχίζουμε πρώτα να δημιουργούμε την «αρχική» σελίδα (ευρετήριο). Χρησιμοποιήστε τα καλώδια που δημιουργήσατε στο στάδιο 2 ως πρότυπο για κάθε μία από τις σελίδες που δημιουργείτε. Ωστόσο, αντί να χρησιμοποιείτε συμπαγή πλαίσια, χρησιμοποιήστε γραφικά, χρώματα και κείμενο. Κάθε σελίδα πρέπει να είναι ακριβώς όπως θέλετε να φαίνεται στο Διαδίκτυο, καθώς αυτό είναι το τελικό στάδιο της διαδικασίας σχεδιασμού.

Φροντίστε να συμπεριλάβετε το φόντο για την πλοήγησή σας (αλλά μην προσθέσετε στην πραγματικότητα το κείμενο στην εικόνα σας). Κατά τη μετατροπή χρησιμοποιώντας CSS (διαδοχικά φύλλα στυλ), η πλοήγησή σας θα πρέπει να έχει τη μορφή κειμένου και όχι εικόνων. Οι εικόνες δεν μπορούν να ανιχνευθούν από τις μηχανές αναζήτησης (οι λέξεις-κλειδιά που χρησιμοποιούνται στην πλοήγησή σας δεν θα ευρετηριαστούν στις σελίδες αποτελεσμάτων της μηχανής αναζήτησης, πράγμα που σημαίνει ότι λιγότερα άτομα θα μπορούν να βρουν τον ιστότοπό σας).

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

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

Τα Dos

• Ανατρέξτε στα πρότυπά σας που δημιουργήθηκαν στο στάδιο 2. Αν και είναι καλό να αποκλίνετε από την αρχική σας διάταξη, δεν χρειάζεται να το κάνετε
• Κάντε λίγη έρευνα πριν δημιουργήσετε το πραγματικό σας σχέδιο. πάρτε ιδέες από άλλους ιστότοπους και κάντε τις δικές σας (χωρίς λογοκλοπή)
• Συμπεριλάβετε χρώμα και γραφικά για να δημιουργήσετε την τελική εμφάνιση των ιστοσελίδων σας -χρησιμοποιήστε CSS (διαδοχικά φύλλα στυλ) για να μετατρέψετε τα σχέδιά σας από εικόνες σε σήμανση κατανοητή από τα προγράμματα περιήγησης ιστού -αναφέρετε το διάγραμμα ροής σας από το στάδιο 1 κατά την κωδικοποίηση των σελίδων σας με υπερσυνδέσμους. Είναι καλύτερο να χρησιμοποιήσετε ένα αναπτυσσόμενο μενού που περιλαμβάνει όλους (ή την πλειοψηφία) των συνδέσμων στον ιστότοπό σας σε κάθε σελίδα. Αυτό θα επιτρέψει την ευκολότερη πλοήγηση και θα διευκολύνει την ανίχνευση των σελίδων σας όταν σταματούν οι αράχνες της μηχανής αναζήτησης. ένα εξαιρετικό μέρος για να αποκτήσετε αναπτυσσόμενα μενού CSS είναι στο DynamicDrive.com - οριστικοποιήστε το σχέδιό σας ενώ εργάζεστε στο Photoshop ή σε οποιοδήποτε λογισμικό επεξεργασίας εικόνων χρησιμοποιείτε. μπορεί να είναι δύσκολο να κάνετε αλλαγές στο σχέδιό σας μόλις μετατραπεί σε σήμανση (κωδικός)

Οι Donts

• Μην συμπεριλάβετε το κείμενο στα μενού πλοήγησής σας κατά τη μετατροπή σε CSS. αντί να χρησιμοποιείτε κείμενο εικόνας, χρησιμοποιήστε κανονικό κείμενο που είναι αναγνώσιμο από τις αράχνες των μηχανών αναζήτησης
• Μην χρησιμοποιείτε πίνακες κατά τη μετατροπή. Ακόμα κι αν χρειαστεί να αγοράσετε ένα βιβλίο σε CSS, θα αξίζει τον κόπο. τα τραπέζια είναι νεκρά
• Μην παραλείπετε τα δύο πρώτα στάδια για να εξοικονομήσετε χρόνο. Ο ιστότοπός σας ΘΑ είναι καλύτερος εάν ξεκινήσετε από την αρχή της διαδικασίας σχεδιασμού ιστοσελίδων (αντί στο τέλος)
• Μην ξεχάσετε να συμπιέσετε τις εικόνες σας όταν αποκόπτονται για CSS. Δεν υπάρχει τίποτα χειρότερο από μια αργή φόρτωση ιστότοπου λόγω μεγάλων αρχείων εικόνας. Το Photoshop διαθέτει την επιλογή "Αποθήκευση βελτιστοποιημένης για τον Ιστό" (CS3 - "Αποθήκευση για τον Ιστό και τις συσκευές")

Process Makes Perfect
Ακολουθώντας μια διαδικασία σχεδίασης ιστοσελίδων όπως αυτή που παρουσιάζεται σε αυτό το άρθρο, αυξάνετε τις πιθανότητες να δημιουργήσετε έναν ιστότοπο που είναι καλά οργανωμένος, εύκολα πλοηγήσιμος και πολύ φιλικός προς το χρήστη. Ας το παραδεχτούμε – εάν οι επισκέπτες χαθούν ή μπερδευτούν ενώ προσπαθούν να σερφάρουν στον ιστότοπό σας, μπορεί να πατήσουν το κουμπί πίσω και να αναζητήσουν έναν πιο φιλικό προς τον χρήστη ιστότοπο. Οι άνθρωποι δεν θέλουν να σκέφτονται όταν πρόκειται να βρουν το δρόμο τους γύρω από ιστότοπους. Μην τους κάνεις να σκεφτούν. Κάνετε τη σκέψη σχεδιάζοντας τον ιστότοπό σας από το στάδιο 1 έως το στάδιο 3 και θα διαπιστώσετε ότι περισσότεροι άνθρωποι θα απολαμβάνουν να επισκέπτονται τον ιστότοπό σας.