UI/UX Tasarım Nedir? Nasıl Başlanır? Araç Takımı Öğren

UI/UX tasarım nedir? İyi tasarlanmış bir uygulamayı kullandığınızda çoğu zaman tasarımın arkasındaki kararları fark etmezsiniz. Menünün nerede bulunduğu, bir butonun neden o renkte olduğu, ödeme ekranının neden belirli bir sırayla ilerlediği ve mobilde bazı alanların neden yer değiştirdiği önceden düşünülmüştür. UI/UX tasarımı öğrenmek de tam olarak bu kararların nasıl alındığını anlamayı gerektirir. Bu nedenle konuya Figma öğrenerek başlamak yerine kullanıcıyı, problemi, akışı ve ardından arayüzü anlamak daha sağlam bir temel oluşturur. Konuya daha derin bakmak için blogu okumaya devam edin!

UI/UX tasarım nedir? Yeni başlayanlar nereden başlamalı?

UI/UX tasarım, dijital ürünlerin kullanıcı tarafından nasıl deneyimleneceğini ve bu deneyimin hangi görsel arayüz üzerinden sunulacağını planlayan tasarım alanlarını kapsar.

UX, User Experience, yani kullanıcı deneyimidir. Kullanıcının bir web sitesi, mobil uygulama, SaaS ürünü veya dijital servisle etkileşim kurduğu bütün süreç UX kapsamına girer.

UI ise User Interface, yani kullanıcı arayüzüdür. Kullanıcının ekranda gördüğü ve etkileşime geçtiği görsel katmanı oluşturur.

Bir mobil bankacılık uygulamasını düşünelim.

Kullanıcının:

• hesabına giriş yapması,
• bakiyesini bulması,
• para transferi ekranına ulaşması,
• alıcı seçmesi,
• tutarı girmesi,
• işlemi onaylaması,
• işlemin gerçekleştiğini anlaması

bir UX problemidir.

Bu adımların hangi ekranlarda, hangi butonlarla, hangi renklerle ve hangi tipografiyle gösterildiği ise UI tarafına girer.

Figma da UX tasarımını kullanıcı yolculuğu, araştırma, wireframe, prototipleme ve iterasyon gibi aşamalarla birlikte ele alıyor.

Yeni başlayan biri UI/UX öğrenmeye nereden başlamalı?

En sık yapılan hata doğrudan Figma açıp ekran tasarlamaya başlamaktır. Bu yöntem kısa vadede görsel üretmeyi sağlar ancak tasarım kararlarının arkasındaki mantığı geliştirmekte yetersiz kalabilir.

Daha sağlam bir öğrenme sırası şöyle kurulabilir:

1. UI/UX kavramlarını öğren

UI, UX, interaction design, usability, accessibility ve design system gibi temel kavramları tanı.

2. Kullanıcıyı anlamayı öğren

Kullanıcı araştırması, persona, interview, usability test ve journey map konularına geç.

3. Deneyimin yapısını kur

User flow ve bilgi mimarisi öğren.

4. Ekran yapısını tasarla

Wireframe ve prototip oluştur.

5. Görsel tasarıma geç

Renk, tipografi, grid, spacing ve component sistemlerini öğren.

6. Gerçek kullanıcıyla test et

Tasarladığın ürünün gerçekten anlaşılır olup olmadığını kontrol et.

7. Responsive ve erişilebilir tasarım öğren

Tasarımların farklı ekranlarda ve farklı kullanıcı ihtiyaçlarında çalışmasını sağla.

Bu sıralama sayesinde UI/UX tasarım nedir? sorusunun cevabı bir tanım olarak kalmaz; gerçek bir ürün tasarım sürecine dönüşür.

UI ve UX arasındaki fark nedir?

UI ve UX birbirinden bağımsız iki alan gibi düşünülse de dijital ürün tasarımında sürekli birlikte çalışırlar.

UX daha çok şu sorularla ilgilenir:

• Kullanıcı ne yapmak istiyor?
• Kullanıcı neden bu ürünü kullanıyor?
• Kullanıcı hangi problemi yaşıyor?
• Kullanıcı hedefe ulaşırken hangi adımlardan geçiyor?
• Nerede hata yapıyor?
• Hangi bilgiye ihtiyaç duyuyor?
• Deneyimde hangi noktalar zorlayıcı?

UI ise şu sorulara yoğunlaşır:

• İçerik nasıl görünecek?
• Hangi renk kullanılacak?
• Buton nasıl görünecek?
• Başlık ile gövde metni arasındaki hiyerarşi nasıl kurulacak?
• Menü nerede bulunacak?
• Form alanları nasıl gösterilecek?
• Component’ler nasıl tutarlı hale getirilecek?

Örneğin bir uçak bileti uygulamasında kullanıcıdan uçuş araması yapmasını istediğinizi düşünün.

UX tarafı:

Nereden → Nereye → Tarih → Yolcu → Uçuş seçimi → Yolcu bilgileri → Ödeme

akışını tasarlayabilir.

UI tarafı ise bu adımların ekranda nasıl görüneceğini belirler.

İyi bir arayüz görsel olarak başarılı olabilir fakat kullanıcı hedeflediği işlemi tamamlamakta zorlanıyorsa deneyim problemli kalır. Aynı şekilde mantıklı bir kullanıcı akışı kötü görsel hiyerarşiyle sunulduğunda kullanıcı gerekli bilgiyi fark etmekte zorlanabilir.

