UI/UX Tasarım

İyi Tasarım Görünür Olmadığı Zaman İşini Yapar

UI ve UX, çoğu zaman birbirinin yerine kullanılan iki ayrı disiplindir. Kullanıcı yüzeyde "güzel" gördüğünü UI tasarımına borçludur; fakat o güzel görseli kullanırken yorulmadan, kaybolmadan ve durup düşünmeden hareket edebiliyorsa arkada iyi bir UX vardır. UI/UX tasarım, bu iki tarafı tek bir tutarlı deneyime dönüştürdüğüm süreçtir. Kullanıcı araştırmasından Figma üzerinde yüksek detaylı prototipe, oradan da koda geçişe kadar tüm akışı yönetiyorum.

UI/UX tasarım nedir?

UI (User Interface) tasarımı, ürünün kullanıcı gördüğü yüzü ile ilgilenir: renk paleti, tipografi, buton biçimi, ikon dili ve ekran düzeni. UX (User Experience) tasarımı ise kullanıcının ürünle olan tüm yolculuğunu kurgular: hangi adımı önce göreceğini, bir hatadan nasıl döneceğini, hangi bilgiyi hangi anda hatırlatacağını planlar.

İkisi ayrı disiplin olduğu için iki ayrı kişiyle çalışmak gerektiği düşünülür. Pratikte ürün boyutu büyük olmadığı sürece aynı tasarımcı her iki tarafı yürütür; iş büyüdükçe takım uzmanlaşır. Önemli olan iki tarafın aynı kaynakta planlanmasıdır; biri bittikten sonra diğerinin başlaması ürünü her zaman zayıflatır.

Neden UI/UX tasarım gerekli?

"Önce kod yazalım, tasarım sonra eklenir" yaklaşımı üç tipik sorunu yaratır:

• Geri dönüş maliyeti yüksek olur — Kodun içine gömülmüş bir akış yanlışsa düzeltmek günler sürer. Aynı yanlışı wireframe aşamasında bulmak dakikalardır.
• Marka tutarsız kalır — Renk, tipografi ve buton biçimi her sayfada başka türlü olursa kullanıcı ürünün ciddiyetini hissetmez. Design system bu tutarsızlığı baştan engeller.
• Kullanıcı testi atlanır — Hızlıca yayına alınan tasarımın gerçek kullanıcıya nasıl göründüğü tahmin edilir; oysa 5-7 kullanıcılık bir kullanılabilirlik testi en büyük problemleri ortaya çıkarır.

İyi UI/UX tasarımı işini sessizce yapar; kullanıcı "bu ne kadar güzel düşünülmüş" diye fark etmez, sadece amaca rahatça ulaşır.

UI/UX tasarım süreci nasıl ilerliyor?

1. Kullanıcı araştırması — Kim için tasarlıyoruz, bu kişinin hangi sorununu çözüyoruz, mevcut alışkanlıkları nedir. Çıktı: 2-3 persona ve temel kullanım senaryoları.
2. Bilgi mimarisi ve kullanıcı akışı — Hangi sayfa hangi sayfaya bağlanır, bir kullanıcı hedefine kaç adımda ulaşır. Kâğıt üzerinde akış diyagramı.
3. Wireframe (tel çerçeve) — Ekran iskeletleri düşük detay seviyesinde çizilir. Renksiz, tipografisiz, sadece yapı. Tartışma bu aşamada yapılır.
4. Tasarım sistemi — Renk paleti, tipografi ölçeği, buton ve form bileşenleri, kart yapıları, ikon dili. Tek bir kaynak haline gelir.
5. Yüksek detay prototipi — Figma'da tıklanabilir prototip. Mikro-etkileşim, animasyon ve durum geçişleri planlanır.
6. Kullanılabilirlik testi — 5-7 gerçek kullanıcıyla görev bazlı test. Kayıtlar üzerinden hangi noktada takıldıkları belirlenir.
7. Geliştirici teslimi — Tasarım dosyası bileşen olarak ölçeklendi, spec'ler net, asset'ler dışa aktarılabilir. Geliştirici bekletilmez.

Hangi araçlarla çalışıyorum?

• Figma + FigJam — Ana tasarım aracı. Wireframe, mockup, prototip ve bileşen kütüphanesi tek yerde. FigJam kullanıcı akışı ve workshop için.
• Adobe XD ve Sketch — Müşteri ekibi bu araçları kullanıyorsa proje dosyalarını burada da hazırlıyorum.
• Maze veya UserTesting — Uzaktan kullanılabilirlik testi için. Kullanıcı görev tamamlama süreleri ve tıklama ısı haritaları.
• Hotjar / Microsoft Clarity — Yayındaki ürün için davranış analizi. Hangi bölüm scroll'da gözden kaçıyor, hangi buton tıklanıyor.
• Storybook — Tasarım sisteminin kod karşılığı. Geliştirici ile tasarımcı aynı bileşen üzerinde konuşur.
• Tasarım tokenları (design tokens) — Renk, boşluk ve tipografi değerleri JSON olarak tutulur, hem tasarım hem kod aynı kaynaktan beslenir.

UI/UX tasarım kapsamında neler yapıyorum?

• Mevcut ürün için UX denetimi: kullanıcı akışı, sayfa hızı ve dönüşüm engelleri tespiti
• Web sitesi tasarımı: kurumsal, e-ticaret ve SaaS arayüzü için tam yığın UI/UX
• Mobil uygulama tasarımı: iOS ve Android için native his veren responsive ekranlar
• Admin panel ve B2B uygulama tasarımı: veri-yoğun ekranlar, tablolar, filtre ve form sistemleri
• Design system kurulumu: bileşen kütüphanesi, dokümantasyon, kullanım kuralları
• Erişilebilirlik (WCAG 2.1 AA): kontrast, klavye navigasyonu, ekran okuyucu uyumu
• Prototipleme ve kullanılabilirlik testi: yayın öncesi risk tespiti
• Tasarımdan kod geçişi: geliştirici teslimi, asset export, spec dokümanı

Hangi projeler için uygundur?

UI/UX tasarım yatırımı her proje için aynı miktarda gerekmez. Şu durumlarda gerçekten fark yaratır:

• Yeni bir ürün lansmanı yapıyorsunuz ve ilk kullanıcı deneyimi başarı için kritik.
• Mevcut ürününüzde kullanıcı şikayetleri arttı, ekibinizin tahmin değil veri temelli karar alması gerekiyor.
• Mobil dönüşümünüz desktop'un altında kalıyor; sebep çoğu zaman tasarım, içerik değil.
• SaaS ürününüzde onboarding aşaması zayıf ve free trial kullanıcıları paid'e geçmeden çıkıyor.
• Tasarımcı ve geliştirici farklı dilden konuşuyor; design system'iniz yok ve her ekran sıfırdan çiziliyor.

Karar verme yardımcısı

Tasarım her zaman "güzel görünmek" için yapılmaz. Asıl iş, kullanıcının amacına minimum sürtüşmeyle ulaşmasını sağlamaktır. Eğer ürününüzde kullanıcı kaybediyor, dönüşüm düşük veya yeni bir ürünü doğru oturtmak istiyorsanız UI/UX tasarım doğru yatırımdır. Süreci her zaman kısa bir keşif görüşmesiyle başlatıyorum; mevcut ürününüzü, kullanıcı geri bildirimini ve gerçek darboğazları birlikte değerlendiriyoruz. Bazı projelerde tam yığın yeniden tasarım gerekmiyor; hedefli bir UX denetimi yeterli oluyor.