UX ve UI Arasındaki Fark: Kapsamlı Karşılaştırma

Seviye: Başlangıç
Kategori: Temel Kavramlar
Son güncelleme: Ocak 2025

---

Giriş

"UX/UI Designer arıyoruz."

İş ilanlarının %80'i böyle yazıyor. Sanki UX ve UI aynı şeymiş gibi. Ya da biri diğerinin parçasıymış gibi.

Değil.

UX ve UI farklı disiplinler. Farklı sorulara cevap veriyorlar, farklı beceriler gerektiriyorlar, farklı çıktılar üretiyorlar. Ama birlikte çalışıyorlar, birbirlerini tamamlıyorlar.

Bu yazıda UX ve UI arasındaki farkı bir kez ve herkes için netleştireceğiz. Benzetmeler, örnekler ve tablolarla.

---

Tek Cümlede Fark

UX deneyimi tasarlar. UI görüntüyü tasarlar.

---

Benzetmelerle Anlamak

Ev Benzetmesi

Bir ev inşa ettiğini düşün:

UX:

• Evin planı (kaç oda, nerede)
• Odalar arası geçişler
• Kapıların açılış yönü
• Elektrik prizlerinin konumu
• Mutfak tezgahının yüksekliği
• Işığın nereden geleceği

UI:

• Duvar renkleri
• Mobilya seçimi
• Aydınlatma armatürleri
• Zemin kaplaması
• Perde ve dekorasyon
• Kapı kollarının tasarımı

Restoran Benzetmesi

UX:

• Menü yapısı ve kategorileri
• Sipariş süreci
• Masaların yerleşimi
• Garsonun ne zaman geleceği
• Ödeme akışı
• Bekleme süresi

UI:

• Menünün görsel tasarımı
• Tabak ve çatal bıçak seçimi
• İç mekan dekorasyonu
• Aydınlatma ambiyansı
• Garson üniforması
• Logo ve marka renkleri

Araba Benzetmesi

UX:

• Vites kolunun konumu
• Gösterge panelinin düzeni
• Klima kontrollerinin mantığı
• Bagajın açılış şekli
• Sürüş deneyimi

UI:

• Gösterge panelinin görsel tasarımı
• Buton ve düğmelerin şekli
• İç mekan renkleri ve malzemeleri
• Ekran arayüzü tasarımı
• Işıklandırma

---

Detaylı Karşılaştırma

[TABLE] | Özellik | UX Design | UI Design | |---------|-----------|-----------| | Tam adı | User Experience Design | User Interface Design | | Odak | Deneyim, akış, yapı | Görsel, estetik, etkileşim | | Ana soru | Nasıl çalışmalı? | Nasıl görünmeli? | | Kullanıcı ile ilişki | Kullanıcıyı anlamak | Kullanıcıya sunmak | | Araştırma | Kullanıcı araştırması | Görsel trend araştırması | | Çıktılar | Persona, journey map, wireframe, flow | Mockup, style guide, design system | | Araçlar | FigJam, Miro, Maze | Figma, Illustrator, Principle | | Test | Kullanılabilirlik testi | Görsel A/B test, preference test | | Başarı kriteri | Kullanıcı görevi tamamladı mı? | Görsel açık ve çekici mi? | | Analoji | Mimarın planı | İç mimarın dekorasyonu | [/TABLE]

---

Süreçte Nerede Duruyorlar?

Tipik bir tasarım sürecinde:

---

Çıktılar Karşılaştırması

UX Designer Çıktıları

| Çıktı | Açıklama | |-------|----------| | Persona | Hedef kullanıcı profili | | User Journey Map | Kullanıcı yolculuğu haritası | | User Flow | Kullanıcı akış diyagramı | | Wireframe | Düşük sadakatli ekran taslakları | | Information Architecture | İçerik ve navigasyon yapısı | | Usability Test Raporu | Test bulguları ve öneriler |

UI Designer Çıktıları

| Çıktı | Açıklama | |-------|----------| | Style Guide | Renk, tipografi, spacing kuralları | | Mockup | Yüksek sadakatli ekran tasarımları | | Design System | Tekrar kullanılabilir bileşenler | | Icon Set | Tutarlı ikon kütüphanesi | | Prototype | Etkileşimli ve animasyonlu prototip | | Redline/Spec | Developer için ölçü ve detaylar |

Görsel Fark

[COMPARISON] Wireframe (UX): Gri kutular, placeholder metinler, akış odaklı, görsel detay yok

Mockup (UI): Gerçek renkler, fontlar, ikonlar, görseller, piksel-perfect tasarım [/COMPARISON]

---

UX/UI Designer: Hibrit Rol

İş ilanlarında sıkça gördüğün "UX/UI Designer" title'ı ne anlama geliyor?

Ne zaman bu rol mantıklı?

• Küçük ekipler ve startup'lar
• Sınırlı bütçe
• Hızlı hareket etme ihtiyacı
• Tek tasarımcılı projeler