Bu yüzden UI/UX tasarım nedir? sorusunun daha doğru cevabı, kullanıcı deneyimi ile arayüz tasarımının aynı ürün içinde birbirini tamamlayan iki çalışma alanı olduğudur.

UI/UX tasarımcısı ne iş yapar?

UI/UX tasarımcısının görevi projeye göre değişir. Bazı şirketlerde UX Researcher, Product Designer ve UI Designer rolleri ayrı çalışırken bazı ekiplerde tek tasarımcı araştırmadan görsel tasarıma kadar geniş bir süreci yönetebilir.

Bir tasarımcının çalışma gününde şu işler bulunabilir:

Kullanıcı araştırması

Kullanıcılarla görüşür, davranışları inceler, mevcut ürün verilerini analiz eder.

Problem tanımlama

Araştırmadan gelen bilgileri tasarım problemine dönüştürür.

Bilgi mimarisi

İçeriklerin nasıl gruplanacağını ve kullanıcının bunlara nasıl ulaşacağını planlar.

User flow

Kullanıcının bir görevi tamamlarken izleyeceği yolu oluşturur.

Wireframe

Ekranın yapısını düşük ayrıntı seviyesinde tasarlar.

Prototip

Ekranları birbirine bağlayarak gerçek kullanıma benzeyen bir deneyim oluşturur.

UI tasarımı

Renk, tipografi, component, ikon, spacing ve görsel hiyerarşi üzerinde çalışır.

Kullanılabilirlik testi

Tasarlanan deneyimi kullanıcılarla test eder.

Geliştirici iş birliği

Tasarımın geliştirici tarafından doğru şekilde uygulanması için detayları aktarır.

Tasarım sonrası analiz

Ürün yayınlandıktan sonra kullanıcı davranışlarını ve ürün metriklerini inceleyerek yeni iyileştirmeler geliştirir.

Figma’nın güncel tasarım süreci yaklaşımı da araştırma, wireframe, prototipleme, test, iterasyon ve geliştiricilerle iş birliğini birbirine bağlı bir süreç olarak ele alıyor.

UI/UX tasarımcısı olmak için hangi bilgiler bilinmeli?

UI/UX tasarımcısı olmak için tek bir programı öğrenmek yeterli değildir. Tasarımcının farklı bilgi alanlarını bir araya getirmesi gerekir.

Bilgi alanı	Öğrenilmesi gerekenler
UX	Kullanıcı araştırması, usability, journey map
Araştırma	Interview, anket, gözlem, test
Problem çözme	Problem statement, hypothesis, ideation
Yapı	User flow, bilgi mimarisi
Taslak	Wireframe, low/high fidelity
Etkileşim	Interaction design, prototype
UI	Renk, tipografi, spacing, grid
Sistem	Component, design system, variables
Teknik	Responsive tasarım, HTML/CSS temelleri
Erişilebilirlik	Kontrast, klavye erişimi, form etiketleri
Ürün	KPI, conversion, retention, activation
Araç	Figma, FigJam ve benzeri tasarım araçları

Burada önemli nokta, bu alanların ayrı dersler gibi görülmemesidir.

Örneğin responsive tasarım öğrenirken grid ve Auto Layout bilgisine ihtiyaç duyarsınız. Prototip hazırlarken user flow bilgisine ihtiyaç duyarsınız. Kullanılabilirlik testi yaparken araştırma yöntemlerini bilmeniz gerekir.

Yani UI/UX tasarım nedir? konusu ilerledikçe farklı disiplinlerin birbirine nasıl bağlandığı daha net görülür.

UX tasarım süreci nasıl işler?

UX tasarım süreci genellikle problemi anlamakla başlar.

Figma’nın UX sürecine ilişkin güncel yaklaşımı problemi tanımlama, araştırma, prototip oluşturma, test etme ve iterasyon aşamalarını öne çıkarıyor.

Gerçek bir projede süreç şu şekilde ilerleyebilir:

Problem → Araştırma → İçgörü → Fikir → User flow → Wireframe → Prototype → Test → Revizyon → UI → Geliştirme → Ölçüm

Örneğin bir online eğitim platformunda kullanıcıların kayıt olduktan sonra ilk dersi başlatmadığını düşünelim.

Tasarımcı hemen yeni bir onboarding ekranı çizmez.

Önce problemi araştırır.

Kullanıcı kayıt sonrasında nereye gidiyor?

Ders bulmakta zorlanıyor mu?

İçeriğin nereden başlayacağını anlamıyor mu?

Platform çok fazla seçenek mi gösteriyor?

Kullanıcı ödeme yaptıktan sonra beklentisi karşılanmıyor mu?

Araştırmadan sonra bir problem ortaya çıkarsa çözüm tasarlanır.

Daha sonra prototip hazırlanır ve kullanıcılarla test edilir.

Testte yeni bir sorun görülürse tasarım tekrar değiştirilir.

Bu nedenle UX tasarımı tek seferde doğru ekranı çizmekten çok, problemi giderek daha iyi anlayıp çözümü geliştirme sürecidir.

Figma nedir ve UI/UX tasarımda nasıl kullanılır?

Figma, UI tasarımı, wireframe, prototip, component oluşturma ve ekip iş birliği için kullanılan önemli tasarım araçlarından biridir.

Ancak Figma’yı öğrenmek iki farklı seviyede ele alınmalıdır.

İlk seviye araç kullanımıdır:

• Frame oluşturmak,
• Text eklemek,
• Shape kullanmak,
• Component oluşturmak,
• Auto Layout kullanmak,
• Prototype bağlantıları oluşturmak,
• Variables kullanmak.

