Altın Oran: Onu Anlamak ve Kullanmak İçin En İyi Kılavuz

Yayınlanan: 2019-06-07

Tasarımcılar her yerde Altın Oran hakkında bilgi sahibi olmalıdır. Estetik açıdan hoş tasarımlar yaratan matematiksel bir orandır. Altın Oran doğada çok sık bulunduğundan, sonuçlarının doğal görünmesi şaşırtıcı değildir.

Altın Oran

Altın Oran

Bogomil Mihaylov'un Unsplash'taki fotoğrafı

Altın Oran'ın başka isimleri de var:

  • ilahi oran
  • Altın anlam
  • Altın bölüm
  • Phi (Yunanca harf)

Altın Oranın Arkasındaki Matematik

Altın Oran'ın matematiğini olabildiğince basit bir şekilde ve aslında bilmeniz gerekmeyen ayrıntılara girmeden açıklayacağım. Matematiğe ayak uydurabiliyorsan, harika. Ama yapamıyorsanız, sorun değil – konsepti tasarımlarınızda kullanmaya devam edebileceksiniz.

Altın Oranı anlamak için önce Altın Dikdörtgeni anlamanız gerekir.

Altın Dikdörtgen, içinde bir kare bulunan büyük bir dikdörtgendir. Karenin kenarları dikdörtgenin en kısa uzunluğuna eşittir:

Altın Oran

Kaynak: Vikipedi

Altın Oran 1,618'e (bir tür) eşit olan bir sayıdır, tıpkı pi'nin yaklaşık olarak 3.14'e eşit olması gibi, ama tam olarak değil.

Bir çizgi alır ve onu iki parçaya bölersiniz - uzun kısım (a) ve kısa kısım (b). (a) bölü tüm uzunluk (a + b) bölü (a) bölü (b)'ye eşittir. Ve bu sayıların ikisi de 1,618'e eşittir. Yani, (a + b) bölü (a) 1,618'e eşittir ve (a) bölü (b) de 1,618'e eşittir.

Altın Dikdörtgen'e geri dönün, çünkü anlaşılması çok daha kolay

Dikdörtgenin içine bir kare yerleştirdiğinizde, daha küçük bir dikdörtgen daha oluşturur. Siyah çizgileri görmezden gelin ve kırmızı ve yeşil kutulara bakın:

Altın Oran

Kırmızı karenin dört kenarı eşit uzunluktadır ve bu uzunluk dikdörtgenin en kısa uzunluğuna eşittir. Bu kareyi keserek, otomatik olarak başka, daha küçük bir dikdörtgen oluşturursunuz (yeşil çerçeveli). Birlikte, eksiksiz bir Altın Oran düzeni ve Altın Spiral için bir temel oluştururlar.

Ayrıca, daha küçük dikdörtgenden, maviyle ana hatlarıyla belirttiğim gibi yeni bir Altın Dikdörtgen yapabilirsiniz:

Altın Oran

Geleneksel bir Altın Oran diyagramında sekiz Altın Dikdörtgen bulunur:

Altın Oran

Ve işte en küçük Altın Dikdörtgen, #8:

Altın Oran

Sol alttan başlar ve her bir kare ve küçük dikdörtgen kesitin uzak tarafını birleştirmek için bir yay yaparsanız, Altın Spiral'i elde edersiniz.

Fibonacci Dizisi

Fibonacci Dizisini anlamak oldukça basittir: sıfır ve 1 ile başlarsınız, sonra ondan önceki iki sayıyı toplayarak bir sonraki sayıyı elde edersiniz. 0 + 1 = 1, sonra 1 + 1 = 2 vb. Dizideki ilk birkaç sayı 0, 1, 1, 2, 3, 5, 8, 13, 21, 34'tür.

Bu genişliklere sahip kareler oluşturmak için bu sayıları kullanırsanız, hemen hemen bir Altın Spiral oluşturabilirsiniz:

Altın Oran

Kaynak: Matematik Eğlencelidir

Altın Çemberler

Bazen, spiral yerine veya spirale ek olarak karelere çizilmiş daireler görürsünüz. Altın Oran kaplamasının kutularına mükemmel daireler çizerseniz, bitişik bir daire ile 1:1.618 oranına sahip olurlar.

Altın Oran

Kaynak: Limelight Departmanı

Pepsi ve Twitter logoları Altın Çemberleri kullanır:

Altın Oran

Kaynak: Hibrit Görüşmeler

Bunu Daha Önce Gördünüz, Çok

Doğa Altın Oran ile doludur. Bitki örtüsünde, kabuklarda, havalarda…

Altın Oran

