Grid Sistemini Web Tasarımda Nasıl Kullanıyoruz? | Ömer Korkmaz

Grid Sistemini Web Tasarımda Nasıl Kullanıyoruz?

Uzun süredir kullanılan bir web tasarım iskelet sistemi diyebiliriz ‘ grid ‘ için. Ana hedefi, site içerisinde kullanılan objelerin birbirleri ile hiza ve oranlarının eş değer olması, daha nizami bir görünüm sağlanması ve responsive design için front end aşamasında verimlilik oluşturmasıdır.Ama biliyoruz ki asıl duymak istediğimiz cevap bu değil. Çok fazla sorulan bir soru ve genelde çok alengirli ve teknik terimler ile anlatıldığı için daha çok kafa karışıklığına sebebiyet veren bir konu grid. Bu yüzden çok net, kısa ve anlayabileceğiniz şekilde aktarmaya çalışalım.

web-tasarımda-grid-sistemi-1

Görselde gördüğünüz üzre grid sistemin temel mantığı bu şekilde. Mesela örnekteki sistem 960px genişlik baz alınarak yapılmış 12 kolonlu 10px ara boşluklu bir grid sistemi. Site içerisindeki tüm alanlar bu sistem sayesinde birbiri ile orantılı, birbirinin katları şeklinde konumlandırılmış ve düzenli bir sayfa iskeleti meydana getirilmiş. Yani kullanılan grid tasarım ibaresi yanlış. Grid bir yerleşim sistemidir. Bu sistem doğrultusunda tasarımınızı yaparsınız.

Peki Tasarımı Yaparken Bu Sistemi Nasıl Oluşturacağım?

Tasarımcıları ilgilendiren asıl kısım bu. Grid sistemi nasıl, hangi araçlar ile oluşturup sayfamızı ne şekilde tasarlayacağız? Bunun için bir çok alternatif mevcut. İlk olarak 960 grid systemi oluşturdular. Ancak büyüyen ekran çözünürlükleri sonrasında 1200 grid system yaygınlaştı. 2010 yılı sonrasında kullanıcıların %76 ‘sı 1280 x 1024px ve üzeri çözünürlüğe geçiş yaptı. Bu yüzden sitemizi 960px genişliğinde oluşturup sıkışık bir yapı meydana getirmemize gerek yok. 1200 lük yapıyı kullanarak daha geniş ve verimli bir tasarım oluşturabiliriz.

Yaygın olarak kullanılan  1200px.com  ve  Grid System Generator  var. Siteye girdiğimizde site genişliği, kolon ve margin değerlerini girerek işlemimizi gerçekleştiriyoruz.

*Edit – gridsystemgenerator.com ‘a bir süredir ulaşılamadığı için yerine 1200px.com ya da responsivegridsystem.com kullanılabilir.

web-tasarımda-grid-sistemi-2

Mesela Grid System Generator ‘ü baz alalım. Ekranda bizi ilgilendiren alan sarı ile işaretlenmiş iki alan. Yukarıdaki değerlerin yer aldığı alandaki widht kısmına sitemizin genişliğini yazıyoruz.

Bunu 1200 olarak belirleyelim. Grid deki kolon sayısını belirlemek için No. of colomns kutusuna 12 yada 16 değerlerini girelim. Genelde kullanım kolaylığı sağlayan genel iskelet yapısı 12 ya da 16 kolondan oluşur. Margin left ve margin right sağ sol boşluk genişlikleridir. Buna da default ta olduğu gibi 10px değeri verebilirsiniz. Generate butonuna tıkladığınızda bize aşağıdaki kısımda girdiğimiz değerlere ait grid systemini verecektir.

Gördüğünüz gibi 80px ve katlarından meydana gelen kolon yapısı oluşturdu. Bunu front end yapan arkadaşlar direk CSS olarak kullanabilir ya da tasarımcı arkadaşlar bu oluşturulan sistemi png olarak photoshop a aktarıp iskelet üzerinde çalışmasını gerçekleştirebilir. Bunun için download butonuna tıklayıp gerekli dosyaları indirmeniz yeterli.

web-tasarımda-grid-3

İndirilen klasörlerden templates içerisindeki .png yi direk photoshop un içerisine aktarıp tasarımınızı bu görsel üzerinde çalışabilirsiniz. Yada guide line ları yerleştirerek tasarımımıza başlayabiliriz.

web-tasarımda-grid-4

Peki Neden Grid Sistem

Grid sistem sayesinde tasarımlarınız belli bir oran doğrultusunda ilerleyecek ve görünüm açısından karmaşadan uzak olacaktır. Ayrıca responsive design için yani % ‘lik ler ile çalışmalarımızda işimizi kolaylaştırıp front end ayağında daha verimli bir süreç işleyecek ve tasarımın tüm cihazlara uyarlanması aşamasında görsel olarak bütünlüğümüzü koruyacağız.

web-tasarımda-grid-5

+Ekleme

Eğer site Bootstrap ile responsive olarak hazırlanacaksa, tasarımcı arkadaşlar için 3 grid gerekecek. Genelde web versiyonu yapılıp kodlamaya o şekil aktarılıp front end ‘ci arkadaşlara emanet ediyor diğer versiyonlar ama bu yanlış bir hareket 🙂 Aşağıdaki web, tablet ve mobil şablonlarını indirerek tasarımınızı webden mobile ilerleyecek şekilde hazırlayıp daha sonrasında yazılıma geçilmesi uygun olacaktır.

16,5 KB – Web, Mobile, Tablet – PSD

hemen-indir

 

 

 

Sorularınızı yorum olarak ekleyebilirsiniz.

Selamlar.

2 Comments

Leave a Reply

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Sen gerçek misin? * Time limit is exhausted. Please reload CAPTCHA.