Tutarlı ve ölçeklenebilir tasarımlar hem tasarımcının hem de geliştiricinin proje üzerinde çok daha hızlı çalışmasına yardımcı olur. Bunu sağlamanın en iyi yolu ise Grid (Izgara) Sistemi bilmekten ve uygulamaktan geçiyor.
Öyleyse önce grid kavramının ne olduğunu öğrenelim.
Grid Sistemi, arayüz tasarımımızdaki içeriğin tasarım içindeki konumunu düzenlemek için kullanılan bir dizi dikey ve yatay çizgiyi içeren iskelet yapıdır.
Görsel tasarımlarda gridler, tasarımcılar tarafından içerik ve imgeleri okunabilir ve yönetilebilir bir biçimde yapılandırmak için kullanılır. Web tasarımı için grid sistemi genellikle Esnek (Responsive) ve Sabit olarak iki sınıfa ayrılır.
Grid sistemi kullanmak tutarlılık yaratır, birden çok ekran boyutuna sahip birden çok cihaz arasında tutarlı bir deneyim oluşturulmasına yardımcı olur. Tasarımın ömrünü uzatır. Her şey bir grid sistemine uyduğunda tasarımın yeni bir versiyonunu oluşturmak için önceki çözümler kolayca yeniden kullanılabilir.
Peki ilk nereden çıktı bu grid kavramı?
Pek çok erken dönem kültürel eserde olduğu gibi, en eski (korunmuş) yayınlanmış eserler genellikle dini kaynaklardı. Bu kitapların çizilmesi, yazılması ve ciltlenmesi zaman alıyordu.
Bu metinleri kaynak haline getiren ilkel tasarımcılar şimdi olduğu gibi üniversitede ya da herhangi bir yerde temel tasarım eğitimi almıyordu tabii fakat çalışmaları görsel olarak çok uyumlu ve anlaşılır eserlerdi. Peki bu nasıl oluyordu?
Çok eskilere gidiyoruz…
MS 800 civarında Yeni Ahit'in Dört İncil’ini içeren Kells Kitabı’ndan alınan örnekte hem simetri hem de denge görüyoruz. O zamanlar için ızgaralar herhangi bir şeyi düzenlemede tamamen sezgiseldir. Derli toplu bir tasarım için elle tutulur araçlara sahip değillerdi. Bu erken dönem din bilginleri, bu görünmez kılavuzlar sayesinde kutsal metinleri düzenliyor ve diğer insanlar için ulaşılabilir hale getiriyorlardı.
Daha da geriye gidersek eğer Eski Mısır’ı görüyoruz.
Eski Mısırlılar, Oranlar Kanonu(Canon of Proportions) denilen sistem ile karşımıza çıkıyor. Canon of Proportions; insan figürü çizimi için ideal oranlar oluşturmak için tasarlanmış, insan vücudunun parçalarının ölçümlerine dayanan bir matematiksel oranlar sistemidir. Oymalarında ve resimlerinde tasvir edilen figürler bu ızgara kuralına uyularak çizildi.
Batı'da ise, metal hareketli tip(Movable type) baskı 1450 civarında ortaya çıktı ve Gutenberg İncil'inin 1455 civarında yayınlanması, yayıncılık ve baskıda ilk büyük dönüm noktası oldu.
Metal tipin doğası gereği, grid sistem ile çalışmak bir zorunluluk haline geldi.
1917’ye gelindiğinde, grid özellikle Theo van Doesburg ve Piet Mondrian’ın öncü olduğu “Dutch De Stijl” hareketinde kendini göstermişti. Bu akımda renkler, dikey ve yatay kompozisyonlar içerisinde yer buluyordu.
Sonrasında da 1919 yılında Almanya’da kurulan Bauhaus okulu tasarım felsefesi içerisindeki basit ve pratik konseptinde grid sistem kavramını kullandı. Ünlü Bauhaus satrancı gibi…
İkinci Dünya Savaşı'nın bitmesi ve korkunç bir kötülüğün yenilmesiyle, korkunun yerini iyimserlik aldı ve yeni bir akım olan “Tüketimcilik(Consumerism)” ortaya çıktı. Hızlı ekonomik gelişme ile reklam sektörünün refahı giderek artıyordu. Birçok kişi tarafından modern pazarlamanın atalarından biri olarak kabul edilen Paul Rand, pazarlama stratejileri ve daha önce kullanılmayan bir marka bilinci oluşturma stratejisi uygularken bu ızgaralar, bu yeni reklamcılık biçiminde araçsal bir rol oynadı.
Grid’ler sabun kutularının, dergi kapaklarının, televizyon reklamlarının ve daha nicesinin görünen yüzünü şekillendirir oldu. Gelişmekte olan banliyölerde düzgün sıra sıra evler oluşturmak için bile kullanıldılar. Izgaralar artık her yerdeydi! Bu, yeni tüketim toplumuna düzen ve verimlilik getirdi.
1940 ve 50’ler İsviçre ve Almanya'da tasarımcıların İsviçre Tasarımı, tarihçilerin ise Uluslararası Tipografik Stil dediği bir tasarım hareketini getirdi.
Tipografinin anlamı nasıl şekillendirebileceğine özellikle dikkat ederek, metinleri stilize etmeden düzenli ve bütünlüklü bir yapı sağlamak için matematiksel bir grid sistem kullandılar. Bu faydacı felsefeden evrensel olarak kullanılan ve bazen hor görülen yazı tipi Helvetica ortaya çıktı..
Bilgisayarlardan önce, bir grafik tasarımcının çizim masasında bıçaklar gibi katı ağır aletler vardı. Yazı tipi ve görsel yerleştirme süreci fiziksel bir deneyimdi. Hatalar, bilgisayar klavyesinden bir komutla değiştirilemezdi. Bilgisayarların ortaya çıkışı, tasarıma yepyeni bir yaklaşım getirdi. Bugün onlar olmadan bir dünya hayal etmek ne kadar da zor…
Geçmişten günümüze kümülatif olarak gelen bu bilgiler ışığında grid sistemini arayüz tasarımı içerisinde nasıl kullandığımıza bir bakalım.
Grid sistemlerin getirdiği estetik ve dengeyi görmek için günlük hayatımızda çevremize baksak bile yeterli olur. Ofiste dosya dolaplarından bir apartmanın koridorlarına kadar, bir reklam filminden bir kitabın kapağına kadar ızgaralar dünyamızda bir şeyleri daha iyi oluşturmamızı ve daha iyi anlamamızı sağlıyor.
Bir web sitesi ya da mobil uygulama tasarladığınızı düşünün. Bu tasarımları telefon, tablet ya da bilgisayar gibi ekranlarda görüntüleneceğini varsayarak her bir elementi ideal gördüğümüz şekilde yerleştirmemiz gerekiyor. Hem tüm element, renk ve fontlar kendi arasında uyumlu olacak hem de tasarımın görüntüleneceği ekran içerisinde anlaşılır ve kolay olarak konumlanabilecek.
İşte bunu sağlamamız için ihtiyacımız olan şey grid sistemidir. Hem tasarımı yapan için hem de görüntüleyen için iyidir… Şimdi sayfalar içerisindeki düzeni anlamak ve bu düzeni sağlamak için bilmemiz gereken elemanlara bir bakalım.
Sayfa düzeni: Bir web sayfasındaki ya da mobil uygulamadaki tüm görsel öğelerin düzenlenmesidir. Yani sayfa öğelerinin düzenli bir şekilde konumlandırılması yoluyla kullanıcı deneyimini daha iyi bir seviyeye getirmemiz için öğeler arasında ilişki kurmamızdır. Tasarımın önemli bir bileşeni olan düzen, sayfadaki genel görsel dengenin yanı sıra sayfanın hangi öğelerinin en çok dikkat çekeceğini belirler.
İyi bir sayfa düzeni elde etmenin en iyi yolunun bir grid sistemi uygulamak olduğunu söyledik. Peki grid sistemin elemanları neler?
Grid birkaç bölümden oluşur: column(sütun), gutter(oluk) ve margin(kenar boşluğu).
Sütun(Column) stili, içerik alanını kapsayan dikey bölümdür. Web tasarımınızda ne kadar çok sütun varsa, ızgara o kadar esnek olur. Sütunların genişliği tasarımcı tarafından belirlenir. Geleneksel uygulama, web tasarımlarda 12, tabletlerde 8 ve mobil cihazlar için 4’lük sütun kullanmaktır. Sütun genişliği genellikle 60~80 piksel olarak tanımlanır. Sütun genişliği, asıl içerik genişliğini etkileyen önemli bir faktördür.
Oluk(Gutter), sütunlar arasındaki boşluklardır. Olukların görevi, her modülün içeriğini dikey olarak bölmektir. Daha geniş oluklar, daha büyük ekranlı cihazlar için daha uygundur. Daha geniş oluklar, sayfaların aralığını artırmak için kullanılabilir. Böylece sayfa içeriği daha geniş alanda sergilenebilir.
Kenar boşluğu(Margin), içerik ile ekranın sol ve sağ kenarları arasındaki boşluktur. Daha geniş kenar boşlukları, daha büyük ekranlar için daha iyidir çünkü içeriğin etrafında daha fazla beyaz alan oluştururlar. Elementler arasındaki kopukluğu önlemek için ya da bütünlüğü sağlamak için kritik öneme sahiptir.
Yukarıdaki 3 kavramı tanıttıktan sonra, sayfayı bölümlere ayırmak için en sık kullanılan sistem olan 8pt (8 noktalı grid sistemi) kavramını anlatmaya geçebiliriz.
Sayfa öğelerinin boyutunu ve aralığını ayarlamak için 8'lik artışları kullanan grid sistemi… Yani sayfadaki yükseklik veya genişlik, kenar boşlukları veya dolguların tümü 8'in katları olacak şekilde (8, 16, 24, 32, 40, 48, 56, vb.) tasarlanır.
Örneğin iPhone X'i tasarlarken 375×812 boyutunu kullanıyoruz ama iPhone X'in gerçek boyutu 1125×2436 yani bizim tasarımımızın 3 katı boyutunda. Bunun nedeni tasarım boyutunun 2 kat veya 3 kat piksel olarak işlenecek olmasıdır. Örneğin, iPhoneX 3 kat boyutunda işlenecek, iPhone8 veya iPhoneXR 2 katı boyutunda işlenecektir. Bu sebeple, farklı cihaz boyutlarına uyum sağlamak için tasarım için minimum katı(1x) kullanırız.
Yani 16pt'lik bir ikon tasarlıyorsak, dışa aktarılan 2x=32px veya 3x=48px olmalıdır.
Neden 8’li?
Öncelikle, öğe boyutunu veya öğeler arasındaki boşluğu ayarlamak için çift sayıların kullanılması, her boyuttaki ekranda iyi sonuç verir. 8'in seçilmesinin nedeni ise, çoğu ekran boyutunun 8'e bölünebilmesi ve bu durumun da tasarım içerisindeki adaptasyonu kolaylaştırmasıdır. Ek olarak, PC tarafında 2 veya 4 kullanılmaz diyebiliriz çünkü bu, çok küçük tanecikli bir yapı olarak kalır ve bu da tasarımcıların çalışması için elverişsiz bir ortam sağlar.
Evet, 8’li grid sistem en sık kullanılan sistemdir fakat son yıllarda 4’lü grid sistem de kullanılmaktadır. Bunun sebebi, artık mobil cihazlarda daha dar alanlarda çok daha fazla şey yapabilme esnekliğini istememizdir.
Bu yazıda tasarımın iskeleti ve matematiği olan grid sistemi anlatmaya çalıştım. Her ne tasarlarsanız tasarlayın arkasında grid gibi bir sistem olursa bu, hem sizin için hem de tasarımlarınızı paylaştığınız insanlar için harika işler yapmanıza yardımcı olacaktır. Grid sistemini daha detaylı öğrenmek, Figmada grid sistemlerini kullanarak arayüz tasarımınızı geliştirmek isterseniz, online gerçekleşen Figma Eğitimimize bir göz atabilirsiniz.
Kaynaklar:
https://www.interaction-design.org/literature/article/the-grid-system-building-a-solid-design-layout
https://www.lifewire.com/use-grid-system-in-graphic-design