İkinci seviye ise tasarım mantığıdır.

Örneğin bir butonu Auto Layout ile oluşturmayı bilmek araç becerisidir.

Butonun farklı metin uzunluklarında nasıl davranması gerektiğini düşünmek ise tasarım becerisidir.

Figma’nın Auto Layout sistemi içerik değiştiğinde padding, spacing, alignment ve yön kurallarına göre elemanların yeniden düzenlenmesini sağlayabilir. Bu yapı responsive ve yeniden kullanılabilir arayüzler oluşturmak açısından önemlidir.

Figma’da bir UX projesi şöyle organize edilebilir:

01 Research

Araştırma notları ve içgörüler.

02 User Flow

Kullanıcının görev akışları.

03 Wireframes

Düşük ayrıntılı ekranlar.

04 Components

Butonlar, inputlar, kartlar ve diğer component’ler.

05 UI Design

Final ekranlar.

06 Prototype

Etkileşimli deneyim.

07 Handoff

Geliştirme için gerekli tasarım bilgileri.

Bu yapı dosyanın büyüdükçe karmaşıklaşmasını da azaltır.

UX araştırması nedir ve nasıl yapılır?

UX araştırması, kullanıcıların davranışlarını, ihtiyaçlarını, motivasyonlarını ve karşılaştıkları problemleri anlamak için yapılan sistematik çalışmadır.

Araştırma iki temel veri türünü bir araya getirebilir:

Nitel veri: Kullanıcı ne söylüyor, ne düşünüyor, neden böyle davranıyor?

Nicel veri: Kaç kullanıcı işlemi tamamlıyor, nerede ayrılıyor, hangi cihazı kullanıyor, ne kadar süre harcıyor?

Figma’nın UX araştırması kaynakları da nitel ve nicel araştırmanın ürün geliştirme sürecinin farklı aşamalarında kullanılabileceğini belirtiyor.

Nitel araştırma

Kullanıcı görüşmeleri, gözlem ve usability testleri nitel araştırmaya örnek verilebilir.

Örneğin:

“Online alışveriş yaparken ürün seçerken nelere dikkat ediyorsunuz?”

sorusu kullanıcının karar verme sürecini anlamaya yardımcı olabilir.

Nicel araştırma

Anketler ve analitik veriler nicel araştırmada kullanılabilir.

Örneğin:

“Checkout sürecine başlayan kullanıcıların yüzde kaçı satın almayı tamamlıyor?”

Bu soru davranışın büyüklüğünü ölçmeye yardımcı olur.

İyi UX araştırması “kullanıcılar ne istiyor?” sorusuyla sınırlı kalmaz.

Kullanıcı ne yapıyor, neden yapıyor, nerede zorlanıyor ve bu davranış tasarım kararını nasıl değiştirmeli?

sorularını birlikte ele alır.

Kullanıcı araştırması nasıl yapılır?

Kullanıcı araştırmasını profesyonel şekilde yapmak için araştırmanın başında bir plan oluşturmak gerekir.

1. Araştırma hedefini belirleyin

“Uygulamayı araştıracağız” fazla geniş bir hedeftir.

Bunun yerine:

“Yeni kullanıcıların ilk sipariş oluştururken hangi noktada zorlandığını anlamak”

daha kullanılabilir bir araştırma hedefidir.

2. Araştırma sorularını oluşturun

Örneğin:

• Kullanıcı ilk olarak hangi bilgiyi arıyor?
• Ürün seçerken hangi kriterleri kullanıyor?
• Sepete ekleme sonrasında ne yapıyor?
• Ödeme sırasında hangi noktada tereddüt ediyor?

3. Kullanıcı grubunu belirleyin

Ürünü gerçekten kullanan kişiler araştırmanın daha anlamlı olmasını sağlar.

Örneğin profesyonel muhasebe yazılımı tasarlıyorsanız lise öğrencileriyle yapılan bir test ürün hakkında sınırlı bilgi verebilir.

4. Araştırma yöntemini seçin

Araştırma sorusu	Uygun yöntem
Kullanıcı neden böyle davranıyor?	Görüşme
Görevi tamamlayabiliyor mu?	Usability test
Hangi seçenek daha yaygın?	Anket
Nerede ayrılıyor?	Analitik
Bilgileri nasıl grupluyor?	Card sorting
Navigasyonu bulabiliyor mu?	Tree testing

5. Sonuçları gruplayın

Tek bir kullanıcının söylediği şey ile beş kullanıcının tekrar tekrar söylediği şey aynı ağırlıkta değerlendirilmez.

Araştırma sonrasında ortak davranışlar, problemler ve ihtiyaçlar gruplandırılır.

6. İçgörü çıkarın

Ham veri:

“Ürünleri karşılaştırırken çok fazla sekme açıyorum.”

İçgörü:

“Kullanıcı ürün karşılaştırmasını tek bir arayüz içinde gerçekleştiremediği için karar verme sürecini farklı sayfalara yayıyor.”

İşte bu içgörü tasarım problemini daha net hale getirir.

Persona nedir ve UX tasarımında nasıl oluşturulur?

Persona, hedef kullanıcı grubunun araştırmaya dayalı temsili profilidir.

Persona oluşturmanın amacı hayali bir karakter yaratmak değildir.

Asıl amaç tasarım ekibinin “kimin için tasarlıyoruz?” sorusuna ortak bir cevap vermesidir.

Bir persona şu alanları içerebilir:

Demografik bilgiler: Yaş, meslek, yaşam durumu gibi temel bilgiler.

