Tasarımda boşluk kullanımı, içerik kadar önemli bir tasarım kararıdır. Beyaz alan (whitespace veya negative space) yalnızca "boş yer" değildir; okunabilirliği artıran, dikkat yönlendiren ve sınıf hissi yaratan aktif bir tasarım aracıdır. **Boşluk neden önemlidir?** Yoğun dolu bir tasarım göze kaos hissi verir; ziyaretçi nereye bakacağını bilemez. Lüks markaların neredeyse tamamı yüksek miktarda boşluk kullanır, bu, yüksek fiyatı akla getiren bir algı sinyalidir. Boşluk yalnızca estetik değil, fonksiyonel bir araçtır. **Makro ve mikro boşluk** Tasarımda boşluk kullanımı iki ölçekte ele alınır: - **Makro boşluk:** Bölümler arası, sayfa kenarları, büyük öğeler arası mesafe - **Mikro boşluk:** Harfler arası (letter-spacing), satır arası (line-height), ikon ile metin arası Her iki düzeyde de tutarlı boşluk sistemi kurmak tasarımın profesyonel görünmesini sağlar. **Adım 1: Boşluk skalası oluşturun** Tasarımda boşluk kullanımı için matematiksel bir sistem kurun. 8 piksel taban alan "8pt grid" sistemini deneyin: - 4px: Mikro boşluk (ikon-metin mesafesi) - 8px: Küçük boşluk (eleman içi padding) - 16px: Orta boşluk (kartlar arası, form alanları) - 32px: Büyük boşluk (bölüm başlangıcı) - 64px: Makro boşluk (büyük bölümler arası) - 128px: Çok büyük (hero bölümü üst-alt padding) Bu skalanın dışına çıkmamak tutarlılık yaratır. **Adım 2: Başlık altına yeterli boşluk bırakın** Başlık ile gövde metin arasındaki boşluk, başlığın hangi içeriğe ait olduğunu gösterir. Temel kural: Başlık, üstündeki içerikten daha uzakta, altındaki içeriğe daha yakın durmalıdır. ``` --- Gövde paragrafı --- [Boşluk: 32px] ## Yeni Bölüm Başlığı [Boşluk: 12px] Bu başlığa ait gövde metni... ``` Bu oran, başlığın bir sonraki içeriğe "bağlı" olduğunu hissettdirir. **Adım 3: Satır aralığını (line-height) optimize edin** Tasarımda boşluk kullanımının en gözardı edilen boyutu satır aralığıdır. Dar satır aralığı metni sıkıştırır ve okunmayı zorlaştırır: - Gövde metin: font-size × 1.5 - 1.7 (16px font için 24-27px line-height) - Başlıklar: font-size × 1.1 - 1.3 - Uzun metin blokları: 1.7 veya üstü okunuşu kolaylaştırır **Adım 4: Padding ve margin farkını bilin** - **Padding:** Öğenin sınırı ile içeriği arasındaki iç boşluk - **Margin:** Öğenin sınırı ile komşu öğe arasındaki dış boşluk Padding, öğeyi "büyütür"; margin onu diğerlerinden uzaklaştırır. Tutarsız padding değerleri arayüzü dağınık gösterir; hiyerarşik bir padding sistemi uygulayın. **Adım 5: Beyaz alan ile hiyerarşi pekiştirin** Yüksek önemli öğelere daha fazla boşluk verin: - Birincil CTA butonu: 24-32px padding - İkincil buton: 12-16px padding - Küçük linkler: 4-8px padding Boşluk ne kadar fazlaysa öğe o kadar önemli hissettirir. **Adım 6: Doluluğu test edin** Tasarımda boşluk kullanımını test etmek için şunu deneyin: Tasarımınızı küçültülmüş küçük resim olarak görün. Çok yoğun görünüyorsa büyük olasılıkla boşluk yetersizdir. Ayrıca bir süre tasarımdan uzaklaşıp tekrar bakın: İlk saniyede gözünüz nereye gidiyor? **Yaygın hatalar** - Boşluktan korkmak: "Dolduramadığım yer boşa gitmiş gibi görünüyor" düşüncesi tasarımı aşırı yüklemenin tuzağıdır. - Tutarsız boşluk değerleri kullanmak: 13px, 17px, 22px gibi rasgele değerler yerine belirlediğiniz skaladaki değerlere bağlı kalın. - Mobilde masaüstü boşluğunu kopyalamak: Küçük ekranda 128px üst-alt padding sayfa içeriğini zaten ezmiş olur; mobil için ayrı değerler belirleyin.