27/04/2010
By nassoskappa
Comments
Posted In
Previous
Next
Web design και τυπογραφία
Πολλοί φίλοι μου είναι γραφίστες σε έντυπα μέσα. Συμβαίνει συχνά να βρεθούμε σε μια συζήτηση για τα νέα μέσα και το internet, το αν είναι απαραίτητο ή όχι να μεταβεί κανείς σʼ αυτό αλλά και τί γνώσεις χρειάζεται για να αρχίσει να σχεδιάζει γιʼ αυτό, με άλλα λόγια: να γίνει web designer.
Αρκετοί από αυτούς πιστεύουν ότι είναι δύο εντελώς διαφορετικοί κόσμοι μεταξύ τους. Για μένα είναι απλώς δύο διαφορετικά αλλά συγγενικά μέσα με μια βασική ανάγκη, τη μελέτη και το σχεδιασμό καλής οπτικής επικοινωνίας. Αν και μεροληπτώ αρκετά προς το ψηφιακό, η σχέση μου με τις γραφικές τέχνες και την οπτική επικοινωνία ξεκίνησε με το έντυπο. Έτσι, κατά τα τελευταία χρόνια, κατέληξα πως ένας από τους στόχους της καριέρας μου θα είναι η γεφύρωση των δύο αυτών κόσμων.
Παρόλο που αυτό αναζητούν οι περισσότεροι, δεν υπάρχει κατάλογος δεξιοτήτων ούτε κάποια δεδομένη εργαλειοθήκη που θα βοηθήσει κάποιον να σχεδιάσει για το μέσο. Τις περισσότερες φορές, νοιώθουν πως ο σχεδιασμός στο Flash είναι ένα αρχικό στάδιο, μάλλον λόγω της μεγάλης ομοιότητας με τον καμβά του σχεδιαστή εντύπου, αλλά και της δυνατότητας οπτικού ορισμού της γραμματοσειράς, του υψηλής ακρίβειας ελέγχου πάνω στα διάφορα αντικείμενα σχεδιασμού, της έμφασης στην εμφάνιση και του άμεσου τρόπου να μετατρέπει στατικά αντικείμενα σε κίνηση. Το Flash έχει ενδιαφέρον, έχει τη θέση και τη χρήση του, αλλά είναι ένας λάθος τρόπος να μάθει κάποιος να σχεδιάζει για το internet και μπορεί να οδηγήσει εύκολα σε λάθος αποτελέσματα. Είναι πολύ πιο χρήσιμο να μάθει κάποιος HTML και CSS – τη βάση για τα πάντα – και να μάθει έστω να διαβάζει τον κώδικα σε μια απλή σελίδα στο Web που να χρησιμοποιεί αυτά τα στοιχεία (αντί να επιλέξει ένα εργαλείο WYSIWYG όπως πχ. το Dreamweaver). Όλα αυτά για ένα απλό λόγο.
Το 95% της πληροφορίας γενικά στο Διαδίκτυο είναι γραπτός λόγος. Είναι απόλυτα λογικό να πούμε ότι ένας web designer θα πρέπει να έχει πολύ καλή γνώση της ικανότητας μορφοποίησης της γραπτής πληροφορίας, με άλλα λόγια: την Τυπογραφία.
H Τυπογραφία στο Διαδίκτυο ξεκινάει νωρίς, τότε που ο Tim Berners- Lee γύρισε το διακόπτη το 1991. Την εποχή του Internet Explorer 1.0, η καλή τυπογραφία στο Web ήταν μάλλον οξύμωρο σχήμα. Στις μέρες μας τα πράγματα είναι διαφορετικά. Όχι απλώς έχουμε προγράμματα περιήγησης (browsers) που υποστηρίζουν εικόνες (!) και video, αλλά έχουμε τη δυνατότητα να σχεδιάζουμε ιστοσελίδες με υπέροχη τυπογραφία. Η δυνατότητα, βέβαια, δεν σημαίνει αυτόματα πως κάτι τέτοιο συμβαίνει.
Πίσω στο 1969, ο Emil Ruder, ένας διάσημος Ελβετός τυπογράφος, έγραψε για τα τότε σύγχρονα υλικά εκτύπωσης κάτι που θα μπορούσαμε να πούμε σήμερα για τα σύγχρονα website.
«Στις μέρες μας πνιγόμαστε από μια πλημμύρα έντυπου υλικού σε βαθμό που η αξία της (ατομικής) εργασίας μας έχει υποτιμηθεί, καθώς οι συνάνθρωποι μας είναι ενοχλημένοι μη καταφέρνοντας να λάβουν ό,τι τυπώνεται σήμερα. Είναι δουλειά του τυπογράφου να διαχωρίσει, να οργανώσει και μεταφράσει αυτή τη μάζα έντυπης πληροφορίας με μέ τέτοιο τρόπο ώστε ο αναγνώστης να έχει μια ελπίδα να βρει αυτό που τον ενδιαφέρει.»
Με λίγη φαντασία, αντικαθιστώντας ειδικά στη δεύτερη φράση τις έννοιες έντυπο με online, ακούγεται σαν μια τέλεια περιγραφή θέσης εργασίας για έναν information designer. Θα μπορούσαμε να πούμε πως ένας “σχεδιαστής πληροφορίας” κάνει σήμερα -περίπου- αυτό που έκανε ένας τυπογράφος πριν 30 χρόνια.
Η καλή γνώση και εφαρμογή της τυπογραφίας σημαίνει βελτίωση της αναγνωσιμότητας, της προσβασιμότητας, τη χρηστικότητας και της συνολικής ισορροπίας των γραφικών. Η οργάνωση τμημάτων του κειμένου και ο συνδυασμός με τις εικόνες, δεν είναι αυτό που κάνουν οι γραφίστες, αλλά και οι ειδικοί του usability και οι information architects; Γιατί είναι, λοιπόν, τόσο παρεξηγημένο θέμα η τυπογραφία στο web;
Πριν απαντήσουμε σʼαυτό, μια μικρή παρένθεση. Η Τυπογραφία όπως και πολλά άλλα στοιχεία του Οπτικού Σχεδιασμού είναι κοινή σε κάθε μέσο. Οι καλές γνώσεις της τυπογραφίας είναι αναγκαίες και απαραίτητες είτε σχεδιάζουμε μια αφίσα είτε ένα περιοδικό είτε μια ιστοσελίδα. Δεν αλλάζει κάτι ούτε στους κανόνες, ούτε στην ορολογία. Το υπέρστιχο, το διάκενο, η διαστοιχείωση, η αραίωση κλπ. είναι παντού τα ίδια και εφαρμόζονται με τον ίδιο τρόπο. Αυτό που χρειάζεται από το σχεδιαστή είναι η προσαρμογή αυτής της γνώσης στο εκάστοτε μέσο.
Αυτή η “προσαρμογή στο μέσο” είναι που απαιτεί νέες επιπλέον ικανότητες και γνώσεις. Η πρώτη κίνηση για το σχεδιαστή είναι να αλλάξει προοπτική για το design στα ψηφιακά μέσα. Συγκεκριμένα, ο σχεδιασμός για το web δεν είναι μια μέθοδος για την εφαρμογή και παρουσίαση μιας αφήγησης, όπως στο έντυπο, αλλά μια μέθοδος που κάνει δυνατή την πραγματοποίηση συμπεριφορών και επιδράσεων.
Ένα άλλο χαρακτηριστικό του web design – και μεγάλο πρόβλημα στη προσαρμογή των περισσότερων σχεδιαστών – είναι ο ελάχιστος αριθμός διαθέσιμων γραμματοσειρών. Παρότι το web κουβαλάει χρόνια στην πλάτη του, οι αναγνωρισμένες ως web safe γραμματοσειρές δεν ξεπερνούν τις δέκα. Τις δημοφιλείς Verdana και Georgia, την ξαδέρφη της Helvetica Arial, τις τελευταίες εκδόσεις των Times και Courier, Trebuchet MS, Andale Mono, Impact, τη Webdings γραμματοσειρά συμβόλων, και τη γενικότερα μισητή Comic Sans. Η μικρή αυτή ποικιλία έχει οδηγήσει στην αναζήτηση διαφόρων λύσεων κατά καιρούς, όπως τη χρήση εικόνων, μικρών κομματιών Flash ή ακόμα και τεχνικών με Javascript αντί κειμένου.
Οι παραπάνω αλλά και άλλοι φαινομενικοί “περιορισμοί” του μέσου, είναι αυτοί που κατά μεγάλο ποσοστό οδήγησαν στην απαξίωση της τυπογραφίας σʼαυτό και στη συνέχεια στον κακό σχεδιασμό σελίδων. Η λίγες γραμματοσειρές και η χαμηλή “ανάλυση” δεν απέτρεψαν τον τυπογράφο της Αναγέννησης να σχεδιάσει υπέροχα βιβλία. Στο κάτω κάτω η επιλογή γραμματοσειράς δεν είναι τυπογραφία. Ακόμα περισσότερο, το information design δεν έχει να κάνει με τη χρήση καλών τυπογραφικών στοιχείων, αλλά με την καλή χρήση τυπογραφίας.
Για τον web designer το κείμενο δεν είναι διακοσμητικό αλλά κυρίαρχο στοιχείο του σχεδιασμού. Για τον καλό web designer το κείμενο δεν απλώς περιεχόμενο αλλά γίνεται περιβάλλον εργασίας/ χρήστη (user interface) (Cameron Moll, “Nine skills that separate good and great designers”).
Απʼ την άλλη, όλα τα παραπάνω είναι ο λόγος που η θεμελιώδης κατανόηση των HTML και CSS είναι τόσο σημαντική. Αυτή η γνώση παρέχει τα μέσα για να αρχίσει κάποιος να πειραματίζεται, να ξεκινήσει την κατανόηση του πως “στήνεται” μια σελίδα στο web, πώς αυτή θα εμφανιστεί σε οποιοδήποτε browser, πώς συμπεριφέρεται και, κυρίως, πώς η πρόθεση του σχεδιαστή καθορίζει το πώς θα χρησιμοποιηθεί η σελίδα από το χρήστη/αναγνώστη.
Τα παραπάνω είναι βασικά για το σχεδιασμό και τη χρήση της τυπογραφίας στο web, ειδικά με αυτά που όπως φαίνεται μας επιφυλάσσει το μέλλον.
Η νέες εκδόσεις των HTML και CSS υποστηρίζουν όλο και περισσότερα χαρακτηριστικά και εντολές σχεδιασμού αντίστοιχα. Η δυνατότητα ενσωμάτωσης γραμματοσειρών στο web design (με την εντολή @font-face στο CSS), όπως και η χρήση κάναβου (grid), πλέγματος γραμμής βάσης (baseline grid) αλλά και ο διαχωρισμός ενός πλαισίου κειμένου (text box) σε στήλες είναι στο άμεσο μέλλον, θα έλεγα παρόν. Παρόλα αυτά η Τυπογραφία στο Web και γενικότερα το Web Design δεν θα γίνεται ποτέ με το ίδιο τρόπο με το έντυπο.
Ακόμα, η εμφάνιση ολοένα και περισσότερων συσκευών με οθόνη με βασικό σκοπό την αναζήτηση πληροφορίας ή την κατανάλωση περιεχομένου. πχ. όλα τα smartphones τρίτης γενιάς, το Amazon Kindle και το αναμενόμενο Apple iPad, δείχνουν ένα μέλλον όπου ο ψηφιακός σχεδιασμός, η αλληλεπίδραση (interaction) και το υβριδικό περιεχόμενο θα κυριαρχήσει.
Σίγουρα το έντυπο δεν θα πεθάνει, όπως δεν πέθανε η Ζωγραφική από τη Φωτογραφία, το Θέατρο από τον Κινηματογράφο κλπ., όμως η ανάγκη για σχεδιαστές με γνώσεις Ψηφιακής Τυπογραφίας (για να μη μείνουμε στο Διαδικτυακή Τυπογραφία), άρα και με γνώσεις Αρχιτεκτονικής και Σχεδιασμού Πληροφορίας (Information Architecture and Design), Εμπειρίας Χρήστη (User Experience), ικανοτήτων αξιοποίησης Πολυμέσων κλπ. αυξάνεται με γεωμετρική πρόοδο.
Κλείνοντας, η ενασχόληση ενός Σχεδιαστή Οπτικής Επικοινωνίας με το Διαδίκτυο μπορεί να είναι, με όλα τα αρνητικά και τα θετικά της, από πονοκέφαλος μέχρι μια πολύ ενδιαφέρουσα και διασκεδαστική διαδικασία. Εξαρτάται από το κέφι και τη διάθεση του ίδιου.
Σίγουρα όμως δεν θα είναι μόνος του. Υπάρχουν πολλοί συνάδελφοι με τους οποίους μπορεί να επικοινωνήσει και να συνεργαστεί αλλά και πολλά site και βιβλία για να διαβάσει περισσότερα. Το web design και η τυπογραφία του είναι ένα ταξίδι που μόλις άρχισε να ωριμάζει και χρειάζεται τη συμμετοχή καλών σχεδιαστών.
Πηγές και links alistapart.com htmldog.com webtypography.net ilovetypography.com rodgraves.com craigmod.com/journal/font-face/ net.tutsplus.com subtraction.com informationarchitects.jp
Βιβλία Typographie: A Manual of Design ~ Emil Ruder Eric Meyer on CSS: Mastering the Language of Web Design ~ Eric Meyer CSS: Separating Content from Presentation ~ Owen Briggs
- Το άρθρο δημοσιεύτηκε στο τεύχος #68 του +design
Harris R. said on 27/04/2010
Πολύ ενδιαφέρον, χρήσιμο και κατατοπιστικό άρθρο! Το διάβασα και στο +design. Εύγε, και περιμένουμε τα επόμενα ;-)
Aggelos Grontas said on 27/04/2010
Εξαιρετικό ποστ
Nassos K. said on 27/04/2010
Χάρη, σ’ευχαριστώ. Είπα να ξαναρχίσω το blogging. Τα άλλα πέθαναν.
Άγγελε, θενκ γιου μπράδα.
Apostolos said on 27/04/2010
Νάσσο, νομίζω είναι το καλύτερο ελληνικό άρθρο για το τι είναι και τι θα έπρεπε να είναι η Τυπογραφία στο web και όχι μόνο. Tons of kudos!
doxaras said on 27/04/2010
Πολύ καλή προσέγγιση του current status στο web design. θα ήθελα να προσθέσω ότι εκτός από τα εργαλεία του typesetting, μεγάλο ρόλο στο web διαδραματίζει το layout και η εκμετάλλευση του χώρου. Επιπλέον το γεγονός ότι σχεδιάζει κάποιος για διαφορετικές αναλύσεις και διαστάσεις οθονών προϋποθέτει γνώση και προνοητικότητα.
Από την δική μου εμπειρία όσο δύσκολο είναι το transition από τους παραδοσιακούς designers του desktop publishing των σχολών γραφιστικής, στο web, άλλο τόσο δύσκολο είναι και το transition από το web στο mobile και ειδικότερα στα touch interfaces που θα είναι και η μεγάλη πρόκληση από δω και πέρα.
Nassos K. said on 27/04/2010
Απόστολε, ευχαριστώ! Μείνε σ’επαφή.
Doxaras, έχεις δίκιο για τη δεύτερη μετάβαση. Ετοιμάζω post για το iPad το οποίο δοκιμάζω τώρα. Η “τέταρτη” οθόνη (μετά τον κινηματογράφο, τη τηλεόραση, τον υπολογιστή) έχει μεγάλη ενδιαφέρον ..και μέλλον.
Apostolos said on 27/04/2010
Βασικά, όμως, γιατί για τους web-centric designers, το transition από το web στο mobile (και touch UIs) να είναι δύσκολο; How come? Δεν είναι δα και τόσο διαφορετικό. Ή μήπως είναι — αλλά αν είναι διαφορετικό, η ερώτηση είναι πάλι γιατί. Γιατί είναι διαφορετικό.
Web Resources.eu said on 07/05/2010
Πολύ καλό άρθρο !
Συνέχισε σταθερά !