Friday, 20 January, 2012 | in Articles

This article was written for +Design #74.

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

A glimce

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

Και το ποντίκι; Αυτό ήρθε σχετικά πρόσφατα στη ζωή μας και, δυστυχώς, ειδικά οι τελευταίες 3-4 γενιές το ξεχνάμε. Μοιάζει να μη θυμόμαστε καν πως ήταν πριν το ποντίκι. Το ποντίκι είναι απλώς ένα hack. Μια λύση που εμφανίστηκε για να καλύψει την ανάγκη της τεχνολογίας για μια συσκευή κατάδειξης στους υπολογιστές με GUI (graphic user interface / γραφικό περιβάλλον εργασίας) όπως το Mac OS ή τα Windows, μια εργασία στην οποία το πληκτρολόγιο δεν αρκούσε. Το ποντίκι ήταν μια καλή λύση (απουσία της τεχνολογίας για οθόνες αφής), μια βολική και φθηνή λύση που συνηθίσαμε όλοι μας, αλλά παρόλα αυτά εντελώς αφύσικη.

Όσο για τις οθόνες αφής δεν είναι και τόσο καινούργιες όσο ίσως πιστεύουμε. Το 1982 στην εκπομπή του BBC "Tomorrow's World" παρουσιάστηκε ένας υπολογιστής αγνώστου μοντέλου με μια πρώιμη οθόνη αφής. Ένα χρόνο μετά η Hewlett-Packard εμφανίζει στην αγορά τον HP150, ο οποίος χρησιμοποιούσε ένα πλέγμα υπέρυθρων ακτίνων για να καταγράψει τις κινήσεις του χεριού. Το 1993, πολύ πριν το iPad, η Apple παρουσίασε το Newton, μια ηλεκτρονική ατζέντα χειρός με βασικές λειτουργίες και ασπρόμαυρη οθόνη αφής. Το 2000 η Microsoft είδε τις δυνατότητες των συσκευών tablet και προχώρησε σε μια ειδική έκδοση των Windows για tablet PC, τα οποία όμως ήταν ιδιαίτερα ακριβά.

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

Τα τελευταία χρόνια, η τεχνολογία έχει εξελιχθεί σε τέτοιο βαθμό που όλοι είναι κάτι. Μπορούν να φωτογραφίσουν, να ζωγραφίσουν, να σκηνοθετήσουν ακόμα και να σχεδιάσουν ό,τι θέλουμε. Ο καθένας μπορεί να γίνει (ή να νοιώσει σαν) μια Annie Leibovitz, ένας Stanley Kubrick, ένας Andy Warhol ή ένας Paul Rand. Δεν είναι τυχαίο το ότι το περιοδικό Time το 2007 έδωσε τον τίτλο Person of the Year σε Εσένα, στον καθένα μας, αναγνωρίζοντας τον έλεγχο που έχουν πλέον οι χρήστες, οι καθημερινοί άνθρωποι στην Εποχή της Πληροφορίας. Σήμερα, "όλοι" μπορούν να γίνουν stars. Ακόμα και για περισσότερα από 15 δευτερόλεπτα. Όλοι έχουν πλέον fans, followers, readers, subscribers, που κάνουν Like και προσθέτουν Views σε ό,τι ο καθένας ανεβάζει στο Δίκτυο. Ζούμε την εποχή του Παγκόσμιου Αυνανισμού. Η οποία όμως είναι και μια εποχή Ευκαιρίας. Τι μπορούμε να κάνουμε εμείς σαν web designers για τους χρήστες, αναγνώστες, φωτογράφους, δημιουργούς αυτής της εποχής; Μπορούμε να τους κάνουμε καλύτερους σ'αυτό που κάνουν. Πως;

Web Design

Ας θυμηθούμε πρώτα τον ορισμό του Paul Rand: «Το Design είναι η μέθοδος να συνδυάσεις τη Φόρμα με το Περιεχόμενο. Το Design, όπως και η Τέχνη, έχει πολλές έννοιες, δεν είναι κάτι απόλυτο. Το Design μπορεί να είναι Τέχνη. Το Design μπορεί να είναι Αισθητική. Το Design είναι τόσο απλό, που αυτό είναι που το κάνει τόσο περίπλοκο».

Το Web Design ακολούθησε μια ανάλογη πορεία με το Graphic Design και εξακολουθεί να εξελίσσεται διαρκώς. Αυτό που ξεκίνησε σαν χόμπι, έγινε trend και έχει φτάσει να θεωρείται ένα ιδιαίτερα σεβαστό και επικερδές επάγγελμα. Πλέον εμφανίζεται και ως "Digital Design" (ή "New Media Design") καθώς έχει ξεπεράσει τα όρια του Web και περιλαμβάνει κάθε είδους οθόνη στην οποία υπάρχει το οποιοδήποτε περιβάλλον εργασίας.

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

