skip to main content

σχεδιάζουμε

Η διαδικασία σχεδιασμού είναι συνήθως το πιο διασκεδαστικό, δημιουργικό αλλά και προκλητικό μέρος της διαδικασίας δημιουργίας μιας ιστοσελίδας. Καλούμαστε να οπτικοποιήσουμε όλα αυτά που αναλύσαμε, διαπιστώσαμε και προτείναμε στο προηγούμενο βήμα. Είμαστε πλέον σε θέση να αποφασίσουμε την επιθυμητή αισθητική, τα χρώματα, την γενική ταυτότητα της σελίδας έτσι ώστε να φτάσουμε στους επιθυμητούς στόχους της, είτε αυτοί είναι μια πώληση, ή ένα αίτημα συνεργασίας ή απλώς η επίσκεψη της σελίδας με τα στοιχεία επικοινωνίας. Κάθε σημείο όμως με τη σειρά του. 
Ξεκινάμε πάντα με το λογότυπο…

Λογότυπο

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

Navigation (επιλογές πλοήγησης)

Ήδη από την ανάλυση που έχουμε κάνει μαζί με τον πελάτη γνωρίζουμε (ή προτείνουμε) το επιθυμητό navigation για την ιστοσελίδα, δηλαδή ποια διαδρομή θα είναι ιδανική να ακολουθήσει ο επισκέπτης της σελίδας. Έτσι ξεκινάμε μια ιστοσελίδα σχεδιάζοντας το βασικό τρόπο πλοήγησης και δημιουργώντας χώρους που θα φιλοξενήσουν τις ενότητες της σελίδας διευκολύνοντας/καθοδηγώντας τον επισκέπτη στον επιθυμητό προορισμό. 
Τα συμπεράσματα που βγήκαν από την μελέτη του ανταγωνισμού, του target group αλλά και του προσδιορισμού των προσδοκιών του πελάτη μας οδηγούν στο να προτείνουμε το κατάλληλο navigation που στην ουσία είναι η ραχοκοκαλιά της ιστοσελίδας.

Περιεχόμενο της σελίδας (content)

Το περιεχόμενο της σελίδας είναι πάντα το Α και το Ω. Το περιεχόμενο είναι αυτό που ενδιαφέρει κυρίως τον επισκέπτη (εκτός εξαιρέσεων) και όχι το περίβλημα. Το περίβλημα είναι απλώς ένας τρόπος να αναδείξεις και να ενισχύσεις το περιεχόμενο. Το εικαστικό μιας σελίδας υπάρχει για να εξυπηρετήσει το προς προβολή περιεχόμενο και όχι αντίστροφα. Έτσι, απαραίτητη προϋπόθεση κατά το σχεδιασμό είναι να γνωρίζουμε το μέγεθος/ποσότητα, το ύφος, την ποιότητα και τους στόχους του περιεχομένου. Έτσι θα μπορέσουμε να σχεδιάσουμε τη σελίδα που θα ικανοποιεί καλύτερα τις σημεία προβολής του πελάτη.
Διαβάστε περισσότερα σχετικά με την αξία του περιεχομένου σε σχέση με την ανάδειξη της ιστοσελίδας στα αποτελέσματα μηχανών αναζήτησης.
Μέρος του περιεχομένου της σελίδας είναι και το λεγόμενο (μη μεταφράσιμο) microcopy, το οποίο αναφέρεται σε όλα αυτά  τα μικρά κείμενα που εμφανίζονται μέσα στη σελίδα, σε μικρά αλλά ουσιαστικά διαδικαστικά σημεία, τα οποία είναι καθοριστικά στην συνειδητή ή υποσυνείδητη επιρροή που έχουν στη διάθεση του επισκέπτη. Για παράδειγμα σε μια φόρμα επικοινωνίας ο τίτλος: «Γράψε το όνομά σου» αποτυπώνεται και αλλιώς έτσι: «Όνομα» ή έτσι: «Παρακαλούμε συμπληρώστε το όνομά σας». Τρεις εντελώς διαφορετικοί τρόποι προσέγγισης. Όλοι ορθοί και κατανοητοί. Ένας όμως ταιριάζει καλύτερα με το ύφος και τη διάθεση της επιχείρησης.

Layout

