Editoryal ve web sayfa düzenleri için ızgara tasarımı

Her güçlü düzen görünmeyen bir temel üzerine inşa edilir. Izgara tasarımı işte o görünmeyen iskelettir: Gözünüzün nereye yöneldiğini, ne kadar hızlı hareket ettiğini ve neyi hatırladığını belirleyen sessiz karar verici. Bunu zaten biliyorsunuz. Ancak bir ızgaranın var olduğunu bilmek ile onu bilinçli bir şekilde kullanmak tamamen farklı şeylerdir.

Editoryal tasarımcılar ile UI/UX tasarımcıları, mizanpaj ızgarasına farklı açılardan, farklı kısıtlamalar ve farklı özgürlükleri göz önünde bulundurarak yaklaşırlar. Yine de temel mantık aynıdır. İster bir dergi mizanpajı, ister bir tasarım sistemi, ister onlarca kırılım noktasında tutarlılığını koruyan bir duyarlı sayfa düzeni ızgarası oluşturuyor olun, doğru seçilmiş bir ızgara yalnızca içeriği düzenlemez. Ritim oluşturur, hiyerarşiyi güçlendirir ve düzenin nefes alması gerektiğinde bilinçli olarak bozabileceğiniz bir yapı sunar.

Bu makale, ilk yılınızda öğrendiğiniz temel bilgilerden ziyade, profesyonel tasarımcıların ızgaralar hakkında gerçekte nasıl düşündüğünü ele alıyor.

Sütun sayısı stratejik bir karardır

On iki sütunlu ızgaralar, tek bir nedenden ötürü web tasarımında baskın bir yer tutar: bölünebilirlik. On ikiyi, geride tek başına kalan kesirler kalmadan ikiye, üçe, dörde ve altıya bölebilirsiniz. Bu esneklik, tek bir düzen ızgarasının tek bir tasarım sistemi kapsamında birbirinden son derece farklı içerik türlerini barındırabilmesini sağlar.

Basılı editoryal tasarım ise tarihsel olarak farklı bir yaklaşımı benimsemiştir. Dergi mizanpajlarında çoğunlukla beş, yedi, hatta dokuz sütun kullanılır ve oluk genişlikleri sayfanın toplam genişliğine göre değil, metin sütununa göre belirlenir. Asimetri burada bilinçli bir tasarım tercihidir. Dar bir dış sütun, kenar notları için doğal bir alan oluşturur. İki geniş sütun ile bir dar sütunun birleşimi ise ek bir düzenleme yapmaya gerek kalmadan doğal bir kenar çubuğu oluşturur.

Karar verilmesi gereken nokta her zaman şudur: Hangi içeriği düzenliyorum ve bunun hangi ilişkileri aktarması gerekiyor? Başlangıç noktanız gelenekler değil, bu soru olmalıdır.

Yalnızca sütunlar değil, modüller

Çoğu tasarımcı sütundan sütuna çalışır ve yatay eksene yeterince dikkat etmez. Oysa büyük ölçekli düzenlerin çoğu tam da bu noktada dağılmaya başlar. Modüler bir sayfa düzeni ızgarası, sütun yapısına satır bantları ekleyerek hem yatay hem de dikey yerleşimi aynı anda kontrol eden hücrelerden oluşan bir matris oluşturur.

Bu, özellikle metin, görsel ve açıklamanın aynı temel hizalama mantığını paylaşması gereken editoryal tasarımlarda son derece önemlidir. Görsel modülünüz tam olarak iki satır yüksekliğindeyse ve açıklamanız üçüncü satıra tam hizalanıyorsa, hiçbir öğeyi elle kaydırmanız gerekmez. Her şey zaten doğru yerdedir. İşi sizin yerinize ızgara yapmıştır.

Web arayüzlerinde modüler düşünce, aynı mekânsal sisteme oturan bileşen kütüphaneleriyle ifade edilir. Kartlar, medya blokları ve veri tabloları aynı temel ritmi miras alır. Sonuçta ortaya çıkan ise bir araya getirilmiş gibi değil, üzerinde düşünülmüş hissi veren mizanpajlardır.

Temel ızgaralar ve çoğu tasarımcının bunları yeterince kullanmamasının nedenleri

Sütun ızgaraları, Tablo’nun temel unsurlarıdır. Tipografik hassasiyetin asıl sağlandığı yer ise temel satır ızgaralarıdır; ancak çoğu tasarımcı bunları sonradan düşünülecek bir ayrıntı olarak görür.