Είναι σαφές λοιπόν, ότι όταν σχεδιάζουμε, για παράδειγμα, μια ηλεκτρονική εφημερίδα, δεν σχεδιάζουμε μόνο το layout του περιεχομένου της, αλλά και την αλληλεπίδραση του χρήστη με αυτό, σε αντίθεση με το παραδοσιακό έντυπο μέσο όπου το "ξεφύλλισμα" είναι η μοναδική επιλογή "περιβάλλοντος". Έτσι, δεν μιλάμε μόνο για την εμφάνιση, αλλά και για λειτουργία. Όπως είπε και ο Steve Jobs, «Design δεν είναι μόνο το πως μοιάζει και φαίνεται κάτι. Design είναι το πως λειτουργεί».

Σήμερα

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

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

Παράλληλα, πρέπει να υπολογίσει και τις ανάγκες του χρήστη, από ζητήματα επιθυμίας, όπως εύκολη και γρήγορη αναζήτηση), μέχρι ζητήματα "οικονομίας", όπως ποιότητα και όγκος δεδομένων που μεταφέρονται στη συσκευή αφού το επιπλέον κόστος για σύνδεση Internet στο κινητό είναι ακόμα αρκετά υψηλό. Εξαιρετικό παράδειγμα προσαρμογής σχεδιασμού από το website στο mobile, διατηρώντας τον σχεδιασμό του εντύπου, είναι αυτό του Guardian.

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

Οι γενικοί κανόνες, όμως, παραμένουν, όπως και τα ίδια σημεία προσοχής. Όσον αφορά τις διαστάσεις της οθόνης η λογική είναι πιο κοντά σ'αυτή του desktop. Σε γενικές γραμμές διατηρούνται α) ο ίδιος κάνναβος (βλ. τις διάφορες προσεγγίσεις του 960px grid) ή β) το ίδιο ακριβώς design, μιας και ειδικά στην οριζόντια θέση μια ταμπλέτα προβάλει ένα τυπικό website με την ίδια ανάλυση που το κάνει και ένα laptop.

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

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

Τέλος, ας μη ξεχνάμε ότι εκτός από τις δύο αυτές νέες οθόνες, έχουμε πολλές παλιότερες με touchscreen, όπως τα ATM, ενώ συνεχώς θα εμφανίζονται κι άλλες, όπως οι smart TV αλλά και οι πιο μελλοντικές virual οθόνες ή βιτρίνες καταστημάτων. Οι εξελίξεις δείχνουν ότι το χαρτί δεν θα πεθάνει αλλά θα αλλάξει χρήση, ενώ τα websites θα αλλάξουν κι αυτά πολύ καθώς η λογική των εφαρμογών (apps) μοιάζει να επικρατεί μελλοντικά. Σ'αυτά τα δεδομένα με κυριότερο την ολοένα και αυξανόμενη εμφάνιση και χρήση οθονών, θα πρέπει να προσαρμοστούν και οι designers που θέλουν να ακολουθούν τις εξελίξεις. Touch will not change the world - it already did.

Tuesday, 11 October, 2011 | in Articles

This article was written for +Design .

Μπορεί το site που επισκέπτονται καθημερινά εκατομμύρια χρήστες να έχει καλό design; Ναι. Θα έπρεπε να έχει; Σίγουρα. Έχει; Χμ…

Το μεγαλύτερο site κοινωνικής δικτύωσης ξεκίνησε με εμφανή έλλειψη σχεδιασμού. Υπήρξε μια πρώτη μελέτη σε επίπεδο χρηστικότητας (usability) και κάποιες βασικές λύσεις σε επίπεδο σχεδιασμού περιβάλλοντος χρήστη (UI = user interface) αλλά αυτό δεν είναι αρκετό.

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

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

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

Στο νέο προφίλ θα έχουν πρόσβαση και τα νέα Lifestyle apps τα οποία μπορούν να εμφανίσουν, εφόσον ο χρήστης το επιλέξει, πληροφορίες ή περιεχόμενο με πιο ενδιαφέρον τρόπο.

Παρατηρώντας το νέο προφίλ, βλέπουμε αμέσως μια σημαντική διαφορά στο σχεδιασμό σε σχέση με το υπόλοιπο Facebook. Η αρχική σελίδα του, παρά τις μικρές προσθήκες διατηρεί τον τρίστηλο σχεδιασμό και την ενοχλητικά μονότονη τυπογραφία ενώ στο προφίλ βλέπουμε πολλές βελτιώσεις, πχ. στα κουμπιά και στα tooltips αλλά και στις εσωτερικές σελίδες όπως οι Πληροφορίες, οι Φωτογραφίες ή τα Likes.

