Altın Oran Arayüz Tasarımında Nerede İşler, Nerede İşlemez
Altın oran arayüz tasarımında bir estetik garantisi gibi sunulur: 1,618'i tutturursan düzenin doğru görünür. Sayıda sorun yok; sorun onu bir tipografi ölçeğine ya da kolon sistemine oturtmaya kalkınca çıkıyor. Oran çoğu durumda ya hesabın içinde şişiyor ya da yuvarlanırken komşu oranlardan ayırt edilemez hale geliyor.
1,618 ve “göz bunu sever” iddiası
Altın oran, bir uzunluğu ikiye bölerken büyük parçanın küçüğe oranı bütünün büyük parçaya oranına eşit olacak şekilde kurulan bölünmedir; sayısal karşılığı 1,618. Mimarlık ve resim tarihinden örnekler sayılırken çoğu zaman atlanan şey, bu örneklerin büyük kısmının sonradan ölçülüp orana yakın bulunmuş olması, tasarlanırken orana göre kurulmuş olması değil.
“İnsan beyni bu oranı doğal olarak daha güzel bulur” cümlesi kaynak gösterilmeden dolaşıyor. Peki ölçülebilir mi? 1200 piksellik bir kapsayıcıda altın oranlı bölünme 742 piksele denk gelir, üçte iki kuralı 800 piksele. Bir ziyaretçinin aradaki 58 pikseli fark edip biri lehine tercih belirtmesini beklemek fazla iyimser.
Tipografi: ölçek iki adımda şişiyor
En çok tavsiye edilen kullanım, gövde metnini 1,618 ile çarpıp başlık boyutunu bulmak. 16 pikselden başlayınca 25,9 çıkar, yuvarlayıp 26 yaparsın, sonuç makul bir h2. Sorun bir sonraki adımda: aynı oranı tekrar uygularsan 41,9, bir kez daha uygularsan 67,8 piksele çıkarsın.
- 1,618 ölçeği: 16 / 26 / 42 / 68 / 110
- 1,25 ölçeği: 16 / 20 / 25 / 31 / 39
h2'den h6'ya beş başlık seviyesi gereken bir arayüzde ilk ölçek üçüncü adımda kullanılamaz hale gelir; kalan seviyeler için ya oranı bozarsın ya da başlıkları birbirinden ayırt edilemeyecek kadar sıkıştırırsın. 1,618'i yalnızca tek bir atlama için, gövde ile ana başlık arasında kullanmak, tüm hiyerarşiyi ondan üretmekten daha sağlam duruyor. Satır yüksekliğinde ise oran tesadüfen iyi bir yere düşüyor: 16 piksel metin için 1,618 satır yüksekliği 25,9 piksel eder, okunabilir aralığın ortası. Altın oran tipografi hesaplayıcıları bu iki değeri hızlıca denemeye yeter.
Kolon sistemi 61,8'i kabul etmiyor
Sayfayı altın oranla ikiye bölmek ana kolona yüzde 61,8, yan alana yüzde 38,2 vermek demek. On iki kolonlu bir grid kullanıyorsan bu 7,42 kolona denk gelir ve kolonun kesirli hali yok: 7 kolona yuvarlarsan yüzde 58,3, 8 kolona yuvarlarsan yüzde 66,7 elde edersin. İkisi de altın oran değil, ikincisi klasik üçte iki bölünmesinin aynısı.
Grid'e bağlı bir düzende oran ilk yuvarlamada kaybolur. On altı kolonluk bir sistemde 9,89 çıkar, 10 kolon yüzde 62,5 ile çok daha yakın durur. Peki grid'i hiç kullanmazsan? O zaman oranı doğrudan yazabilirsin:
.layout { display: grid; grid-template-columns: 1.618fr 1fr; gap: 2rem; }Bu, iki kolonun oranını boşluktan arta kalan alanda birebir korur. Mobilde kolonlar alt alta geçtiğinde oran tamamen devre dışı kalır, yani altın oranlı bir düzen kuruyorsan onun yalnızca belirli bir genişliğin üstünde var olduğunu bilerek kur.
Görselde oran gerçekten duruyor
Oranın en az dirençle uygulandığı yer tek bir dikdörtgen: kapak görseli, kart üstü resim, hero alanı. Yuvarlanacak kolon, bölünecek hiyerarşi yok; 1,618:1 en boy oranını doğrudan verebilirsin. Bu 16:9'dan belirgin biçimde farklı mı? 16:9 oranı 1,778, 3:2 ise 1,5; altın oran bu ikisinin arasında ve 3:2'ye daha yakın. Görsel işleme hattın zaten 3:2 üretiyorsa yeni bir oran tanımlamanın getirisi sınırlı kalır.
Oranı nerede bırakmalı
Altın oran, elinde başlangıç değeri olmayan durumlar için işe yarar bir ilk tahmin: bir kartın yüksekliği, bir görselin çerçevesi, gövdeyle ana başlık arasındaki tek atlama. Sistem üretecine dönüştürdüğünde, yani tüm tipografi ölçeğini ya da grid'i ondan türettiğinde hesap ya şişiyor ya yuvarlanırken kayboluyor.
Bir tasarım kararını “altın oran böyle söylüyor” diye savunmam. Düzen 742 pikselde iyi görünüyorsa 742'de kalır, oran öyle gerektirdiği için değil; 800'de daha iyi görünüyorsa 800 olur ve kimse oranı sormaz.