Selçuk Aker

SELÇUK AKER · UI/UX TASARIM REHBERİ

UI/UX Tasarımcı Ne İş Yapar? Görevler ve Teslimler

UI/UX tasarım rehberi

UI/UX tasarımcı ne iş yapar? Araştırma, akış, wireframe, prototip ve arayüz görevlerini, teslim dosyalarını ve çalışma modellerini bir örnekle inceleyin.

Marmara Üniversitesi GSF · Grafik Tasarım mezunu
Doğrudan Selçuk Aker ile iletişim

Selçuk Aker’in arayüz çalışmalarından örnekler

Portfolyonun tamamı ↗

Kısa cevap: UI/UX tasarımcı, bir web sitesinin, mobil uygulamanın ya da yazılım panelinin kullanıcılar tarafından nasıl anlaşılıp kullanılacağını araştırma, akış, wireframe, prototip ve görsel arayüz çalışmalarıyla tasarlar ve bu kararları geliştiricinin uygulayabileceği dosyalara dönüştürür.

Ben Selçuk Aker. 19 yılı aşkın süredir marka ve dijital ürün tasarımı yapıyorum; web sitesi, e-ticaret, mobil uygulama ve yönetim paneli arayüzleri işimin önemli bir bölümünü oluşturuyor. Bu sayfada UI/UX tasarımcının görevlerini bir madde listesi olarak sıralamak yerine, gerçek bir akışın içinde göstermeye çalışacağım. Hangi teslimlerin üretildiğini, kimlerle çalışıldığını ve ajans, şirket içi ya da freelance çalışmada işin nasıl değiştiğini de anlatacağım. UI ve UX kavramlarının temel tanımları için UI/UX tasarım rehberine bakabilirsiniz.

UI/UX tasarımcı kimdir?

UI/UX tasarımcı, dijital bir ürünün hem kullanım akışını hem de ekranlarını tasarlayan kişidir. UX tarafında “Kullanıcı neyi, hangi sırayla yapmak istiyor?” sorusunu, UI tarafında “Bu adım ekranda nasıl görünmeli ve nasıl davranmalı?” sorusunu cevaplar. İki sorunun cevabı birbirine bağlı olduğu için küçük ve orta ölçekli ekiplerde bu iki iş çoğu zaman aynı kişide birleşir.

İşin özü ekran çizmek değil, karar vermektir. Bir formda hangi alanın zorunlu olacağı, bir hata mesajının ne söyleyeceği, bir listenin ilk açılışta boş olduğunda kullanıcıya ne önereceği; hepsi tasarımcının masasına gelen kararlardır. Ekranlar bu kararların görünür hâlidir.

UX tarafındaki görevler

UX işi, ekranlar çizilmeden önce başlar ve ürün yayına çıktıktan sonra da sürer. Başlıca görevler şunlardır:

  • Araştırma sorusu yazmak: “Kullanıcılar ne istiyor?” gibi geniş bir soru yerine “Randevusunu değiştirmek isteyen kullanıcı hangi bilgiyi arıyor?” gibi cevaplanabilir sorular kurmak. Görüşme, anket, destek kaydı ve analitik veriler bu sorulara göre seçilir.
  • Bilgi mimarisi: İçeriğin ve işlevlerin hangi başlıklar altında toplanacağını, menünün nasıl adlandırılacağını belirlemek. Şirket içinde kullanılan terimlerin kullanıcıya yabancı olabileceği burada görülür.
  • Kullanıcı akışı: Bir görevin adımlarını, karar noktalarını ve olası çıkışlarını şemaya dökmek. İyi bir akış şeması “kullanıcı vazgeçerse ne olur?” sorusunu da cevaplar.
  • Wireframe: Renk ve görsel ayrıntı olmadan, gerçek içerik uzunluklarıyla ekran yerleşimi hazırlamak.
  • Prototip: Ekranları birbirine bağlayarak tıklanabilir bir deneme sürümü kurmak.
  • Kullanılabilirlik testi: Prototipi hedef kitleye yakın kişilere belirli görevlerle denetmek ve takılma noktalarını not etmek.

Bu aşamaların yöntemlerini ve hangi riskte hangi araştırmanın seçileceğini kullanıcı deneyimi tasarımı rehberinde ayrıntılı olarak anlattım.

