web design uiApril 21, 20269 min read

UI vs UX: Gerçek Fark (ve Neden Çoğu Açıklama Yanlış)

UI ambalaj kağıdı değil. UX hediye değil. UI ve UX arasındaki gerçek fark, her rolün aslında ne yaptığı ve kimi ne için işe alacağınız.

By Boone
XLinkedIn
ui vs ux

UI ambalaj kağıdı değil. UX hediye değil. Ayrıca UI ketçap şişesi de değil, UX ketçap dökmek de değil.

İnternetteki her "UI vs UX" açıklaması arkasına bir analoji saklanıyor; çünkü o açıklamayı yazan kişi bu işlerden birini bile gerçekten yapmamış. Ketçap şişesi analojisi bir nesil tasarımcıya kelimenin tam anlamıyla hiçbir şey öğretmedi. Bir ketçap şişesinde görev hiyerarşisi yok, kullanıcı araştırması yok, hata modları yok, başarı metrikleri yok, 390px'de edge case yok. Bir çeşni malzemesi göndermiyorsunuz. Yazılım gönderiyorsunuz.

Bu makale analogileri öldürüyor, her disiplini tek bir cümlede tanımlıyor, her rolün günlük olarak gerçekte ne teslim ettiğini haritıyor ve yarın kullanabileceğiniz bir işe alım çerçevesi sunuyor.

Analogiler sorunun kendisi

Hâkim açıklamalar UI ve UX'i fiziksel metaforlarla ele alıyor; çünkü metafor yazmak tanım yazmaktan daha kolay. Bedeli ise şu: her genç tasarımcı ilk işine UI'nın "renkler ve fontlar", UX'in ise "his" olduğuna inanarak geliyor. İkisi de yanlış.

"UI araba, UX sürüştür" size bilgi mimarisi hakkında hiçbir şey söylemez. "UI ev, UX içinde yaşamaktır" size yolculuk haritası hakkında hiçbir şey söylemez. "UI görsel, UX etkileşimdir" en yaygın versiyonu ve aynı zamanda en yanlış olanı. UI tasarımcıları haftanın büyük bölümünü etkileşim durumlarıyla geçirir. UX tasarımcıları ise haftanın büyük bölümünü bilgi yoğunluğu ve düzen hiyerarşisi gibi görsel kararlarla geçirir. Çizgi analogilerin söylediği yerde değil.

Hepsini bir kenara bırakın. Her disiplinin aslında neye karar verdiğinden başlayın.

Gerçek tanım, her biri için tek cümle

UX karar mimarisidir. UI ise bu kararların ekrandaki ifadesidir. Hepsi bu.

UX neyin var olması gerektiğini ve ne zaman gerektiğini sorar. Bu ürünün hangi ekranlara ihtiyacı var. Kullanıcı bunların arasında nasıl bir sırayla ilerliyor. Her adımda hangi bilgi görünüyor. Kullanıcı kafası karıştığında, hata yaptığında veya acele ettiğinde ne oluyor. Başarı nasıl görünüyor ve bunu nasıl anlıyoruz.

UI bu kararların ekranda nasıl göründüğünü, hissettirdiğini ve hareket ettiğini sorar. Hiyerarşi ne, tipografi ne söylüyor, bir butona basıldığında nasıl davranıyor, bir modal nasıl giriyor, devre dışı bir durum ne iletiyor, tüm bunlar elli ekranda ve üç cihazda nasıl tutarlı kalıyor.

Aynı ürün. İki farklı karar katmanı. Biri diğeri olmadan teslim edilemez.

Üç sütunlu görev haritası: sol sütun UX çıktılarını gösterir (araştırma, yolculuk haritası, bilgi mimarisi, akışlar, wireframe'ler), sağ sütun UI çıktılarını gösterir (bileşenler, token'lar, durumlar, hareket, piksel düzeltmeleri), dar orta sütun ise örtüşmeyi gösterir (prototipleme, kullanıcı testi, tasarım incelemeleri)
Üç sütunlu görev haritası: sol sütun UX çıktılarını gösterir (araştırma, yolculuk haritası, bilgi mimarisi, akışlar, wireframe'ler), sağ sütun UI çıktılarını gösterir (bileşenler, token'lar, durumlar, hareket, piksel düzeltmeleri), dar orta sütun ise örtüşmeyi gösterir (prototipleme, kullanıcı testi, tasarım incelemeleri)

Bir UX tasarımcısı gerçekte ne yapar

