UI/UX Tasarım

UX tasarım nedir?

UX (User Experience — Kullanıcı Deneyimi) tasarımı; bir ürün veya web sitesiyle etkileşime giren kullanıcının tüm deneyimini kapsar. Ziyaretçi aradığını ne kadar hızla buluyor? Hangi adımlarda takılıyor? Satın alma veya iletişim kararına giden yol ne kadar sürtünmesiz? UX tasarımı bu soruları veriye dayalı olarak yanıtlar.

İyi UX tasarımı, sitenin nasıl göründüğünden çok nasıl çalıştığıyla ilgilenir. Sessiz bir rehber gibi işlev görür: kullanıcı çaba hissetmez, sadece istediğine ulaşır. Başarılı UX'in en önemli özelliği görünmez olmasıdır — kullanıcı "bu site harika" değil, "tam istediğimi buldum" der.

UX tasarımı subjektif değildir. Kullanıcı araştırması, kullanılabilirlik testleri, ısı haritaları ve dönüşüm verisi — bunlar UX kararlarını şekillendiren ölçülebilir sinyallerdir. "Bana güzel görünüyor" yerine "kullanıcı testi bu düğmeye tıklamadığını gösteriyor" mantığıyla çalışır. Bu nesnel yaklaşım, subjektif zevk tartışmalarının önüne geçer ve karar süreçlerini hızlandırır.

UI tasarım nedir?

UI (User Interface — Kullanıcı Arayüzü) tasarımı; kullanıcının etkileşime girdiği görsel bileşenlerin planlanmasıdır. Düğmeler, formlar, kart bileşenleri, ikonlar, renk paleti, tipografi sistemi ve boşluk yönetimi UI tasarımın kapsamındadır. UI, UX'in görünür yüzüdür: kullanıcı kararları, doğru UI ile onları doğal hissettiren adımlara dönüşür.

UI tasarımın en kritik görevlerinden biri bilişsel yük yönetimidir. Bir sayfada ne kadar çok eleman, renk, boyut çeşidi ve eylem seçeneği varsa kullanıcının beyni o kadar fazla çalışmak zorunda kalır. İyi UI bu yükü azaltır: benzer öğeler aynı görünür, önem hiyerarşisi boyut ve kontrast ile işaretlenir, ikincil bilgiler görünür ama baskın değildir.

UX ve UI birlikte nasıl çalışır?

UX "ne yapılacak"ı, UI "nasıl görüneceği"ni belirler. İkisi birbirini tamamlar. Güçlü UX akışına sahip ama görsel açıdan zayıf bir site güven sorunu yaratır; tam tersi ise kullanımı zor ama güzel görünen bir siteye dönüşür. Her ikisi birlikte doğru yürütüldüğünde çıktı hem estetik hem de işlevseldir.

Bu iki disiplinin kesişim noktası en açık şekilde butonlarda görülür. UX kararı: "Hangi sayfa bölümünde buton olmalı? Kaç seçenek sunulmalı? Birincil ve ikincil eylem nasıl ayrıştırılmalı?" UI kararı: "Butonun rengi, boyutu, köşe yarıçapı, hover durumu ve devre dışı durumu nasıl görünmeli? WCAG kontrast standardını karşılıyor mu?" İki disiplinin yanıtları uyuşmadığında ya estetik değer düşer ya da akış bozulur.

UX araştırma yöntemleri

UX kararları veriye dayanır. Proje kapsamına ve bütçesine göre kullanılan araştırma yöntemleri şunlardır:

Kullanıcı görüşmeleri

Hedef kitleyi temsil eden gerçek kişilerle yapılan birebir görüşmeler. "Siteyi kullanırken nerede zorlandınız?" gibi açık uçlu sorular, anketlerin yakalayamadığı nüansları ortaya çıkarır. Küçük bir örneklem (5–8 kişi) bile kritik kullanılabilirlik sorunlarını tespit etmek için genellikle yeterlidir.

Analitik verisi okuma

Mevcut bir site varsa Google Analytics 4 veya benzeri araçlardan alınan veriler altın değerindedir: hangi sayfalarda bounce rate yüksek? Kullanıcılar dönüşüm öncesi hangi adımda ayrılıyor? Hangi cihaz grupları en yüksek terk oranına sahip? Bu veriler tasarım kararlarını yönlendirir.

Rakip analizi

Hedef kitle hangi siteleri kullanıyor ve bu sitelerde hangi kalıplar tekrarlanıyor? Kullanıcıların alışkın olduğu UX kalıplarına uymak (örneğin alışveriş sepeti ikonunun sağ üstte olması) öğrenme maliyetini düşürür. Rakip analizi yenilik değil, kullanıcı zihinsel modelini anlamak için yapılır.

Kullanılabilirlik testi

Prototip veya canlı site üzerinde gerçek görevler verilen kullanıcıların gözlemlenmesi. "Ürün sayfasına gidip iletişim formunu doldurun" gibi bir görev verilir; kullanıcının ne yaptığı, nerede tereddüt ettiği kayıt altına alınır. Bu test, tasarımcının körleştiği sorunları gün ışığına çıkarır.

Renk teorisi UI tasarımında nasıl uygulanır?

Renk, UI tasarımında en güçlü ve en fazla yanlış kullanılan araçtır. Birkaç temel ilke hiyerarşiyi ve okunabilirliği belirler:

• Birincil renk: Marka rengi — logoda, başlıklarda ve birincil CTA düğmelerinde kullanılır. Bir sayfada aşırı kullanılmamalıdır; sık gördüğünüz şey dikkat çekmez.
• İkincil renk: Birincil renkle kontrast oluşturan tamamlayıcı ton — vurgu alanlarında kullanılır.
• Nötr renkler: Metin, arka plan, border — bunlar sayfanın büyük çoğunluğunu kaplar. Doğru nötr seçimi markanın tüm tonuyla uyum içinde olmalıdır.
• Durum renkleri: Yeşil (başarı), kırmızı (hata), sarı (uyarı), mavi (bilgi) — standart renklerdir ve kullanıcı beklentisiyle örtüşmesi gerekir.
• WCAG kontrast: Normal metin için minimum 4.5:1 oranı, büyük metin için 3:1 — renk körü kullanıcılar dahil herkes için okunabilirliği garanti eder.

Tipografi sistemi

UI tasarımında tipografi; ölçek, ağırlık ve satır aralığından oluşan sistematik bir yapıdır. Rastgele boyut seçimi yerine matematiksel bir ölçek (1.25x ya da 1.333x adımlı) tutarlı bir hiyerarşi oluşturur. Bir projede tipik olarak şu kademeler belirlenir: başlık büyük (H1), başlık orta (H2–H3), body, body küçük, etiket ve yardımcı metin.

Font seçimi hem estetiği hem performansı etkiler. Her web fontu ekstra bir ağ isteği oluşturur ve sayfa ağırlığını artırır. İki aileden fazlasını kullanmak nadiren gereklidir; çoğu zaman bir başlık fontu ile bir metin fontu yeterlidir. Sistem fontları (system-ui, -apple-system) sıfır yükleme süresi sağlar ve deneyimli kullanıcılar tarafından güvenilir bulunur.

UI bileşen sistemi nedir?

UI bileşen sistemi; buton, kart, form alanı, uyarı, navigasyon ve modal gibi tekrar eden arayüz öğelerini standart, belgelenmiş ve tutarlı biçimde tanımlayan bir tasarım kütüphanesidir. Her bileşenin durumları (varsayılan, hover, aktif, devre dışı, hata) tanımlanmış olduğunda geliştirici tasarıma bağlı kalır ve tutarsız UI'ın oluşması önlenir.

Küçük projeler için kapsamlı bir bileşen sistemi her zaman gerekli değildir; ancak birden fazla tasarımcı veya geliştiricinin çalıştığı, birden fazla sayfanın bulunduğu projelerde bileşen sistemi ilerleyen aylarda ciddi zaman ve kalite avantajı sağlar.

Erişilebilirlik (a11y) neden tasarım meselesidir?

Renk kontrastı, klavye navigasyonu, ekran okuyucu uyumu ve odak yönetimi — bunlar tasarım kararlarıdır. WCAG 2.1 AA uyumlu renk kontrastı, düşük görüşlü kullanıcılar için erişilebilirlik sağlarken Google'ın da değer verdiği okunabilirlik sinyali gönderir. Erişilebilirlik her projemizde kontrol listesinin zorunlu bir parçasıdır.

Pratik erişilebilirlik kuralları: Her görsel için metin alternatifi, her formun etiketli alanları, her eylemin klavye ile ulaşılabilir olması, odak sıralamasının mantıksal akması ve hata mesajlarının yalnızca renge değil metne de dayalı olması. Bunlar hem kısıtlaması olan kullanıcılar hem de klavye ile hızlı gezinen teknik kullanıcılar için değer taşır.

Tasarım sürecimiz

1. Keşif: Hedef kitle profili, rakip analizi ve marka değerleri belirlenir. Mevcut siteniz varsa kullanıcı akışı denetlenir.
2. Bilgi mimarisi: Sayfa yapısı, navigasyon hiyerarşisi ve içerik akışı planlanır. Hangi sayfa hangi amaca hizmet eder netleştirilir.
3. Wireframe: Her sayfanın içerik düzeni ve etkileşim akışı taslak (düşük sadakat) olarak çizilir. Geri bildirim bu aşamada alınır.
4. UI konsept: Renk paleti, tipografi sistemi ve temel bileşenler tasarlanır. Moodboard ile marka uyumu doğrulanır.
5. Yüksek sadakat prototip: Tıklanabilir prototip hazırlanır; kullanıcı akışları gerçeğe yakın biçimde test edilir.
6. Bileşen sistemi: Tekrar kullanılabilir UI bileşenleri dokümante edilir; geliştirme aşamasında tutarlılık sağlanır.
7. Geliştirmeye devir: Tüm varlıklar (renk değerleri, font ölçekleri, bileşen davranışları) geliştirici için hazırlanır.

Yalnızca UI/UX mı, yoksa geliştirme de mi?

Her iki senaryoda çalışıyoruz. Yalnızca tasarım aşamasını yürütüp varlıkları kendi geliştiricinize aktarabiliriz. Ya da tasarımdan geliştirmeye kadar tüm süreci üstlenebiliriz. İkinci senaryo tasarım-geliştirme tutarlılığını garanti eder: tasarımda alınan kararların koda tamamen yansıdığını, hiçbir bileşenin "yaklaşık" uygulanmadığını teslim aşamasında doğrulayabiliriz.