Grid ve tipografik hiyerarşi

Açılış sahnesi

Bir nota kâğıdına bak. Beş yatay çizgi var.

O çizgiler müzik değil. Kimse onları duymuyor. Konserde çalınmıyorlar, kayıtta yoklar, dinleyici varlıklarından haberdar bile değil.

Ama o beş çizgi olmadan nota bir işaret olmaktan çıkar. Aynı siyah nokta, çizgilerin neresinde durduğuna göre başka bir ses olur. Çizgi yoksa nokta hiçbir şey değildir.

Şimdi bir de şunu düşün: caz müzisyeni ölçüyü esnetir. Vuruşun biraz önüne ya da arkasına düşer ve bu, müziğin en güzel yeridir.

Ama o müzisyen ölçüyü bilmeden esnetemez. Esnetilen şey, orada olduğu bilinen bir şeydir. Ölçüyü hiç öğrenmemiş biri aynı notaya bastığında ortaya esneme değil, hata çıkar.

Bugünkü ders, o beş çizginin dersi.

Bu derste ne olacak

Önce grid'in ne olduğunu ve ne işe yaradığını göreceğiz; altı ayrı yararı var ve bunların çoğu estetikle ilgili değil. Sonra grid türlerini konuşacağız: tek sütun, çok sütun, modüler, taban çizgisi ve hiyerarşik. Ardından tipografik hiyerarşiye geçeceğiz ve şunu göreceğiz: iyi bir hiyerarşi yalnızca başlığı büyütmez. En sonda dersin asıl meselesine geleceğiz — grid'i bozmak. On altı filmden sahnelerle bunu okuyacağız. Ders bittiğinde bir sayfanın altındaki yapıyı çizebiliyor ve o yapıdan bilerek sapabiliyor olacaksın.

Sıfır noktası

Nota kâğıdına geri dönelim, çünkü bu benzetme ders boyunca bizimle kalacak.

Buradaki anahtar kelime "önceden"dir.

Grid'siz çalışan biri her öğe için ayrı bir karar verir. Bu başlık nereye gelsin? Peki bu görsel? Peki aradaki boşluk ne kadar olsun? Her soru tek tek cevaplanır ve her cevap biraz farklı çıkar.

Grid'li çalışan biri bu kararları bir kez verir ve sonra uygular. Kazanılan şey zaman değildir; kazanılan şey tutarlılıktır.

Grid'in sağladığı yararlar altı tanedir ve saymaya değer.

Birincisi hizalama. İkincisi tekrar ve tutarlılık. Üçüncüsü ekipler arası ortak üretim; bir grid varsa üç farklı tasarımcı aynı dili konuşur. Dördüncüsü farklı sayfalarda ritim. Beşincisi farklı ekran boyutlarına dönüşüm için bir temel. Altıncısı ise en çok ihmal edileni: bilinçli sapma için referans.

O altıncı maddeyi aklında tut. Dersin sonunda oraya döneceğiz.

Bu benzetme bir yere kadar doğru. Şurada bozulur: nota kâğıdındaki beş çizgi evrenseldir ve değişmez. Grid ise her proje için yeniden kurulur. Yani sen hem müzisyensin hem de kâğıdı çizen kişi. Bu, işi hem daha özgür hem daha zor yapar.

Mekanizma

Grid türleri ve hangi problemi çözdükleri

Beş temel grid türü var ve her biri farklı bir içerik problemine cevap verir.

Tek sütunlu grid en basitidir ve en çok küçümsenendir. Uzun ve tek türde metin için, yani bir makale ya da bir ders metni için en iyi çözümdür. Buradaki tek karar satır uzunluğudur ve o karar bile başlı başına bir tasarımdır.

Çok sütunlu grid, farklı türde içerikler yan yana duracağında kullanılır. Gazete ve dergi buradan çıkar. Sütun sayısı arttıkça esneklik artar ama yönetim zorlaşır; on iki sütunlu bir sistem neredeyse her düzeni kurar, ama disiplin olmadan kaosa döner.

Modüler grid, sütunları yatay çizgilerle de bölerek kutucuklar üretir. Katalog, program çizelgesi ve veri yoğun sayfalar için doğru araçtır. Modüler grid'in gücü şudur: farklı boyutlardaki öğeler yine de aynı sisteme oturur.