Hedefler: Kullanıcı neyi başarmaya çalışıyor?

Motivasyon: Neden bu hedefi gerçekleştirmek istiyor?

Problemler: Nerede zorlanıyor?

Davranışlar: Ürünü nasıl kullanıyor?

Bağlam: Ürünü hangi koşullarda kullanıyor?

Örneğin bir freelance proje yönetim aracı için:

Hedef: Projeleri ve teslim tarihlerini tek yerden takip etmek.

Problem: Farklı müşteriler için farklı araçlar kullanıyor.

Motivasyon: İşlerini daha düzenli yönetmek.

Davranış: Masaüstünde uzun süre çalışıyor, mobilde bildirimleri takip ediyor.

Bu bilgiler tasarım kararlarını etkileyebilir.

Ancak persona oluştururken araştırma yapılmadan “25 yaşında, kahve seven, teknoloji meraklısı” gibi rastgele özellikler eklemek tasarıma anlamlı katkı sağlamaz.

Persona, araştırmadan gelen davranış ve ihtiyaçları görünür hale getirdiğinde değerlidir.

User journey map nedir ve nasıl hazırlanır?

User journey map, kullanıcının bir hedefe ulaşırken ürün veya hizmetle kurduğu temasları aşamalar halinde gösterir.

Bir online kurs satın alma deneyimini ele alalım:

İhtiyaç hissetme → Kurs arama → Kursları karşılaştırma → İçeriği inceleme → Satın alma → Eğitime başlama → Eğitimi tamamlama

Her aşamada şu soruları sorabilirsiniz:

Aşama	Kullanıcı ne yapıyor?	Problem	Fırsat
Arama	Kurs araştırıyor	Çok fazla seçenek	Filtreleme
Karşılaştırma	Kursları inceliyor	İçerik yapıları farklı	Standart bilgi alanları
Satın alma	Ödeme yapıyor	Güven sorunu	Açık ödeme bilgisi
Başlama	İlk dersi arıyor	Nereden başlayacağını bilmiyor	Onboarding
Eğitim	Dersleri izliyor	İlerleme takibi zayıf	Progress sistemi

Journey map’in gücü, tek bir ekran yerine bütün deneyimi görmenizi sağlamasıdır.

Örneğin kullanıcı ödeme ekranında zorlanıyorsa problem daha önce başlamış olabilir. Kursun fiyatlandırma bilgisi yeterince açık verilmediyse kullanıcı ödeme sırasında tekrar düşünmeye başlayabilir.

User flow nedir ve nasıl oluşturulur?

User flow, kullanıcının belirli bir görevi tamamlamak için izlediği adımların görsel veya yapısal gösterimidir.

Örneğin bir e-ticaret ürününün satın alınması:

Ana sayfa

↓

Kategori

↓

Ürün listesi

↓

Ürün detay

↓

Sepet

↓

Adres

↓

Ödeme

↓

Sipariş onayı

Fakat gerçek bir user flow bundan daha karmaşık olabilir.

Örneğin kullanıcı giriş yapmamışsa:

Sepet → Giriş yap → Hesabın var mı?

Evet → Giriş → Adres

Hayır → Kayıt → Adres

gibi dallanmalar oluşabilir.

İyi bir user flow oluştururken yalnızca ideal senaryoyu düşünmeyin.

Şunları da ekleyin:

• hata,
• boş durum,
• geri dönme,
• iptal,
• başarısız ödeme,
• yanlış bilgi,
• yetki problemi,
• bağlantı problemi.

Çünkü gerçek kullanıcı her zaman ideal akışı izlemez.

Bilgi mimarisi nedir ve UX tasarımında neden önemlidir?

Bilgi mimarisi, ürün içindeki bilgilerin nasıl organize edileceğini belirler.

Bir haber sitesini düşünün.

Ana Sayfa

→ Gündem

→ Ekonomi

→ Teknoloji

→ Spor

→ Kültür

→ Dünya

Bu kategori yapısı kullanıcıya içeriklerin nerede bulunacağını anlatır.

Bilgi mimarisi kötü olduğunda kullanıcı:

“Bu bilgi nerede?”

“Bu özellik hangi menüde?”

“Bunu bulmak için nereye gitmeliyim?”

sorularıyla karşılaşır.

Bilgi mimarisinde şu unsurlar birlikte değerlendirilir:

• içerik kategorileri,
• navigasyon,
• menüler,
• etiketler,
• arama,
• filtreler,
• hiyerarşi,
• sayfa ilişkileri.

Özellikle büyük SaaS ürünlerinde bilgi mimarisi kritik hale gelir. Çünkü kullanıcı sayısı ve özellik sayısı arttıkça içerikleri rastgele menülere yerleştirmek navigasyonu hızla karmaşıklaştırabilir.

Wireframe nedir ve nasıl hazırlanır?

Wireframe, bir ekranın temel yapısını gösteren taslak tasarımdır.

Wireframe aşamasında amaç görsel olarak etkileyici ekran üretmek değildir.

Şu sorulara cevap aranır:

• İçerik nerede?
• Ana aksiyon hangisi?
• Kullanıcı ilk olarak ne görecek?
• Navigasyon nasıl çalışacak?
• Bilgi hangi sırayla gösterilecek?
• Form kaç alandan oluşacak?
• Kullanıcı bir sonraki adıma nasıl geçecek?

Örneğin bir yemek sipariş uygulamasının restoran detay ekranı için wireframe:

Header

→ Restoran bilgileri

