Γραφικά στην κατασκευή ιστοσελίδων: όταν η εικόνα έχει δουλειά να κάνει

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

Η οπτική ιεραρχία προηγείται της διακόσμησης

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

Ταυτότητα που παραμένει συνεπής από σελίδα σε σελίδα

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

Φωτογραφία, εικονογράφηση ή εικονίδιο;

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

Αρχεία που παραμένουν καθαρά χωρίς να βαραίνουν τη σελίδα

Η τεχνική προετοιμασία είναι μέρος του σχεδιασμού. Τα SVG (Κλιμακούμενα Διανυσματικά Γραφικά, Scalable Vector Graphics) είναι χρήσιμα για λογότυπα, σύμβολα και απλά διανυσματικά στοιχεία που πρέπει να διατηρούν καθαρές ακμές σε διαφορετικά μεγέθη. Το WebP μπορεί να χρησιμοποιηθεί για φωτογραφικό υλικό όταν ταιριάζει στη ροή παραγωγής. Παράλληλα, τα CSS (Διαδοχικά Φύλλα Στυλ, Cascading Style Sheets) ορίζουν πώς αλλάζει μέγεθος, θέση και συμπεριφορά το οπτικό στοιχείο ανά οθόνη. Δεν αρκεί λοιπόν να παραδώσουμε «μια ωραία εικόνα»· χρειάζεται σωστό αρχείο, σωστές διαστάσεις και σωστός τρόπος εμφάνισης.

Το κινητό αλλάζει τις προτεραιότητες

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

Προσβασιμότητα χωρίς να θυσιάζεται το ύφος

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

Γραφικά που συνεργάζονται με το περιεχόμενο

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

Έλεγχος πριν εγκριθεί το οπτικό σύστημα

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

Μικρό πλαίσιο απόφασης για κάθε νέο γραφικό

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

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

Βιβλιοθήκη οπτικά αρχεία και κανόνες ονομασίας

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

Πώς αξιολογούμε ένα γραφικό μετά τη δημοσίευση

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

Τελικό κριτήριο

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