Kaynak: Annie Spratt'ın Unsplash'taki fotoğrafı

Altın Oran

Kaynak: NASA'nın Unsplash'taki fotoğrafı

Ve çok sık gördüğümüz için beynimiz onu tercih ediyor. Bu doğuştan gelen çekicilik, tasarımcıların kullanması için bu kadar güçlü bir düzen olmasının nedenidir.

Sanat ve Tasarımda Altın Oran

Bazen Altın Oran'ı tanımak çok kolaydır:

Altın Oran

Kaynak: staceysdetailinginc.com

Bazen, “Neden bahsettiğin hakkında hiçbir fikrim yok… oh bekle. Şimdi görüyorum. Bence."

Altın Oran

Kaynak: Pazarlama İçeriği

Diğer zamanlarda ona bakarken çıldırabilirsin…

Altın Oran

Kaynak: Geniş Duvarlar

…ama ana Altın Dikdörtgen'e odaklanırsanız, biraz daha netleşir:

Altın Oran

Yaygın olarak başvurulan bir örneğe bakalım: Parthenon

Altın Oran

Kaynak: Yaratıcı Bloq

İlk başta bunu görebilir ve “Bu bana simetrik görünüyor. Baktığım şey şu Altın Dikdörtgen Spiral olayına nasıl uyuyor?”

Altın Oran, bir tasarımın her bir parçasının nasıl tam olarak ve yalnızca belirli bölümlere sığdığı ile ilgili değildir. Önemli olan bu olsaydı, Parthenon'un sağ tarafı büyük bir blok olacak ve sol taraf daha küçük bloklara bölünecekti.

Bunun yerine oran, uyum ve orantı oluşturmak için kullanılır ve bu, birkaç farklı şekilde yorumlanabilir.

Altın Oran matematiğe dayalı olsa da yaratıcı yollarla uyarlanabilir. Parthenon durumunda, Altın Oran, tasarım bileşenlerinin yüksekliğini ve yerleşimini belirler. Ayrıca, bunun üzerine Altın Oran diyagramları yerleştirmenin birkaç yolu vardır:

Altın Oran

Kaynak: Mimar

Altın Oran

Kaynak: Ortadaki Esther Sugihto

Altın Oran

Kaynak: GoldenNumber.net

Altın Oran ve Web Sitesi Tasarımı

İster matematikle ilgilenin, ister kafanız patlamak üzere olsun, Altın Oran'ı anlamak tasarım açısından biraz daha kolaydır. Ağır kaldırmayı başardın. Şimdi temel kaplamayı almanın ve web bileşenlerinizi mükemmel şekilde memnun etmenin zamanı geldi.

Altın Oran ve Düzen

Mükemmel bir Altın Oran düzeni istiyorsanız, boyutları 1:1.618'e ayarlayın. Örneğin, genişliği 960 piksele ve yüksekliği 594 piksele ayarlayabilirsiniz. Altın Dikdörtgen her iki tarafta 594 pikseldir ve dikdörtgen yerleşimin geri kalanını (594 x 366) kaplar.

Hesap Makinesi Çorbası, doğru Altın Oran değerlerini bulmak için herhangi bir terimi (A, B veya A + B) ayarlayabileceğiniz yararlı bir Altın Oran hesaplayıcıya sahiptir.

Veya, bir sütunun diğer sütundan biraz daha geniş olduğu bu tür iki sütunlu düzeni kullanabilirsiniz. Organizedir ve hiyerarşiyi açıkça gösterir.

Altın Oran

Kaynak: National Geographic

Bunu web sitemde kullanıyorum çünkü ana sayfa blog yazılarımın bir koleksiyonudur ve bunun bloglar için en çok tanınan düzenlerden biri olduğunu düşünüyorum:

Bence Elegant Themes'ta kullandığımız simetrik düzen daha modern:

Altın Oran

Altın Oran ve Aralık

Altın Oran, tasarımınızın öğelerini nereye yerleştireceğinizi, oranları kullanacağınızı ve nerede negatif boşluk bırakacağınızı belirlemenize yardımcı olabilir. İşte basit bir örnek ve Altın Oran kaplamasını üste koymanıza bile gerek kalmadan neredeyse görebilirsiniz:

Altın Oran

Kaynak: Digiarts 2011

Photoshop'ta Altın Spiral uyguladığımda şöyle görünüyor:

Altın Oran

