Izgara sistemi: tasarımda düzeni kuran görünmez iskelet

Izgara sistemi nedir?

Izgara sistemi (grid system), bir tasarım alanını sütunlar, satırlar ve aralarındaki boşluklarla düzenli bölümlere ayıran, öğelerin bu bölümlere göre yerleştirildiği görünmez bir iskelettir. Gazete ve dergi mizanpajından gelen bu fikir, bugün web siteleri, mobil arayüzler, sunumlar ve basılı işlerde ortak bir düzen aracıdır.

Izgaranın amacı süslemek değil, kararları azaltmaktır. Bir tasarımcı her öğeyi serbestçe yerleştirdiğinde ortaya tutarsız hizalar ve rastgele boşluklar çıkar. Izgara, her öğenin bir sütun sınırına oturmasını sağlar; böylece sayfalar arasında tutarlılık, okuyucu için de öngörülebilir bir akış oluşur.

Görsel hiyerarşiyle ilişkisi de doğrudandır. Izgara öğelerin hizasını ve ritmini belirler; hiyerarşi ise hangi öğenin daha fazla dikkat çekeceğine karar verir. Birlikte okunabilir bir sayfa kurar.

Izgaranın bileşenleri

Temel bir ızgara şu parçalardan oluşur:

• Sütunlar: İçeriğin yerleştiği dikey bölümler. Tasarımcı bir öğeyi bir ya da birkaç sütun genişliğinde yerleştirir.
• Oluklar (gutter): Sütunlar arasındaki boşluklar. Öğelerin birbirine yapışmasını önler ve okunabilirliği korur.
• Kenar boşlukları (margin): İçerik alanını ekran ya da sayfa kenarından ayıran dış boşluk.
• Satırlar ve modüller: Yatay bölünmeler. Satır ve sütunun kesişimiyle oluşan modüller dikey ritim kurmayı kolaylaştırır.
• Taban çizgisi (baseline): Metin satırlarının hizalandığı ortak yatay çizgiler. Özellikle çok sütunlu uzun metinlerde uyumu korur.

Web tasarımında en yaygın düzen, genişliği eşit sütunlara bölen ve çok farklı biçimlerde bölünebilen bir sütun sayısı seçen sistemdir; böylece aynı ızgarada farklı düzen kombinasyonları kurulabilir. Yine de bu seçim zorunlu değildir; arayüz ihtiyacına göre daha az ya da çok sütun kullanılabilir.

Kurgusal bir örnek

Örneğin bir haber sitesinin ana sayfasını ele alalım. Geniş ekranda sayfa çok sütunlu bir ızgarada kurgulanmış olsun. Manşet haberi geniş bir alan, yan sütundaki popüler haberler dar bir alan kaplar. Altta kart biçimli haberler eşit genişlikte sıralanır.

Tablet genişliğinde aynı ızgara daha az sütuna indirilir; kartlar yan yana daha az sığar. Telefonda ise tüm öğeler tek sütuna dizilir. Izgara, öğelerin boyunu ve yerini ekran genişliğine göre tutarlı biçimde değiştirmeyi sağlar.

Burada fark edilmesi gereken, sayfanın her bölümünde aynı sütun çizgilerinin kullanılmasıdır. Manşetin sol kenarı ile altındaki kartın sol kenarı aynı çizgiye oturur; göz bu hizayı fark etmese bile düzen bilinçli ve düzenli hissedilir.

Duyarlı tasarım ve boşluk ölçeği

Modern arayüzlerde ızgara sabit değil, ekran genişliğine duyarlıdır. Belirli genişlik eşiklerinde sütun sayısı, olukların genişliği ve kenar boşlukları değişir. Bu değişimler duyarlı web tasarımının temelini oluşturur.

Izgaranın yanında boşluk ölçeği de önem taşır. Tutarlı bir boşluk sisteminde öğeler arası mesafeler rastgele değil, belirli bir temel birimin katları olarak seçilir. Bu, ızgara ile birlikte görsel ritim sağlar. Yakınlık ilkesi de burada devreye girer: birbirine ait öğeler yakın, ilgisiz öğeler daha uzak yerleştirilir.

Bilinçli olarak ızgarayı bozmak da bir tekniktir. Bir görselin sütun sınırından taşırılması dikkat çekmek için kullanılabilir. Ama bunun etkili olması, bozulan düzenin önce açıkça kurulmuş olmasına bağlıdır.

Sık yapılan hatalar

Başlıca hata, ızgarayı katı bir kafes sanmaktır. Izgara bir kılavuzdur, mutlaka her öğenin tam bir sütuna sığmasını gerektirmez. İçeriğin ihtiyacı ızgaradan önce gelir; ızgara içeriği taşımak için vardır.

Bir başka hata, olukları ihmal etmektir. Dar ya da hiç olmayan oluklar öğeleri birbirine yapıştırır ve sayfayı sıkışık gösterir. Tersine, çok geniş oluklar içeriği dağıtır.

Bir diğeri de mobil görünümü sonradan düşünmektir. Masaüstünde kusursuz görünen bir ızgaranın küçük ekranda nasıl çözüleceği baştan planlanmalıdır. Son olarak, ızgaranın tasarımcı ile geliştirici arasında paylaşılmaması sık bir sorundur: tasarım aracında kullanılan sütun yapısı kodda farklı uygulanırsa devir teslimde tutarsızlık doğar.

Mindset programlarında nerede çalışılır?

Mindset kataloğundaki "Grid Sistemleri ve Görsel Hiyerarşi" eğitiminin modülleri ızgara sistemlerinin kurulumu, boşluk ölçeği ve yakınlık, görsel hiyerarşi ve ağırlık, kompozisyon ve kritik başlıklarından oluşur.