Web tasarım spacing sistemi, sayfadaki boşlukları rastgele değil ölçekli kararlarla yönetmenizi sağlar. Bu rehberde 4/8 pt boşluk ölçeğini, bileşen aralığını ve ritim kurallarını görsel hiyerarşiden ayrı tutarak netleştiriyoruz.
Bir sayfa “düzgün” görünüyorsa çoğu zaman asıl sebep renk veya font değil, boşlukların tutarlılığıdır. Web tasarım spacing sistemi, margin, padding ve gap değerlerini tek bir ölçeğe bağlayarak bileşenlerin aynı dilde konuşmasını sağlar. Bu yazıda konuyu görsel hiyerarşiden ayırıp 4/8 pt boşluk ölçeği, bileşen aralığı ve sayfa ritmi üzerinden ele alıyoruz.
Amaç süslemek değil; karar yükünü azaltmak, ekip içinde aynı boşluk dilini kullanmak ve ekrandan ekrana kayan “biraz sıkışık / biraz bol” hissini kesmektir.
Web tasarım spacing sistemi nedir?
Spacing sistemi, arayüzde kullanılan dikey ve yatay boşlukların serbest sayı yerine önceden tanımlı bir ölçekten seçilmesidir. Tipik olarak 4 pt veya 8 pt tabanlı bir dizi kullanılır; örneğin 4, 8, 12, 16, 24, 32, 48, 64 gibi adımlar.
Bu yaklaşım üç işe yarar:
- Tasarımcı ve geliştirici aynı token dilini konuşur.
- Bileşenler yeniden kullanıldığında boşluklar sapmaz.
- Mobil, tablet ve masaüstünde ritim bozulmadan ölçeklenebilir.
Spacing, hiyerarşiyi tamamlar ama onun yerine geçmez. Başlık boyutu, renk kontrastı veya ağırlık hiyerarşiyi kurar; boşluk ise grupları ayırır, nefes alanı verir ve tarama hızını yükseltir. KepezWeb projelerinde de spacing kararlarını “göz kararı”ndan çıkarıp ölçek ve token seviyesine taşımak, teslim sonrası tutarlılığı korumanın pratik yollarından biridir.
4 pt ve 8 pt boşluk ölçeği nasıl çalışır?
En yaygın iki taban 4 pt ve 8 pt’tir. İkisi de “katlar üzerinden düşün” mantığına dayanır; fark, ince ayar ihtiyacındadır.
8 pt taban
8 pt ölçek, birçok arayüz kütüphanesinde varsayılan ritimdir. Ana adımlar genelde şöyle ilerler: 8, 16, 24, 32, 40, 48, 64. Kart içi padding, bölüm boşluğu ve büyük blok aralıkları için okunması ve kodlanması kolaydır.
4 pt taban
4 pt taban, 8’in yarısını da serbest bırakır: 4, 8, 12, 16, 20, 24… İkon ile etiket arası, form alanı iç boşluğu, chip ve badge gibi sıkı bileşenlerde daha kontrollü mikro boşluk verir. Pratikte ekipler çoğu zaman 8 pt ritmi korur, istisnai mikro durumlar için 4 pt adımları açar.
Hangi tabanı seçmelisiniz?
Kurumsal site, blog ve çoğu pazarlama sayfasında 8 pt taban yeterlidir. Yoğun form, tablo, filtre paneli veya kompakt yönetim panellerinde 4 pt taban daha rahat eder. Önemli olan tabanı seçtikten sonra “ara sıra 13 px” gibi ölçek dışı değerlere kaçmamaktır.
| Kullanım | Önerilen adım (pt) | Not |
|---|---|---|
| İkon–metin aralığı | 4–8 | Mikro boşluk; sıkı grup |
| Buton / input iç padding | 8–16 | Dokunma alanı ve okunurluk dengesi |
| Kart içi padding | 16–24 | İçerik yoğunluğuna göre |
| Kartlar / grid aralığı | 16–32 | Aynı satırda eşit gap |
| Bölümler arası boşluk | 48–80 | Makro ritim; sayfa nefes alır |
Tablo bir şablon değil, başlangıç dilidir. Asıl kural: aynı roldeki boşluk her yerde aynı adımdan gelsin.
Bileşen aralığı: mikro ve makro boşluk
Spacing sistemini yönetilebilir kılan ayrım, mikro ve makro boşluktur.
Mikro boşluk
Mikro boşluk, tek bir bileşenin iç ve yakın çevresindeki aralıktır: etiket–input, ikon–metin, satır içi chip’ler, liste öğesi içi padding. Burada amaç grubun “tek nesne” gibi algılanmasıdır. Mikro boşluk fazla büyürse bileşen dağılır; fazla küçülürse tıklanabilirlik ve okunurluk düşer.
Makro boşluk
Makro boşluk, bölümler ve büyük bloklar arasındadır: hero ile özellikler, özellikler ile referanslar, form ile footer. Makro boşluk sayfanın ritmini kurar. Ziyaretçi aşağı indikçe “yeni bir bölüm başlıyor” sinyalini önce boşluktan alır; sonra başlıktan.
İyi bir web tasarım spacing sistemi, mikro ve makro için ayrı token seti tanımlar. Örneğin space-1 ile space-3 mikro, space-8 ile space-12 makro için ayrılır. Böylece bir kartın iç padding’i büyütülürken yanlışlıkla tüm sayfa bölüm aralıkları da şişmez.
Ritim: sayfada tutarlı boşluk dili
Ritim, boşlukların rastgele değil tekrar eden bir desende ilerlemesidir. Aynı hiyerarşi seviyesindeki bölümler benzer üst/alt boşluk alır; aynı tip kartlar aynı gap ile dizilir; form alanları arasında tek bir dikey adım kullanılır.
Ritmi bozan tipik durumlar şunlardır:
- Bir bölümde 40 px, diğerinde 72 px üst boşluk kullanmak
- Grid gap’i 12 px, kart iç padding’i 18 px gibi ölçek dışı değerler seçmek
- Mobilde tüm boşlukları oransız yarıya indirmek
- Başlık altı boşluğu ile paragraf aralığını aynı değere eşitlemek
Mobilde ritim bozulmasın diye boşlukları “rastgele küçültmek” yerine ölçeğin bir veya iki adım aşağı inmesi yeterlidir. Örneğin masaüstünde bölüm aralığı 64 ise mobilde 40 veya 48 seçmek, 20’ye düşmekten daha güvenlidir. Böylece sayfa sıkışır ama dil değişmez.
Spacing token’ları ile uygulamaya alma
Ölçeği yalnızca Figma notunda bırakmak yetmez; kodda da aynı isimlerle yaşaması gerekir. Token yaklaşımı hem tasarım hem geliştirme tarafında sapmayı keser.
- Ölçeği yazın: 4 veya 8 tabanlı adımları net listeleyin.
- Anlamlı isim verin: Yalnızca space-4 gibi sayısal adlar veya space-sm / space-md / space-xl gibi rol adları kullanın; ikisini karıştırmayın.
- Bileşen rollerini bağlayın: “Kart padding = space-md”, “Bölüm üst boşluğu = space-2xl” gibi eşlemeler yapın.
- İstisnayı kayıt altına alın: Ölçek dışı tek seferlik değer gerekiyorsa nedenini not edin; varsayılan hâle getirmeyin.
- Gözden geçirin: Sayfa tararken aynı rolde farklı boşluk var mı diye kontrol edin.
CSS tarafında custom property veya design token dosyası kullanmak, “bir yerde 17 px kaldı” problemini azaltır. Bileşen kütüphanesi büyüdükçe bu disiplin daha kritik olur. Profesyonel bir web tasarım sürecinde spacing token’ları, renk ve tipografi token’larıyla birlikte ele alınmalıdır; aksi hâlde görsel dil parçalanır.
Yaygın hatalar ve düzeltme yaklaşımı
Spacing sorunları çoğu zaman “tasarım kötü” diye etiketlenir; oysa kök neden karar setinin dağınık olmasıdır.
- Göz kararı px: Her ekranda farklı değer açılır. Çözüm: yalnızca ölçekten seçmek.
- Margin çakışması: Üst bileşenin alt margin’i ile alt bileşenin üst margin’i toplanır veya çöker. Çözüm: mümkünse gap ve tek yönlü spacing kuralları.
- İçerik yoğunluğunu boşlukla telafi etmek: Zayıf metin hiyerarşisini devasa boşluklarla “premium” göstermeye çalışmak sayfayı boş hissettirir. Çözüm: hiyerarşiyi tipografiyle, ayrımı spacing ile kurmak.
- Bileşen kopyalarken sapma: Eski kart 20 px, yeni kart 24 px padding alır. Çözüm: paylaşılan bileşen ve token.
- Footer ve formlarda farklı dil: Ana vitrin ölçülü, form alanı sıkışık kalır. Çözüm: tüm şablonlarda aynı makro adımlar.
Kurumsal sitelerde bu tutarsızlık özellikle teklif, hizmet ve iletişim şablonlarında görünür. Kurumsal web tasarım işlerinde spacing sistemi, markanın “özenli” algısını taşıyan sessiz bir katmandır; ziyaretçi fark etmeden güven sinyali üretir.
Uygulanabilir spacing kontrol listesi
Yeni bir sayfa veya bileşen seti çıkarırken şu kontrol listesini kullanabilirsiniz:
- Taban ölçek net mi? (4 pt, 8 pt veya hibrit ama kurallı)
- Mikro ve makro roller ayrı token’lara bağlı mı?
- Aynı bileşen tipi her yerde aynı iç boşluğu mu kullanıyor?
- Grid ve flex gap değerleri ölçekten mi geliyor?
- Bölüm aralıkları sayfa boyunca benzer ritimde mi?
- Mobilde boşluklar bir-iki adım küçülüyor mu, yoksa rastgele mi?
- Form, kart, hero ve footer aynı dilde mi konuşuyor?
- Ölçek dışı istisna varsa belgelenmiş mi?
Bu liste tasarım incelemesinde de geliştirici devrinde de aynı şekilde çalışır. E-ticaret vitrinlerinde ürün kartı, filtre ve sepet özeti gibi yoğun yüzeylerde de aynı disiplin geçerlidir; kategori listesi ile ürün detayı arasında boşluk dili kopmamalıdır. Bu noktada e-ticaret sitesi arayüzlerinde spacing, tarama hızını ve karşılaştırma konforunu doğrudan etkiler.
Sıkça Sorulan Sorular
4 pt mi 8 pt mi daha doğru?
Tek doğru yok. Çoğu pazarlama ve kurumsal sitede 8 pt ritim yeterlidir. Yoğun arayüz ve kompakt bileşenlerde 4 pt taban daha esnek olur. Önemli olan seçilen tabanın tutarlı uygulanmasıdır.
Spacing sistemi tipografi ölçeğinden bağımsız mı kurulmalı?
Karar setleri ayrı tutulmalı, ama birlikte test edilmelidir. Satır aralığı ve paragraf boşluğu tipografiye; kart ve bölüm aralıkları spacing sistemine aittir. İkisini karıştırmak hem okunurluğu hem ritim hissini bozar.
Her boşluk token olmak zorunda mı?
Hayır. Tekrarlayan ve rolü net olan boşluklar token olmalıdır. Bir kerelik, gerekçeli istisnalar olabilir; ancak istisna çoğalırsa sistem fiilen çöker. Önce rol tanımı, sonra değer seçimi yapın.
Mevcut sitede spacing’i sonradan toparlamak mümkün mü?
Evet. Önce en sık kullanılan yüzeyleri (kart, form, bölüm boşluğu, buton grubu) envanterleyin; tekrar eden değerleri en yakın ölçek adımına yuvarlayın; ardından ortak token’a bağlayın. Büyük patlama yerine yüzey yüzey ilerlemek riski düşürür.
Spacing tutarlılığı SEO’yu etkiler mi?
Doğrudan bir sıralama faktörü değildir. Ancak okunabilirlik, tıklanabilir alanlar ve düzenli mobil deneyim etkileşimi iyileştirebilir. Spacing’i “SEO hilesi” gibi değil, kullanılabilirlik disiplini gibi ele alın.
Tutarlı bir web tasarım spacing sistemi; daha az tartışma, daha hızlı geliştirme ve daha sakin bir sayfa hissi demektir. 4/8 pt ölçeği seçmek başlangıçtır; asıl fark, mikro–makro ayrımını ve token disiplinini her şablona taşımakla gelir. Sitenizde boşluk dilini sadeleştirmek veya yeni bir arayüz setini ölçekli kurmak istiyorsanız KepezWeb ekibiyle kapsamı netleştirmek için teklif al sayfasından projenizi iletebilirsiniz.