Hiyerarşik grid ise düzenli olmayan, içeriğin kendi yapısına göre kurulan sistemdir. Her sayfanın farklı olduğu işlerde kullanılır ve en zor yönetilenidir, çünkü kuralı içeriğin kendisi belirler.

Tipografik hiyerarşi: yalnızca büyütmek değil

Şimdi ikinci yarıya geçelim.

Önceki modülde hiyerarşiyi genel olarak konuşmuştuk ve dört alet ailesinden söz etmiştik: ölçü, ton, yer ve yoğunluk. Şimdi aynı şeyi yalnızca yazıyla yapıyoruz.

Bu yedi değişkenin en güçlüsü hangisi diye sorarsan, cevabım şaşırtıcı gelebilir: boşluk ve tekrar.

Boşluk, çünkü bir başlığın önemi çoğu zaman puntosundan değil, üstündeki boşluktan gelir. Aynı başlık, üstüne iki katı boşluk verildiğinde büyütülmeden büyümüş olur.

Tekrar, çünkü hiyerarşi tek bir sayfada değil, sayfalar arasında öğrenilir. Okuyucu ikinci sayfada aynı düzeni gördüğünde kuralı çözer ve bundan sonra hızlanır. Her sayfada farklı bir hiyerarşi kuran bir yayın, okuyucusunu her seferinde sıfırdan başlatır.

Pratik bir kural vereyim. Bir metinde üçten fazla düzey varsa, muhtemelen içeriğin kendisi düzenlenmemiştir. Beş başlık düzeyi kurmaya çalışan bir tasarımcı, aslında bir yazı işleri problemini tipografiyle çözmeye çalışıyordur ve çözemez.

Grid'i bozmak

Şimdi dersin asıl meselesine geliyoruz.

Bu iki cümle arasındaki mesafe, bu meslekteki en önemli mesafelerden biri.

Çünkü grid'e hiç uymayan bir sayfa ile grid'i bilerek bozan bir sayfa, uzaktan bakıldığında benzeyebilir. Aradaki farkı gören kişi, yalnızca ikisini de yapabilen kişidir.

Fark şurada: bilinçli sapma, bir referansa göre yapılır. Bir öğe sütunun dışına taşıyorsa, ne kadar taştığı ölçülmüştür ve o taşma bir anlam taşır. Rastlantısal yerleşimde ise ölçü yoktur; öğe orada, çünkü oraya konmuştur.

Okuyucu bu farkı bilinçli olarak fark etmez ama hisseder. Bir önceki modülde süreklilik ilkesini konuşmuştuk: göz kesintisiz çizgileri ve yönleri izler, hizalama bozulduğunda kimse ölçemese de herkes rahatsız olur. Bilinçli sapma bu rahatsızlığı bir araç olarak kullanır; rastlantısal yerleşim ise onu istemeden üretir.

Pratik yöntem şudur: önce grid'i kur ve ona tam uy. Sonra tek bir öğeyi bilerek dışarı çıkar. Bir tane. O tek öğe, bütün sayfanın en yüksek sesli yeri olur ve bunu hiçbir büyütme sağlayamaz.

Teoriyi bırakıp perdeye bakalım.

Filmlerden okuma

Örnekleri üç grupta topladım. Önce yapının kendisinin konu olduğu filmler. Sonra tekrarın ritim ürettiği filmler. En sonda da ızgarayı bilerek parçalayanlar.

Önce yapı konu oluyor

Sonra tekrar ritim üretiyor

Şimdi iki animasyon ve iki belgesel

Ve ızgarayı bilerek parçalayan ikisi

Usta katmanı

Az önce grid'i bozmak için önce kurmayı önerdim. İşin aslı biraz daha ince: bir grid'in en önemli kararı sütun sayısı değil, boşluk ölçüsüdür.

Sütun sayısı esneklik verir ama karakteri belirlemez. Karakteri belirleyen şey, sütunlar arasındaki boşluk ile kenar boşluğunun oranıdır. Kenar boşluğu iç boşluktan belirgin biçimde genişse sayfa sakin ve pahalı durur; dar olduğunda yoğun ve ekonomik görünür. İki farklı yayın aynı on iki sütunlu sistemi kullanıp tamamen farklı hissettirebilir ve fark tam olarak buradadır.

