UI Nedir? Kullanıcı Arayüzü Tasarımına Giriş

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

---

Giriş

Bir uygulamayı açtığında gördüğün her şey: butonlar, renkler, yazı tipleri, ikonlar, menüler. Hepsi bir tasarımcının kararı. Bu kararların toplamına UI yani kullanıcı arayüzü diyoruz.

UI, kullanıcının ürünle fiziksel olarak etkileşime girdiği katman. Bir butona tıklıyorsun, bir form dolduruyorsun, bir menüyü açıyorsun. Tüm bu etkileşimlerin görsel ve davranışsal tasarımı UI Designer'ın işi.

Güzel görünen ama kullanılamayan arayüzler var. Çirkin ama son derece işlevsel olanlar da. İyi UI, ikisini dengeler: hem estetik hem kullanılabilir.

Bu yazıda UI'ın ne olduğunu, UI Designer'ların ne yaptığını ve iyi bir arayüzün özelliklerini öğreneceksin.

---

UI Ne Demek?

UI, User Interface yani Kullanıcı Arayüzü kelimelerinin kısaltmasıdır.

UI, ürünün "yüzü". Kullanıcı arka plandaki kodu, veritabanını, sunucuları görmez. Sadece arayüzü görür ve onunla etkileşir. Bu yüzden arayüz tasarımı kritik.

---

Arayüz Tipleri

UI sadece ekranlardan ibaret değil. Farklı arayüz tipleri var:

1. Grafik Kullanıcı Arayüzü (GUI)

En yaygın tip. Görsel elementlerle etkileşim:

• Masaüstü uygulamaları
• Mobil uygulamalar
• Web siteleri

2. Ses Kullanıcı Arayüzü (VUI)

Sesle etkileşim:

• Siri, Alexa, Google Assistant
• Sesli asistanlar
• IVR sistemleri (telefon menüleri)

3. Dokunmatik Arayüz

Fiziksel dokunuşla etkileşim:

• Kiosk'lar
• ATM'ler
• Akıllı ev panelleri

4. Hareket Tabanlı Arayüz

Vücut hareketleriyle etkileşim:

• Xbox Kinect
• VR/AR sistemleri

---

UI'ın Temel Elementleri

Bir arayüz şu temel yapı taşlarından oluşur:

1. Layout (Yerleşim)

Elementlerin ekranda nasıl konumlandığı:

• Grid sistemleri
• Spacing (boşluklar)
• Alignment (hizalama)
• Responsive davranış

2. Tipografi

Metin tasarımı:

• Font seçimi
• Font boyutları (hiyerarşi)
• Satır aralığı (line-height)
• Metin renkleri

3. Renk

Renk paleti ve kullanımı:

• Primary, secondary, accent renkler
• Background ve surface renkleri
• Text renkleri
• Durum renkleri (success, error, warning)

4. Görsel Elementler

• İkonlar
• İllüstrasyonlar
• Fotoğraflar
• Grafikler ve çizelgeler

5. Bileşenler (Components)

Tekrar kullanılan UI parçaları:

• Butonlar
• Input alanları
• Kartlar
• Modallar
• Navigation elementleri
• Tablolar

6. Etkileşim Tasarımı

Elementlerin davranışı:

• Hover durumları
• Tıklama efektleri
• Animasyonlar
• Geçişler (transitions)

[TABLE] | Element | Görevi | Örnek | |---------|--------|-------| | Buton | Aksiyon tetikleme | "Kaydet", "Gönder" | | Input | Veri girişi | Text field, checkbox | | Navigation | Yönlendirme | Tab bar, sidebar | | Kart | İçerik gruplama | Ürün kartı, profil kartı | | Modal | Odaklanmış etkileşim | Onay diyalogu | | Toast | Geri bildirim | "Kaydedildi" mesajı | [/TABLE]

---

UI Designer Ne Yapar?

UI Designer'ın temel amacı:

Kullanılabilir, tutarlı ve estetik arayüzler tasarlamak.

Günlük işler

Kullanılan araçlar

| Kategori | Araçlar | |----------|---------| | Tasarım | Figma, Sketch, Adobe XD | | Prototip | Figma, ProtoPie, Principle, Framer | | Animasyon | After Effects, Lottie | | Handoff | Figma Dev Mode, Zeplin | | Design System | Figma, Storybook |

Çalışma şekli

UI Designer genellikle şu kişilerle birlikte çalışır:

• UX Designer (deneyim tasarımı)
• Developer (uygulama)
• Product Manager (ürün kararları)
• Brand Designer (marka uyumu)

---

İyi UI'ın Özellikleri

1. Tutarlılık (Consistency)

Aynı elementler her yerde aynı görünmeli ve davranmalı.

Tutarlılık tipleri:

• Görsel tutarlılık (renkler, fontlar)
• Fonksiyonel tutarlılık (aynı element = aynı davranış)
• Dış tutarlılık (platform conventions'a uyum)

2. Görsel Hiyerarşi

Önemli elementler öne çıkmalı, ikincil elementler geri planda kalmalı.

Hiyerarşi araçları:

• Boyut (büyük = önemli)
• Renk (kontrast = dikkat çeker)
• Konum (üst ve sol = önce görülür)
• Boşluk (etrafında boşluk = öne çıkar)

3. Anlaşılırlık (Clarity)

Kullanıcı neyin tıklanabilir olduğunu, nerede olduğunu, ne yapması gerektiğini hemen anlamalı.

[COMPARISON] ❌ Belirsiz: Flat, tıklanabilir mi belli olmayan text ✅ Anlaşılır: Buton görünümünde, hover'da feedback veren element [/COMPARISON]

4. Geri Bildirim (Feedback)

Kullanıcı bir aksiyon aldığında, sistem cevap vermeli.

Geri bildirim örnekleri:

• Butona tıklayınca renk değişimi
• Form gönderilince başarı mesajı
• Yükleme sırasında spinner
• Hata durumunda kırmızı border ve mesaj

5. Erişilebilirlik (Accessibility)

Herkes için kullanılabilir tasarım:

• Yeterli renk kontrastı
• Okunabilir font boyutları
• Ekran okuyucu uyumu
• Keyboard navigation desteği

6. Estetik

Görsel olarak çekici, modern ve profesyonel görünüm.

Ama dikkat: Estetik, kullanılabilirliği engellememelidir. Güzel ama kullanılamaz UI, kötü UI'dır.

---

UI Tasarım Prensipleri

Yakınlık (Proximity)

İlişkili elementler birbirine yakın olmalı.

[COMPARISON] ❌ Form label'ı inputtan uzakta ✅ Label, input'un hemen üstünde veya yanında [/COMPARISON]

Hizalama (Alignment)

Elementler görünmez çizgiler üzerinde hizalı olmalı.

Tekrar (Repetition)

Aynı görsel pattern'ler tekrar kullanılmalı. Bu tutarlılık yaratır.

Kontrast (Contrast)

Farklı elementler arasında yeterli görsel fark olmalı. Bu hem hiyerarşi hem erişilebilirlik için önemli.

---

Design System Nedir?

UI Designer'ların en önemli çıktılarından biri design system'dır.

Design system içerir:

• Renk paleti
• Tipografi sistemi
• Spacing sistemi
• Icon set
• UI bileşenleri (butonlar, inputlar, kartlar...)
• Kullanım kuralları ve dokümantasyon

Neden önemli:

• Tutarlılık sağlar
• Hızlı tasarım ve geliştirme
• Kolay güncelleme
• Ekipler arası ortak dil

Popüler design system'lar:

• Material Design (Google)
• Human Interface Guidelines (Apple)
• Carbon (IBM)
• Polaris (Shopify)

---

UI vs UX: Tekrar Hatırlayalım

[COMPARISON] UI: Ürün nasıl görünüyor? UX: Ürün nasıl çalışıyor ve hissettiriyor? [/COMPARISON]

Ev benzetmesi:

• UX: Evin planı, odaların yerleşimi, kapıların açılış yönü, elektrik prizlerinin konumu
• UI: Duvar renkleri, mobilya seçimi, aydınlatma armatürleri, dekorasyon

[TABLE] | Özellik | UI Design | UX Design | |---------|-----------|-----------| | Soru | Nasıl görünmeli? | Nasıl çalışmalı? | | Odak | Görsel, estetik | Deneyim, akış | | Çıktılar | Mockup, style guide | Wireframe, persona | | Araçlar | Figma, Illustrator | FigJam, Miro | | Test | Görsel A/B test | Kullanılabilirlik testi | [/TABLE]

---

Sık Yapılan UI Hataları

1. Tutarsız tasarım

Aynı işlev için farklı görünümler, farklı renkler, farklı boyutlar.

2. Yetersiz kontrast

Açık gri text beyaz arka planda. Kullanıcılar (özellikle görme zorluğu olanlar) okuyamaz.

3. Çok küçük tıklama alanları

44x44px altı butonlar mobilde tıklanamaz.

4. Belirsiz etkileşimler

Neyin tıklanabilir, neyin tıklanamaz olduğu belli değil.

5. Aşırı tasarım

Her yere animasyon, gradient, gölge. Basitlik yerine karmaşıklık.

6. Platform kurallarını görmezden gelmek

iOS uygulamasında Android pattern'leri veya tam tersi. Kullanıcılar platform conventions'a alışkındır.

---

UI Designer Olmak İçin

Gerekli beceriler

Hard skills:

• Görsel tasarım prensipleri
• Tipografi
• Renk teorisi
• Layout ve grid sistemleri
• Design system oluşturma
• Figma veya benzeri araçlar
• Temel animasyon

Soft skills:

• Detaylara dikkat
• Estetik algı
• İş birliği
• Geri bildirim alma ve verme
• Trend takibi

Nasıl gelişirsin?

1. Günlük UI incele: Kullandığın uygulamaları eleştirel gözle bak
2. Replika yap: Beğendiğin UI'ları Figma'da kopyala
3. Daily UI challenge: 100 günlük tasarım challengeına katıl
4. Design system öğren: Material Design, HIG incele
5. Portfolio oluştur: Yaptıklarını göster

---

---

---

İlgili İçerikler

Önceki: UX Nedir?

Sonraki: UX ve UI Arasındaki Fark

İlgili konular:

• Design System Temelleri (yakında)
• Visual Hierarchy Prensipleri (yakında)

İlgili Roadmap: UI Designer Roadmap → Temeller

---

Kaynaklar

Derinleşmek istersen:

• User Interface Design Basics - Usability.gov (İngilizce, 6 dk)
• UI Design - IxDF (İngilizce, 10 dk)
• Material Design (Google'ın design system'ı, İngilizce)