Είναι ένας σχεδιασμός σίγουρα πιο φρέσκος και πιο καθαρός και μονοσήμαντος, χωρίς μεγάλη ενόχληση από διαφημίσεις και άλλου είδους “θόρυβο”, με καλύτερη ισορροπία στα χρώματα και πιο λεπτομερή και σωστά εικονίδια, ενώ τα πολλαπλά επίπεδα interactions τον κάνουν πιο “ζωντανό”. Δεν υπάρχει επίσημη πληροφόρηση για το αν το Facebook θα υιοθετήσει το νέο σχεδιασμό σε όλο το site, αλλά έχει ενδιαφέρον το ότι έχει αρχίσει να δίνει μεγαλύτερη βαρύτητα στο design.

Το τελευταίο αποδεικνύει και ο όλος σχεδιασμός του νέου iPad application του Facebook (διαθέσιμο από σήμερα) το οποίο συνοδεύτηκε και από αναβάθμιση του iPhone app.

Οι ίδιες αλλαγές έγιναν και στα m.facebook.com και touch.facebook.com, στα οποία προφανώς έχουν πρόσβαση και οι συσκευές με Android.

Το design της εφαρμογής έχει πολλά κοινά στοιχεία ανάμεσα στις δύο πλατφόρμες όπως και με το site, αλλά οι σχεδιαστές της προχώρησαν ένα επίπεδο πιο πέρα, υιοθετώντας στοιχεία από τα guidelines της Apple παρουσιάζοντας έτσι ένα πολύ ενδιαφέρον αποτέλεσμα. Κατάφεραν να φέρουν πολλά στοιχεία από το νέο σχεδιασμό του Facebook και να διατηρήσουν το “art direction” του (όποιο κι αν είναι αυτό) αλλά να προσθέσουν και νέα στοιχεία και λύσεις κυρίως στην πλοήγηση και την όλη εμπειρία του χρήστη (UX = user experience), στα interactions και στην τυπογραφία, κάνοντας την εφαρμογή να μοιάζει καλύτερη και από το ίδιο το site.

Γιατί όμως “σημειώνουμε Χ”;

Πράγματι, το Facebook κάνει βήματα προς το design. Αντίστοιχα βήματα που δοκίμασε να κάνει και το MySpace με τον ολικό ανασχεδιασμό του (αν και άργησε πολύ και έτσι δεν κατάφερε τίποτα). Αντίστοιχα βήματα που κάνει το Google με επίσης ολικό ανασχεδιασμό όλων των υπηρεσιών του κάτω από μία κοινή αισθητική.

Το παράδειγμα της Google είναι αυτό που θα χαρακτηρίζαμε ως “νίκη” του σωστού design. Τα βήματα του Facebook όμως μοιάζουν συγκρατημένα. Είναι γιατί απευθύνεται σε μεγάλο αριθμό χρηστών; Σίγουρα παίζει το ρόλο του. Είναι γιατί τεχνικά δεν μπορεί να προχωρήσει σε μεγάλη αλλαγή; Πολύ λογικό. Είναι γιατί οι αλλαγές στο τεχνικό κομμάτι είναι τόσο συχνές που δεν επιτρέπουν να διατεθεί χρόνος στη μελέτη του σχεδιασμού; Πολύ πιθανό.

Άρα σε σχέση με την ως τώρα “ήττα” του design από το Facebook είμαστε σε κατάσταση “ισοπαλίας”.

Συμπεράσματα;

To design είναι απαραίτητο κομμάτι των νέων Μέσων. Ακόμα κι αν έχει κανείς το πιο ενδιαφέρον περιεχόμενο, ή τους πιο πολλούς χρήστες δεν μπορεί να το αφήσει στην τύχη ή σε πειραματισμούς. Επίσης, η κίνηση του Facebook να σχεδιάσει iPad app παρόλο που ο ίδιος ο Zuckerberg το είχε “αποκλείσει” ένα χρόνο πριν, δείχνει το πόσο σημαντικό είναι πλέον το mobile web design αλλά και οι ταμπλέτες.

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

Friday, 24 June, 2011 | in Articles

This article was written for +Design #72.

Το Web Design, είναι ένας ιδιαίτερος και μάλλον άστατος κλάδος του Σχεδιασμού Οπτικής Επικοινωνίας, που έχει υποστεί μια συνεχόμενη και ιδιαίτερα γρήγορη εξέλιξη. Αυτό που ξεκίνησε σαν ένα "παιχνίδι", ελεύθερο, ανοιχτό και μόνο για λάτρεις του Διαδικτύου, έχει πλέον καταστεί ένα ώριμο και πλούσιο μέσο με ισχυρή αισθητική και ολοένα αυξανόμενη λειτουργικότητα, αλλά και πιο αυστηρούς κανόνες.