→ Puan ve teslimat süresi

→ Kategori navigasyonu

→ Ürün listesi

→ Ürün detayları

→ Sepet özeti

→ CTA

şeklinde kurulabilir.

Daha sonra renk, tipografi, fotoğraf ve görsel detaylar eklenir.

Wireframe’in önemli avantajı, görsel ayrıntılara fazla zaman harcamadan yapısal sorunları erken fark ettirmesidir. Figma da wireframe’i ürünün sonraki tasarım aşamalarının temelini oluşturan bir blueprint olarak açıklıyor.

Low-fidelity ve high-fidelity wireframe arasındaki fark nedir?

Low-fidelity wireframe düşük ayrıntı seviyesinde çalışır.

High-fidelity wireframe ise gerçek ürüne daha yakın görünür.

Low-fidelity

Genellikle:

• basit kutular,
• çizgiler,
• placeholder metinler,
• temel butonlar,
• basit navigasyon

kullanılır.

Amaç hızlıca fikir üretmek ve yapıyı test etmektir.

Örneğin üç farklı checkout yapısını bir saat içinde oluşturup hangisinin daha mantıklı olduğunu ekip içinde tartışabilirsiniz.

High-fidelity

Daha fazla detay içerir:

• gerçek içerik,
• gerçekçi görseller,
• renkler,
• tipografi,
• component’ler,
• spacing,
• interaction detayları.

Bu aşamada kullanıcı deneyimini gerçek ürüne daha yakın biçimde test edebilirsiniz.

Hangisi ne zaman kullanılmalı?

Problem henüz belirsizse low-fidelity daha avantajlıdır.

Yapı netleşmiş ve görsel deneyim test edilmek isteniyorsa high-fidelity aşamasına geçilebilir.

Figma’nın wireframing rehberi de düşük ayrıntılı çalışmaların erken geri bildirim ve kullanılabilirlik testleri için avantaj sağladığını belirtiyor.

Prototip nedir ve UX tasarımında nasıl hazırlanır?

Prototip, tasarımın etkileşimli bir modelidir.

Statik bir ekran:

“Bu ekran böyle görünüyor.”

der.

Prototip:

“Kullanıcı bu ekranda şuna tıklarsa sonraki aşama böyle gerçekleşiyor.”

der.

Örneğin bir mobil alışveriş uygulamasında:

Ürün → Sepete ekle → Sepet → Ödeme

ekranlarını birbirine bağlayabilirsiniz.

Daha gelişmiş bir prototipte:

Başarılı ödeme

ve

Başarısız ödeme

gibi farklı durumlar da gösterilebilir.

Figma’nın prototipleme sistemi ekranlar arasında interactive flow oluşturmayı, kullanıcı akışlarını incelemeyi, tasarımı ekip arkadaşlarıyla paylaşmayı ve kullanıcılarla test etmeyi destekliyor.

Prototip hazırlarken üç seviyeyi düşünebilirsiniz:

Basit prototip

Ekranlar arası temel geçişleri gösterir.

Orta seviye prototip

Butonlar, menüler, modal’lar ve temel etkileşimleri içerir.

Gelişmiş prototip

Hata durumları, loading, success state, animasyon, conditional flow ve farklı kullanıcı senaryolarını simüle eder.

Prototipin amacı final ürünü üretmek değildir.

Amaç ürün geliştirilmeden önce deneyimin önemli bölümlerini test etmektir.

Kullanılabilirlik testi nedir ve nasıl yapılır?

Kullanılabilirlik testi, hedef kullanıcıların bir üründe belirli görevleri tamamlamasını gözlemleyerek kullanım problemlerini ortaya çıkarmaya yönelik yöntemdir.

Örneğin bir e-ticaret sitesi için kullanıcıya:

“Bu ayakkabıyı bulun, 42 numarayı seçin ve sepete ekleyin.”

görevi verilebilir.

Kullanıcı görevi gerçekleştirirken:

• nerede duruyor,
• hangi butona tıklıyor,
• neyi yanlış anlıyor,
• hangi bilgiyi arıyor,
• nerede hata yapıyor

gözlemlenir.

Burada önemli nokta, kullanıcıya tasarımı nasıl kullanacağını anlatmamaktır.

“Buradaki filtreye basın.”

demek yerine:

“Aradığınız ürünü bulmanızı istiyorum.”

demek daha doğru bir test ortamı oluşturur.

Test sonunda ne ölçülür?

• Görevi tamamlayabildi mi?
• Kaç hata yaptı?
• Nerede yardım istedi?
• Görevi ne kadar sürede tamamladı?
• Hangi noktada tereddüt etti?
• Hangi ifadeyi yanlış yorumladı?

Figma’nın prototipleri UserTesting gibi platformlarla test etmeye yönelik entegrasyonları da bulunuyor. Bu tür testler gerçek kullanıcı davranışından geri bildirim toplamayı kolaylaştırabiliyor.

UI tasarımında renk seçimi nasıl yapılır?

Renk seçimi “hangi renk güzel görünüyor?” sorusuyla başlamamalıdır.

Önce renk sisteminin görevleri belirlenmelidir.

Örneğin:

Renk rolü	Kullanım
Primary	Ana marka ve temel aksiyon
Secondary	İkincil aksiyonlar
Background	Sayfa zemini
Surface	Kart ve panel yüzeyleri
Text	Ana metin
Success	Başarılı işlem
Warning	Uyarı
Error	Hata

Bu sistem sayesinde renklerin anlamı tutarlı hale gelir.