Bir UX tasarımcısının haftası büyük ölçüde araştırma ve yapıdan oluşur; ekranlardan değil.

Kullanıcı görüşmeleri yaparlar, oturum kayıtlarını incelerler ve yolculuk haritaları oluştururlar. Bilgi mimarisi çizerler, taksonomi kararı verirler ve ürün yöneticileriyle bir özelliğin ne olduğu konusunda tartışırlar. Akışlar taslak çizerler. Kasıtlı olarak çirkin oldukları için kimsenin bakmak istemediği wireframe'ler üretirler. Gerçek kullanıcılarla prototipleri test ederek varsayımları doğrularlar ve kötü test sonuç veren özellikleri kaldırırlar.

Tipik UX çıktıları:

  • Kullanıcı araştırması sentezi ve personalar
  • Yolculuk haritaları ve akış diyagramları
  • Bilgi mimarisi ve içerik modelleri
  • Düşük sadakatli wireframe'ler
  • Kullanılabilirlik testi planları ve raporları
  • Başarı metrikleri ve enstrümantasyon şartnameleri

UX tasarımcısı, kimse "butonun rengi ne olacak" diye sormadan önce "bu ekran hiç var olmalı mı" diye soran kişidir.

Bir UI tasarımcısı gerçekte ne yapar

Bir UI tasarımcısının haftası tam tersi yöndedir. UX neyin ne olduğuna karar verdikten sonra o şeyin nasıl görüneceğine ve davranacağına karar verirler.

Görsel sistemler oluştururlar. Tip skalası, renk token'ları, boşluk ritmi ve bileşen şartnamesini belirlerler. Her etkileşim durumunu tasarlarlar (varsayılan, üzerine gelme, aktif, odak, devre dışı, yükleniyor, boş, hata). Hareket kurallarını tanımlarlar. Breakpoint'ler arasında piksel hiyerarşisine dikkat ederler ve ürünün her ekranda tek bir ürün gibi hissettirdiğinden emin olurlar. Mühendisliğin gerçekten tükettiği bileşen kütüphanesi ve design token'larını teslim ederler.

Tipik UI çıktıları:

  • Görsel tasarım sistemi (tip, renk, boşluk, grid)
  • Tüm etkileşim durumlarıyla bileşen kütüphanesi
  • Koda aktarılan design token'lar
  • Hareket ve geçiş şartnameleri
  • Yüksek sadakatli ekranlar ve yüksek çözünürlüklü mockup'lar
  • Mühendislik için hand-off belgeleri

UI tasarımcısı, ürünün yalnızca işlevsel değil tutarlı ve canlı hissettirmesinden sorumlu kişidir.

Örtüşmenin yaşadığı yer

Orta alan, iyi ürünlerin yapıldığı yerdir.

Prototipleme ortaktır. Her iki rol de prototip üretir; UX akışları doğrulamak için, UI hareket ve parlaklığı doğrulamak için. Kullanıcı testi ortaktır. UX testi tasarlar, UI görsel kararlarının kavramayı destekleyip desteklemediğini gözlemler. Tasarım incelemeleri tanımı gereği ortaktır ve yalnızca her iki perspektif de masada olduğunda işe yarar.

İşte rahatsız edici gerçek: UX'i anlamayan bir UI tasarımcısı güzel çıkmaz sokaklar teslim eder. Görsel olarak çalıştıramayan bir UX tasarımcısı ise kimsenin uygulamadığı strateji dökümanları teslim eder. İyiler, diğer tarafta yeterince geniş bir yelpazeyle kullanıcılarla ilk temasını atlatabilecek işler üretir. En iyiler ürün tasarımcısı olur; buna birazdan geleceğiz.

Ürününüzün bir UI tasarımcısına mı, UX tasarımcısına mı yoksa ikisine birden mi ihtiyacı olduğunu çözmek mi istiyorsunuz? Brainy, soruna göre ekibi kurar ve işi teslim eder.

Ürün tasarımcısı sorusu

"Ürün tasarımcısı" orta alanı yutan unvandır ve 2026'da bu, hem UI hem UX'i güvenilir bir düzeyde yapabilen tek bir kişi anlamına gelir.

Bir startup'ta ürün tasarımcısı genellikle şirketteki tek tasarımcıdır. Araştırmaya, akışlara, wireframe'lere, görsel sisteme, bileşenlere ve harekete sahip çıkarlar. Tek kişilik bir tasarım ekibidirler; bir startup yalnızca bir kişiyi karşılayabildiği ve disiplinin her iki yarısına da ihtiyaç duyduğu için işe yarıyor bu durum.