“People ignore design that ignores people.” ~Frank Chimero

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

Στη διάρκεια των τελευταίων ετών παρατηρήθηκε μια σημαντική αλλαγή στο ποσοστό των χρηστών του Διαδικτύου που έχουν πρόσβαση σε ιστοσελίδες μέσω των τηλεφώνων και άλλων φορητών συσκευών. Με την μεταπήδηση λοιπόν χρηστών από την τρίτη στην τέταρτη οθόνη, είναι λογικό, να ασχολούνται και ολοένα και περισσότεροι web designers με αυτό που αποκαλούμε Mobile Web Design.

Πριν προχωρήσουμε στην ανάλυση αυτού του ολοκαίνουργιου και πολύ δραστήριου κλάδου, θα πρέπει να κάνουμε ένα βασικό διαχωρισμό ανάμεσα α) στο σχεδιασμό ιστοτόπων (websites) για προβολή στους browser των φορητών συσκευών και β) στο σχεδιασμό εφαρμογών (application) για συγκεκριμένα μοντέλα και πλατφόρμες, όπως είναι το App Store της Apple ή το Android Market για την αντίστοιχη πλατφόρμα λογισμικού της Google.

Σχεδιασμός Ιστοτόπων

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

Η πρώτη είναι αρκετά σαφής καθώς είναι πολύ διαφορετικό για τον σχεδιαστή να έχει στη διάθεσή του πλάτος οθόνης 1024 pixels (η πιο κοινή διάσταση αυτή τη στιγμή, αν και η εξελίξεις δείχνουν ότι προχωράμε σε αναλογίες κοντά στα 1280) από το να έχει αναλύσεις με πλάτος περίπου 300 ή 480 pixels. Θα πρέπει να διαχειριστεί διαφορετικά τα δεδομένα, να αλλάξει τη δομή και το layout των σελίδων, την τυπογραφία αλλά, ίσως, και την πλοήγηση, κρατώντας, φυσικά, κοινά στοιχεία με τον αρχικό σχεδιασμό.

Η δεύτερη είναι η πιο σημαντική και έχει να κάνει με δύο βασικά χαρακτηριστικά του web design: τη λειτουργικότητα (usability) και την εμπειρία χρήστη (user experience). Σ’αυτά επιδρούν δύο κύριοι παράγοντες, η ταχύτητα σύνδεσης και download από το κινητό και οι συνθήκες περιβάλλοντος του χρήστη (στο δρόμο, ανάμεσα σε κόσμο, φασαρία και λίγο χρόνο στη διάθεσή του).

Ας πάρουμε ένα απλό παράδειγμα. Φανταστείτε κάποιον που θέλει να πάει στο θέατρο. Στην μία περίπτωση είναι στο σπίτι του, χαλαρός και μπροστά στον υπολογιστή του με τη γρήγορη σύνδεση. Μπορεί να επισκεφτεί πάνω από δύο site να ψάξει για περισσότερες πληροφορίες, έχει το χρόνο να παρακολουθήσει κάποιο βίντεο ή να ακολουθήσει ένα διαφημιστικό banner για κάποια παράσταση, ενώ ίσως βρει και κάποιο φίλο στο chat για να τον ρωτήσει αν είδε κάποια καλή παράσταση.

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

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

Για να πετύχουμε τα παραπάνω, υπάρχουν μερικοί βασικοί κανόνες που καλό είναι να ακολουθεί ο σχεδιαστής.

1. Μείνετε στα βασικά. Σωστή χρήση της HMTL και των tag της όπως: p, br, b, i header (H1-6), blockquote, κλπ.
2. Σχεδιάστε με προσαρμόσιμο πλάτος (fluid width layout), καθώς έτσι θα έχετε καλύτερα αποτελέσματα σε διαφορετικές πλατφόρμες.
3. Αποφύγετε τεχνικές όπως frames, layers, image maps, plugins. Χρησιμοποιήστε σωστά τη Javascript και κρατήστε καθαρό το CSS.
4. Σχεδιάστε για μικρές διαστάσεις, και αποφύγετε την “αταξία” (clutter).
5. Δώστε μεγάλη προσοχή στον τρόπο που εμφανίζονται οι εικόνες και οι διάφοροι πίνακες και λίστες.
6. Δοκιμάστε το site και σε smartphone αλλά και σε κάποιο παλιότερης τεχνολογίας.