Örneğin ödeme uygulamasında yeşil renk başarılı işlem anlamına geliyorsa:

“Ödeme tamamlandı”

mesajında yeşil kullanmak anlamlıdır.

Aynı yeşili her butona vermek ise renk sisteminin anlamını zayıflatabilir.

Kontrast neden önemli?

Açık gri metni beyaz arka plan üzerinde kullanmak estetik görünebilir ancak okunabilirliği düşürebilir.

W3C’nin güncel erişilebilirlik önerileri yeterli kontrast, bilgiyi yalnızca renkle aktarmama, etkileşimli alanların kolay fark edilmesi ve farklı viewport boyutlarının dikkate alınması gibi noktaları özellikle vurguluyor.

Bu nedenle renk paletini oluştururken:

Marka → hiyerarşi → kontrast → erişilebilirlik → kullanım bağlamı

sırasıyla düşünmek daha sağlıklı olur.

UI tasarımında tipografi nasıl seçilir?

Tipografi, arayüzdeki metnin okunmasını sağlamanın yanında kullanıcının hangi bilgiyi önce fark edeceğini de belirler.

Bir tasarım sisteminde örneğin:

Display

Heading 1

Heading 2

Heading 3

Body

Small

Caption

Label

gibi tipografi seviyeleri oluşturulabilir.

Her seviye için:

• font family,
• font size,
• font weight,
• line height,
• letter spacing

belirlenebilir.

Font seçerken neye bakılır?

İlk olarak okunabilirliğe bakılır.

Daha sonra:

• Türkçe karakter desteği,
• farklı ağırlık seçenekleri,
• mobil ekranlarda okunabilirlik,
• marka karakteri,
• lisans koşulları,
• sayı ve sembollerin görünümü

incelenir.

Örneğin finans uygulamasında rakamların okunabilirliği kritik olabilir. Fiyat, bakiye, yüzde ve işlem tutarı gibi verilerde sayıların birbirinden kolay ayırt edilmesi gerekir.

Tipografi aynı zamanda bilgi hiyerarşisi oluşturur.

Bir ekrandaki bütün metinler aynı boyutta ve ağırlıkta olursa kullanıcı hangi bilginin başlık, açıklama veya aksiyon olduğunu anlamakta zorlanır.

Grid sistemi nedir ve arayüz tasarımında nasıl kullanılır?

Grid sistemi, arayüzdeki öğelerin belirli hizalama ve boşluk kuralları içinde yerleştirilmesini sağlar.

Örneğin desktop web tasarımında 12 kolonlu bir grid kullanılabilir.

Bir içerik:

4 kolon

bir görsel:

8 kolon

kaplayabilir.

Başka bir bölüm:

6 + 6

şeklinde düzenlenebilir.

Grid’in amacı bütün ekranları aynı kalıba sokmak değildir.

Amaç, tasarımcının her elemanı rastgele yerleştirmesini önlemektir.

Grid hangi alanlarda kullanılır?

• web siteleri,
• dashboard’lar,
• e-ticaret,
• SaaS ürünleri,
• mobil uygulamalar,
• landing page’ler,
• tasarım sistemleri.

Grid ile birlikte spacing sistemi de düşünülmelidir.

Örneğin:

4 → 8 → 12 → 16 → 24 → 32 → 48

gibi belirli boşluk değerleri kullanılabilir.

Bu sayede iki component arasındaki boşluk tasarımcının o anki tercihine göre değişmek yerine sistem içinde tutarlı hale gelir.

Responsive tasarım nedir ve nasıl yapılır?

Responsive tasarım, arayüzün farklı ekran boyutlarına ve kullanım koşullarına uyum sağlamasıdır.

Masaüstü tasarımını küçültüp mobil ekrana sığdırmak yeterli değildir.

Çünkü ekran küçüldükçe kullanıcıya sunulan bilgi miktarı, navigasyon yapısı ve etkileşim biçimi değişebilir.

Örneğin desktop:

Logo | Kategoriler | Arama | Hesap | Sepet

şeklinde bir header kullanabilir.

Mobilde:

Logo | Arama | Menü

gibi daha kompakt bir yapı gerekebilir.

Responsive tasarımda hangi kararlar alınır?

Layout

Kolon sayısı değişebilir.

Typography

Başlık boyutları küçülebilir.

Navigation

Desktop menü mobil drawer’a dönüşebilir.

Content

İçerik sıralaması değişebilir.

Images

Görsel oranları değişebilir.

Buttons

Dokunmatik kullanım için yeterli alan bırakılabilir.

Forms

Yan yana duran alanlar mobilde alt alta geçebilir.

Figma’da responsive tasarım nasıl çalışılır?

Figma’da Auto Layout önemli araçlardan biridir.

Auto Layout; yön, spacing, padding, alignment ve yeniden boyutlandırma kuralları üzerinden tasarım elemanlarının içerik değiştiğinde otomatik şekilde düzenlenmesini sağlar. Örneğin metni uzayan bir butonun genişliği içeriğe göre değişebilir.

Örneğin:

[ Satın Al ]

butonunun metni:

[ Sepete Ekle ve Devam Et ]

olduğunda butonun genişliğinin metne uyum sağlaması gerekir.

Bu davranışı Auto Layout ile sistematik hale getirebilirsiniz.

Figma’nın prototip görüntüleme seçenekleri de Auto Layout ve constraints kullanılmış tasarımların farklı pencere boyutlarında yeniden düzenlenmesini test etmeye olanak sağlar.

Responsive tasarım yaparken en sık yapılan hata