Yine, Altın Oran matematiğe dayalıdır, ancak onu tasarıma uygulamak söz konusu olduğunda, mükemmel değildir. Bu tasarım bir Altın Dikdörtgen üzerinde oluşturulmamıştır, bu nedenle Altın Spiral normal oranların dışındadır. Bununla birlikte, tasarımın en büyük öğesinin yanı sıra en küçük öğeleri ve negatif alanı nereye koyacağını seçmek için bir tasarımcıya nasıl rehberlik edebileceğini görebilirsiniz.

Aynı tasarımın farklı öğelerine uygulamak için Altın Oran kaplamasını da katmanlayabilirsiniz:

Altın Oran

Kaynak: Lemongraphic tarafından Markalama. Canva'dan bir örnek.

Altın Oran ve İçerik

Altın Oran'ın düzenini ve aralıklarını birlikte düşündüğünüzde, içeriği web sitenizde nereye yerleştireceğinize karar vermeye başlayabilirsiniz.

National Geographic web sitesine tekrar bakalım, bu sefer üzerinde Canva'nın Altın Oran yer paylaşımı var:

Altın Oran

Düzen, içerik spiralin merkez çizgisi boyunca hizalanacak şekilde bölünmüştür. Solda, büyük bir içerik bloğu var. Sağda, içerik daha yoğun hale geliyor ve çok daha fazla negatif alan var. Spiralin orta kıvrımına doğru, ikinci bir National Geographic logosu göreceksiniz - evde markalaşmayı sürdürmek için onu gözün doğal olarak gittiği yere yerleştirmekten daha iyi bir yol yoktur.

İşte Altın Spiral'in ana bileşenini geçse bile bir tasarımda gözünüzü nasıl yönlendirebileceğine dair harika bir örnek. Bu, bir sayfaya sıkıştırılacak çok fazla içeriğiniz varsa kullanışlıdır. Ayrıca, bu kadar dolu ve ayrıntılı bir tasarımda bile, orada hala negatif boşluk olduğunu fark edeceksiniz.

Altın Oran

Kaynak: Design by Helms Workshop. Canva'dan bir örnek.

Mansiyon: Altın Oran ve Görseller

Altın Oran, fotoğraf kompozisyonunda da kullanılır. Altın Oran, bir Altın Spiral oluşturmak yerine görüntüyü altı bloğa böler. Bu tür ızgarada aynı Altın Oran kullanılır: bölümlerin genişlikleri ve yükseklikleri 1 veya 0,618'dir.

Altın Oran

Kaynak: Canva

Daha sonra çekimi oluşturmak için kavşakları kullanırsınız. Amaç, bir özneyi veya öznenin ana bölümünü kesişen çizgilerden birine yerleştirmektir - özne ortalanmamalı ve bazı bloklar boş bırakılmalıdır (çoğu durumda, en azından makro fotoğrafçılık ve yakın çekim portreler). çerçevenin neredeyse tamamını dolduracaktır). Bunu yaparak, öznenin ortalanmış olmasından daha ilginç bir portre yaratırsınız.

Bu kuralı izlemenin çok daha basit ve daha erişilebilir bir yolu, muhtemelen telefonunuzun yerleşik kamerasında veya DSLR'nizde bulunan Üçte Bir Kural ızgarasını kullanmaktır.

İşte kuzenimin oğlunun çektiğim bir resmi. Konunun çerçeveyi nerede doldurup doldurmadığını size göstermek için Üçler Kuralı ızgarasını bunun üzerine yerleştirdim.

Altın Oran

Ayrıca, Altın Spiral'in konuyu neredeyse mükemmel bir şekilde nasıl sardığına bakın:

Altın Oran

Altın Oran, Üçler Kuralı'ndan farklıdır çünkü Üçler Kuralı ızgarası eşit uzunluk ve genişlikte bölümlere sahiptir. Ancak, o kadar yakın ve o kadar kolay ki, fotoğrafçılar bir fotoğrafı oluştururken veya düzenlerken genellikle bunu kullanır.

Toplama

Altın Oran olduğu gibi kullanılabilir veya amaçlarınıza göre uyarlanabilir ve boyut için ince ayar yapılabilir – matematiğin katı ve hızlı kuralları olabilir, ancak yaratıcılığın yoktur. Altın Oran'ı en başından tasarımınıza rehberlik etmesi için kullanabilirsiniz, ancak bunu tasarıma başladıktan sonra ince ayarlar ve iyileştirmeler yapmak için de kullanabilirsiniz. Amaç, bir tasarımı ona uydurmaya zorlamak değil, oranın size rehberlik etmesini sağlamaktır.

Web sitenizin düzeniyle daha da fazla oynamaya hazır mısınız? Duyarlı tasarım oluşturmak için Divi'nin yeni yükseklik ve genişlik seçeneklerini kullanma hakkındaki makalemize göz atın.