Παρατηρούμε, λοιπόν, την ανάγκη του web design να ανταποκρίνεται στη συμπεριφορά του χρήστη και του περιβάλλοντος με βάση το μέγεθος της οθόνης, την πλατφόρμα και τον προσανατολισμό της συσκευής αλλά και το περιβάλλον χρήσης της. Η πρακτική αυτή συνίσταται σε ένα συνδυασμό προσαρμόσιμου κάνναβου (flexible grid), βασικών layout, εικόνων και έξυπνης χρήσης CSS. Όλα τα παραπάνω είναι αυτό που αποκαλούμε Responsive Web Design, κάτι που θα πρέπει να αναλυθεί σε άλλο άρθρο.

Σχεδιασμός Εφαρμογών

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

Όσον αφορά την ανάγκη σχεδιασμού για πολλές αναλύσεις, αυτή μειώνεται στην περίπτωση των εφαρμογών εφόσον μιλάμε για μία μόνο πλατφόρμα. Για παράδειγμα αν θέλουμε να σχεδιάσουμε μια εφαρμογή για το iPhone, τότε έχουμε δύο διαστάσεις να υπολογίζουμε, μάλιστα η μία είναι απλώς η διπλάσια της άλλης (βλ. Retina display) άρα τα πράγματα μοιάζουν κάπως πιο εύκολα. Το iPad είναι καλύτερο να θεωρείται διαφορετική πλατφόρμα που απαιτεί εντελώς διαφορετικό σχεδιασμό, λόγω διαφορετικών δυνατοτήτων και συνθηκών χρήσης.

Αντίθετα, ο σχεδιαστής πρέπει να μελετήσει πολύ περισσότερο για μια εφαρμογή καθώς θα πρέπει να γνωρίζει τους περιορισμούς αλλά και τις ιδιαίτερες δυνατότητες μιας συσκευής ή πλατφόρμας. Για παράδειγμα ο σχεδιασμός ενός iPhone app μπορεί να μοιάζει περιοριστικός λόγω των διάφορων κανόνων που ορίζει η Apple, πχ. navigation bar, αλλά, από την άλλη, γίνεται πιο ενδιαφέρον με τις τεχνικές και τα animation που παρέχει η ίδια η εταιρεία στον κώδικά της, πχ. από όμορφες εναλλαγές ανάμεσα στις διάφορες οθόνες, μέχρι πλήρες “ντύσιμο” (theming) των εικαστικών στοιχείων της εφαρμογής. Ένα παράδειγμα προσαρμογής του σχεδιασμού ενός site σε εφαρμογή είναι αυτό του ελculture.gr όπου μπορούμε να δούμε τις διαφορές στο σχεδιασμό της αρχικής σελίδας (homepage).

Καταλαβαίνουμε, λοιπόν, ότι υπάρχει ανάγκη για διαφορετικό σχεδιασμό ενός app από ένα mobile site ακόμη κι αν πρόκειται για τη μεταφορά/προσαρμογή των υπηρεσιών του ίδιου site. Στις εικόνες φαίνεται καλύτερα η διαφορά μεταξύ της προβολής στην οθόνη του iPhone, του κανονικού site των NYTimes με το αντίστοιχο mobile site (και τα δύο στον Safari) αλλά και την διαφορετική σε σχεδιασμό εφαρμογή του.

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

Λάθη στο σχεδιασμό εφαρμογών

1. Υπερβολικά σχεδιασμένες. Τυπικό πλέον πρόβλημα είναι τα υπερβολικά γραφικά και οι “διακοσμητικές” πινελιές που δεν έχουν πραγματική χρησιμότητα, και οδηγούν σε “ασυνέπεια” (inconsistency) ανάμεσα στις εφαρμογές μια συσκευής. Το να σπας τέτοιου είδους “συμβάσεις” κάνει το design λιγότερο άμεσα αντιληπτό, ενώ το branding (βασικός λόγος που οδηγεί το σχεδιασμό σ’αυτό το πρόβλημα) μπορεί να επιτευχθεί και με άλλους, καλύτερους τρόπους.
2. Η παραμέληση των τεχνικών περιορισμών, όπως αργή σύνδεση στο Διαδίκτυο ή μικροί σε ισχύ επεξεργαστές.
3. Πολύπλοκη πλοήγηση. Κακή δομή περιεχομένου, μπερδεμένα layout.
4. Σύγχυση της φορητής συσκευής με έναν υπολογιστή. (Σ’αυτό θα επανέλθω σύντομα) Το να μη χρησιμοποιείς διαδράσεις που προσφέρουν οι νέες συσκευές όπως, κατάδειξη με δάχτυλα αντί ποντίκι (touch screen), σύνθετες διαδράσεις με πολλά δάχτυλα (multi-touch gestures), αλλά και τεχνολογίες όπως ενσωματωμένο GPS ή επιταχυνσιόμετρο (accelerometer).
5. Αδιαφορία για το περιβάλλον/πλαίσιο χρήσης (context). Που, πότε, πως και γιατί χρησιμοποιείται η εφαρμογή και η συσκευή.