Έχοντας στα χέρια μας το λογότυπο μπορούμε να προχωρήσουμε στην σχεδίαση του layout της σελίδας. Την πρότασή μας τη σχεδιάζουμε στο photoshop και την παρουσιάζουμε στον πελάτη με τη μορφή στατικής εικόνας. Συνήθως, η πρόταση παρουσιάζεται σε δύο ή τρεις εκδοχές για διαφορετικές περιοχές της σελίδας έτσι ώστε ο πελάτης να έχει μια σχετικά καλή εικόνα της πρότασης. Φυσικά, αυτό το δείγμα δεν μπορεί να συγκριθεί με την  τελική ιστοσελίδα καθώς δεν περιλαμβάνει τα διάφορα (πιθανά) animated στοιχεία, όπως επίσης και τα πραγματικά δεδομένα, αλλά με την κατάλληλη περιγραφή ο πελάτης αποκτά μια σχετικά καθαρή εικόνα  της πρότασης. 
Σε αυτό το σημείο ζητούμε την παρέμβαση και τα σχόλια του πελάτη μας έτσι ώστε να γνωρίζουμε πως προχωράμε σύμφωνα με τις προσδοκίες του. Οπότε περιμένουμε τις απαραίτητες παρατηρήσεις ή και την καθολική αιτιολογημένη απόρριψη της πρότασης μας, ώστε εφόσον χρειάζεται να προχωρήσουμε σε δεύτερη ή και τρίτη πρόταση ή σε τροποποίηση της αρχικής.
Έτσι, έχοντας ήδη αναφέρει το τι είναι αυτό που κάνουμε αξίζει να αναφέρουμε και το πώς το κάνουμε… Πιο συγκεκριμένα, τι είναι αυτό που μας κατευθύνει κατά το σχεδιασμό μιας σελίδας; Ποια είναι τα πιο σημαντικά σημεία;
Αν θα έπρεπε να απαντήσουμε απόλυτα αυτήν την ερώτηση, τότε η απάντησή μας θα ήταν: τα πάντα! Όλα παίζουν ρόλο στα κριτήρια σχεδιασμού μιας σελίδας. Το περιεχόμενο της σελίδας, ο τρόπος πλοήγησης, οι υπηρεσίες που πρέπει να αναδειχθούν, το target group, το προσδοκώμενο αποτέλεσμα του πελάτη μας κλπ. Έτσι, έχοντας ήδη την ολοκληρωμένη ανάλυση του project στα χέρια μας και σε συνδυασμό με την ιδιαίτερη αισθητική μας αλλά και την προσοχή που δίνουμε στις λεπτομέρειες μπορούμε περήφανα να σας δηλώσουμε πως στις περισσότερες συνεργασίες μας, η πρώτη μας πρόταση είναι και αυτή που επιλέγει ο πελάτης.
Κάτι που προφανώς φαίνεται από τα παραπάνω, και που θεωρούμε σωστό να τονιστεί, είναι πως δεν χρησιμοποιούμε ποτέ έτοιμα templates. Ό, τι σχεδιάζουμε είναι πρωτότυπο και δημιούργημα δικό μας βασισμένο ειδικά στις ανάγκες του πελάτη μας.
Επιγραμματικά κάποια σημεία ιδιαίτερης προσοχής κατά το σχεδιασμό της σελίδας είναι τα παρακάτω...

Responsive

Παρακολουθώντας πλέον την ωριμότητα της αγοράς, στρέφουμε το ενδιαφέρον μας στις σελίδες που είναι σχεδιασμένες ακολουθώντας τις αρχές του Responsive Web Design. Της τεχνικής δηλαδή που αξιοποιεί σωστά τις νέες τεχνολογίες έτσι ώστε η σελίδα είναι σωστά επισκέψιμη προβαλλόμενη τόσο από ένα desktop και από μια φορητή συσκευή όσο από ένα tablet ή ένα smartphone. Αυτό θα ήταν αδύνατο (ή αισθητά πιο δύσκολο) αν δεν είχαμε ήδη, εδώ και χρόνια, στραμμένη την προσοχή μας στη λογική που θέλει πρώτα το περιεχόμενο από την αισθητική, ή αν δεν ήμασταν ήδη, εδώ και χρόνια, οπαδοί και φίλοι της σωστής HTML5 και του CSS3. Ενδεικτικά σας προτείνουμε να δείτε τη σελίδα μας σε ένα κινητό τηλέφωνο ή απλώς να μικρύνετε αυτό το παράθυρο έτσι ώστε να δείτε στην πράξη τη responsive τεχνολογία και τον τρόπο που προσαρμόζεται η εμφάνιση μίας ιστοσελίδας προκειμένου να παρουσιάσει το περιεχόμενό της με τον καλύτερο δυνατό τρόπο.
Σημαντικό είναι να αναφέρουμε πως η λύση του responsive web design δεν η κατάλληλη για όλα  τα projects. Πολλές φορές ένα site δεν χρειάζεται καν να είναι mobile friendly ή και άλλες φορές απαιτείται μια εντελώς ξεχωριστή εκδοχή της σελίδας για τα κινητά που θα αξιοποιεί καλύτερα τις σχετικές δυνατότητες και που θα εστιάζει σε συγκεκριμένα μέρη του περιεχομένου.

Αρχική σελίδα/Landing pages

Ιδιαίτερα σημεία προσοχής είναι όλων των ειδών  τα landing pages, είτε αυτά είναι προορισμός κάποιας διαφημιστικής καμπάνιας, είτε η αρχική σελίδα του site, είτε απλώς μια συγκεκριμένη σελίδα που διαπιστώνουμε πως αποτελεί σημαντική πηγή προέλευσης από μηχανές αναζήτησης. Αυτές οι σελίδες είναι που βλέπει πρώτες ο επισκέπτης. Είναι αυτές που θα καθορίσουν το αν θα μείνει ή όχι στη σελίδα. Σε αυτές τις σελίδες προβλέπουμε και προετοιμάζουμε το επόμενο βήμα του επισκέπτη, τη σελίδα που θα επισκεφθεί στη συνέχεια ή τη διαδικασία που θα ακολουθήσει έτσι ώστε να οδηγηθεί στο επιθυμητό αποτέλεσμα.

Ανάδειξη υπηρεσιών

Βασικό κριτήριο κατά το σχεδιασμό αποτελεί και η ύπαρξη στη σελίδα ειδικών υπηρεσιών ή μηχανισμών που κάνουν τη διαφορά από τις άλλες σελίδες. Η ανάδειξη αυτών των ενοτήτων παίζουν σημαντικό ρόλο κατά το σχεδιασμό έτσι ώστε να είμαστε σίγουροι πως δεν θα περάσουν απαρατήρητα τα σημαντικά σημεία διαφοροποίησης από τον ανταγωνισμό.