UI tarafındaki görevler

Akış netleştikten sonra arayüz katmanı yoğunlaşır. UI görevleri yalnız “güzel ekran” üretmekle sınırlı değildir:

  • Görsel hiyerarşi: Ekranda önce neyin görüleceğini boyut, ağırlık, renk ve boşlukla belirlemek.
  • Bileşen tasarımı: Buton, form alanı, kart, sekme ve tablo gibi tekrar eden parçaları tek bir kütüphanede, varyantlarıyla tanımlamak.
  • Durum tasarımı: Her bileşenin varsayılan, üzerine gelinmiş, basılı, pasif, hatalı ve yükleniyor hâllerini çizmek.
  • Tipografi ve renk: Okunabilir yazı ölçekleri, Türkçe karakterleri doğru gösteren yazı aileleri ve anlamı yalnız renge bağlamayan bir renk sistemi kurmak.
  • Erişilebilirlik: Metin kontrastını, odak göstergesini ve dokunma alanı büyüklüğünü W3C’nin WCAG 2.2 ölçütleriyle kontrol etmek.
  • Mikro etkileşim: Bir öğenin eklendiğini, silindiğini ya da kaydedildiğini gösteren kısa geçişleri ve geri bildirimleri tanımlamak.

UI tarafında sık unutulan bir görev de ekran genişliklerine uyarlamadır. Masaüstünde yan yana duran üç kart telefonda alt alta mı dizilecek, yatay kaydırılabilir bir listeye mi dönüşecek? Tablo küçük ekranda hangi sütunları gösterecek? Bu kararlar tasarım dosyasında verilmezse geliştirme sırasında, çoğu zaman aceleyle verilir. Bu yüzden önemli ekranları en az iki genişlikte çizmeyi, aradaki davranışı da not olarak yazmayı alışkanlık edindim.

Bir akışın tasarımı baştan sona: üyelik ekranı örneği

Görevleri somutlaştırmak için basit görünen bir işi ele alalım: bir hizmet uygulamasında üye olma. Bu, portfolyolarda çoğu zaman tek bir ekranla gösterilir; gerçekte ise küçük bir proje gibidir.

  1. Soru: Kullanıcı neden üye olmak zorunda? Üyelik olmadan hizmet incelenebilir mi? Bu karar ürün ekibiyle birlikte verilir; tasarımcı seçeneklerin kullanıcıya etkisini gösterir.
  2. Akış: E-posta ile kayıt, telefonla doğrulama ya da mevcut bir hesapla giriş seçenekleri şemaya dökülür. Doğrulama kodu gelmezse, kullanıcı aynı e-postayla daha önce kayıt olmuşsa ne olacağı yazılır.
  3. Ekran envanteri: Kayıt formu, doğrulama ekranı, başarı ekranı ve hata ekranları listelenir. Çoğu zaman 1 ekran sanılan iş 6–8 ekran ve durumdan oluşur.
  4. Wireframe: Form alanlarının sırası, şifre kurallarının ne zaman gösterileceği, kullanım koşullarının nerede duracağı taslakta denenir.
  5. Mikro metin: “Geçersiz giriş” yerine “Bu e-posta adresiyle zaten bir hesap var. Giriş yapmak ister misiniz?” gibi kullanıcıya bir sonraki adımı söyleyen metinler yazılır. Bu konuyu UX writing yazısında ayrıca ele aldım.
  6. Görsel arayüz: Bileşen kütüphanesindeki form alanları ve butonlar kullanılır; klavye açıldığında birincil butonun görünür kalıp kalmadığı kontrol edilir.
  7. Prototip ve deneme: Birkaç kişiye “Uygulamaya üye olun ve ilk randevunuzu oluşturun” görevi verilir; nerede durakladıkları not edilir.
  8. Devir: Her durum için ekran, alan doğrulama kuralları, hata metinleri ve geçişler geliştiriciye açıklanır.

Bu örnekte tasarımcının zamanının önemli bir kısmı “ideal” ekranda değil, işlerin ters gittiği anlarda geçer. Mobil projelerde ekran akışından devre kadar olan bölümü mobil uygulama tasarımcısının teslimleri yazısında daha ayrıntılı anlattım.

UI/UX tasarımcı hangi teslimleri üretir?