Temel satır ızgarası, tüm metni ortak bir dikey ritme oturtur. Gövde metni, görsel açıklamaları, vurgu alıntıları ve başlıklar aynı temel ritim üzerine hizalanır. Doğru uygulandığında görünmezdir. Yanlış uygulandığında ise kimse tam olarak nedenini söyleyemese de düzen hafifçe huzursuz görünür.

Standart yaklaşım, temel satır aralığını gövde metninizin satır aralığına göre belirlemek ve diğer tüm değerleri bu birim üzerinden oluşturmaktır. 16 px gövde metni ve 24 px satır aralığı kullanıyorsanız, temel satır ızgaranız 24 px olur. Başlıklar, en yakın kat değerine yuvarlanır. Bölümler arasındaki boşluklar da aynı değerin katları kullanılarak belirlenir. Kulağa mekanik gelebilir; ancak göz bunu uyum olarak algılar.

Affinity’in Düzenleme Stüdyosu bunu somut hâle getirir. Görünüm menüsünden Temel Satır Izgarası seçeneğini seçip ardından Izgara Aralığı değerini gövde metninizin satır aralığıyla eşleşecek şekilde ayarlayın. Bağlantılı veya bağımsız metin çerçevelerindeki metinler bu ortak ritme otomatik olarak hizalanır. Yoğun metin içeren tüm projelerde bu özelliği etkinleştirdiğinizde, tasarım kararlarının ne kadar hızlı netleştiğini görebilirsiniz. Satır aralığı değerlerinin nasıl çalıştığını daha ayrıntılı öğrenmek için harf aralığı, karakter aralığı ve satır aralığı kılavuzumuza göz atın.

Izgarayı bilinçli olarak ne zaman bozmalısınız?

İyi tasarımcıları harika tasarımcılardan ayıran şey yalnızca bir ızgarayı nasıl kullanacaklarını değil, aynı zamanda ne zaman kullanmayacaklarının doğru ve yaratıcı bir karar olduğunu bilmeleridir.

Bir ızgara tasarımını bozmak, ancak alttaki yapı sağlam olduğunda bilinçli bir tercih olarak algılanır. Sütunun dışına taşıp kenar boşluğuna uzanan bir başlık şaşırtıcıdır; çünkü o kenar boşluğu bunu hak edecek şekilde oluşturulmuştur. Üç sütuna yayılan bir görsel dinamizm yaratır; çünkü diğer tüm öğeler iki sütunluk düzeni korur. Bir kuralın ihlali, ancak okuyucu önce o kuralın varlığını hissedebildiğinde etkisini gösterir.

Editoryal tasarımda bu tür taşmalar genellikle baskın görseller, dikkat çekici vurgu alıntıları veya sayfa genelinde öne çıkan tipografik anlar için kullanılır. Kullanıcı arayüzü tasarımında, bu öğeler; arayüzün genelinde bu vurguyu tekrarlamadan maksimum görsel ağırlık yaratmak istediğiniz “hero” bölümlerinde, öne çıkan içerik başlıklarında ve kullanıcıya yönlendirme akışlarında kullanılır.

Buradaki anahtar kelime ölçülülüktür. Bir kez yaparsanız güçlü bir vurgu olur. Dört kez yaparsanız görsel gürültüye dönüşür.

Uygulamada, duyarlı mizanpaj ızgaraları

Duyarlı sayfa düzeni ızgarası, masaüstü düzeninin daraltılmış hâli değildir. Bu, kötü uygulanmış bir duyarlı sayfa düzeni ızgarasıdır.

Kırılım noktalarıyla değil, sütun aralıklarıyla düşünün

Asıl zorluk, yalnızca sıkıştırılan değil, kırılım noktaları arasında tutarlı şekilde aktarılan bir mekânsal mantık tasarlamaktır. On iki sütunlu bir masaüstü ızgarası genellikle tablette sekiz, mobilde ise dört sütuna iner; ancak içerik gruplarının her görünümde okunabilirliğini koruması gerekir. Masaüstünde on iki sütunun dördünü kaplayan bir öğe, mobilde dört sütunun tamamını kaplayabilir. Bu durumda oransal olarak aynı genişlikte olsa da bağlam içinde çok farklı algılanır.

