Grid Sistemleri: Hangi Düzeni Ne Zaman Seçmeli

Grid, iyi kurulduğunda kimsenin fark etmediği bir iskelettir. Zor olan ızgara kullanmak değil, hangi türün eldeki içeriğe uyduğuna karar vermek: aynı sayfada hem uzun metin hem görsel vitrin varsa tek bir sistem ikisini birden taşımaz. Sütun sayısı da göründüğünden daha matematiksel bir karardır.

Grid ne yapar, ne yapmaz

Izgaranın işi, hizalama kararlarını tek tek vermekten kurtarmak. Bir öğeyi nereye koyacağınıza her seferinde bakarak karar veriyorsanız ortada grid yok, tesadüf var. Massimo Vignelli grid sistemlerini tasarımın görünmeyen iç çamaşırına benzetirdi: dışarıdan belli olmaz, ama duruşu o belirler.

Yapmadığı şey de var. Grid hiyerarşi üretmez. Hangi başlığın önce okunacağına tipografi ve boşluk karar verir; ızgara yalnızca o kararları tutarlı biçimde tekrarlar.

Üçte bir kuralı ve altın oran

Üçte bir kuralı kompozisyonu yatay ve dikeyde üçe böler, odak noktaları kesişimlere oturur. Fotoğrafta ve tek görselli kapak düzenlerinde işe yarar. Peki ya sekiz kartlık bir listede? Orada kesişim diye bir şey kalmaz, kural boşa döner.

Altın oran ise tasarımda çoğu zaman sonradan giydirilir: düzen kurulur, ardından 1,618 oranı üstüne denk getirilir. Gözün bu orana özel bir tepki verdiği iddiası da sanıldığı kadar sağlam değil. Yine de sabit bir orana bağlı kalmak, sayfa boyunca ölçüleri gelişigüzel seçmekten iyidir; değeri güzellikte değil, tutarlılıkta.

Tek sütun, çok sütun, modüler

Metin ağırlıklı her şey tek sütunla başlar. Blog yazısı, makale, sözleşme: okuma satır uzunluğuna bağlıdır ve sütun eklemek onu bozar. Çok sütunlu ızgara, metinle görselin yan yana yürüdüğü dergi tadındaki düzenler için. Modüler ızgara, yani hem yatay hem dikey eşit bloklar, galeri ve portföy gibi elemanların birbirinin eşiti olduğu yerlerde.

Seçim aslında tek bir soruya iniyor: içerik parçaları eşit ağırlıkta mı, yoksa aralarında hiyerarşi mi var? Eşitse modüler, değilse sütun genişlikleri farklılaşabilen bir sistem.

Baseline grid ve biriken kayma

Yatay ızgara az konuşulur ama en çabuk bozulan odur. Temel çizgi 24 piksel ise, sayfadaki her öğenin kapladığı toplam dikey alanın 24'ün katı olması gerekir. Satır yüksekliği 30 piksel olan bir başlık koyduğunuzda altındaki her şey 6 piksel kayar, bir sonraki başlıkta 12, derken iki sütun arasındaki hizalama tamamen dağılır. Kayma tek başına görünmez, biriktiği için görünür.

Neden 12 sütun

Duyarlı çerçevelerin çoğunun 12 sütunda buluşması estetik değil, bölünebilirlik meselesi. 12 sayısı 2, 3, 4 ve 6'ya tam bölünür; yani yarım, üçte bir, çeyrek ve altıda bir düzenleri aynı ızgarada kurulabilir. 16 sütunda üçe bölme kaybolur, 10 sütunda dörde bölme. Vignelli'nin 24 bloğu da aynı mantığın daha ince adımlı hali.

Bunu bir projede tersinden gördüm: 12 sütunluk düzeni beşe bölmek isteyen bir tasarım, tarayıcıya göre yuvarlanan kesirli sütun genişlikleri yüzünden her ekranda bir piksel oynayan kenarlar üretti.

Kırılım noktaları ve sık hatalar

Sütun sayısını cihaza göre değiştirmek yeterli değil; asıl karar, hangi öğenin hangi genişlikte satır atlayacağı. Kart ızgaralarında en sık görülen hata, üç sütundan tek sütuna geçerken araya iki sütunlu bir kademe koymamak: tablet genişliğinde ya kartlar gereksiz uzar ya da metin sıkışır.

Diğer iki klasik: ızgarayı içeriğe değil, içeriği ızgaraya uydurmak; ve boşluğu artık alan sanmak. Sütun aralığı daraldığında iki ayrı sütundaki metin tek bir paragraf gibi okunmaya başlar.

Izgarayı kırmak

Peki ya bilerek dışına taşmak? İşe yarıyor, ama tek şartla: sayfanın geri kalanı ızgaraya sadıksa. Tek bir görselin sütun sınırını aşması dikkat çeker, çünkü karşılaştırılacak bir düzen vardır. Her şey serbestse taşma diye bir şey de kalmaz.