Daha büyük bir şirkette ürün tasarımcısı genellikle bir ürün alanına uçtan uca sahip çıkar ve uzman UX araştırmacıları, tasarım sistemi ekipleri ve zaman zaman bir motion tasarımcısıyla işbirliği yapar. Bunlar genelci operatörlerdir, junior bir karma değil.

Çoğu kurucunun yaptığı hata, aslında kıdemli bir UX araştırmacısına ihtiyaçları varken "ürün tasarımcısı" işe almak ya da aslında bir ürün tasarımcısına ihtiyaçları varken "UI tasarımcısı" aramaktır. Unvan enflasyonu gerçek soruyu gizler; bu soru şudur: gerçek sorun ne ve hangi beceri karması onu çözer.

Araçlar, süreçler, çıktılar

Hızlı bir karşılaştırma. Bu sıkıştırılmış versiyondur, tam bir şartname değil.

BoyutUX TasarımcısıUI TasarımcısıÜrün Tasarımcısı
Temel soruNe var olmalı ve ne zamanNasıl görünmeli, hissettirmeli, hareket etmeliİkisi de, uçtan uca
Ana araçlarFigma, Miro, Dovetail, MazeFigma, Framer, PrincipleFigma, Framer, hafif kod
Temel çıktılarAraştırma, akışlar, bilgi mimarisi, wireframe'lerGörsel sistem, bileşenler, durumlarYukarıdakilerin tümü, tek bir ürün alanı için
Teslim ederDoğrulanmış planlarPiksel mükemmeliyetinde ekranlar + bileşenlerDoğrulanmış, yayınlanmış özellikler
Başarı metriğiGörev başarı oranı, görevdeki süreGörsel tutarlılık, kullanılabilirlik puanlarıÜrün metrikleri (aktivasyon, tutma)
En yakın çalıştığıPM'ler, araştırmacılar, analistlerMarka, tasarım sistemleri, frontendPM'ler, mühendisler, herkes

UI tasarımcıları görsel hiyerarşiye, token sistemlerine ve bento grid'ler gibi düzen kalıplarına yaslanır; ekranları bir bakışta okunabilir kılmak için. UX tasarımcıları araştırma döngülerine, akış testlerine ve erişilebilirlik denetimlerine yaslanır; ürünün ihtiyaç duyduğu herkes için çalıştığından emin olmak için. Ürün tasarımcıları her iki odada da yaşar ve genellikle açılış sayfası yapısına da sahip çıkar; çünkü dönüşüm çalışması hiçbir uzman rolün içine temiz oturmaz.

Araç açısından herkes Figma kullanır. Araçlar hakkında tartışmak tasarımcıların gerçek iş hakkında tartışmaktan kaçınma biçimidir. Kurulumu değer olan şeylerin kısa listesini istiyorsanız, kurulumu değer Figma eklentileri makalesi orada.

UI, UX, her ikisi veya ürün tasarımcısı ne zaman işe alınır

İmi koyacağınız bölüm bu.

Voxel karar ağacı: kök düğüm şirket aşamasıdır (lansman öncesi, ölçekleniyor, olgun), dallar sorun tipini gösterir (akışlar bozuk, ekranlar çirkin, ikisi de), yapraklar ise rol etiketlerini gösterir (UX, UI, her ikisi, ürün tasarımcısı)
Voxel karar ağacı: kök düğüm şirket aşamasıdır (lansman öncesi, ölçekleniyor, olgun), dallar sorun tipini gösterir (akışlar bozuk, ekranlar çirkin, ikisi de), yapraklar ise rol etiketlerini gösterir (UX, UI, her ikisi, ürün tasarımcısı)

Tabloyu kullanın. Durumunuzu bir satıra eşleyin, son sütundaki rolü işe alın.

