Rastgele padding o an doğru görünür; yan yana durunca sayfa nefes almaz. Web tasarım boşluk sistemi, ortak bir aralık ölçeğiyle elemanları hizalar ve gruplar. Bu rehber ölçeği bileşen içinden sayfa bölümüne kadar nasıl konuşacağınızı anlatır.
Bir düğmenin etrafını “biraz açmak”, bir kartı “biraz aşağı almak” o an doğru görünür. Kararlar birikir, sayfa aynı aileden değilmiş gibi durur. Web tasarım boşluk sistemi, elemanları rastgele padding ile değil ortak bir aralık ölçeğiyle hizalar. Amaç milimetrik takıntı değil; yakın olanı gruplayan, uzak olanı ayıran, nefes alan bir ritim kurmaktır. Ölçek, tasarımcı ile geliştirici arasında “biraz daha” yerine basamak konuşturur.
Bu rehber, boşluğu süs gibi eklemek yerine ilişki ölçüsü olarak kullanmayı anlatır. Önce rastgele padding’in neden dağıttığını, sonra ölçeği bileşen içinden sayfa bölümüne nasıl taşıyacağınızı göreceksiniz.
Rastgele padding neden ritmi bozar
Göz kararı boşluk, tek bir kartta sorun çıkarmaz. Sorun, aynı ekranda 13px, 18px, 22px ve 27px’in yan yana durmasıdır. Göz farkı piksel olarak okumaz; “bu grup sıkışık, şu grup kopuk” diye okur. Her eleman kendi padding’ini savununca hiza da kayar: bir kartın iç kenarı diğerinin ikon hizasıyla örtüşmez.
“Biraz aç” yorumu iyi niyetlidir ama ölçülemez. Bir kişi dört piksel, diğeri on piksel anlar. Üç tur incelemeden sonra sayfa nefes almaz; şişer. Ritmi bozan şey çoğu zaman renk veya font değil, birbirine yakın durması gerekenlerin arasına giren rastgele boşluk ve birbirinden ayrılması gerekenlerin yapışmasıdır.
Tekrarlanabilirlik de kaybolur. Ana sayfada tutan aralık, iç sayfada sıkışık durur; çünkü ikinci ekranda başka birinin göz kararı işlemiştir. Sistem yoksa her sayfa ayrı bir lehçeyle konuşur.
- Aynı roldeki elemanlar farklı iç boşluk alır.
- Başlık ile gövde aralığı her blokta değişir.
- Kart ızgarasında satır ritmi kırılır.
- Mobil sıkışma, “bir piksel daha” ile çözülmeye çalışılır.
Web tasarım boşluk sistemi nedir, ölçek ne işe yarar
Web tasarım boşluk sistemi, izin verilen aralıkların kısa bir listesidir. Liste, “güzel duran bütün pikseller” değil; ekibin gerçekten kullandığı basamaklardır. Her basamak bir karardır: etiket aralığı, form satırı, kart içi, kartlar arası, bölüm arası gibi işler bu basamaklara bağlanır.
Ölçek, tipografi merdivenine benzer. Her başlığı ayrı punto yapmak yerine sınırlı bir tip ölçeği kullanırsınız; boşlukta da merdiven vardır. Küçük basamaklar bileşen içindir, büyük basamaklar bölümleri ayırır. Komşu basamaklar birbirine çok yakınsa göz farkı okuyamaz. O zaman iki basamak fiilen tektir ve karar yorgunluğu artar.
Sistem üç soruyu kapatır. Bu iki şey aynı grup mu? Gruplar arasında ne kadar hava olmalı? Bu hava başka bir ekranda tekrarlanabilir mi? Cevap “biraz” değil, ölçekteki bir adımdır.
Ölçeği paletten ayrı tutun. Renk vurguyu, tipografi sesi, boşluk ise mesafeyi taşır. Üçü çarpışınca görsel hiyerarşi zayıflar: büyük başlık, hemen yapışık küçük metinle bağırmış gibi durur. Boşluk, bakış sırasını ölçüyle destekler.
Yakın olanı gruplayın, uzak olanı ayırın
Boşluğun ilk işi süslemek değil, ilişkiyi göstermektir. Etiket ile alan, başlık ile paragraf, fiyat ile sepete ekle aynı ailedendir; araları küçük kalır. Kart ile sonraki kart, form ile yardım metni, kahraman alanı ile özellik ızgarası ayrı ailelerdir; araları bilinçli açılır.
Yanlış gruplama, yanlış metinden daha hızlı bozar. Formda etiket alandan uzak, hata mesajı bir sonraki alana yapışıksa kullanıcı ilişkiyi kaçırır. Ürün kartında görsel, isim ve fiyat kopuksa kart tek nesne olmaktan çıkar. Ölçek burada “aç veya kapa” değil; “bu ikisi aynı cümle, şu ikisi ayrı paragraf” demektir.
- Önce hangi elemanların tek birim olduğunu yazın.
- Birim içine küçük basamak, birimler arasına orta basamak verin.
- Sayfa bölümleri arasına büyük basamak koyun; bölüm içindeki ritmi bozmayın.
- İstisnayı not edin: istisna gizli bir piksel değil, gerekçeli bir basamak atlaması olsun.
Bu ayrım, ana sayfa bölüm sırası ile birlikte çalışır. Sıra doğru olsa bile bölümler aynı boşlukla dizilirse bakış duraklamaz. Büyük basamak, yeni bir konunun başladığını söyler.
Bileşen içi boşluk ile sayfa bölümünü karıştırmayın
Padding, gap ve margin aynı işi görmez. Padding, kutu ile içeriği arasındaki iç kenardır. Gap, kutu içindeki kardeşler arasındaki düzgün aralıktır. Margin, kutunun dışarıdaki komşularıyla mesafesidir. Üçünü aynı “açıklık” gibi kullanınca ölçek kağıt üzerinde durur, kodda dağılır.
Bileşen içinde tutarlı inset kullanın. Düğmenin iç boşluğu, kartın kenarı, listenin satır aralığı bileşen sözleşmesidir. Bu sözleşmeyi sayfa boşluğuyla şişirmeyin. Kartın iç padding’ini büyüterek bölümler arası nefesi taklit etmek kartı şişirir; sayfa ritmini kurmaz.
Sayfa düzeyinde dikey ritim, bölümlerin üst üste dizilmesidir. Hero, kanıt, özellikler, fiyat, sorular: her blok kendi iç ölçeğini korur; bloklar arası basamak bir üst aileden seçilir. İçeride ve dışarıda aynı birimi kullanmak her şeyi aynı tona çeker. O zaman ne başlık durur ne bölüm nefes alır.
Yoğunluk ayrı bir karardır. Yönetim paneli sıkı, pazarlama sayfası açık durabilir. İki yoğunluk iki mod olabilir; her modun kendi kısa ölçeği vardır. Mod değişince rastgele piksele dönmeyin, basamak setini değiştirin.
| Karar | Rastgele padding | Ortak ölçek |
|---|---|---|
| İnceleme dili | “Biraz daha aç” | “Bir basamak büyüt” |
| Aynı rol | Her ekranda farklı piksel | Aynı basamak |
| İç / dış | Hepsi tek açıklık | Inset, gap ve bölüm ayrı |
| İstisna | Görünmez kayar | Gerekçesiyle not edilir |
Sihirli sayıyı token’a çevirin
Ölçek tasarım dosyasında durup kodda on yedi piksel olarak yaşarsa sistem değildir. Basamakları isimlendirin. İsim, değeri ezberletmek için değil; rolü hatırlatmak içindir. Küçük, orta, büyük gibi kaba adlar yetebilir. Kritik olan herkesin aynı adı aynı işe bağlamasıdır.
Sihirli sayı bir kerelik istisna gibi durur. Üç ay sonra kimse on dört pikselin neden on altı olmadığını bilmez. Token, “bu değer ölçekte yok” diye kapı tutar. Yeni aralık gerektiğinde önce mevcut basamağa sığmayı deneyin. Sığmıyorsa ölçeğe basamak ekleyin; dosyanın bir köşesine gizli piksel yazmayın.
KepezWeb yazılarında boşluğu renk ve tipografi gibi ayrı bir karar katmanı olarak ele alırız. Token listesi kısa tutulur; çünkü uzun liste, rastgele padding’in resmi halidir. Kullanılmayan basamak karar değildir, gürültüdür.
Geliştirmede gap ve padding token’larını karıştırmayın. Kart gap’i ile kart padding’i ayrı rollerdir. Aynı token’ı her yere bağlamak tutarlılık gibi görünür, aslında ilişkileri düzler. Tip ölçeği ile boşluk ölçeğini de birbirine kilitlemeyin. Satır aralığı tipin işidir, bölüm aralığı sayfa ritminin işidir. İkisi konuşsun, biri diğerini ezmesin.
Sayı tutsa da göz sıkışmış durabilir
Ölçek, optik hatayı kapatmaz. Yuvarlatılmış kart, sivri köşeli karta göre içeride daha boş durabilir. İkonlu etiket harf gibi hizalanmaz; ikonun görsel ağırlığı sola çeker. Hepsi aynı token’ı alsa da göz kaymış der. Bu durumda token’ı kırmadan iç hizayı düzeltin: ikon ile yazı arasına küçük basamak verin, kartta içerik bloğunu optik olarak dengeleyin.
Satır uzunluğu da boşluğu yer. Dar sütunda büyük bölüm boşluğu abartılı durur; geniş sütunda küçük boşluk yapışık kalır. Ölçeği her genişlikte uydurmak yerine, hangi basamağın hangi kırılmada kullanılacağını önceden seçin. Her kırılmada bütün ölçeği küçültmek ritmi değil, sıkışıklığı taşır.
Odak halkası, dokunma alanı ve etiket boşluğu erişilebilir web tasarımı kararlarıyla çakışır. Halkanın kesilmemesi için iç boşluğu halkayı yiyecek kadar kısaltmayın. Satırları yapıştırmak, klavyeyle dolaşan kişinin nerede olduğunu kaçırmasına yol açar. Ölçek yalnızca estetik ritim değil, hedefi kaçırmayan bir mesafe dilidir.
Boşluk süs değildir. İki elemanın aynı cümlede mi, ayrı paragrafta mı durduğunu söyler.
Ölçeği ekipte nasıl yaşatırsınız
Sistem dosyada durduğu için işlemez; incelemede konuşulduğu için işler. Yorumu piksel pazarlığı olmaktan çıkarın. “Bu kart ile fiyat bloğu aynı grup; arayı bir basamak düşür” ölçülebilir bir cümledir. “Ferah dursun” değildir.
Yeni bileşen eklerken önce mevcut basamaklara bakın. Benzer bir kart, form veya başlık-gövde çifti varsa onun boşluğunu kopyalayın. Özgünlük, her bloğa özel padding yazmak değildir. Özgünlük, içeriğin ritmi bozmadan okunmasıdır.
Mevcut sitede temizlik, bütün pikselleri bir gecede silmek zorunda değildir. Önce tekrar eden aralıkları toplayın. En sık görülen birkaç değeri omurga yapın. Aykırı değerleri gerekçesi yoksa omurgaya çekin; gerekçesi olanı istisna olarak işaretleyin. Böylece web tasarım işi her sayfada yeniden icat edilmez.
Kontrol listesini kısa tutun. Aynı rol aynı basamak mı? İç boşluk dış boşluğu taklit ediyor mu? Bölüm geçişinde bakış duruyor mu? İstisna yazılı mı? Bu dört soru, çoğu “biraz aç” turunu kapatır.
Sıkça Sorulan Sorular
Boşluk ölçeğinde kaç basamak olmalı?
Basamak sayısı, ekranda gerçekten kullandığınız aralık kadar olmalıdır. Çok kısa ölçek her şeyi aynı tona çeker; çok uzun ölçek rastgele padding’e geri döner. Kullanılmayan basamağı listede tutmayın.
Her bileşende aynı boşluğu mu kullanmalıyım?
Hayır. Aynı roldeki bileşenler aynı basamağı paylaşır. Düğme ile kahraman alanı aynı iç boşluğu almak zorunda değildir. Ölçek her yere tek değer dayatmaz; hangi işin hangi basamağa bağlandığını sabitler.
Ölçeğin dışına çıkmak ne zaman doğru olur?
Optik düzeltme, üçüncü taraf bir gömme veya geçici bir kampanya bloğu gerekçe olabilir. Gerekçeyi yazın ve değeri token’sız bırakmayın. Sessiz istisna, birkaç iş döngüsü sonra yeni rastgele tabandır.
Mobilde ölçeği baştan küçültmeli miyim?
Bütün basamakları körlemesine indirmeyin. Bileşen içi küçük aralıklar çoğu zaman kalır; bölümler arası büyük basamak dar ekranda bir kademe inebilir. Amaç sıkıştırmak değil, grubu bozmadan nefes bırakmaktır.
Eski sayfalardaki rastgele padding nasıl toparlanır?
Önce en görünür şablonları seçin: kart, form, başlık bloğu, sayfa bölümü. Tekrar eden pikselleri omurgaya çekin, aykırıları gerekçelendirin. Tüm siteyi bir kerede çevirmek yerine şablon şablon ritim kurun.
Sonuç ve Sonraki Adım
Ritmi oturmayan bir arayüzü rastgele padding ile değil ortak ölçekle toparlamak istiyorsanız KepezWeb ekibiyle konuşabilirsiniz. Mevcut siteyi veya yeni bir kurulumu birlikte ele almak için teklif alın; boşluk kararlarını tasarım ve kodda aynı dile çevirelim.
