Kısa cevap: UI (kullanıcı arayüzü) tasarımı ekranda görülen ve dokunulan öğelerin düzenini ve davranışını, UX (kullanıcı deneyimi) tasarımı ise kişinin bir işi baştan sona nasıl tamamladığını ele alır; anlaşılır bir dijital ürün, ikisinin aynı akış üzerinde birlikte düşünülmesiyle ortaya çıkar.
Ben Selçuk Aker. Marmara Üniversitesi Güzel Sanatlar Fakültesi Grafik Tasarım bölümünden mezun oldum ve 19 yılı aşkın süredir marka, yayın ve dijital arayüz projelerinde çalışıyorum. İstanbul Eyüpsultan’dan, çoğunlukla uzaktan; web sitesi, e-ticaret, mobil uygulama ve yönetim paneli (SaaS) arayüzleri tasarlıyorum. Bu rehber UI ve UX kavramlarını, ikisi arasındaki farkı ve bir projenin gerçekte nasıl ilerlediğini anlatıyor. Meslek, beceriler, araçlar, ilkeler ve mobil uygulama tasarımı alt sayfalarda ayrıntılı olarak ele alınıyor.
UI/UX tasarım ne işe yarar?
Bir örnekle başlayalım. Bir kullanıcı akşam saatinde telefonundan diş hekimi randevusu almak istiyor. Uygulamayı açıyor, uygun saati arıyor, bilgilerini giriyor ve onay bekliyor. Bu birkaç dakikalık işin içinde onlarca küçük karar vardır: Takvim ilk ekranda mı görünecek? Dolu saatler soluk mu gösterilecek, listeden tamamen mi çıkarılacak? Telefon numarası eksik girildiğinde mesaj ne diyecek? Bağlantı kesilirse kullanıcı randevunun alınıp alınmadığını nereden anlayacak?
UI/UX tasarımı bu soruların cevaplarını, kod yazılmadan önce görülebilir ve denenebilir hâle getirir. Amaç ekranı süslemek değildir. Kişinin hedefine daha az tereddütle ulaşmasını, ürün ekibinin de neyi geliştireceğini açıkça görmesini sağlamaktır. Tasarım bu hedefe katkı yapabilir; ancak ürünün sunduğu değer, fiyatı, altyapısı ve hizmet kalitesi zayıfsa ekran düzeni sonucu tek başına belirlemez.
İşletme tarafında UI/UX çalışmasının karşılığı genellikle şunlardır:
- Geliştirme başlamadan akıştaki boşlukların görülmesi: eksik ekran, tanımsız hata durumu, belirsiz kullanıcı yetkisi.
- Ekip içinde ortak bir dil: ürün yöneticisi, geliştirici ve içerik sorumlusu aynı prototip üzerinden konuşur.
- Tekrarlanan bileşenlerle tutarlı bir arayüz ve daha öngörülebilir bir geliştirme süreci.
- Destek talepleri ve kullanıcı geri bildirimleriyle sonraki sürümde neyin değişeceğine karar verme zemini.
UI nedir?
UI (User Interface, kullanıcı arayüzü), kullanıcının bir ürünle temas ettiği görsel ve etkileşimli katmandır: butonlar, form alanları, menüler, kartlar, ikonlar, tipografi, renk, boşluk ve bunların farklı durumları. UI tasarımı bir ekranın önce neyi gösterdiğini, hangi öğenin tıklanabilir olduğunu ve bir işlem sırasında arayüzün nasıl tepki verdiğini belirler.
UI yalnız görünüm değildir. Bir butonun basılı, pasif ve yükleniyor durumları; bir listenin boş, tek kayıtlı ve yüzlerce kayıtlı hâlleri; uzun bir Türkçe ürün adının kartı nasıl etkileyeceği de arayüz kararıdır. Kullanıcı arayüzünün bileşenlerini ve dijital üründeki yerini kullanıcı arayüzü (UI) tasarımı yazısında daha ayrıntılı anlattım.
UX nedir?
UX (User Experience, kullanıcı deneyimi), kişinin bir ürünü kullanmadan önce, kullanırken ve kullandıktan sonra yaşadığı sürecin bütünüdür. UX tasarımı bu sürecin tasarlanabilir kısmıyla ilgilenir: Kim, hangi amaçla, hangi koşulda geliyor? Hangi adımları izliyor, nerede takılıyor? Araştırma, bilgi mimarisi, kullanıcı akışı, wireframe, prototip ve kullanılabilirlik testi UX çalışmasının başlıca araçlarıdır.
ISO 9241-210 standardı insan merkezli tasarımı; kullanım bağlamını anlamak, gereksinimleri belirlemek, çözüm üretmek ve çözümü kullanıcıyla değerlendirmek adımlarının tekrarlandığı bir döngü olarak tarif eder. UX sürecinin adımlarını ve araştırma yöntemlerini kullanıcı deneyimi tasarımı rehberinde ayrıca ele alıyorum.
UI ve UX arasındaki fark
En kısa ifadeyle UX “Kullanıcı hedefine hangi yoldan ulaşıyor?”, UI ise “Bu yolun her adımı ekranda nasıl görünüyor ve nasıl davranıyor?” sorusuna cevap arar. Aşağıdaki tablo farkı somut ölçütlerle gösterir:
| Ölçüt | UX (kullanıcı deneyimi) | UI (kullanıcı arayüzü) |
|---|---|---|
| Odak | Görev, akış, ihtiyaç ve kullanım bağlamı | Görsel düzen, bileşen ve etkileşim |
| Temel soru | Kullanıcı hedefine hangi adımlarla ulaşıyor? | Bu adım ekranda nasıl anlaşılır ve kullanılır olur? |
| Tipik çıktılar | Araştırma notları, akış şeması, site haritası, wireframe, test bulguları | Yüksek çözünürlüklü ekranlar, bileşen kütüphanesi, stil kuralları, etkileşimli prototip |
| Değerlendirme | Görev tamamlanıyor mu, nerede hata yapılıyor, ne kadar sürüyor? | Okunuyor mu, ayırt ediliyor mu, tutarlı mı, erişilebilir mi? |
| Projedeki ağırlığı | Başlangıçta yoğun; test ve yayın sonrasında yeniden | Akış netleştikten sonra yoğun; geliştirme boyunca sürer |
| Sık yanılgı | “UX yalnız araştırmadır.” | “UI yalnız renk ve yazı tipidir.” |
Tablo iki alanı ayırmak için kullanışlıdır, ama pratikte çizgi bu kadar keskin değildir. Bir buton etiketini değiştirmek hem UI hem UX kararıdır; çünkü hem görünümü hem de kullanıcının bir sonraki adımı anlama biçimini değiştirir.
UI ile UX nerede kesişir? Aynı ekranda iki karar
Bir e-ticaret sepetini düşünün. Kullanıcı ürünü ekledi ve kargo ücretini görmek istiyor. UX tarafında şu karar verilir: Kargo ücreti sepette mi, ödeme adımında mı gösterilmeli? Adres henüz bilinmiyorsa tahmini ücret nasıl ifade edilecek? UI tarafında ise bu bilginin sepet özetinde hangi satırda, hangi yazı ağırlığında ve hangi açıklamayla duracağı belirlenir.
İki karar birbirinden habersiz verilirse sorun çıkar. Akış doğru kurulmuş ama ücret satırı gözden kaçacak kadar soluk tasarlanmışsa kullanıcı yine son adımda şaşırır. Arayüz özenli ama ücret yalnız ödeme sayfasında ortaya çıkıyorsa sepetten vazgeçmeye yol açabilecek bir sürpriz tasarımda hiç konuşulmamış olur. Bu yüzden akışı ve ekranları aynı çalışma dosyasında, birbirine bağlı olarak tasarlıyorum: Her ekranın yanında hangi adıma ait olduğu ve hangi durumlarının bulunduğu yazılıdır.
Kesişimin en net görüldüğü yerler:
- Durum ekranları: Boş liste, hata, yükleme, yetkisiz erişim ve çevrimdışı durum hem akışın hem görsel tasarımın konusudur.
- Mikro metin: Buton, hata mesajı ve onay metninin ne söylediği (UX) ile nasıl göründüğü (UI) birlikte çalışır.
- Formlar: Kaç alan sorulacağı UX, alanların gruplanması, etiket konumu ve hata gösterimi UI kararıdır.
- Erişilebilirlik: Kontrast ve odak görünürlüğü arayüzün, yalnız klavyeyle tamamlanabilen bir akış ise deneyim tasarımının sorumluluğundadır.
UI/UX, grafik tasarım ve ürün tasarımı: unvanlar ve sınırlar
İş ilanlarında benzer roller farklı adlarla geçer. Unvanlar şirkete göre değişse de genel bir okuma şöyle yapılabilir:
| Unvan | Ağırlıklı sorumluluk |
|---|---|
| UX designer / UX tasarımcı | Akış, bilgi mimarisi, wireframe, prototip, test |
| UI designer / arayüz tasarımcısı | Görsel arayüz, bileşen, tasarım sistemi, durumlar |
| UI/UX tasarımcı | İkisini birlikte üstlenir; küçük ve orta ölçekli ekiplerde yaygındır |
| Product designer / ürün tasarımcısı | UI/UX’e ek olarak ürün hedefleri, önceliklendirme ve ölçüm kararlarına katılım |
| UX researcher / araştırmacı | Araştırma planı, görüşme, test yönetimi ve bulguların yorumlanması |
| Grafik tasarımcı | Marka kimliği, yayın, ambalaj, kampanya ve görsel iletişim |
Grafik tasarım ile UI/UX aynı görsel temellere dayanır: hiyerarşi, tipografi, renk ve ızgara. Fark, UI/UX’in etkileşimli ve zamana yayılan bir kullanımı tasarlamasıdır. Bir afiş tek bakışta okunur; bir uygulama ekranı ise kullanıcı dokundukça değişir. Grafik tasarımın temellerini grafik tasarım rehberinde anlattım.
CX (müşteri deneyimi) ise UI/UX’ten daha geniş bir alandır. Çağrı merkezi, teslimat, fatura ve mağaza deneyimi de bu kapsama girer; dijital arayüz bu bütünün yalnız bir temas noktasıdır. Bu sınırı UI, UX ve CX yazısında ayrıca açtım. Mesleğin günlük karşılığını merak ediyorsanız UI/UX tasarımcı ne iş yapar sayfasına bakabilirsiniz.
Bir UI/UX projesi nasıl ilerler?
Her proje aynı sırayı izlemez; mevcut bir ürünü iyileştirmekle sıfırdan uygulama tasarlamak farklı noktalardan başlar. Yine de çoğu projede şu aşamalar görülür:
- Bağlamı anlama: Ürün kimin için, hangi problemi çözüyor? Mevcut veriler, destek talepleri ve benzer ürünler incelenir. Gerekiyorsa ayrı bir UX araştırması planlanır.
- Görev ve akış: Kullanıcının tamamlaması gereken görevler listelenir; her görev için adım adım akış çizilir.
- Ekran envanteri: Akıştaki her adımın ekranı ve bu ekranın durumları (boş, hata, yükleme, başarı) çıkarılır.
- Wireframe: Gerçek içerik uzunluklarıyla, renk kullanılmadan yerleşim taslakları hazırlanır. Kapsam için wireframe hizmeti sayfasına bakabilirsiniz.
- Prototip ve deneme: Tıklanabilir prototip, hedef kitleden birkaç kişiyle ya da en azından projeyi bilmeyen kişilerle denenir.
- Görsel arayüz: Tipografi, renk, ikon ve bileşen kuralları uygulanır; tekrarlanan öğeler kütüphaneye dönüşür. Büyüyen ürünlerde bu yapı bir tasarım sistemine evrilir.
- Geliştirici devri: Ölçüler, durumlar, davranış notları ve dışa aktarılacak varlıklar paylaşılır; geliştirme sırasında gelen sorular cevaplanır.
- Yayın sonrası: Geri bildirim ve ölçümlerle sonraki sürümün öncelikleri belirlenir.
Bu aşamalarda kullanılan araçları UI/UX tasarım programları, ekranları değerlendirirken başvurulan temel kuralları ise UI/UX tasarım ilkeleri rehberinde bulabilirsiniz.
Web, mobil ve SaaS arayüzlerinde farklılaşan kararlar
UI/UX’in temel soruları her ürün türünde aynıdır; ama ağırlık noktaları değişir:
| Ürün türü | Öne çıkan sorular | Sık gözden kaçan durumlar |
|---|---|---|
| Kurumsal web sitesi | Ziyaretçi aradığı bilgiye kaç adımda ulaşıyor? İletişim yolu görünür mü? | Uzun başlıkların mobilde kırılması, form gönderildikten sonraki ekran |
| E-ticaret | Filtre, karşılaştırma, sepet ve ödeme adımları ne kadar net? | Stokta olmayan ürün, geçersiz kupon, kargo ücretinin geç görünmesi |
| Mobil uygulama | Tek elle kullanım, platform alışkanlıkları, izin istekleri | Çevrimdışı durum, reddedilen bildirim izni, klavyenin alanı örtmesi |
| SaaS ve yönetim paneli | Yoğun veri nasıl taranıyor? Roller ve yetkiler nasıl ayrılıyor? | Boş tablo, toplu işlem onayı, uzun süren işlemin ilerleme göstergesi |
Mobilde Apple’ın Human Interface Guidelines ve Google’ın Material Design 3 kılavuzları platform alışkanlıklarını tarif eder. Mobil uygulamaya özgü kararları mobil uygulama tasarımı nedir ve mobil uygulama nasıl tasarlanır rehberlerinde anlattım. Yönetim paneli projelerinde teslim kapsamı SaaS ve dashboard tasarımı, telefonda tarayıcıdan açılan siteler için ise mobil web tasarımı sayfasında açıklanıyor.
Bir UI/UX çalışması nasıl değerlendirilir?
Tasarım sunumlarında genellikle en parlak ekranlar gösterilir: açılış sayfası, dolu bir kontrol paneli, özenle seçilmiş fotoğraflar. Oysa bir çalışmanın kalitesi çoğu zaman görünmeyen ekranlarda ortaya çıkar. Bir tasarım dosyasını incelerken, ister kendi işiniz ister bir tasarımcıdan aldığınız teslim olsun, şu sorulara bakmanızı öneririm:
- Görev açık mı? Ekranın hangi kullanıcı görevine hizmet ettiği bir cümleyle söylenebiliyor mu?
- Durumlar tasarlanmış mı? Boş, hata, yükleme ve başarı hâlleri ayrı ayrı çizilmiş mi, yoksa yalnız ideal veri mi gösterilmiş?
- Gerçek içerik kullanılmış mı? Uzun isimler, eksik görseller ve farklı sayıda kayıtla düzen bozuluyor mu?
- Karar gerekçesi yazılı mı? “Bu filtre neden üstte?” sorusunun cevabı dosyada ya da notlarda bulunuyor mu?
- Erişilebilirlik kontrol edilmiş mi? Metin kontrastı, odak görünürlüğü ve dokunma alanları ölçülmüş mü?
- Geliştirici bu dosyayla çalışabilir mi? Bileşenler adlandırılmış, ölçüler tutarlı, davranışlar açıklanmış mı?
Bu soruların hepsine olumlu cevap verilebilmesi, ürünün başarılı olacağını göstermez; ama tasarımın geliştirmeye hazır olduğunu ve kararların izlenebildiğini gösterir. Becerilerin işteki karşılığını UI/UX tasarımcı becerileri rehberinde ayrıntılı olarak anlattım.
Çalışmalarımdan örnekler
Danone: Bu projede yeni arayüzleri tasarladım; sorumluluğum arayüz tasarımıydı. Danone arayüz çalışması, proje için hazırladığım ekranlardan bir seçki sunuyor.
ERP Software: Yazılımın arayüzlerini tasarladım. ERP Software arayüzleri, yoğun veri içeren ekranların nasıl düzenlendiğini görmek için incelenebilir.
Yatcim: Web sitesinin tamamını hazırladım. Yatcim projesi, bir web arayüzünü bütün olarak görmek için bakılabilecek bir örnek.
Bunların yanında portfolyomda mobil uygulama, SaaS arayüz ve e-ticaret kategorilerinde yayımlanmış arayüzler bulunuyor. Bu örnekler hazırladığım ekranları gösterir; paylaşılmamış kullanıcı testi, satış veya dönüşüm sonuçları hakkında bir iddia taşımaz.
UI/UX tasarım desteği alırken neleri paylaşmalısınız?
Ürünün kime hitap ettiğini, kullanıcının tamamlaması gereken en önemli görevi, platformu (web, iOS, Android) ve varsa mevcut ekranları paylaşın. Yazılım ekibinin kullandığı teknoloji ve takvim de tasarım kararlarını etkiler. Tasarım, yazılım geliştirme, test ve yayına alma ayrı sorumluluklardır; tekliflerde hangisinin kapsama girdiği yazılı olmalıdır.
İstanbul’da birebir çalışma düzeni için İstanbul UI/UX tasarımcı, uzaktan ve proje bazlı iş birliği için freelance UI/UX tasarımcı, mobil projeler için mobil uygulama tasarımı sayfalarına bakabilirsiniz. Kısa bir tanıtım UI UX tasarımcı sayfamda yer alıyor. Projenizi iletişim sayfasından anlatabilirsiniz.
Özet: UI/UX tasarımı bir bakışta
- UX, kullanıcının görevi baştan sona nasıl tamamladığını; UI, bu görevin ekranda nasıl görünüp davrandığını tasarlar.
- İkisi aynı akış üzerinde birlikte düşünüldüğünde boşluklar geliştirme başlamadan görünür hâle gelir.
- Durum ekranları, mikro metin, formlar ve erişilebilirlik iki alanın kesiştiği yerlerdir.
- Unvanlar şirkete göre değişir; değerlendirmede iş örneklerine ve projedeki gerçek role bakın.
- Tasarım ürünün başarısına katkı verebilir, ancak tek başına bir sonuç vaadi değildir.
UI/UX tasarım hakkında sık sorulan sorular
UI ve UX aynı kişi tarafından yapılabilir mi?
Evet. Küçük ve orta ölçekli projelerde ikisini birlikte üstlenen UI/UX tasarımcılar yaygındır. Büyük ekiplerde araştırma, akış ve görsel arayüz farklı uzmanlara ayrılabilir. Önemli olan, kimin hangi kararı verdiğinin projede açıkça bilinmesidir.
UX, UI’ı kapsar mı?
Kavram olarak kullanıcı deneyimi arayüzü de içine alır; çünkü arayüz deneyimin bir parçasıdır. Pratikte ise UI kendi uzmanlığı olan bir alandır. Tipografi, bileşen ve durum tasarımı ayrı bir beceri seti ve ayrı bir emek gerektirir.
UI/UX tasarımcısı kod yazmak zorunda mı?
Zorunda değildir. Yine de HTML ve CSS mantığını, ekranların farklı genişliklerde nasıl davrandığını ve bir veri isteğinin yükleme ile hata durumları doğurduğunu bilmek, uygulanabilir tasarım yapmayı kolaylaştırır. Kodlama ve yayına alma çoğu projede yazılım ekibinin sorumluluğundadır.
UI/UX ile grafik tasarım arasındaki fark nedir?
İkisi de hiyerarşi, tipografi, renk ve kompozisyon bilgisine dayanır. Grafik tasarım çoğunlukla sabit bir mesajı iletir; UI/UX ise kullanıcı etkileşimiyle değişen, durumları ve akışları olan bir ürün tasarlar. Bir alandaki portfolyo diğer alandaki yetkinliği tek başına göstermez.
Ürün tasarımcısı (product designer) ile UI/UX tasarımcısı aynı mı?
Çoğu zaman örtüşür. Ürün tasarımcısı unvanı, UI/UX işine ek olarak ürün hedeflerine, özellik önceliklendirmesine ve ölçüm kararlarına daha fazla katılımı ifade eder. Unvandan çok ilandaki sorumluluk listesine bakmak gerekir.
Kullanıcı testi yapılmadan UX tasarımı olur mu?
Olur, ama kararlar denenmemiş varsayımlar olarak kalır. Bütçe sınırlı olsa bile birkaç kişiyle yapılan kısa bir prototip denemesi, ekibin fark etmediği takılma noktalarını gösterebilir. Test edilmeyen kararların hangi varsayıma dayandığını yazmak da sonraki sürüm için yararlıdır.
UI/UX tasarımı dönüşümü garanti eder mi?
Hayır. Tasarım, kullanıcının görevini kolaylaştırarak sonuca katkı yapabilir. Dönüşüm ise ürün, fiyat, trafik kaynağı, teknik performans ve hizmet kalitesi gibi tasarım dışındaki etkenlere de bağlıdır. Bu yüzden sonuç vaadi yerine ölçülebilir hedefler ve bir değerlendirme planı konuşmak daha doğrudur.
UI/UX tasarımı hangi dosyalarla teslim edilir?
Genellikle akış şeması, wireframe’ler, yüksek çözünürlüklü ekranlar, tıklanabilir prototip, bileşen kütüphanesi ve geliştirici notlarını içeren bir tasarım dosyası teslim edilir. İkon ve görsel varlıkların dışa aktarımı, tasarım sistemi dokümantasyonu ve kaynak dosya erişimi teklifte ayrıca belirtilmelidir.
Kaynaklar ve ileri okuma
İnsan merkezli tasarım süreci için ISO 9241-210, kullanılabilirlik değerlendirmesi için Nielsen Norman Group’un 10 kullanılabilirlik ilkesi, erişilebilirlik için W3C’nin WCAG 2.2 belgesi temel başvuru kaynaklarıdır. Mobil platform kuralları için Apple Human Interface Guidelines ve Material Design 3 incelenebilir. Bu kılavuzlar güncellendiği için her zaman yayımlayan kurumun güncel sürümü esas alınmalıdır. Bu sayfadaki proje kapsamları benim çalışmalarımı, değerlendirme önerileri ise mesleki yaklaşımımı anlatır.
UI/UX tasarım rehberinin alt sayfaları
- UI/UX Tasarımcı Ne İş Yapar? Görevler ve Teslimler
- UI/UX Tasarımcı Nasıl Olunur? Adım Adım Yol Haritası
- UI/UX Tasarımcı Becerileri: İyi Tasarımcıda Neler Aranır?
- UI/UX Tasarım Programları: Hangi İş İçin Hangi Araç?
- Kullanıcı Deneyimi Tasarımı Nedir? UX Süreci ve Yöntemleri
- UI/UX Tasarım İlkeleri: Kullanılabilirliğin Temel Kuralları
- Mobil Uygulama Tasarımı Nedir, Neden Önemlidir?
- Mobil Uygulama Nasıl Tasarlanır? Fikirden Yayına 10 Adım