• Switch to English
  • You are in Greek version

Tuesday 06.02.2007, ¶ Τυπογραφια, 2 Σχόλια

# Εγγραφείτε στα RSS feeds 

Παραδείγματα καλής τυπογραφίας (Μέρος 1ο)

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

Όταν πρόκειται για θέματα κειμένου λίγο έως πολύ και οι δύο οφείλουν να ακολουθούν παρόμοιους κανόνες. Και όπως λέει ο Cameron Moll:

  • Οι καλοί designers συμπεριφέρονται στο κείμενο σαν να είναι περιεχόμενο και χρησιμοποιούν καλές γραμματοσειρές
  • Αλλά οι εξαιρετικοί designers συμπεριφέρονται στο κείμενο ως στοιχείο του περιβάλλοντος αλληλεπίδρασης και χρησιμοποιούν καλή τυπογραφία

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

WIRED Magazine example

Σημείο #1

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

Σημείο #2

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

Σημείο #3

Ρίξτε μια ματιά στο χρώμα της οριζόντιας μπάρας, το πρόσωπο του ανθρώπου και το κείμενο στο τέλος της σελίδας. Πρόκειται για το ίδιο. Στην πραγματικότητα αυτό το χρώμα εξάχθηκε από το πρόσωπο του ανθρώπου και χρησιμοποιήθηκε πιθανώς με τη βοήθεια του εργαλείου color picker σε όσα σημεία στη σελίδα χρειαζόταν.
Παρατηρήστε επίσης ότι η υπόλοιπη σελίδα (εντάξει, χωρίς το τετράγωνο πάνω αριστερά) ότι είναι ασπρόμαυρη, ωστόσο δίνει την εντύπωση μιας κανονικής έγχρωμης σελίδας.

Σημείο #4

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

Σημείο #5

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

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

2 Σχόλια

# Εγγραφείτε στα RSS feeds 

Picture of Viton Vitanis

Πολύ καλό άρθρο!

Αναρωτιόμουν, το wired έχει online έκδοση σε pdf; Με μια γρήγορη ματιά που έριξα, δεν είδα κάτι.

Βίτων

ΥΓ. Είμαι καινούργιος αναγνώστης του blog σου. Εξαιρετική δουλειά για τα ελληνικά δεδομένα!
——-

Viton Vitanis
9 February 2007

Picture of porcupine

Όχι, το WIRED δεν υπάρχει σε .pdf

Καλώς ήλθες Βίτων!

porcupine
9 February 2007

Shoot it





Παρακαλώ συμπληρώστε την παρακάτω πρόταση *: Το όνομα αυτού του website είναι: .... colors
Smileys Να θυμάσαι τα στοιχεία μου
Να ειδοποιούμαι για απαντήσεις
  • Τα πεδία με την ένδειξη * είναι υποχρεωτικά
  • Πείτε ποιος είστε με ένα Gravatar
  • Επιτρεπόμενα tags: a, blockquote, em, strong
  • Το υπερσύγχρονο σύστημά μας ελέγχει σχόλια άσχετα με το κείμενο ή που δεν συμβαδίζουν με το site και τα διαγράφει αυτόματα
  • Για να κάνετε 2ο σχόλιο, παρακαλώ περιμένετε 5'.

Προεπισκόπιση σχόλιου