Asıl zihinsel değişim, piksel genişlikleri yerine oransal ilişkilerle düşünmeye başlamaktır. İçerik gruplarınızın kendine özgü bir mekânsal mantığı vardır. Önce bu mantığı belirleyin, ardından onu koruyacak kırılım noktalarını tanımlayın. Kırılım noktalarını temel almak yerine sütun kapsamlarını temel alarak çalışmak, genellikle daha tutarlı duyarlı sayfa düzeni ızgaraları oluşturur.

Önce en kısıtlayıcı görüntüleme alanını tasarlayın

Mobil görünümden başlayın. Dört sütunlu bir ızgaranın getirdiği disiplin, öncelikleri acımasızca belirlemenizi sağlar. O ekrana giren her öğe, yerini gerçekten hak etmiş olur. Böylece, karmaşık bir masaüstü düzenini küçültmeye çalışmak yerine, bu netlik daha büyük ekranlara taşınır.

Akışkan ızgaralar ve sabit ızgaralar

Sabit ızgaralar, mutlak ölçü birimleri kullanılarak tanımlanan sabit sütun genişliklerine sahiptir. Sabit ızgaralar, mutlak ölçü birimleri kullanılarak tanımlanan sabit sütun genişliklerine sahiptir. Bu iki yaklaşım da doğru çözüm değildir.

Sabit ızgaralar; veri yoğun arayüzler, finans panoları veya piksel düzeyinde hizalamanın kritik olduğu tasarımlar gibi hassas mekânsal kontrol gerektiren durumlarda iyi sonuç verir. Akışkan ızgaralar ise, metnin yeniden düzenlenmesinin beklendiği ve okuma deneyiminin kapsayıcıya uyum sağlaması gereken “içerik öncelikli” düzenlerde daha iyi sonuç verir.

Hibrit yaklaşımlar giderek daha yaygın hale geliyor. Sabit oluklara ve maksimum kapsayıcı genişliğine sahip akıcı bir dış yapı, sabit bir ızgaranın okunabilirlik sınırını korurken, akıcı bir ızgaranın orantısal esnekliğini de sunar. Bu yaklaşım, duyarlı bir sayfa düzeni ızgarası için en pratik temeli oluşturur: Kapsayıcı için bir maksimum genişlik belirleyin ve geri kalan işi yüzde tabanlı sütunlara bırakın.

Editoryal tasarımda ızgaralar: Baskıdan dijitale geçiş

Basılı editoryal tasarımda kullanılan ızgara kuralları, ekrana taşındığında her zaman geçerliliğini korumaz. Basılı ortamda kapsayıcı, fiziksel sayfayı tanımlar. Alt tabaka sabit olduğu için sütunlar, kenar boşlukları ve oluklar da sabittir. Görüntüleme alanı yoktur. Kaydırma yoktur. Baskıya hazırlık yapıyorsanız, baskı tasarım kılavuzumuz tüm hazırlık sürecini kapsamaktadır.

Dijital editoryal tasarım ise farklı bir denge gerektirir. Kapsayıcı sabit değildir. Okuyucular aynı içeriği hem 27 inçlik bir monitörde hem de 5 inçlik bir telefonda görüntüler. Izgara, yayının karakterini korurken her iki duruma da uyum sağlamalıdır.

Başarılı editoryal tasarım sistemlerinin çoğunun ulaştığı çözüm; güçlü bir tipografik ölçeği, masaüstünde genellikle altı ila sekiz sütundan oluşan nispeten sade bir sütun yapısıyla birleştirmektir. Bu yapı daha küçük ekranlara da sorunsuz şekilde uyarlanır Basılı tasarımda karmaşık ızgara bölümlendirmesinin üstlendiği görevi dijitalde tipografik hiyerarşi üstlenir. Bölümler arasındaki ayrımı oluşturmak için, fiziksel sayfa geçişleri yerine beyaz alan daha cömert biçimde kullanılır.

Dijital editoryal tasarım ayrıca, sabit kalan öğeler, paralaks görseller ve kaydırmayla tetiklenen animasyonlar olmak üzere baskının sunamayacağı etkileşimlere de olanak tanır. Bunlar yalnızca mekânsal değil, zamansal anlamda da ızgara tasarımı kararlarıdır. Bilinçli kullanıldıklarında, dijital dünyadaki tam sayfa taşan (full-bleed) bir mizanpajın karşılığıdırlar.

Affinity’de ızgara araçları

