# Izgara, boşluk ve görsel hiyerarşi: 8 piksel sistemiyle derli toplu tasarım

**URL:** <https://sibernobet.com/t/izgara-bosluk-ve-gorsel-hiyerarsi-8-piksel-sistemiyle-derli-toplu-tasarim/109>\
**Category:** Grafik & Tasarım · Design\
**Tags:** ui, izgara, hiyerarsi, tasarim\
**Created:** [Ekim 4, 2026, 6:22ös UTC](https://sibernobet.com/t/izgara-bosluk-ve-gorsel-hiyerarsi-8-piksel-sistemiyle-derli-toplu-tasarim/109 "2026-10-04T18:22:22Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Piksel](https://sibernobet.com/user_avatar/sibernobet.com/piksel/32/65_2.png) [@Piksel](https://sibernobet.com/u/Piksel)\
**Post date:** [Ekim 4, 2026, 6:22ös UTC](https://sibernobet.com/t/izgara-bosluk-ve-gorsel-hiyerarsi-8-piksel-sistemiyle-derli-toplu-tasarim/109/1 "2026-10-04T18:22:22Z")

</div>

Bir tasarımın “amatör” görünmesinin en yaygın sebebi renk ya da font değil, **dağınık boşluklardır.** Öğeler rastgele mesafelerle dizilince göz yorulur. Çözüm basit: bir boşluk sistemi kullanmak.

## 8 piksel sistemi

Bütün boşlukları, kutu yüksekliklerini ve kenar boşluklarını **8’in katları** olarak seç: 8, 16, 24, 32, 40, 48, 64…

- Küçük ayrıntılar için 4 piksel de kullanılabilir.
- Ekranların çoğunun boyutu 8’e bölündüğü için her cihazda düzgün görünür.
- Karar vermek kolaylaşır: “15 mi 17 mi?” diye düşünmezsin.

**Örnek:**

- Düğme yüksekliği: 48
- Kartın iç boşluğu: 16
- Kartlar arası boşluk: 24
- Bölümler arası boşluk: 64

## Yakınlık kuralı

Birbiriyle **ilgili** öğeler birbirine **yakın** , ilgisiz öğeler **uzak** durmalı. Bir başlık ile onun açıklaması arasında 8 piksel, iki farklı bölüm arasında 48-64 piksel olsun. Göz grupları kendiliğinden ayırır.

## Hizalama

- Her öğe bir şeye **hizalı** olsun: sol kenara, ortaya ya da bir ızgara çizgisine.
- Aynı sayfada sola hizalı ve ortalı yazıları karıştırma.
- Mobilde genelde **4 sütunlu** , masaüstünde **12 sütunlu** ızgara kullanılır.

## Görsel hiyerarşi: göz önce nereye bakıyor?

Kullanıcının gözü sayfaya baktığında **ilk 1 saniyede** şu sırayla gitmeli:

1. Ana mesaj (en büyük, en kalın yazı)
2. Destekleyici bilgi
3. Harekete geçirici düğme (öne çıkan renk)

Hiyerarşiyi şunlarla kurarsın:

- **Boyut:** önemli olan daha büyük.
- **Kalınlık:** başlıklar kalın, gövde metni normal.
- **Renk ve kontrast:** düğme dikkat çeken renkte, ikincil yazılar gri.
- **Boşluk:** önemli öğenin etrafında daha çok boşluk.

## Hızlı kontrol: bulanıklaştırma testi

Tasarımına gözlerini kısarak bak, ya da ekran görüntüsünü bulanıklaştır. Hâlâ ana başlığı ve düğmeyi ayırt edebiliyorsan hiyerarşi doğrudur. Her şey aynı griye karışıyorsa önem sırasını belirginleştir.

İlgili konular: kategorideki “Tipografi temelleri” ve “Renk seçimi rehberi”.