İkinci nüans ekranla ilgili. Basılı sayfada grid sabit bir ölçüye oturur; ekranda ise ölçü sürekli değişir. Bu yüzden ekran için kurulan grid bir yerleşim değil, bir kurallar kümesidir: hangi öğe hangi genişlikte hangi sütuna düşer, ne zaman alt alta geçer. Basılı işten gelen tasarımcının en sık yaptığı hata, ekran için tek bir güzel yerleşim tasarlayıp diğer boyutları sonraya bırakmaktır. Doğru sıra tersidir: önce en dar hâl çözülür, sonra genişletilir. Çünkü en dar hâl, hiyerarşiyi en acımasız biçimde sınar.

Üçüncüsü tarihsel bir sebep. Çok sütunlu grid sistemleri, matbaanın ve gazetenin fiziksel kısıtlarından doğdu; kâğıt eni, kurşun harf ölçüleri ve baskı makinesi. Yani bugün estetik bir gelenek gibi görünen şey, aslında donmuş bir üretim kısıtıdır. Bunu bilmek özgürleştirir: bir kuralı devraldığında sorulacak soru şudur, bu kuralı doğuran kısıt hâlâ var mı? Bazılarında vardır, çoğunda yoktur.

Dördüncüsü bir meslek pratiği. Bir sayfanın grid'i olup olmadığını anlamanın en hızlı yolu, sayfayı ters çevirip kenarlara bakmaktır. Hizalanan kenarlar hemen görünür. Bu, önceki modülde kullandığımız ters çevirme aletinin üçüncü işidir; orada kompozisyon dengesine bakıyorduk, burada yapıya bakıyoruz. Aynı alet, farklı soru.

Yaygın hatalar ve yanlış bilinenler

Uygulama — kendin dene

Kısa bir makale metni seç. Başlık, alt başlık, giriş paragrafı, üç ara başlık, gövde metni ve bir de yazar adı olsun.

Şimdi aynı metni üç kez düzenle. Birincisi tek sütunlu grid. İkincisi üç sütunlu. Üçüncüsü modüler, yani sütunları yatay olarak da bölen bir sistem.

Her düzende önce ızgarayı ince çizgilerle çiz, sonra içeriği oturt. Çizgileri silme; görünsünler.

Dördüncü adım asıl görev. Üç düzenden birini seç ve tek bir öğeyi bilerek grid'in dışına çıkar. Yalnız bir tane. Yanına, neden o öğeyi seçtiğini ve ne kadar taşırdığını yaz.

Şuna dikkat et: üç düzenden hangisinin en hızlı çıktığına bak. Çoğu insan için üç sütunlu en hızlıdır, çünkü karar zaten verilmiştir. Tek sütunlu ise en zorudur, çünkü saklanacak yer yoktur; orada yalnızca satır uzunluğu ve boşluk vardır. Asıl dersi o düzen veriyor.

Kilit özet

Birincisi. Grid, içeriğin yerleşimini yöneten görünmez yapıdır. Kazandırdığı şey zaman değil, tutarlılıktır.

İkincisi. Beş temel tür farklı problemleri çözer: tek sütun uzun metni, çok sütun karışık içeriği, modüler veri yoğunluğunu, taban çizgisi hizalamayı, hiyerarşik ise düzensiz içeriği.

Üçüncüsü. Tipografik hiyerarşi yalnızca büyütmek değildir. En güçlü iki değişken boşluk ve tekrardır; başlığın önemi çoğu zaman puntosundan değil üstündeki boşluktan gelir.

Dördüncüsü. Üçten fazla hiyerarşi düzeyi gerekiyorsa sorun tasarımda değil, düzenlenmemiş içeriktedir.

Beşincisi. Grid bir hapishane değildir, ama grid'i anlamadan yapılan özgür yerleşim rastlantısaldır. Sapma ancak bir referansa göre anlam taşır.

Sonraki derse köprü

Bu dersle sayfanın iskeletini kurduk. Renk, yazı ve yapı elimizde.

Ama sayfada henüz bir şey eksik ve o şey genellikle en çok yer kaplayanı: görüntünün kendisi. Bir fotoğraf mı, bir illüstrasyon mu, bir kolaj mı olacak? Ve daha önemlisi, o görüntü ne iş yapacak?

Çünkü imge seçimi "hangisi daha güzel" sorusuyla yapılamaz. Sonraki derste modül üçü kapatıyoruz: fotoğraf, illüstrasyon ve imge seçimi.