Affinity; sütun ızgaraları, temel satır ızgaraları ve belge genelinde kullanılan kılavuzlar üzerinde tam kontrol sağlar. Görünüm >Kenar Boşlukları ve Kılavuzlar menüsünden sayfa düzeni ızgaranızı oluşturabilir; oluk genişliğini, sütun sayısını, aralıkları ve renkleri birbirinden bağımsız olarak ayarlayabilirsiniz. Kurulumunuzu kaybetmeden kılavuz görünümü ile temiz çalışma görünümü arasında geçiş yapabilirsiniz.

Temel ızgara için, Görünüm > Temel Satır Izgarası seçeneğine gidin ve Izgara Aralığı değerini gövde metninizin satır aralığıyla eşleşecek şekilde ayarlayın. Bağlantılı veya ayrı sütunlardaki çerçeve metinleri aynı ritme hizalanır. Tek tek metin çerçeveleri için bağımsız temel ızgaralar da mevcuttur; bu özellik, alt başlıklar veya alıntılar ana metinden farklı bir boyutta yer aldığında kullanışlıdır.

Kılavuzlar, Görünüm > Yaslama seçeneği aracılığıyla kenarlara yaslanabilir böylece öğeler, manuel olarak kaydırmaya gerek kalmadan ızgara tasarımınızla hizalı kalır. Mekânsal tutarlılığın kritik olduğu tüm projelerde bu araçlar, teknik uğraşı azaltır ve dikkatinizi piksel düzeyinde hizalamaya değil, gerçek tasarım kararlarına vermenizi sağlar.

Izgara Tasarımı Hakkında Sıkça Sorulan Sorular

Duyarlı sayfa düzeni ızgarası nedir? Duyarlı bir düzen ızgarası, farklı görüntüleme alanı boyutlarına uyum sağlayan sütun tabanlı bir yapıdır. Sabit piksel genişlikleri kullanmak yerine, içerik arasındaki ilişkileri sütun aralıklarıyla tanımlar. Böylece mizanpaj, mekânsal mantığını kaybetmeden masaüstü, tablet ve mobil cihazlar arasında akla yatan bir şekilde yeniden düzenlenir.

Akışkan ızgara ile sabit ızgara arasındaki fark nedir? Sabit ızgara, görüntü alanı boyutuna göre değişmeyen mutlak sütun genişlikleri kullanır. Akışkan ızgara ise sütunları yüzde değerleriyle tanımlar ve kapsayıcı büyüyüp küçüldükçe orantılı olarak genişleyip daralmasını sağlar. Hibrit yaklaşımlar ise akışkan bir yapıyı sabit maksimum genişliğe sahip bir kapsayıcıyla birleştirerek her iki yaklaşımın avantajlarını sunar.

Izgarayı ne zaman bozmalısınız? Mizanpaj, bilinçli bir görsel kırılma gerektirdiğinde; baskın bir görsel, dikkat çekici bir alıntı ya da güçlü bir tipografik vurgu kullanacağınız zaman. Kural şudur: Bir kez bozduğunuzda bu, bilinçli bir tercih olarak algılanır. Defalarca bozarsanız, tutarsızlık olarak algılanır.

Izgara tasarımı bir kafes değildir. Bu bir taahhüttür. En iyi mizanpajlar, sayfa düzeni ızgarasını aşılması gereken bir kısıtlama olarak değil, tasarım kararlarını yönlendiren bir araç olarak kullanacak kadar iyi anlayan tasarımcılar tarafından oluşturulur.

İster uzun soluklu bir dergi mizanpajı, ister bir bileşen kütüphanesi, ister onlarca kırılım noktasında tutarlılığını koruması gereken duyarlı bir sayfa düzeni ızgarası tasarlıyor olun, temel disiplin aynıdır. Herhangi bir öğeyi yerleştirmeden önce mekânsal ilişkileri tanımlayın. Bu ilişkileri ızgaranın kodlamasını sağlayın. Ardından, tasarıma daha iyi hizmet edeceği durumlarda onu bozabilecek kadar kendinize güvenerek bu yapı içinde çalışın.

Affinity; ister Düzenleme Stüdyosu’nda, ister Vektör Stüdyosu’nda ister her ikisinde birden çalışıyor olun, tüm bunları tek bir yerden gerçekleştirebilmeniz için gerekli araçları sunar. Affinity’nin sayfa düzeni araçları sezgiseldir ve ücretsiz olarak kullanılabilir. Izgara hazır. Sadece ne yapacağınıza karar vermeniz gerekiyor.