Projenin kapsamına göre değişmekle birlikte, sık karşılaşılan teslimler şunlardır:

TeslimNe işe yarar?Kim kullanır?
Akış şeması ve site haritasıGörevlerin adımlarını ve sayfa ilişkilerini gösterirÜrün yöneticisi, geliştirici, içerik ekibi
Wireframe setiYerleşimi ve içerik önceliğini görsel ayrıntıdan bağımsız tartışmayı sağlarÜrün ekibi, karar vericiler
Tıklanabilir prototipAkışı kodlamadan denemeye ve sunmaya imkân verirTest katılımcıları, yatırımcı ve paydaşlar
Yüksek çözünürlüklü ekranlarSon görsel arayüzü ve tüm durumları gösterirGeliştirici, test ekibi
Bileşen kütüphanesiTekrar eden öğelerin varyant ve kurallarını tek yerde toplarTasarım ve geliştirme ekibi
Devir notlarıÖlçü, davranış, hata metni ve dışa aktarılacak varlıkları açıklarGeliştirici
Test bulgularıGözlenen sorunları ve önerilen değişiklikleri önceliklendirirÜrün ekibi

Bir tasarımcıdan hangi arayüz dosyalarını istemeniz gerektiğini UI tasarımcıdan beklenen teslimler yazısında, araştırma ve test kapsamını ise UX tasarımcıyla çalışma kapsamı yazısında açıkladım. Bu teslimlerin hangi programlarla hazırlandığı UI/UX tasarım programları rehberinin konusu.

UI/UX tasarımcı kimlerle çalışır?

UI/UX tasarımcı nadiren tek başına karar verir. Tipik bir projede şu kişilerle sürekli temas hâlindedir:

  • Ürün yöneticisi veya proje sahibi: Hangi problemin önce çözüleceğine, ilk sürümün sınırlarına ve iş hedeflerine karar verir. Tasarımcı bu kararların kullanıcı tarafındaki etkisini görünür kılar.
  • Geliştiriciler: Teknik kısıtları, veri yapısını ve bir bileşenin hangi maliyetle yapılabileceğini bilir. Tasarımın erken aşamada geliştiriciye gösterilmesi sonradan yaşanacak sürprizleri azaltır.
  • İçerik sorumlusu veya UX writer: Arayüz metinlerini, terimleri ve ses tonunu belirler.
  • UX araştırmacısı: Büyük ekiplerde araştırma planını ve test yönetimini üstlenir.
  • Marka ve grafik tasarımcı: Logo, renk ve tipografi gibi marka unsurlarının arayüzde nasıl kullanılacağı konusunda birlikte çalışılır.
  • Destek ekibi: Kullanıcıların en sık sorduğu soruları bilir; bu bilgi tasarım önceliklerini belirlemede değerlidir.

Proje aşamasına göre bir UI/UX tasarımcının günü

“Bir günde ne yapılır?” sorusunun tek bir cevabı yoktur; projenin hangi aşamada olduğu günün içeriğini belirler. Aşağıdaki tablo, orta ölçekli bir uygulama projesinde aşamalara göre işin nasıl dağıldığına dair genel bir çerçeve sunar:

Proje aşamasıGünün ağırlıklı işleriGünün sonunda ortaya çıkan
KeşifProje sahibiyle görüşme, mevcut ürünü ve destek kayıtlarını inceleme, soruları listelemeAçık sorular listesi, görev tanımları
Akış ve yapıAkış şeması çizme, ekran envanteri çıkarma, ürün yöneticisiyle sınırları konuşmaAkış şeması, ekran ve durum listesi
Wireframe ve prototipTaslak ekranlar, alternatif yerleşimler, prototip bağlantılarıDenemeye hazır prototip
DenemeKatılımcılarla kısa oturumlar, notların ayıklanması, öncelik sırasıBulgu listesi ve değişiklik önerileri
Görsel arayüzBileşen ve varyant düzenleme, durum ekranları, kontrast kontrolleriOnaya hazır ekranlar ve kütüphane
Geliştirme desteğiGeliştiricinin sorularını cevaplama, uygulanan ekranları tasarımla karşılaştırmaDüzeltme listesi, güncellenmiş notlar