Tasarımı yalnızca iki ekran üzerinden düşünmektir:

Desktop + Mobile

Gerçek ürünlerde ara ekranlar da vardır.

Örneğin:

1440 px → 1200 px → 1024 px → 768 px → 390 px

gibi farklı genişliklerde içerik davranışını düşünmek gerekir.

Asıl soru:

“Bu ekran 768 px olduğunda ne olacak?”

olmalıdır.

Bir tasarımın responsive olup olmadığını anlamanın yolu yalnızca birkaç ekran görüntüsü hazırlamak değil, içeriğin değiştiği durumlarda sistemin nasıl davrandığını test etmektir.

UI/UX tasarım öğrenirken bu konular nasıl birleştirilir?

Bu 20 konuyu ayrı ayrı öğrenmek yerine tek bir proje üzerinde birleştirmek çok daha verimli olur.

Örneğin bir online kitap satış uygulaması tasarladığınızı düşünün.

İlk olarak:

1. Kullanıcı araştırması

Kitap satın alan kişilerin nasıl seçim yaptığını araştırın.

↓

2. Persona

Hedef kullanıcı gruplarını belirleyin.

↓

3. Journey map

Kullanıcının kitap aramadan satın almaya kadar yaşadığı süreci çıkarın.

↓

4. User flow

“Kitap satın alma” görevini adımlara ayırın.

↓

5. Bilgi mimarisi

Kitapları kategori, yazar, tür ve filtreler üzerinden organize edin.

↓

6. Wireframe

Ana sayfa, kategori, ürün detay, sepet ve ödeme ekranlarını tasarlayın.

↓

7. Prototype

Ekranları birbirine bağlayın.

↓

8. Usability test

Kullanıcılara kitap bulma ve satın alma görevi verin.

↓

9. UI

Renk, tipografi, grid, component ve görsel hiyerarşiyi oluşturun.

↓

10. Responsive

Desktop, tablet ve mobil davranışları tasarlayın.

Bu şekilde çalıştığınızda her kavramın neden öğrenildiğini görürsünüz.

Örneğin user flow’un neden gerekli olduğunu wireframe hazırlarken anlarsınız.

Wireframe’in neden gerekli olduğunu prototip hazırlarken anlarsınız.

Prototipin neden gerekli olduğunu usability testinde anlarsınız.

Usability testinin neden gerekli olduğunu ise kullanıcı tasarımınızı beklediğiniz gibi kullanmadığında anlarsınız.

UI/UX tasarım öğrenirken hangi sırayla ilerlenmeli?

Başlangıç için şu öğrenme sistemi kullanılabilir:

Aşama	Öğrenilecek konu	Çıktı
1	UI/UX temelleri	Kavramsal temel
2	Kullanıcı araştırması	Araştırma raporu
3	Persona	Kullanıcı profili
4	Journey map	Deneyim haritası
5	User flow	Kullanıcı akışı
6	Bilgi mimarisi	İçerik yapısı
7	Wireframe	Ekran taslağı
8	Prototype	Etkileşimli model
9	Usability test	Kullanıcı geri bildirimi
10	UI	Görsel tasarım
11	Grid ve spacing	Layout sistemi
12	Typography	Tipografi sistemi
13	Color	Renk sistemi
14	Responsive	Farklı ekran tasarımları
15	Accessibility	Erişilebilir arayüz
16	Design system	Yeniden kullanılabilir yapı

Bu sıralama özellikle yeni başlayanların “Figma’da ne çizeceğim?” sorusundan çıkıp “Kullanıcının problemini nasıl çözeceğim?” sorusuna geçmesini sağlar.

UI/UX tasarımda en sık yapılan hatalar nelerdir?

Figma’yı tasarımın kendisi sanmak

Figma bir araçtır. İyi bir tasarım kararının yerine geçmez.

Araştırma yapmadan persona hazırlamak

Varsayımlarla oluşturulan persona gerçek kullanıcı davranışını temsil etmeyebilir.

Doğrudan high-fidelity tasarıma geçmek

Renkleri ve görselleri değiştirmek kolaydır. Yanlış bilgi mimarisini veya kullanıcı akışını değiştirmek daha maliyetlidir.

Kullanıcı testini sona bırakmak

Testi geliştirme öncesinde yapmak, yapısal problemleri daha erken yakalamanızı sağlar.

Responsive tasarımı sonradan düşünmek

Desktop tasarım tamamlandıktan sonra mobil ekranı küçültmek birçok yapısal problemi beraberinde getirebilir.

Erişilebilirliği görmezden gelmek

Kontrast, klavye erişimi, form etiketleri, odak durumları ve renk kullanımının en baştan düşünülmesi gerekir. W3C de bu noktaları temel erişilebilir tasarım önerileri arasında sayıyor.

Sadece güzel ekranlar üretmek

Portföyde güzel ekranlar göstermek görsel beceriyi kanıtlar. UX becerisini göstermek için ise problemin nasıl analiz edildiğini, kararların nasıl alındığını ve çözümün nasıl test edildiğini anlatmak gerekir.

UI/UX tasarım öğrenen biri ilk projesini nasıl yapmalı?

İlk proje için çok büyük bir uygulama tasarlamak yerine belirli bir kullanıcı problemi seçmek daha verimlidir.

Örneğin:

Problem: Üniversite öğrencileri ders çalışma materyallerini farklı platformlarda arıyor.

Bunun üzerine:

Araştırma: Öğrenciler materyal ararken ne yapıyor?

Persona: Hangi kullanıcı grubu hedefleniyor?

