Χρήση σημείων αναφοράς Κάνει εύκολη τη διάταξη σελίδας
Ένας σχεδιασμός μπορεί να έχει αντίκτυπο. Μπορεί να έχει στυλ. Αλλά με αυτά δεν αρκεί.
Για να λειτουργήσει καλά, ο σχεδιασμός πρέπει να έχει στοιχεία που να ανταλλάσσουν τις δυνάμεις του άλλου. Ευτυχώς, κάθε κομμάτι περιεχομένου έχει εγγενείς οδηγίες.
Η διάταξη ή η ρύθμιση περιεχομένου σε μια ιστοσελίδα είναι κρίσιμη για την επιτυχία ενός σχεδίου. Μεταξύ άλλων, η διάταξη δίνει προτεραιότητα στο περιεχόμενο για να οδηγεί τους ανθρώπους από το ένα στοιχείο στο άλλο.
Εάν γίνει σωστά, οι άνθρωποι θα ενδιαφέρονται τόσο για το περιεχόμενο που δεν θα παρατηρήσουν τίποτε άλλο.
Διαβάστε παρακάτω για περισσότερες λεπτομέρειες και συμβουλές για τη δημιουργία σχεδίων που λειτουργούν στα σχέδιά σας.
Με το παρακάτω παράδειγμα, οι περισσότεροι άνθρωποι θα παρατηρήσουν πρώτα τη φωτογραφία ή τον τίτλο, τότε το κείμενο και τέλος τους συνδέσμους.
Μπορεί να μην παρατηρήσουν ότι η επικεφαλίδα, το κείμενο και το πρότυπο του μοντέλου έχουν οριστεί το ένα τρίτο και τα δύο τρίτα στη σελίδα αντίστοιχα (τιμάται ο κανόνας των τρίτων) ή ότι η επικεφαλίδα και οι σύνδεσμοι έχουν γραφτεί σε χρώματα δειγματοληπτικά από τα χείλη του μοντέλου ή ότι καμπύλη του ώμου της οδηγεί το βλέμμα προς τις προσκλήσεις για δράση.
Το κείμενο, η φωτογραφία και ο τίτλος συνθέτουν μια σύνθεση. Αν κάποιος πέσει εκτός τόπου, ολόκληρο το κομμάτι αποτυγχάνει.
Διακανονισμός με βάση τον αμοιβαίο σεβασμό
Πού βάζουμε τα πράγματα; Αφήστε μας να μας πείτε. Οι ιδιορρυθμίες των γραφικών, των φωτογραφιών και των τεμαχίων του κειμένου γίνονται εμφανή όταν συναντώνται σε μια σελίδα. Κάποιοι συνεργάζονται καλύτερα από άλλους, και κάποιοι εργάζονται μόνο όταν τοποθετούνται με κάποιο τρόπο. Για παράδειγμα, η διάταξή μας λειτουργεί με δύο τρόπους:
Το σχήμα 1 δείχνει τη διάταξη που χρησιμοποιήθηκε στο παραπάνω παράδειγμα. Τα γκρι μπλοκ αντιπροσωπεύουν τον τίτλο, τη φωτογραφία και το κείμενο.
Το σχήμα 2 δείχνει πώς θα εφαρμόζονται οι ίδιες αρχές στην αντιστροφή του: ένα μεγάλο στοιχείο που ισορροπείται από δύο μικρότερα στοιχεία. Αυτή η συγκεκριμένη φωτογραφία φαίνεται καλύτερα στα δεξιά, όμως.
Το μοντέλο μας κοιτάει προς τα αριστερά. Στο σχήμα 1, κοιτάζει το κείμενο. Στο σχήμα 2, κοιτάζει μακριά από το κείμενο. Αυτό θα μπορούσε να είχε δουλέψει αν κοίταζε την κάμερα, αλλά επειδή κοιτάζει μακριά, χάνει λίγο αντίκτυπο. Όχι πολύ, αλλά αρκετό για να έχει σημασία.
Το μοντέλο παρουσιάζει εναλλακτικά ενδιαφέρον για το κείμενο και, όταν το ανεστραμμένο, το αγνοεί. Η διάταξη στοιχείων δημιουργεί θετική ή αρνητική στάση.
Ευθυγράμμιση με βάση τα ορόσημα
Μερικές φορές το πράγμα που κάνει τα στοιχεία να λειτουργούν με κάποιο τρόπο παρέχει επίσης ενδείξεις σχετικά με το χώρο και την ευθυγράμμιση. Παρατηρήσαμε πως τα μάτια του μοντέλου δείχνουν προς τα αριστερά, αλλά η φωτογραφία και το κείμενο περιέχουν και άλλες οπτικές ενδείξεις.
Οι σιωπηρές γραμμές μεταξύ των ορόσημων στην τυπογραφία και την εικόνα αφθονούν σε αυτή τη σύνθεση:
- Τα μάτια και τα χείλη του μοντέλου και η άκρη της μύτης της πληρούν την άκρη της δεξιάς στήλης του κειμένου.
- Η αριστερή στήλη του κειμένου πληρεί το αριστερό άκρο της επικεφαλίδας. Σχεδόν φτάνει στην άκρη της τρίχας του μοντέλου, αλλά υποχωρεί για να παραμείνει σύμφωνη με τη δεξιά στήλη.
- Το πρόσωπο του μοντέλου (ιδιαίτερα τα μάτια και το στόμα) ορίζει τον κατακόρυφο χώρο της επικεφαλίδας.
- Το κάτω μέρος της φωτογραφίας σηματοδοτεί το κάτω τρίτο της σύνθεσης (σύμφωνα με τον κανόνα των τρίτων).
- Τα μάτια του μοντέλου είναι το ένα τρίτο από την κορυφή της σύνθεσης.
- Το κέντρο του προσώπου του μοντέλου και το δεξί άκρο της επικεφαλίδας συναντώνται στα σημεία του ενός τρίτου και των δύο τρίτων του πλάτους της σύνθεσης.
Ορισμένα ορόσημα έχουν περισσότερη δύναμη από άλλα. Οι σχεδιαστές και οι φωτογράφοι θα μπορούσαν να συζητήσουν, για παράδειγμα, εάν τα μάτια του μοντέλου έχουν μεγαλύτερη επιρροή απ 'ότι η σιλουέτα της. Αλλά μια διάταξη που βασίζεται σε οποιοδήποτε ορόσημο είναι καλύτερη από μια διάταξη που τα αγνοεί.
Χρήση λειτουργιών για τη δημιουργία αρμονίας
Οι μη σχεδιαστές που δοκιμάζουν το χέρι τους σε διάταξη έχουν μερικές φορές να οργανώσουν στοιχεία που βασίζονται στον τρόπο με τον οποίο ταιριάζουν στη σελίδα. Ο χώρος θα πρέπει να γίνεται σεβαστός, αλλά δεν οδηγεί πάντοτε στον καλύτερο σχεδιασμό.
Το σχήμα 5 ευθυγραμμίζει τα στοιχεία με το χώρο της σελίδας και βασίζει τα πάντα στα όρια του καμβά.
Το σχήμα 6 , όμως, βασίζει τη διάταξη του στα εστιακά σημεία της φωτογραφίας. Το αποτέλεσμα είναι μια πιο εξορθολογισμένη εμφάνιση.
Το σχήμα 5 είναι αναποτελεσματικό επειδή οι θεατές αναπηδούν μεταξύ των εστιακών σημείων: στην επικεφαλίδα, μέχρι το πρόσωπο, μέχρι το κείμενο. Η απλούστερη γραμμή είναι ευθεία. Ως εκ τούτου, το σχήμα 6 καθοδηγεί το βλέμμα του θεατή εύκολα από τα αριστερά προς τα δεξιά, από το ένα στοιχείο στο άλλο. Η ουσία της δεύτερης διάταξης είναι μια στενή ζώνη που τρέχει κατά μήκος της ευθυγράμμισης του επικεφαλίδα-προσώπου-κειμένου.
Σε αυτές τις εικόνες, οι αναγνώστες έλκονται από το πρόσωπο του μοντέλου, τον τίτλο και το κείμενο - συνήθως με αυτή τη σειρά. Αυτές είναι τρεις διαφορετικές περιοχές για να εξετάσουμε. Η ευθυγράμμιση τους δίνει την εστίαση της διάταξης.
Η σωστή απάντηση
Και οι τρεις παρακάτω διατάξεις χρησιμοποιούν τα ίδια στοιχεία για τον τίτλο, τη φωτογραφία και το κείμενο:
Η πρώτη διάταξη έχει το πιο "αναπνευστικό χώρο". Ο δεύτερος σέβεται το κείμενο. Η τρίτη διάταξη χρησιμοποιεί αρνητικό χώρο για να επιτευχθεί ισορροπία. Και τα τρία χρησιμοποιούν ορόσημα αλλά με διαφορετικούς τρόπους. Είναι το καλύτερο;
Το κυνήγι για μια απάντηση μπορεί να μας κάνει τυφλούς να φανταστούμε: ότι πολλές λύσεις μπορούν να ισχύουν εξίσου όταν τα στοιχεία λειτουργούν μαζί. Τα οπτικά ορόσημα είναι ευκαιρίες, όχι κανόνες. Ρίξτε μια ματιά στο πρώτο σχέδιο.
Όσο περισσότερο τα στοιχεία συμμορφώνονται με τις σιωπηρές γραμμές, τόσο περισσότερο ένα στοιχείο που δεν συμμορφώνεται θα ξεχωρίσει. Εδώ, ο σχεδιαστής σπάει τη λέξη "Landmarks" από την κάθετη ευθυγράμμιση του άλλου κειμένου, υπογραμμίζοντας έτσι τη λέξη-κλειδί.
Δεν υπάρχει αμφιβολία για το τι προωθεί η σελίδα. Η επιτυχία δεν μετράται με το πόσο αυστηρά τα στοιχεία συμμορφώνονται με τις αρχές του σχεδιασμού αλλά με το πόσο καλά η σελίδα επικοινωνεί το μήνυμά της.
Γράφτηκε αποκλειστικά για το Webdesigner Depot από τον Ben Gremillion. Ο Ben είναι α ελεύθερος συγγραφέας και σχεδιαστής ο οποίος επιλύει προβλήματα επικοινωνίας με καλύτερο σχεδιασμό.
Πώς ακολουθείτε τα ορόσημα στα σχέδιά σας; Τι λειτουργεί καλύτερα για εσάς και τι όχι;