Kısaca: Web tasarımında düzenli görünümün sırrı, boşlukları rastgele değil bir ölçekten seçmektir. En yaygın yöntem 8pt grid’dir: Bütün boşluklar ve ölçüler 8’in (küçük ayarlar için 4’ün) katlarından seçilir. Gruplama ise Gestalt ilkeleriyle yapılır: Birbirine yakın, birbirine benzeyen öğeleri göz bir grup olarak algılar. Bu iki araç birlikte kullanıldığında sayfa, tek bir çizgi bile eklenmeden düzenli görünür.
Kısa cevap
Boşluk, tasarımda “arta kalan alan” değil, öğeler arasındaki ilişkiyi anlatan bir dildir. Bir başlığın kendi paragrafına yakın, bir önceki bölüme uzak durması, okura bu başlığın neye ait olduğunu söyler. Bu yazıda boşlukları bir sisteme bağlamayı (8pt grid) ve göze grupları nasıl okuttuğunuzu (Gestalt ilkeleri) anlatıyorum.
Boşluk neden bu kadar önemli?
Yeni başlayanların tasarımlarında en sık gördüğüm sorun renk ya da font değil, boşluk tutarsızlığıdır. Bir kartın iç boşluğu 15, yanındakinin 18, başlıkla metin arası 11 piksel olunca göz bu farkları tek tek fark etmese de sayfa “dağınık” görünür. Çözüm, her seferinde yeni bir sayı seçmek yerine sınırlı bir değer listesinden seçmektir.
8pt grid nedir?
8pt grid, arayüzdeki boşlukların, öğe yüksekliklerinin ve genişliklerinin 8’in katları olarak belirlendiği bir sistemdir: 8, 16, 24, 32, 48, 64… İkon ile metin arası gibi çok küçük boşluklar için 4 piksel yarım adım olarak kullanılır. Google’ın Material Design sistemi de arayüz öğelerini 8dp’lik bir ızgaraya, ikon ve küçük öğeleri 4dp’ye hizalar (Material Design).
Neden 8?
- Kolay bölünür: 8; 2 ve 4’e bölünür. Yarım ve çeyrek adımlar tam sayı kalır.
- Farklı ekran yoğunluklarında temiz kalır: 1,5x, 2x ve 3x ekranlarda 8’in katları tam piksele denk gelir; kenarlarda bulanıklık oluşmaz.
- Karar yükünü azaltır: “15 mi 17 mi?” sorusu ortadan kalkar; seçenekler 16 ve 24’tür.
- Ekip içinde ortak dil kurar: Tasarımcı ve geliştirici aynı değerleri kullanır. CSS’te bu değerleri değişken olarak tanımlamak kodun da tutarlı kalmasını sağlar.
8pt grid nasıl uygulanır?
- Bir boşluk ölçeği belirleyin: örneğin 4, 8, 12, 16, 24, 32, 48, 64, 96.
- Her boşluk türü için bir değer seçin: ikon–metin 8, paragraf arası 16, kart içi 24, kartlar arası 32, bölümler arası 64 gibi.
- Öğe yüksekliklerini de ölçeğe bağlayın: 40 ya da 48 piksellik butonlar, 48 piksellik form alanları.
- Satır yüksekliğini unutmayın: 16 piksellik metne 24 piksel satır yüksekliği vermek, metni de ızgaraya oturtur.
- Figma’da “nudge” değerini 8 yapın; Shift ile ok tuşları öğeleri 8’er piksel taşır.
Ölçeği katı bir kural olarak değil, bir başlangıç noktası olarak görün. Bazen 20 piksel gözünüze daha doğru gelecektir; önemli olan bu tür istisnaların bilinçli ve az olmasıdır.
İç boşluk dış boşluktan küçük olmalı
Gruplamanın en basit kuralı şudur: Bir grubun içindeki boşluk, gruplar arasındaki boşluktan küçük olmalıdır. Bir kartın iç boşluğu 24 pikselse kartlar arası en az 32 piksel olmalı; başlığın altındaki boşluk, üstündeki boşluktan küçük olmalıdır. Bu kural ihlal edildiğinde okur hangi öğenin hangisine ait olduğunu çözemez. Bu yanılgının arkasında Gestalt ilkeleri vardır.
Gestalt ilkeleri nedir?
Gestalt, 20. yüzyılın başında Alman psikologların geliştirdiği bir algı kuramıdır. Temel fikri, insanın parçaları tek tek değil, bütünler hâlinde algıladığıdır. Nielsen Norman Group bu ilkelerin arayüz tasarımındaki karşılıklarını ayrıntılı olarak inceler (NN/g). Web tasarımında en çok işinize yarayacak dört ilke şunlar:
Yakınlık
Birbirine yakın duran öğeler bir grup olarak algılanır. Görseldeki ilk karede noktalar aynıdır, ama aralarındaki boşluk farkı onları üç gruba ayırır. Formlarda etiketin kendi alanına, bir sonraki alandan daha yakın durması bu ilkeye dayanır. Çoğu zaman çerçeve ya da çizgi eklemeye gerek kalmadan, yalnızca boşlukla gruplama yapabilirsiniz.
Benzerlik
Renk, biçim ya da boyut olarak benzeyen öğeler bir grup sanılır. Bu yüzden sitede bütün bağlantılar aynı renkte, bütün birincil butonlar aynı biçimde olmalıdır. Tersi de geçerli: Tıklanamayan bir metni bağlantı rengiyle yazarsanız okur onu bağlantı sanar.
Kapalılık
Göz eksik biçimleri tamamlar. Kesik bir çember yine çember olarak görülür. Logo tasarımında sık kullanılır; arayüzde ise kenarlıksız kartların arka plan rengiyle bir alan olarak algılanmasını sağlar.
Süreklilik
Göz bir çizgiyi ya da akışı izlemeye devam eder. Hizalı öğeler, yatay kaydırılan ürün listeleri ve adım göstergeleri bu ilkeden yararlanır. Ekranın kenarında yarım kalan bir kart, “sağa kaydırınca devamı var” mesajını süreklilikle verir.
Boşluk ve Gestalt birlikte: pratik kontrol listesi
- Boşluk değerlerinizin hepsi tek bir ölçekten mi geliyor?
- Her grubun iç boşluğu, gruplar arası boşluktan küçük mü?
- Başlıklar, kendi içeriklerine bir önceki bölümden daha yakın mı?
- Aynı işlevi gören öğeler (bağlantılar, butonlar) aynı görünüyor mu?
- Bir çerçeve eklemeden önce, aynı gruplamayı boşlukla yapabiliyor musunuz?
Bu kurallar kompozisyonun ve hiyerarşinin temelidir. Yerleşimi grafik tasarımda kompozisyon, önem sırasını görsel hiyerarşi yazısında anlattım. Boşluk değerleri gibi yazı boyutlarını da bir ölçekten seçmeyi tipografik ölçek ve renk paleti yazısında, Figma’da auto layout ile boşluk ayarlamayı Figma rehberinde bulabilirsiniz.
Sık sorulan sorular
8pt grid zorunlu mu?
Hayır. 4pt ya da 5’in katları gibi farklı sistemler de kullanılır. Önemli olan bir sistem seçip ona sadık kalmaktır. 8pt grid, yaygınlığı ve ekran yoğunluklarıyla uyumu sayesinde iyi bir varsayılandır.
8pt grid ile 12 kolonlu grid aynı şey mi?
Hayır. 12 kolonlu grid sayfanın yatay düzenini (sütunları), 8pt grid ise boşluk ve ölçüleri belirler. İkisi birlikte kullanılır: Kolon ve oluk genişliklerini de 8’in katları seçebilirsiniz. Kolon ızgarasını kompozisyon yazısında anlattım.
Boşluk çok fazla olursa ne olur?
Gruplar birbirinden kopar ve sayfa boş, bağlantısız görünür. Boşluk ilişkiyi anlatır; her yere aynı cömert boşluğu vermek de tıpkı her yere aynı dar boşluğu vermek gibi ilişkileri siler.
Bu yazı Kasım 2026 itibarıyla geçerli bilgilere dayanır.