AşamaTemel sorunBugünkü ekipİşe alın
Lansman öncesi, tasarımcı yokHer şeyin kararlaştırılması ve yapılması gerekiyorSadece bir kurucu ve mühendislerÜrün tasarımcısı
Lansman öncesi, UI müteahhidi varÜrün iyi görünüyor ama kullanıcılar kayboluyorUI müteahhidi, UX yokUX tasarımcısı (tam zamanlı veya kıdemli serbest)
Erken gelir, ölçekleniyorAkışlar çalışıyor ama ürün eski ve tutarsız görünüyor1 UX / ürün tasarımcısıUI tasarımcısı veya tasarım sistemi lideri
Ölçekleniyor, yüksek kullanıcı hacmiBelirli akışlarda düşüş var, nedeni belirsiz1 ürün tasarımcısı, aşırı yüklenmişUX araştırmacısı (uzman), başka bir generalist değil
Olgun, çok ürünlüÜrünler arasında tutarsızlık sorunlarıBirden fazla ürün tasarımcısıTasarım sistemleri ekibi + baş UX
Ajans, müşteri işiUçtan uca projeleri teslim etmek gerekiyorKüçük ekipÜrün tasarımcıları + ortak bir UX araştırmacısı

Çoğu kurucuyu yanlış işe almaktan kurtaran üç kısa yol:

  1. Ürününüzün UI sorunu gibi görünen bir UX sorunu varsa, UI tasarımcısı işe almak durumu daha da kötüleştirir. Size karmaşık bir ürünün güzel versiyonunu verecekler. Karmaşıklık artık kasıtlı görüneceği için düzeltmesi daha pahalı olacak.
  2. Tek bir tasarım pozisyonunuz varsa, ürün tasarımcısı işe alın. Uzmanlar ancak onları tam dolu tutacak hacminiz olduğunda mantıklı.
  3. "UX tasarımcısına mı yoksa UI tasarımcısına mı ihtiyacımız var" diye tartışıyorsanız, muhtemelen bir ürün tasarımcısına ve daha net bir ürün brifine ihtiyacınız var.

SSS

UI mi UX mi daha önemli?

Hiçbiri. Harika UX'e sahip ama kötü UI'li bir ürün, rakibine algılanan kalite konusunda yenilir. Harika UI'ye sahip ama kötü UX'li bir ürün ise gerçek kullanımda yenilir. Bunlar tek bir işin iki yarısıdır ve yalnızca birini göndermek yarım ürün göndermektir.

Bir kişi hem UI hem UX yapabilir mi?

Evet, ve o kişiye genellikle ürün tasarımcısı denir. Çoğu erken aşama startup, junior bir UI/UX bölünmesinden ziyade güçlü bir generalist ile daha iyi hizmet alır. Uzmanlaşma ancak ekip tek bir tasarımcının ötesine geçtiğinde karşılığını verir.

UX tasarımcılarının kodlama bilmesi gerekir mi?

Hayır, ama şeylerin nasıl yapıldığını anlamak onları daha iyi kılar. Kodda neyin ucuz, pahalı veya imkânsız olduğunu bilen bir UX tasarımcısı, mühendisliğin gerçekten hayata geçirebileceği akışlar sunar. Bu bir kodlama işi değil. Bir sistem okuryazarlığı işidir.

UI ve UX tasarımcıları arasındaki maaş farkı nedir?

Çoğu piyasada her iki unvan aynı kıdemde benzer ücret alır. Ürün tasarımcısı unvanları, her iki beceri setini gerektirdiği için genellikle aynı seviyedeki her iki uzman unvandan daha fazla ödeme alır. Maaşın daha büyük belirleyicisi şirket aşaması ve sektördür; UI vs UX değil.

Soruna uyan rolü işe alın

UI ve UX arasındaki farkın ne olduğunu sormayı bırakın. Çözmeye çalıştığınız spesifik sorunu ve sizi oraya götürecek çıktıları sormaya başlayın.

UX, gerçek kullanıcılarla temasını atlatmış planlar teslim eder. UI, elli yüzeyde tek bir ürün gibi hissettiren ekranlar teslim eder. Ürün tasarımcıları ikisini de, uçtan uca, tek bir ürün alanı için teslim eder. Gerçekten sahip olduğunuz soruna uyan rolü seçin; organizasyon şemasında en pahalı görünen unvana göre değil.

İnternetteki her vasat açıklama ketçap şişesini geri dönüştürmeye devam edecek. Siz zorunda değilsiniz. Göndereceğiniz bir ürün ve bunun için inşa edeceğiniz bir ekip var.

Ürününüzün bir UI tasarımcısına mı, UX tasarımcısına mı yoksa her ikisine birden mi ihtiyacı olduğunu çözmek mi istiyorsunuz? Brainy, soruna göre ekibi kurar ve işi teslim eder.

Need to figure out whether your product needs a UI designer, a UX designer, or both? Brainy builds the team for the problem, then ships the work.

Get Started