Ne zaman roller ayrılmalı?

• Büyük ve karmaşık projeler
• Derin araştırma gerektiren ürünler
• Yüksek görsel standart beklentisi
• Yeterli bütçe ve ekip büyüklüğü

---

Hangisi Önce Gelir?

Genel kural: UX önce.

Çünkü:

1. Önce problemi anlamalısın (UX araştırma)
2. Sonra yapıyı kurmalısın (UX yapı)
3. Sonra görselleştirmelisin (UI)

Ama pratikte bu kadar net değil. İkisi paralel ilerleyebilir:

• UX wireframe çizerken, UI style exploration yapabilir
• UI tasarlarken, UX sorunları fark edilebilir
• Test sonuçları ikisini de etkiler

---

Birlikte Nasıl Çalışırlar?

İdeal iş akışı

[UX Research] ↓ [UX: Persona, Journey Map] ↓ [UX: Information Architecture, Flow] ↓ [UX: Wireframe] ←→ [UI: Style Exploration] ↓ [UI: Visual Design, Mockup] ↓ [UX + UI: Prototype] ↓ [UX: Usability Test] → Feedback → [Iterate] ↓ [UI: Design System, Handoff]

İletişim noktaları

| Aşama | UX → UI | UI → UX | |-------|---------|---------| | Araştırma sonrası | Persona, kullanıcı ihtiyaçları | - | | Yapı sonrası | Wireframe, flow | Görsel kısıtlar, teknik limitler | | Tasarım sırasında | Akış değişiklikleri | Görsel alternatifler | | Test sonrası | Kullanılabilirlik bulguları | Görsel feedback |

---

Yaygın Yanlış Anlamalar

"UX = Wireframe"

Hayır. Wireframe, UX'in sadece bir çıktısı. UX araştırmayla başlar, stratejiyle devam eder.

"UI = Güzel tasarım"

Kısmen. UI estetik ama aynı zamanda fonksiyonel, tutarlı ve erişilebilir olmalı.

"UI olmadan UX olur"

Teknik olarak evet. Wireframe'lerle test yapılabilir. Ama final ürün için UI şart.

"UX olmadan UI olur"

Yine teknik olarak evet. Ama sonuç güzel görünen ama kullanılamayan bir ürün olabilir.

"UX daha önemli"

İkisi de önemli. Kötü UX + iyi UI = frustrasyon. İyi UX + kötü UI = terk. İkisi dengede olmalı.

---

Kariyer Perspektifi

UX Designer olmak istiyorsan

Güçlü olman gereken alanlar:

• Kullanıcı araştırması
• Problem tanımlama
• Analitik düşünme
• İletişim ve sunum
• Empati

Daha az kritik:

• Görsel tasarım detayları
• Renk teorisi
• Tipografi uzmanlığı

UI Designer olmak istiyorsan

Güçlü olman gereken alanlar:

• Görsel tasarım prensipleri
• Tipografi
• Renk ve kompozisyon
• Detaylara dikkat
• Design system düşüncesi

Daha az kritik:

• Derin kullanıcı araştırması
• İstatistik ve veri analizi

UX/UI Designer olmak istiyorsan

Her iki alanın temellerine hakim olmalısın. Ama genellikle bir tarafta daha güçlü olursun. Bu normal.

---

Gerçek Dünya Örneği

Bir e-ticaret uygulamasının "Sepete Ekle" özelliğini düşünelim:

UX açısından sorular:

• Kullanıcı ürünü sepete ne zaman eklemek istiyor?
• Sepete ekledikten sonra ne bekliyor?
• Sepete gitmek mi istiyor, alışverişe devam mı?
• Miktar seçimi gerekli mi?
• Aynı ürün zaten sepetteyse ne olacak?

UI açısından sorular:

• Buton ne renk olmalı?
• Buton nerede konumlanmalı?
• Tıklandığında nasıl bir feedback olmalı?
• Başarı animasyonu nasıl olmalı?
• Buton üzerinde ne yazmalı? İkon mu, text mi?

[COMPARISON] UX kararı: Sepete ekledikten sonra mini cart açılsın, kullanıcı sepeti görsün ama sayfada kalsın.

UI kararı: Buton primary yeşil (#10B981), tıklandığında scale animasyonu, ardından mini cart sağdan slide-in. [/COMPARISON]

---

---

---

İlgili İçerikler

Önceki: UI Nedir?

Sonraki: Wireframe Nedir?

İlgili konular:

• UX Nedir?
• UI Nedir?
• Product Design Nedir? (yakında)

İlgili Roadmap: UX Designer Roadmap → Temeller

---

Kaynaklar

Derinleşmek istersen:

• UX vs UI Design: What's the Difference? - NNGroup (İngilizce, 6 dk)
• The Difference Between UX and UI Design - IxDF (İngilizce, 10 dk)
• UI vs UX: What's the difference? - Figma (İngilizce, 8 dk)