Bu tabloya her gün eklenen bir iş daha vardır: iletişim. Bir kararın gerekçesini yazmak, gelen geri bildirimleri birbiriyle çelişmeyecek şekilde toplamak ve değişiklikleri dosyada izlenebilir tutmak, ekran çizmek kadar zaman alabilir. Deneyimli bir tasarımcıyı ayırt eden şeylerden biri de bu görünmeyen işi düzenli yapmasıdır.

Unvanlar: UX designer, UI designer, product designer ve diğerleri

İlanlarda karşılaşılan unvanlar aynı işi farklı yönlerden tarif eder:

UnvanÖne çıkan sorumlulukNot
UX designerAkış, bilgi mimarisi, wireframe, testGörsel arayüzü başka biri üstlenebilir
UI designerGörsel arayüz, bileşen, tasarım sistemiAkış kararlarına katılım ekipten ekibe değişir
UI/UX designerİki alanı birlikteTürkiye’deki ilanlarda sık görülen kapsamlı tanım
Product designerUI/UX’e ek olarak ürün hedefi ve ölçümDaha çok ürün şirketlerinde
UX researcherAraştırma planı ve bulgu yorumlamaEkran tasarımı beklenmeyebilir
Interaction designerGeçiş, hareket ve etkileşim davranışlarıBüyük ekiplerde ayrı uzmanlık

“Arayüz tasarımcısı” Türkçede çoğunlukla UI designer karşılığı olarak kullanılır. Unvan tek başına bir şey söylemez; ilanın sorumluluk listesine ve adayın portfolyosundaki gerçek role bakmak gerekir.

Ajans, şirket içi ve freelance çalışmada iş tanımı nasıl değişir?

Çalışma modeliİşin ağırlığıDikkat edilmesi gereken
Şirket içi (in-house)Tek ürün üzerinde uzun soluklu çalışma, tasarım sistemi bakımı, sürüm planlamasıÜrünü derinlemesine tanımak avantaj; dışarıdan bakışı kaybetmemek gerekir
AjansFarklı müşterilere kısa ve orta süreli projeler, sunum ve teklif süreçleriTakvim sıkı olabilir; araştırma ve test kapsamı bütçeye göre daralabilir
FreelanceDoğrudan müşteriyle çalışma; kapsam, takvim ve devir sorumluluğu tasarımcıdaTeklifte tasarım, yazılım ve yayın sorumluluklarının yazılı ayrılması gerekir

Freelance çalışmada tasarımcı, ajans ya da şirket içindeki bir proje yöneticisinin yaptığı işlerin bir kısmını da üstlenir: kapsamı netleştirmek, geri bildirimleri toplamak, teslim listesini yönetmek. Bu modelde nasıl çalıştığımı freelance UI/UX tasarımcı sayfamda anlattım.

Benim çalışma kapsamım

Projelerimde akış, wireframe, prototip ve görsel arayüz tasarımını üstleniyorum; geliştirici devrine kadar ekiple birlikte çalışıyorum. Örneğin Danone ve ERP Software projelerinde rolüm arayüz tasarımıydı: yeni ekranları ben tasarladım. Yatcim’de ise web sitesinin tamamını hazırladım. Bu projelerin ekranlarını Danone ve Yatcim sayfalarında inceleyebilirsiniz.

Yazılım geliştirme, sunucu, uygulama mağazasına yükleme ve yayın sonrası bakım ayrı uzmanlık ve sorumluluk alanlarıdır. Bir projeye başlarken hangi işlerin tasarım kapsamında olduğunu, hangilerinin yazılım ekibine ait olduğunu yazılı olarak ayırıyorum. Kısa bir tanıtım için UI UX tasarımcı sayfama bakabilirsiniz.

İstanbul Eyüpsultan’daki ofisimden çoğunlukla uzaktan çalışıyorum. Bir projeye genellikle mevcut ekranları, varsa kullanıcı geri bildirimlerini ve yazılım ekibinin kısıtlarını inceleyerek başlıyorum. İlk teslim çoğu zaman bir akış şeması ve ekran listesidir; görsel tasarıma, akış üzerinde ekiple anlaştıktan sonra geçiyorum. Bu sıralama, sonradan “bu ekran nereden çıktı?” sorusunun sorulmasını önler ve geri bildirimleri daha somut hâle getirir.

