Εφαρμογή του Golden Ratio στα σύγχρονα σχέδια

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

Υποστηρίζοντας το σχεδιασμό της ιστοσελίδας σας με μια κυριολεκτικά φυσική τάξη, οι θεατές μπορούν να βρουν το σχέδιό σας πιο ενδιαφέρον και ευχάριστο. Αυτή η έννοια ονομάζεται Χρυσή αναλογία, μια μαθηματική έννοια της φύσης υπακούει και ότι εμείς οι άνθρωποι αναγνωρίζουμε υποσυνείδητα ως έκφραση της τελειότητας.

Το Χρυσό Τι?

Με απλά λόγια, η χρυσή αναλογία (επίσης γνωστή ως θεία αναλογία ή το Χρυσή τομή), είναι μια μαθηματική σταθερά που εμφανίζεται επανειλημμένα στη φύση και το έργο τέχνης.

Εκφραζόμενη ως εξίσωση, πότε ένα είναι μεγαλύτερο από σι, (α + β) διαιρούμενο με ένα είναι ίσο με ένα διαιρούμενο με σι (απλά κοιτάξτε την εικόνα παρακάτω), η οποία είναι ίση με περίπου 1.618033987. Ο αριθμός αυτός, που συχνά αντιπροσωπεύεται από τον ελληνικό χαρακτήρα "phi", είναι ο αριθμός Χρυσή αναλογία.

(Πηγή εικόνας: mathsisfun.com)

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

(Πηγή εικόνας: creativeautomaton.com)

Για να δημιουργήσετε ένα χρυσό ορθογώνιο, επιλέξτε έναν αριθμό που θα είναι το μήκος της μικρής πλευράς του ορθογωνίου. Για λόγους χάριν, ας πούμε 500 pixels. Πολλαπλασιάστε το κατά 1,618. Το αποτέλεσμα, 809 pixels, είναι το μήκος της μακράς πλευράς του ορθογωνίου σας. Επομένως, ένα ορθογώνιο που είναι 500 pixels με 809 pixels είναι ένα χρυσό ορθογώνιο. Υπόκειται στον χρυσό λόγο.

Φυσική ομορφιά

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

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

(Εικόνα Πηγή: in2visualdesign)

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

Θεία Σύνθεση

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

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

Για πλέγματα / μπλοκ

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

• Για αυτό το παράδειγμα, θα πούμε το ορθογώνιο σας 525 pixels by 850 εικονοστοιχεία.
• 525 είναι ένα και 850 είναι (α + β), και σι θα είναι το πλάτος της πλευρικής σας ράβδου.
• Να βρω σι, απλά αφαιρούμε από (α + β), που είναι 325.
• Επομένως το πλάτος της πλευρικής σας ράβδου είναι 325.

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

Για κείμενο

Υπάρχει ένας πιο γρήγορος τρόπος για να λάβετε τις μετρήσεις που χρειάζεστε και μπορεί να εφαρμοστεί με περιεχόμενο κειμένου.

• Ας υποθέσουμε ότι το κείμενο του πλαισίου σας είναι μεγέθους 12.
• Πολλαπλασιάστε 12 με 1.618, η χρυσή αναλογία, και θα πάρετε 19.416.
• Ένα μέγεθος κειμένου κεφαλίδας 19 ή 20 θα παρακολουθεί στενά τη χρυσή αναλογία.

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

Εργασίες πλέγματος: Ο κανόνας των τρίτων

Εάν το μαθηματικό δεν είναι το φλιτζάνι τσάι σας, η έννοια του χρυσού λόγου μπορεί να απλοποιηθεί. ο κανόνας τρίτων διέπει την τοποθέτηση σημείων ενδιαφέροντος σε μια σκηνή. Διαχωρίστε κάθε δεδομένη εικόνα σε τρίτα τόσο οριζόντια όσο και κατακόρυφα. Θα πάρετε 9 πλέγματα.

(Εικόνα Πηγή: digital-photography-school.com)

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

(Εικόνα Πηγή: net.tutsplus.com)

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

Στήλες και μεγέθη γραμματοσειρών: Ακολουθίες Fibonacci

Ένα άλλο απλό εργαλείο για το σχεδιασμό ιστοσελίδων που συνδέεται με τη χρυσή αναλογία είναι Αριθμοί Fibonacci. Μια ακολουθία Fibonacci αρχίζει με 0 και 1. Οι προηγούμενοι δύο αριθμοί προστίθενται μαζί για να παράγουν τον επόμενο αριθμό στην ακολουθία: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34 ... και ούτω καθεξής.

Λίγο μαθηματικά μας λέει ότι η σχέση μεταξύ διαδοχικών αριθμών ακολουθίας Fibonacci είναι εκπληκτικά κοντά στον χρυσό λόγο - διαιρέστε τον οποιοδήποτε αριθμό στην ακολουθία με τον αριθμό που προηγείται και θα πάρετε - το μαντέψατε - 1.618.

Όπως και με τη χρυσή αναλογία, οι αριθμοί Fibonacci μπορούν να χρησιμοποιηθούν για να υπαγορεύσουν τη σχέση μεταξύ κεφαλίδων και μεγεθών κειμένου περιεχομένου. Θα μπορούσε επίσης να χρησιμοποιηθεί για τον προσδιορισμό του πλάτους των στηλών και είναι ιδιαίτερα αποτελεσματικό σε blogs και σε άλλες μορφές πυκνού κειμένου. Η σύνθεση θα μπορούσε επίσης να βασιστεί στην έννοια του πλακιδίου Fibonacci, στην οποία το μέγεθος πλακιδίων είναι χτισμένο με τη χρήση της ακολουθίας Fibonacci.

(Εικόνα: Wikipedia.org)

Χρυσές σπείρες και ομαδοποίηση περιεχομένου

Μια άλλη πιθανή μέθοδος χρήσης του χρυσού λόγου και των αριθμών Fibonacci είναι η χρυσές σπείρες και σπείρες Fibonacci. Οι χρυσές σπείρες γίνονται ευρύτερες από έναν συντελεστή ίσο με τον χρυσό λόγο για κάθε τρίμηνο που κάνουν και οι σπείρες Fibonacci σχηματίζονται χρησιμοποιώντας πλακάκια Fibonacci.

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

(Εικόνα πηγή: fabiovisentin.com)

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

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

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

Περισσότερα ανάγνωση:

• Εφαρμογή του χρυσού λόγου σε διατάξεις και αντικείμενα Web

Σημείωση του συντάκτη: Αυτή η ανάρτηση είναι γραμμένη από Κρις Πεντάγκο για το Hongkiat.com. Ο Chris είναι ένας έμπειρος προγραμματιστής ιστοσελίδων, σχεδιαστής και έμπορος Διαδικτύου που ενδιαφέρεται για τις βασικές τεχνολογίες για να κάνει την επιχείρησή σας online να εκτελέσει.Μπορείτε να τον βρείτε στο Twitter.