Birçok tasarımcı ve müşteri, mevcut alanın çoğunu kullanmaya ve onu içerikle doldurmaya inanırken, anlayamadıkları şey, içerik ile kullanıcı arayüzü diğer öğeleri arasındaki boşluğun önemidir. White space, web sayfasının daha çekici görünmesini sağlamada ayrıca içinde sakin ve sofistike bir görünüm vermede hayati bir rol oynar.
White Space Nedir?
White space sayfanın bölümleri arasında veya harfler arasındaki boşluğa kadar farklı öğeler arasındaki boşluktur. Çoğu durumda, belirli ayırma öğelerini yerleştirmeye gerek kalmadan bir sayfanın daha kolay ve nihayetinde daha hızlı taranması için white space (negatif alan olarak da adlandırılır) kullanılır.
Karşılaştırma amacıyla, doldurulan boşluğa pozitif alan denir. Negatif alan aslında pozitif alanın ne olduğunu şekillendirmeye ve tanımlamaya yardımcı olur. Negatif alanın beyaz renkte olması şart değildir.
White Space Elemanları
- Grafiklerin ve görsellerin etrafındaki boşluk
- Kenar boşluğu ve İç boşluk (Margin ve Padding)
- Satır aralığı ve harf boşluğu
- Sütunlar arası boşluk (Gutter)
White Space Çeşitleri
“White space”in iki seviyesi vardır. Bunlar sırasıyla çekirdek elemanlar arasındaki boşluk ve daha küçük elemanlar arasındaki boşlukla ilgili makro ve mikro “white space“lerdir.
Tasarımcıların sayfanın altında veya üstünde, yanlarda ve daha büyük nesnelerin arasında bıraktığı boşluk makro beyaz alanıdır ve şunları içerir:
- Kenar boşluğu (Margin)
- Sütunlar arası boşluk (Gutter)
- İç boşluk (Padding)
Ancak, metindeki satırlar arasındaki boşluklar ve kelimeler arasındaki boşluklar da “white space”tir. Küçük ama önemli alana mikro beyaz alan denir:
- Satır aralığı
- Harf boşluğu
Neden White Space Kullanmalıyız?
Genel hiyerarşi
Herkes nesnelerin yerli yerinde göründüğü, hassas bir şekilde düzenlemesi yapılmış bir web sitesini deneyimlemek ister. Peki bu düzenli görünümü nasıl elde ederiz?
Boşluklar kullanılarak… Yerinde kullanılan boşluklar, öğeleri açıkça ayırabilir ve site organizasyonunu iyileştirebilir.
White space bilgileri ayırdığı için kullanıcının sayfada yolunu bulmasını sağlar.
Odağı Ayarlama
Bir öğeyi çevreleyen boşluk o öğeyi vurgular. Kullanıcının dikkatini daha uzun süre tutabilecekleri için bazı öğeleri diğerlerinden ayırmaktan korkulmamalıdır. Yakınlarda başka hiçbir şey olmadığı için kullanıcılar dikkatlerini sayfanın belirli bir bölümüne odaklayacaktır. Beyaz alan, kullanıcıyı rahatsız etmeden öğeler arasında görünmez sınırlar yaratır ve bu gerçekten çok etkilidir.
Nesneleri Gruplandırma
Çok fazla boşluk bırakırsanız, içeriğin bağlantısı kesilebilir. Boşluğu nasıl ve ne zaman kullanacağınızı bilmiyorsanız sayfanın içeriği dağılabilir.
Birbirine yakın olan nesneler bir grup ya da birim olarak algılanır. Birbirinden uzak olan, bir boşlukla ayrılan öğeler ayrı ayrı algılanacaktır. Gruplamak istenilen elemanların arasında daha az boşluk kullanılmalıdır.
Optimize Edilmiş Metinler
Sitenizin içeriği ne kadar kaliteli olursa olsun, okunabilirliği az ise kimse orada vakit geçirmek istemeyecektir.
Satır ve harf boşluğunun olmaması ne kadar okunabilirliği azaltıyorsa, boşlukta aşırıya kaçınılması da bir o kadar okunabilirliği azaltır. Her iki uç örnekte de okunabilirliğin olmamasının yanı sıra görsel deneyim de hoş olmayacaktır.
Kendi deneyimimden yola çıkarak, satır aralığında x1.6 oranını tavsiye ediyorum. Yani 16 punto bir meyinde 16×1.6=25.6 punto satır aralığı kullanıyorum.
Harf boşluklarında ise, “font”ların tasarlanırken kendilerine ait bir boşlukları olduğu için genellikle kullanmamaya çalışıyorum.
Sade bir tasarım
Son 10 yılda “yalın”, “sade”, “clean” tasarım trend oldu. Yalın web sitelerinin veya tasarımların sade ve güzel olmasında white space kullanımının olmasının büyük bir payı var. Daha profesyonel görünen, daha mesajı olduğu gibi aktaran ve daha sofistike bir his yaratan bu yalın tasarımlar için negatif alan kullanmaktan kaçınmamak gerekiyor.
Aynı şey logo tasarımları için de geçerli. Logo tasarımlarında da bunu az çok bilen tasarımcılar tarafından negatif alan sıklıkla kullanılır. Logo yapısını daha zarif hale getirmek için bu negatif alanı kullanırlar, bu nedenle bu tasarımlar yalın ve birinci sınıf bir görünüme kavuşurlar.
