Πορτρέτο του Ξενοφών Απάκη
Ξενοφών Απάκης
Web designer και developer από το 1997

σχεδιαστές ιστοσελίδων

σχεδιαστές ιστοσελίδων

· Με δύο λόγια

Σχεδιαστές ιστοσελίδων: ρόλοι, UX/UI, παραδοτέα, συνεργασία, προσβασιμότητα και πρακτικά κριτήρια για να επιλέξετε τον σωστό επαγγελματία..

Σχεδιαστές ιστοσελίδων: τι αγοράζετε πέρα από την εμφάνιση

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

Ο σχεδιασμός ξεκινά πριν από τα χρώματα

Πριν δημιουργηθεί οποιαδήποτε οθόνη, πρέπει να είναι σαφές ποιο πρόβλημα λύνει η ιστοσελίδα. Η αρχιτεκτονική πληροφορίας ορίζει τι θα βρει ο επισκέπτης και με ποια σειρά. Έπειτα έρχεται η UX (Εμπειρία Χρήστη, User Experience), δηλαδή η συνολική διαδρομή και η ευκολία με την οποία ολοκληρώνεται μια εργασία. Μόνο τότε η UI (Διεπαφή Χρήστη, User Interface) δίνει μορφή στα κουμπιά, στα πεδία, στην τυπογραφία και στα οπτικά μοτίβα.

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

Τι παραδίδει ένας επαγγελματικός σχεδιασμός

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

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

Προσβασιμότητα ως μέρος της ποιότητας

Οι WCAG (Οδηγίες Προσβασιμότητας Περιεχομένου Ιστού, Web Content Accessibility Guidelines) προσφέρουν πλαίσιο για θέματα όπως αντίθεση, χρήση πληκτρολογίου, εναλλακτικό κείμενο και σαφείς ετικέτες. Ο σχεδιαστής δεν χρειάζεται να μετατρέψει κάθε συζήτηση σε τεχνικό εγχειρίδιο, αλλά πρέπει να δείχνει ότι οι βασικές επιλογές λαμβάνουν υπόψη διαφορετικούς τρόπους χρήσης. Ένα κομψό κουμπί που δεν διαβάζεται ή μια φόρμα χωρίς ξεκάθαρες οδηγίες είναι σχεδιαστικό πρόβλημα.

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

Πίνακας κριτηρίων επιλογής

ΚριτήριοΤι να ζητήσετεΤι δείχνει κίνδυνο
Κατανόηση στόχουΕρωτήσεις για κοινό, ενέργειες και περιεχόμενοΆμεση πρόταση θέματος χωρίς διερεύνηση
ΔιαδικασίαΣτάδια, σημεία έγκρισης και ευθύνη υλικούΑσαφές «θα το δούμε στην πορεία»
ΚινητόΞεχωριστός έλεγχος κρίσιμων οθονώνΜόνο υπολογιστή μακέτες
ΠροσβασιμότηταΚανόνες αντίθεσης, εστίασης και ετικετώνΑποκλειστικά αισθητικά κριτήρια
ΠαράδοσηΣαφή αρχεία, επαναχρησιμοποιούμενα στοιχεία και τεκμηρίωσηΕξάρτηση από ένα άτομο χωρίς οδηγίες

Δείγμα έργων: τι να κοιτάξετε πραγματικά

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

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

Πότε χρειάζεστε σχεδιαστή και πότε ολόκληρη ομάδα

Για μικρό ιστοσελίδα με έτοιμη τεχνική βάση, ένας έμπειρος σχεδιαστής μπορεί να καλύψει τη δομή και την οπτική κατεύθυνση σε συνεργασία με έναν προγραμματιστής. Σε πιο σύνθετο έργο με λογαριασμούς χρηστών, διασυνδέσεις, αναζητήσεις ή πολλές ροές, απαιτείται στενότερη συνεργασία σχεδιασμού, ανάπτυξης και περιεχομένου. Το κριτήριο δεν είναι το μέγεθος της εταιρείας που αναλαμβάνει το έργο, αλλά αν υπάρχουν οι απαραίτητοι ρόλοι για τις πραγματικές απαιτήσεις.

Πώς οργανώνεται μια υγιής συνεργασία

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

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

Ποιος έχει την τελική ευθύνη της εμπειρίας

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

Ρωτήστε από την αρχή ποιος παίρνει απόφαση όταν υπάρχει σύγκρουση ανάμεσα σε αισθητική, τεχνικό κόστος και χρηστικότητα. Μια ώριμη διαδικασία δεν αποφεύγει αυτές τις συγκρούσεις· τις λύνει με προτεραιότητες που έχουν συμφωνηθεί πριν το έργο φτάσει στην παραγωγή.

Τι πρέπει να σας μείνει στο τέλος

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

Τελικός έλεγχος πριν δώσετε την ανάθεση

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

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

Μια καθαρή συμφωνία για τη διαδικασία είναι από μόνη της κριτήριο επαγγελματισμού και προβλεψιμότητας.

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