Τάσεις στο σχεδιασμό εφαρμογών

1. Απλοποίηση του σχεδιασμού. Όχι με την λογική του minimal, αλλά του simplicity. Δεν είναι τόσο “αυτοματοποιημένη” διαδικασία όσο ακούγεται και έχει να κάνει με αυτόν για τον οποίο δουλεύουμε. Το χρήστη. Σκοπός είναι να τον κάνουμε να νιώσει οικεία με την εφαρμογή και να μπορέσει να κάνει αυτό που θέλει εύκολα και απλά.
2. “Ρεαλιστικός” σχεδιασμός. Ακριβώς επειδή υπάρχουν τεχνικοί περιορισμοί αλλά και μια τάση στις εφαρμογές ο χρήστης να (μπορεί να) κάνει ένα πράγμα σε κάθε οθόνη, και ο σχεδιασμός μοιάζει πολύ λιτός, έχει επικρατήσει η τάση (μάλλον trend) να σχεδιάζονται οι εφαρμογές με μια λογική προσομοίωσης πραγματικότητας. Για παράδειγμα η εφαρμογή iBooks που σχεδιάστηκε σαν μια βιβλιοθήκη με κανονικά ράφια και βιβλία.
3. Ιδιαίτερη βαρύτητα στις λίστες, τα κουμπιά και τα εικονίδια. Κατά κύριο λόγω οι εφαρμογές έχουν να κάνουν με παρουσίαση λιστών από άρθρα, φωτογραφίες, προϊόντα κλπ., αλλά και ρυθμίσεων και εργαλείων πάνω σ’αυτές (επιλογή, προώθηση, εκτύπωση, διαγραφή, βαθμολόγηση κλπ.). Έτσι οι σχεδιαστές τείνουν να δίνουν προσοχή στη λεπτομέρεια του σχεδιασμού αυτών καθώς αυτά θα κάνουν ιδιαίτερο και ξεχωριστό το design της εφαρμογής. Η λογική ότι “το UI είναι το branding” ισχύει πολύ περισσότερο στις εφαρμογές από ότι στα site.
4. Πολυεπίπεδο περιβάλλον χρήστη. Ενώ στα site η τάση, λόγω διαστάσεων οθόνης, είναι να παρουσιάζονται το δυνατόν περισσότερες επιλογές στο χρήστη, στις εφαρμογές λειτουργεί περισσότερο η λογική των “κρυμμένων” μενού επιλογών και εργαλείων τα οποία εμφανίζονται στο χρήστη τη στιγμή που πρέπει, δίνοντάς του έτσι περισσότερο χώρο για το καθαρό περιεχόμενο (κείμενο, εικόνα κλπ.)
5. Χρήση των δυνατοτήτων των touch screen. Όσο εξαπλώνονται τα κινητά νέας γενιάς (smartphones) τόσο περισσότερο οι χρήστες εξοικειώνονται με τα gestures. “Κινήσεις” όπως το scroll down στην οθόνη ή η ανακίνηση (shake) ολόκληρης της συσκευής για να εμφανιστεί ένα κρυμμένο πεδίο αναζήτησης ή για να ανανεωθούν τα δεδομένα που παρουσιάζονται αρχίζουν να υιοθετούνται ολοένα και περισσότερο από τους σχεδιαστές των εφαρμογών.

Τελειώνοντας, βλέπουμε ότι το Mobile Web Design και το Mobile App Design είναι δύο ξεχωριστές ενότητες του κλάδου του Web Design με τους δικούς τους κανόνες και περιορισμούς. Οι επαγγελματίες σχεδιαστές θα πρέπει να γνωρίζουμε ότι ασχολούμαστε με ένα μέσο το οποίο επιδέχεται συνεχώς αλλαγές και, συνεπώς, απαιτεί τη συνεχή προσαρμογή και ανάπτυξη των δεξιοτήτων μας, ενώ θα πρέπει να μη ξεχνάμε δύο βασικά πράγματα: 1. να λαμβάνουμε υπ’όψιν ότι οι βασικές αρχές του σχεδιασμού οπτικής επικοινωνίας παραμένουν οι ίδιες, ενώ οι ιδιαιτερότητες και οι δυσκολίες θα πρέπει να αντιμετωπίζονται ως πρόκληση για συνεχή αναζήτηση λύσεων και μεθόδων και, 2. όπως σε κάθε άλλη εφαρμοσμένη τέχνη, υπάρχει κάποιος για τον οποίο κάνουμε όλα αυτά, ο χρήστης/θεατής/αναγνώστης, ο οποίος δεν είμαστε μόνο εμείς.