Özet: UI/UX tasarımcının işi

  • UX tarafında araştırma sorusu, bilgi mimarisi, akış, wireframe, prototip ve test.
  • UI tarafında hiyerarşi, bileşen, durumlar, tipografi, renk, erişilebilirlik ve mikro etkileşim.
  • Zamanın önemli bir bölümü ideal ekranda değil, hata ve istisna durumlarında geçer.
  • Teslimler ekranlardan ibaret değildir; akış şeması, bileşen kütüphanesi ve devir notları da işin parçasıdır.
  • Unvan yerine sorumluluk listesine ve portfolyodaki gerçek role bakın.

Bu mesleğe girmek istiyorsanız UI/UX tasarımcı nasıl olunur, gereken becerileri görmek için UI/UX tasarımcı becerileri rehberleriyle devam edebilirsiniz.

UI/UX tasarımcı hakkında sık sorulan sorular

UX tasarımcı ile UI tasarımcı arasındaki fark nedir?

UX tasarımcı kullanıcının görevi hangi adımlarla tamamlayacağını; UI tasarımcı ise bu adımların ekranda nasıl görüneceğini ve nasıl davranacağını tasarlar. Küçük ekiplerde iki rol çoğu zaman aynı kişidedir. Büyük ekiplerde ayrılabilir, ama yakın çalışmaları gerekir.

UI/UX tasarımcı kullanıcı araştırmasını kendisi mi yapar?

Ekibin büyüklüğüne bağlıdır. Küçük ve orta ölçekli projelerde görüşme ve testleri tasarımcı planlayıp yürütebilir. Büyük şirketlerde bu iş UX araştırmacısına verilir; tasarımcı bulguları ekran kararlarına dönüştürür.

UI/UX tasarımcı uygulamayı kodlar mı?

Genellikle hayır. Tasarımcı arayüzü ve davranışını tanımlar; kodlama, test ve yayına alma yazılım ekibinin işidir. Bazı tasarımcılar ön yüz kodu da yazabilir, ancak bu ayrı bir beceri ve ayrı bir sorumluluk olarak tanımlanmalıdır.

UI/UX tasarımcı ile ürün yöneticisinin görevi nasıl ayrılır?

Ürün yöneticisi neyin, hangi sırayla ve neden yapılacağına karar verir. UI/UX tasarımcı bu kararın kullanıcı açısından nasıl çalışacağını tasarlar ve seçeneklerin etkisini görünür kılar. İki rol birbirine bilgi verir; son öncelik kararı genellikle ürün tarafındadır.

Bir UI/UX tasarımcı günde neler yapar?

Gün projenin aşamasına göre değişir. Bir gün görüşme notlarını özetleyip akış şeması çizmek, başka bir gün bileşen varyantlarını düzenlemek ya da geliştiricinin sorularını cevaplamak olabilir. Toplantı, geri bildirim değerlendirme ve dokümantasyon da günün düzenli parçalarıdır.

Freelance UI/UX tasarımcı hangi işleri üstlenir?

Genellikle akış, wireframe, prototip, görsel arayüz ve bileşen kütüphanesi hazırlar. Araştırma, test, tasarım sistemi dokümantasyonu ve geliştirme sürecine destek ise teklifte ayrıca tanımlanır. Kodlama ve yayın sorumluluğu çoğu projede kapsam dışıdır.

UX writer ile UX tasarımcı aynı mı?

Hayır. UX writer arayüzdeki metinleri, yani buton etiketlerini, hata mesajlarını ve yönlendirme cümlelerini yazar. UX tasarımcı akışı ve yapıyı tasarlar. Küçük projelerde tasarımcı metinleri de yazabilir; büyük ürünlerde ayrı bir uzman bu işi yürütür.

Arayüz tasarımcısı ile web tasarımcısı aynı mı?

Örtüşen yanları vardır ama aynı değildir. Web tasarımcı unvanı genellikle web sitelerinin tasarımını, bazen de kodlamasını kapsar. Arayüz tasarımcısı web, mobil uygulama ve yazılım panelleri gibi farklı dijital ürünlerin ekranlarını tasarlar. Web sitesi odaklı çalışma için web tasarımcı sayfama bakabilirsiniz.

Grafik Tasarımcı Selçuk Aker — Tanıtım Videosu