Bir web sitesi arayüzü, kullanıcının siteyle kurduğu ilk ve en somut temas noktasıdır. İyi bir arayüz; doğru kontrast, tutarlı tipografi, anlaşılır navigasyon ve yeterince büyük tıklama alanları gibi birkaç somut karara bağlıdır — büyük bir gizem değil, doğru sırayla verilmiş küçük kararlar bütünüdür.
Arayüz Tasarımı ile UI/UX Tasarımı Aynı Şey mi?
Hayır, ama iç içe geçerler. UI/UX tasarımı kullanıcı araştırması, bilgi mimarisi ve genel deneyimi kapsayan daha geniş bir disiplindir; bunu UI/UX tasarım yazımızda ayrıntılı anlattık. Bu yazıda arayüzün somut yapı taşlarına — renk, tipografi, navigasyon, düzen — ve bunları tasarlarken karşılaşacağınız pratik kararlara odaklanıyoruz. Web sitenizin tamamını sıfırdan tasarlama sürecini merak ediyorsanız web sitesi tasarımı rehberimize bakabilirsiniz.
Arayüzün Temel Yapı Taşları
Düzen ve Izgara Sistemi (Grid)
İçeriği sayfaya rastgele değil, bir ızgara sistemine göre yerleştirmek gözü yormadan tarayabileceğiniz bir düzen kurar. 12 kolonluk ızgara çoğu tasarım aracında hazır gelir ve farklı ekran genişliklerine göre içeriği yeniden düzenlemeyi kolaylaştırır. Boşluk bırakmaktan çekinmeyin — her alanı doldurmak değil, gözü dinlendirecek boşluğu doğru yerde bırakmak arayüzü ferah gösterir.
Renk ve Kontrast
Renk seçimi estetik bir karar gibi görünse de aslında okunabilirlik meselesidir. WCAG AA standardı, normal metin için arka plan ile yazı rengi arasında en az 4.5:1 kontrast oranı önerir; açık gri üzerine açık gri yazı bu oranı genelde tutturamaz. Ücretsiz kontrast kontrol araçlarıyla bu oranı tasarım aşamasında test etmek, yayına çıktıktan sonra fark edilen bir okunabilirlik sorununu baştan önler.
Tipografi
Bir sayfada ikiden fazla font ailesi kullanmak nadiren iyi sonuç verir. Başlıklar için bir, gövde metni için bir font yeterlidir; aralarındaki fark boyut ve kalınlıkla (bold/regular) kurulabilir. Satır yüksekliğini (line-height) gövde metninde font boyutunun yaklaşık 1,4-1,6 katı tutmak, uzun paragrafları okurken gözün satırı kaybetmesini azaltır.
Navigasyon
Kullanıcı, sitenin neresinde olduğunu ve nereye gidebileceğini her zaman anlayabilmeli. Az sayfalı bir site için yatay bir üst menü genelde yeterlidir; çok sayfalı, kategorili bir yapı için mega menü veya açılır alt menüler gerekebilir. Mobilde hamburger menüye geçerken, en sık tıklanan 1-2 bağlantıyı (örneğin 'İletişim' veya 'Sepet') menünün dışında her zaman görünür bırakmak dönüşümü kolaylaştırır.
Tıklama ve Dokunma Alanları
Masaüstünde küçük bir buton fare imleciyle sorun yaratmaz, ama mobilde parmakla dokunulan bir alanın en az 44x48 piksel civarında olması Apple ve Google'ın kendi tasarım rehberlerinde önerilir. Bu ölçünün altındaki butonlar, özellikle büyük parmaklı kullanıcılar için yanlış tıklamalara yol açar.
AppFellas
Fikrinizi konuşalım.
Ücretsiz keşif görüşmesinde projenizi, bütçenizi ve zaman çizelgenizi netleştirelim.
Tasarım Aracı Seçimi
| Araç | Öne çıkan özellik | Kimin için uygun |
|---|---|---|
| Figma | Tarayıcı tabanlı, gerçek zamanlı ortak çalışma, geniş ücretsiz plan | Ekiple birlikte çalışanlar, yeni başlayanlar |
| Adobe XD | Adobe paketiyle (Photoshop, Illustrator) entegrasyon | Zaten Adobe ekosistemini kullanan tasarımcılar |
| Sketch | Mac'e özel, geniş eklenti kütüphanesi | Uzun süredir Mac'te çalışan deneyimli tasarımcılar |
Sık Yapılan Arayüz Tasarım Hataları
- Düşük kontrastlı renk kombinasyonları kullanmak — estetik görünür ama okunmaz.
- Mobilde test etmeden sadece masaüstü ekranda tasarımı onaylamak.
- Her sayfada farklı buton stili kullanmak; kullanıcı hangi elemanın tıklanabilir olduğunu tahmin etmek zorunda kalır.
- Çok fazla font ailesi ve boyutu bir arada kullanmak.
- Görselleri optimize etmeden yüklemek, sayfa hızını ve dolayısıyla kullanıcı deneyimini düşürmek.
Arayüzü Yayına Almadan Önce Test Etme
Tasarımı ekibinizle onaylamak yeterli değildir; sitenizi hiç görmemiş birine 5 saniye gösterip ne yapan bir site olduğunu sorduğunuzda cevap veremiyorsa, ana mesaj net değil demektir. Isı haritası (heatmap) araçları, kullanıcıların sayfada nereye tıkladığını ve nerede takıldığını gösterir; canlıya aldıktan sonraki ilk haftalarda bu veriye bakmak, tasarım kararlarının işe yarayıp yaramadığını gösterir.
Arayüz tasarımını kendi ekibinizle yapamayacaksanız yazılım hizmetlerimize göz atabilir ya da projenizi anlatmak için bize yazabilirsiniz.
Sık sorulan sorular
Web sitesi arayüzü ile UX tasarımı aynı şey midir?
Hayır. Arayüz (UI), gördüğünüz somut öğeleri — renk, tipografi, buton, navigasyon — kapsar. UX ise kullanıcının siteyle olan bütün deneyimini, araştırmadan bilgi mimarisine kadar kapsayan daha geniş bir alandır.
Hangi tasarım aracını öğrenmeliyim, Figma mı Adobe XD mi?
Yeni başlıyorsanız Figma daha uygun bir seçenektir: tarayıcıda çalışır, kurulum gerektirmez ve geniş bir ücretsiz plana sahiptir.
Kontrast oranı neden bu kadar önemli?
Düşük kontrast, özellikle zayıf ışıkta veya küçük ekranda metni okunmaz hale getirir. WCAG AA standardı normal metin için en az 4.5:1 kontrast oranı önerir.
Mobilde buton boyutu ne olmalı?
Apple ve Google'ın tasarım rehberleri, dokunma alanının en az 44x48 piksel civarında olmasını önerir. Daha küçük butonlar yanlış tıklamalara yol açar.
Arayüz tasarımını kendim mi yapmalıyım, profesyonelden mi destek almalıyım?
Basit, az sayfalı bir site için hazır şablonlarla kendiniz ilerleyebilirsiniz. Marka kimliğinizi yansıtan, dönüşüm odaklı bir tasarım istiyorsanız bir tasarımcıyla çalışmak uzun vadede zaman kazandırır.
