UI white space, yani arayüzdeki boşluk, çoğu zaman "doldurulması gereken boş yer" sanılır; oysa iyi tasarımda boşluk en az içerik kadar bilinçli yerleştirilir. Negatif alan dediğimiz bu boşluklar, ekrandaki öğeler arasındaki nefes payını oluşturur ve gözün metni, butonu ya da görseli rahatça takip etmesini sağlar. Bu yazıda boşluğun okunabilirliği ve görsel hiyerarşiyi nasıl güçlendirdiğini, hangi pratik kurallarla çalıştığını ve sık yapılan hataları somut örneklerle ele alıyorum.
Boşluk nedir, neden "boş" değildir?
Tasarımda boşluk, öğelerin etrafındaki ve arasındaki dolu olmayan alandır. Mutlaka beyaz olması gerekmez; arka plan rengi ne olursa olsun (koyu tema dahil) bu alana negatif alan denir. İki tür ayrımı işe yarar:
- Makro boşluk: Büyük bloklar arasındaki geniş alanlar — bölümler, kartlar, kenar boşlukları (margin). Sayfanın genel ferahlığını ve ritmini belirler.
- Mikro boşluk: Satır aralığı, harf aralığı, ikon ile etiket arası, buton içi padding gibi küçük mesafeler. Okuma akışını ve algılanan kaliteyi belirler.
Boşluk "verimsiz" değildir; tam tersine kullanıcının bilişsel yükünü azaltır. Göz, her pikseli içerikle dolu bir ekranda nereye bakacağını bilemez. Boşluk, dikkati yönlendiren sessiz bir araçtır.
UI white space okunabilirliği nasıl artırır?
Okunabilirlik büyük ölçüde mikro boşluğa bağlıdır. Metin söz konusu olduğunda üç ölçü öne çıkar:
- Satır yüksekliği (line-height): Gövde metni için genellikle yazı boyutunun 1.4–1.6 katı rahat okunur. Çok sıkışık satırlar gözü yorar.
- Satır uzunluğu: İdeal okuma için bir satırda yaklaşık 50–75 karakter hedeflenir. Çok geniş paragraflar, gözün bir sonraki satırın başını bulmasını zorlaştırır.
- Paragraf ve başlık arası boşluk: Başlığın altındaki ve üstündeki boşluk dengesi, başlığı ait olduğu içerikle ilişkilendirir.
Basit bir CSS örneği, gövde metni için makul bir başlangıç noktası sağlar:
.prose p {
max-width: 65ch; /* satır uzunluğunu sınırla */
line-height: 1.6; /* rahat satır aralığı */
margin-bottom: 1rem; /* paragraflar arası nefes */
}Buradaki 65ch birimi, geçerli yazı tipinde yaklaşık 65 karakter genişliği anlamına gelir ve satır uzunluğunu içerikle ölçeklendirir.
Boşluk ve görsel hiyerarşi
Görsel hiyerarşi, kullanıcının neyi önce, neyi sonra okuyacağını belirler. Boşluk burada en güçlü araçlardan biridir çünkü yakınlık (proximity) ilkesi gereği birbirine yakın öğeler ilişkili, uzak öğeler ayrı algılanır. Bir form etiketini ilgili giriş alanına yaklaştırıp bir sonraki alandan uzaklaştırdığınızda, hiçbir çizgi çekmeden gruplama yapmış olursunuz.
Pratik bir kural: ilişkili öğeler arasındaki boşluk, gruplar arasındaki boşluktan küçük olmalı. Bir kartta başlık, açıklama ve buton birbirine yakın dururken, kartlar arası mesafe daha geniş olur. Böyle bir tutarlılık, gözün sayfayı tarama hızını belirgin biçimde artırır.
Tutarlı bir aralık sistemi kurun
Rastgele seçilen padding ve margin değerleri arayüzü dağınık gösterir. Profesyonel tasarımlar genellikle bir aralık ölçeği kullanır — örneğin 4 px tabanlı bir sistem: 4, 8, 12, 16, 24, 32, 48, 64. Tüm boşluklar bu kümeden seçilir. Bu hem görsel ritim sağlar hem de geliştirme aşamasında tahmin yürütmeyi ortadan kaldırır.
CSS değişkenleriyle bu sistem kolayca kurulur:
:root {
--space-1: 4px;
--space-2: 8px;
--space-3: 16px;
--space-4: 24px;
--space-5: 40px;
}
.card { padding: var(--space-4); }
.card + .card { margin-top: var(--space-5); }Figma kullanıyorsanız aynı değerleri "spacing" değişkenleri veya Auto Layout boşlukları olarak tanımlayıp tasarım ile kodu hizalayabilirsiniz. Auto Layout'taki "gap" ayarı, kartların ve liste öğelerinin aralığını tek bir yerden yönetmenizi sağlar.
Sık yapılan hatalar
- Boşluğu "boşa harcanmış" alan görmek: Her köşeyi içerikle doldurma baskısı, en sık karşılaşılan hatadır. Yoğunluk her zaman değer demek değildir.
- Eşit olmayan kenar boşlukları: Bir kartın iç boşluğu solda 16, sağda 12 olunca göz bunu fark eder; simetri güven verir.
- Çok dar dokunma hedefleri: Mobilde dokunulabilir öğeler için yaklaşık 44–48 px'lik bir alan bırakmak, hem boşluk hem erişilebilirlik açısından önemlidir.
- Tutarsız dikey ritim: Başlık-paragraf-başlık arası boşlukların her bölümde farklı olması sayfayı "sallantılı" gösterir.
Hızlı bir kontrol listesi
- Gövde metni satır uzunluğu 50–75 karakter aralığında mı?
- Satır yüksekliği 1.4–1.6 civarında mı?
- İlişkili öğeler, gruplar arası mesafeden daha yakın mı?
- Tüm boşluklar tek bir aralık ölçeğinden mi geliyor?
- Mobilde dokunma hedefleri yeterince geniş mi?
Sık Sorulan Sorular
White space sadece beyaz arka plan mı demek?
Hayır. "White space" terimi tarihseldir; aslında öğeler arasındaki boş alanı ifade eder. Arka plan koyu, renkli ya da desenli olabilir — boşluğun işlevi değişmez. Bu yüzden buna negatif alan da denir.
Fazla boşluk içeriği "zayıf" göstermez mi?
Doğru kullanıldığında tam tersi olur. Bilinçli boşluk, içeriğe değer ve odak kazandırır; premium markaların arayüzleri genelde bol boşluk kullanır. Önemli olan boşluğun tutarlı ve amaçlı olmasıdır, gelişigüzel değil.
Boşluğu nereden ölçeklendirmeye başlamalıyım?
4 veya 8 px tabanlı bir aralık ölçeğiyle başlayın ve tüm padding/margin değerlerini bu kümeden seçin. Tek bir kaynaktan yönetilen sistem, hem tutarlılık hem de bakım kolaylığı sağlar.
Arayüzünüz kalabalık mı görünüyor, mesaj net iletilmiyor mu? Boşluk, tipografi ve hiyerarşiyi birlikte ele alan bir UI gözden geçirmesiyle yardımcı olabilirim. Projenizi konuşmak için benimle iletişime geçin.