Περιεχόμενο
Αυτό το άρθρο δημοσιεύτηκε για πρώτη φορά στο τεύχος 229 του περιοδικού .net - το περιοδικό με τις μεγαλύτερες πωλήσεις στον κόσμο για σχεδιαστές και προγραμματιστές ιστοσελίδων.
Ένα από τα πιο σημαντικά πράγματα στα οποία μπορείτε να εστιάσετε όταν πρόκειται για τη διαμόρφωση μιας σελίδας σε HTML / CSS είναι ο κάθετος ρυθμός - το οπτικό μοτίβο στο οποίο σχηματίζονται τα μπλοκ τύπου ή γραμμές τύπου καθώς σαρώσετε προς τα κάτω τη σελίδα.
Άλλα πράγματα μπορούν να επηρεάσουν αυτόν τον ρυθμό, όπως επικεφαλίδες, στοιχεία λίστας, εικόνες και ούτω καθεξής. Το να έχεις καλό κάθετο ρυθμό είναι υψίστης σημασίας, διότι βοηθά την αναγνωσιμότητα και τη δυνατότητα σάρωσης των σελίδων σου.
Υπάρχουν αρκετά σπουδαία μαθήματα (δείτε εδώ και εδώ, για παράδειγμα) στον ιστό, όπου μπορείτε να βρείτε πώς να επιτύχετε τεχνικά τον κατακόρυφο ρυθμό χρησιμοποιώντας ems για το ύψος της γραμμής σας και μαθαίνοντας τι διατηρεί τον τύπο σας «σε φάση» που σημαίνει.
Ιεραρχία
Τα βασικά πράγματα που πρέπει να προσέξετε είναι το ύψος γραμμής μεταξύ των στοιχείων και της συνολικής οπτικής ιεραρχίας στη σελίδα. Ο καθορισμός σωστών αναλογιών ύψους γραμμής μπορεί να είναι μια άσκηση σχεδιασμού, αλλά είναι σημαντικό να το ελέγξετε. Η ιεραρχία είναι επίσης σημαντική, δεδομένου ότι οι εικόνες και τα στοιχεία κειμένου πρέπει να είναι αρμονικά μεταξύ τους οπτικά - τα πιο σημαντικά πράγματα είναι γενικά μεγαλύτερα και έρχονται πρώτα στη σελίδα.
Οι σχεδιαστές τυπωμένων υλών έχουν ασχοληθεί με την ιδέα του κάθετου ρυθμού για πολλά χρόνια και μόνο στο πρόσφατο παρελθόν οι σχεδιαστές ιστοσελίδων έπρεπε πραγματικά να μπουν σε αυτά τα πράγματα. Με την ολοένα αυξανόμενη ανάγκη δημιουργίας ιστότοπων χρησιμοποιώντας διατάξεις πλέγματος και προσοχή στις εφαρμογές που ανταποκρίνονται σε πολλαπλά πλάτη οθόνης, είναι πιο σημαντικό τώρα από ποτέ από οπτική άποψη σχεδιασμού, μάλλον περισσότερο από τεχνική.
Πέντε παραδείγματα για να δείτε
1. Τα στοιχεία του τυπογραφικού στυλ Αυτό το βιβλίο του Robert Bringhurst είναι το πρότυπο για τη μελέτη τυπογραφίας. Διαβάστε το, καταναλώστε το, ρίξτε το στον εγκέφαλό σας με όποιο τρόπο μπορείτε.
2. Frank Chimero Εκτός από το ότι είναι εντυπωσιακά γενικά, ο πρόσφατος επανασχεδιασμός της προσωπικής ιστοσελίδας του σχεδιαστή Frank Chimero παρουσιάζει έναν υπέροχο κατακόρυφο ρυθμό. Χρησιμοποιεί ένα εφέ παράλλαξης για να οδηγήσει τον ρυθμό στο σπίτι καθώς μετακινείστε επίσης τη σελίδα προς τα κάτω.
3. Dan Cederholm Για ένα καλό παράδειγμα καταπληκτικού τυπογραφικού κατακόρυφου ρυθμού, ρίξτε μια ματιά στο blog του Dan Cederholm. Το ύψος γραμμής του αντιγράφου και οι επικεφαλίδες είναι σε τέλεια αναλογία.
4. Εργαστήριο εστίασης Η εταιρεία σχεδιασμού και επωνυμίας ιστού Focus Lab χρησιμοποιεί την ιεραρχία έξυπνα για να επικοινωνήσει τι είναι πιο σημαντικό στον επισκέπτη.
5. Typofonderie Ο ιστότοπος για το Typography Studio Typofonderie έχει εξαιρετικό κατακόρυφο ρυθμό με εικόνες και κείμενο. Η απόσταση μεταξύ των στοιχείων είναι αναλογική σε ολόκληρο τον ιστότοπο και η ιεραρχία μεταξύ της κύριας εικόνας και των δευτερευόντων εικόνων / τμημάτων είναι τέλεια.
Ανακαλύψτε 10 εκπληκτικά παραδείγματα πειραματικού σχεδιασμού στο Creative Bloq.