Journey: Materyal ihtiyacından indirmeye kadar hangi aşamalardan geçiyor?

User flow: Kullanıcı bir PDF’yi nasıl bulacak?

Bilgi mimarisi: Dersler ve materyaller nasıl kategorize edilecek?

Wireframe: Ana sayfa ve ders detay ekranı nasıl düzenlenecek?

Prototype: Kullanıcı materyali bulabilecek mi?

Usability test: Beş kullanıcı aynı görevi tamamlayabiliyor mu?

UI: Renk, tipografi ve component sistemi nasıl kurulacak?

Responsive: Aynı deneyim mobilde nasıl çalışacak?

Böyle bir proje, onlarca rastgele ekran tasarlamaktan daha fazla şey öğretir.

Çünkü bütün UI/UX sürecini tek bir problem üzerinde uygulamış olursunuz.

Sonuç

UI/UX tasarım nedir? sorusunun kapsamı Figma, renk veya ekran tasarımıyla sınırlı kalmaz. İyi bir tasarımcı önce kullanıcıyı ve problemi anlamaya çalışır, ardından deneyimin yapısını kurar, kullanıcı akışını planlar, wireframe oluşturur, prototip hazırlar, gerçek kullanıcılarla test eder ve elde ettiği bulgulara göre tasarımı geliştirir.

Bu nedenle UI/UX öğrenirken en verimli yöntem, kavramları ezberlemek yerine onları aynı proje içinde birbirine bağlamaktır.

Bir dijital ürünü baştan sona tasarlarken:

Araştırma → Persona → Journey Map → User Flow → Bilgi Mimarisi → Wireframe → Prototype → Usability Test → UI → Grid → Typography → Color → Responsive Tasarım

zincirini kurabildiğinizde UI ve UX’in birbirine nasıl bağlandığını görmeye başlarsınız.

Bir sonraki seviyede ise bu temel yapının üzerine design system, accessibility, interaction design, analytics, A/B testing, UX writing, service design ve product thinking gibi alanlar eklenir. Böylece UI/UX tasarım, ekran hazırlama becerisinden kapsamlı bir ürün tasarım disiplinine dönüşür.

SSS

UI/UX tasarım nedir?

UI/UX tasarım, dijital ürünlerde kullanıcı deneyiminin ve kullanıcı arayüzünün planlanması ve tasarlanması sürecidir. UX kullanıcı hedefleri, problemleri ve deneyim akışıyla ilgilenirken UI bu deneyimin görsel ve etkileşimli arayüzünü oluşturur.

UI ve UX arasındaki fark nedir?

UX, kullanıcının ürünle yaşadığı deneyimin yapısını ve kullanılabilirliğini ele alır. UI ise bu deneyimin ekranlarda renk, tipografi, component, layout ve diğer görsel unsurlarla nasıl sunulacağını tasarlar.

UI/UX tasarımcı olmak için Figma bilmek gerekir mi?

Figma, günümüzde UI/UX tasarımında önemli araçlardan biridir ancak tek başına yeterli değildir. Kullanıcı araştırması, problem çözme, bilgi mimarisi, user flow, prototipleme, kullanılabilirlik ve görsel tasarım prensipleri de öğrenilmelidir.

UX araştırması neden önemlidir?

UX araştırması kullanıcıların ihtiyaçlarını ve davranışlarını anlamaya yardımcı olur. Tasarım kararlarının varsayımlar yerine kullanıcı verilerine dayanmasını sağlayarak yanlış çözümlerin geliştirilme riskini azaltır.

Wireframe ile prototype arasındaki fark nedir?

Wireframe ekranın temel yapısını gösterir. Prototype ise ekranların ve etkileşimlerin nasıl çalışacağını simüle eder. Wireframe daha çok yapı ve hiyerarşiyi incelemek için, prototype ise akışı ve etkileşimi test etmek için kullanılır.

UI tasarımında en önemli konular nelerdir?

Renk, tipografi, grid, spacing, görsel hiyerarşi, component tasarımı, interaction states, responsive davranış ve erişilebilirlik temel UI konuları arasında yer alır.

Responsive tasarım neden önemlidir?

Kullanıcılar ürünlere farklı ekran boyutlarından erişir. Responsive tasarım, içerik ve etkileşimlerin farklı ekran genişliklerinde kullanılabilir kalmasını sağlar.

UI/UX tasarım öğrenmek ne kadar sürer?

Temel kavramları öğrenmek ile profesyonel seviyede ürün tasarlamak farklı süreçlerdir. Düzenli pratik yapan biri birkaç ay içinde temel bir proje akışını kurabilir. Profesyonel seviyeye ulaşmak ise gerçek projeler, kullanıcı araştırması, test, ürün bilgisi ve sürekli tasarım pratiği gerektirir.

UI/UX tasarım öğrenirken ilk hangi projeyi yapmak gerekir?

İlk projede kapsamı küçük tutmak faydalıdır. Bir mobil uygulamanın belirli bir özelliği, küçük bir e-ticaret akışı veya basit bir SaaS özelliği seçilip araştırmadan responsive tasarıma kadar bütün süreç uygulanabilir.

UI/UX tasarımda kullanıcı testi ne zaman yapılır?

Kullanıcı testi mümkün olduğunca erken yapılmalıdır. Low-fidelity wireframe aşamasında bile temel akış test edilebilir. Daha sonra high-fidelity prototype üzerinde görsel hiyerarşi ve etkileşimler daha ayrıntılı şekilde incelenebilir.