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:
- Ana mesaj (en büyük, en kalın yazı)
- Destekleyici bilgi
- 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”.