Wednesday, 17 November, 2010 | in Articles

This article was published on IDPURE mag #22 under the topic of "Walking Through Greek Design".

It’s a fine morning. You wander around the city and walk through posters, billboards, street signs, flyers, newspaper stands, t-shirts, etc. You actually live into design, like Mary Poppins’ scene were the gang jumps into the paintings. No matter if you like every single piece of work that surrounds you, you still walk through design. The design of your city. The design of your country. Or maybe not?

The past few years there is a buzz in Greece on the topic of greek design and whether it has been blooming and if that, if is it recognizable. Having been a member of several awards juries the past three years, what I’ve noticed, especially on the latest ED Awards, is that greek design has developed in a way. There are many greek designers that deliver really inspiring projects, and their work has in fact an identity. But is this the “greek design”?

Before trying to answer we have to clear the meaning of the term “culture” which defines the question. If we mean culture as an integrated pattern of human knowledge, belief, and behavior that depends upon the capacity for symbolic thought and social learning it’s different from culture as an excellence of taste in the fine arts and humanities (also known as high culture).

On the first interpretation, if culture is a more massive but average view of knowledge and behavior, then again greek “everyday design” is reflecting greeks attitude in every aspect of their lives. An average culture.

If you look around on street signs, public services identities, newspaper and magazine designs, lifestyle posters and the most of print advertisements you’ll face a different greek design, uninspired, easy, fast, ruff, and without identity.

On the second interpretation, which is how I prefer to see it, greek design surely reflects a modern view of greek high culture; in theater, music, contemporary art, events and even advertisement, visual communication is on a bloom, mostly because of young designers that wanted to show their work and tried to get clients to open their minds and go a step further from what they are used to see.

And clients where used to see a kind of design inspired from american design of the ‘50s and british design of the ‘70s-‘80s. Cause Greece had some tough times on it’s modern history and after the ‘20s there was a major mix up of cultures from Western Europe and Balkans to Turkey and former USSR countries. A colorful and interesting mix that in some areas created exceptional pieces of art (mainly music and theater) but had to evolve the same time with politics and community.

Though ‘50s was a full decade for our industry and arts, greek designers had no clear past on visual communication to follow, so they had to look at other markets. It’s only after ’73 that we see some serious first steps on greek design and those were mainly to support art (theater and movie posters and music cover albums).

Now, getting through a short period of swiss design inspiration, greek design shows it’s modern identity; an interesting aesthetics sum up of all it’s history and not only based on the ancient greek elements that someone would expect. It’s like greek design had a major reset from a back-to-basics path to a crisp modern greek feeling.

Our design is minimal in form and concept, but also kind of baroque in context and illustration patterns and technics. There is always a second or even third level of information for the viewer, but the main message is clearly delivered with a snap.

Greek designer’s influences are nature and the “underground” urban scenery, mostly of abstract forms and color pallets and not as specific imagery (eg. tree leaves or graffity). The special characteristic of the greek alphabet gives a more exotic feeling on greek typography and we are lucky to have some very good (old and new) typography designers.

One more thing to notice on the subject should be the difference between cities. As design is distinguishably different from London to Manchester and from Berlin to Munich, we notice such differences between the more grunch style Athens design and the clear artistic design of Thessaloniki, which for the record has the fame of the “greek designers city”.

Design is a global thing. Visual communication should work and have affect on every human, but we cannot forget the cultural and historical influences of both designers and viewers. For example try WWF’s posters for US, Brazil, France, Greece and Japan. They have the same message, but they reflect every country’s culture.

No matter if it’s a more local (city, neighborhood) or broader culture view (greek, european), design always does and should reflect it.

Tuesday, 27 April, 2010 | in Articles

This article was written for +Design #68.

Πολλοί φίλοι μου είναι γραφίστες σε έντυπα μέσα. Συμβαίνει συχνά να βρεθούμε σε μια συζήτηση για τα νέα μέσα και το 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

Monday, 23 November, 2009 | in Articles

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

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

Ανάλογη επιτυχία έχει στην Πορτογαλία η καθημερινή "i" (informação) η οποία βραβεύτηκε ως "best designed newspaper of Spain and Portugal" (στην κατηγορία 20.000-60.000), ενώ αύξησε την κυκλοφορία της από 11.000 το Μάιο σε 16.000 τον Αύγουστο.

WATCH THIS VIDEO

Η νέα “i” δεν έχει τη δομή μιας παραδοσιακής εφημερίδας. «Η αίσθησή μας ήταν,» λέει ο Figueiredo, από τα βασικά μέλη της ομάδας, «ότι ο κόσμος δεν ενδιαφερόταν πια για τις παραδοσιακές ενότητες. Παραδοσιακά, οι συντάκτες έπρεπε να “γεμίσουν” μια πολιτική στήλη ακόμη κι αν δεν υπήρχε κάτι σχετικό ή ενδιαφέρον να αναφέρουν. Θέλαμε να προσφέρουμε κάτι διαφορετικό.» Ετσι ορίσανε πέντε βασικές ανάγκες-θέματα τα οποία θέλανε να καλύψει η εφημερίδα, και κατέληξαν σε πέντε λέξεις κλειδιά.

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

Ο Nick Mrozowski, art director της “i”, είπε «νομίζω ότι η κεντρική ιδέα, όχι μόνο στο design αλλά στην εφημερίδα σαν σύνολο, είναι ότι θέλουμε να προσπαθήσουμε να παράγουμε ένα περιοδικό κάθε μέρα.» Οι διαστάσεις του δείχνουν ακόμη περισσότερο προς τα εκεί. Ενα μεγάλο μέρος της δουλειάς αποτελεί ο καθημερινός σχεδιασμός της εφημερίδας. Στην αρχή, εξηγεί ο Mrozowski, η ιδέα ήταν η εφημερίδα να έχει ένα template που θα άφηνε κάποιες σελίδες δεδομένες ως προς το design κάθε φορά, άρα δεν θα χρειάζονταν καθημερινό σχεδιασμό και ότι οι συντάκτες απλά θα τοποθετούσαν το περιεχόμενο στο layout. «Αλλά, μέρα με τη μέρα, αυτή η λογική εγκαταλήφθηκε,» συνεχίζει. «Καταλάβαμε ότι το είδος της εφημερίδας που φτιάχνουμε έχει πολύ ιδιαίτερο περιεχόμενο και κάθε σελίδα θα πρέπει να είναι σχεδιασμένη κατά περίπτωση για να ταιριάζει στις ανάγκες του ρεπόρτερ ή του συντάκτη.»

Πριν λίγο καιρό, στο Cuatro Tipos, το καλύτερο ισπανικό blog για news design, ο Herminio Javier Fernandez έγραψε:

I never saw in a newsstand something like this, and I never expected to see that

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

Διάβασε, επίσης το μανιφέστο της "i" (τα bold είναι δικά μου):

The new “i” will be news caviar. News paté. Not news pottage. News, stories, analysis, opinions and services will be presented in a first-class graphic model, but the secret of the new formula will not be the quality of the design but the relevance of the content.

This has been a content-driven redesign.

“i” wants be an extremely efficient newspaper.

Offering quality and compelling information in an attractive, compact, and easy to read newspaper format.

Not zooming old formulas into fewer pages. But enhancing the best content ever edited. Saving time. Saving paper. Saving Money.

As an editor’s newspaper, “i” will need very strong editing of the news.

Editing must be one of the most important newsroom skills. Editing means, first, to be selective. Editing means, second, to write and rewrite to make the content better.

The new graphic model will be a perfect tool for this editing, editing, editing mantra.

How? With a “show, don’t tell” news strategy. Smart infographics will deliver greater amounts of information. Like good and dramatic pictures. Or provocative and meaningful illustrations. Our Portuguese readers will get more information than ever in print and online . And our superb content will capture more eyeballs than ever. The website will offer expanded versions of our print content.

Everybody and everything will be edited. So, columnists will be edited. Letters to the editor will be edited. Front page stories will be edited. Reviews will be edited. Features will be edited. Listings and agendas will be edited.

The print edition will be our premium edition. Only the best of the best will have space in print. At the end of the day, our strength is not how many pages we print or how much information we deliver, but how much time our readers spend reading, not just looking or browsing. If we can increase the time devoted by readers to our tightly edited print newspaper, the new model will be a great success. The new formula of “i” combines short and long pieces, but both will be strongly edited.

This is essential journalism. This is intense journalism. This is reflective journalism. So, we as journalists will need to work more so that our readers work less. This will be our best service to them.

And to our advertisers, who will love a print product that makes readers read and enjoy news and ads. Devoting more and more time. The dream of any journalist. And the best business for any newspaper.

Πηγές:

1. A Portuguese success story: could i be the future of newspapers?
2. Innovation’s i, one of the 2009 best designed newspaper of spain and portugal
3. Future newspaper design