UI DESIGN (KULLANICI ARAYÜZÜ TASARIMI) EĞİTİMİ

Göz alıcı ve tutarlı arayüzler tasarlayın

Renk, tipografi, ızgara ve bileşenlerle Figma'da piksel hassasiyetinde arayüz tasarımı

UI Design (Kullanıcı Arayüzü Tasarımı) Eğitimi, dijital ürünlerin görsel arayüz katmanını profesyonel düzeyde tasarlamayı öğretir. Katılımcılar görsel hiyerarşi, renk teorisi, tipografi ve ızgara sistemlerini öğrenir; Figma'da bileşen, variant, Auto Layout ve…

3 gün Orta Seviye Online / Yüz Yüze / Hibrit Sertifikalı

Eğitim Hakkında

Görsel hiyerarşiden Figma bileşenlerine, responsive düzenden geliştirici teslimine arayüz craft'ı

UI Design Eğitimi, dijital ürünlerin görsel arayüz katmanını profesyonel düzeyde tasarlamayı öğretir. Katılımcılar görsel hiyerarşi, renk teorisi, tipografi ve ızgara sistemlerini kavrar; ardından Figma'da frame, bileşen, variant ve Auto Layout ile yeniden kullanılabilir arayüzler kurar. Stiller ve değişkenlerle tutarlılık, ikonografi, responsive düzen ve mikro etkileşim işlenir. Program, prototip ve Figma Dev Mode ile geliştiriciye teslim adımlarıyla tamamlanır.

Süre ve Format

3 Gün. Her gün dört modül; tek bir ürün ekranı seti baştan sona Figma'da profesyonel biçimde tasarlanır.

Seviye

Orta Seviye — renk, tipografi, ızgara ve bileşen tasarımıyla Figma'da profesyonel arayüz üretme becerisi

Öğrenme Metodu

Her modülde öğrenilen görsel ilke Figma'da gerçek bir ekran üzerinde uygulanır; tasarım adım adım bir arayüze dönüşür.

Neden Bu Eğitim?

🎨Görsel tutarlılık

Renk, tipografi ve ızgara sistemlerini kurarak tüm ekranlarda tutarlı, profesyonel ve göz alıcı bir arayüz dili oluşturursunuz.

🧩Yeniden kullanım

Figma bileşen, variant ve Auto Layout ile bir kez tasarlayıp her ekranda yeniden kullanılabilen esnek arayüz parçaları üretirsiniz.

🤝Sorunsuz teslim

Dev Mode ve stil belgeleriyle tasarımı geliştiriciye eksiksiz teslim eder, uygulamada bire bir hayata geçmesini sağlarsınız.

Anahtar Konular

ui design eğitimikullanıcı arayüzü tasarımıfigma eğitimiarayüz tasarımı kursuui tasarımgörsel tasarım eğitimifigma bileşenresponsive tasarımtipografi eğitimiui ux eğitimi
“İyi arayüz tasarımı süsleme değil, her pikselin bir amaca hizmet ettiği görünmez bir düzendir; kullanıcı fark etmez, sadece işini kolayca halleder.”

Ön Koşullar

Eğitimden verim almak için faydalı olacak bilgi ve ortam

1
Temel tasarım sezgisi

Hizalama, boşluk ve renk gibi temel görsel kavramlara aşinalık süreci kolaylaştırır; zorunlu değildir.

2
Figma hesabı

Ücretsiz bir Figma hesabı ve tarayıcı yeterlidir; tüm uygulamalar tarayıcı üzerinden yürütülür.

3
Dijital ürün ilgisi

Web veya mobil uygulama ekranlarına ilgi, örneklerin bağlamını daha iyi kavramanıza yardımcı olur.

4
İnternet erişimi

Figma bulut tabanlı çalıştığı için kesintisiz internet bağlantısı ve güncel bir tarayıcı gereklidir.

Eğitim İçeriği

Programın gün gün akışı aşağıdadır. Bir güne tıklayarak o günün modüllerini ve içeriklerini görebilirsiniz.

Günün hedefiKatılımcı görsel hiyerarşiyi kurar, renk ve tipografi sistemlerini oluşturur ve ızgara ile boşluk düzenini bir arayüzün temeli olarak kullanır.
Modül 1
Görsel Hiyerarşi ve Düzen İlkeleri
  • Görsel ağırlık, kontrast ve odak noktası oluşturma
  • Yakınlık, hizalama ve tekrar ile düzen kurma
  • Boşluğun (whitespace) arayüzde işlevsel kullanımı
  • Z ve F okuma desenlerine göre içerik yerleşimi
  • Birincil ve ikincil aksiyonların görsel önceliği
  • Gestalt ilkelerinin arayüz gruplamasına uygulanması
Modül 2
Renk Teorisi ve Palet Yönetimi
  • HSB renk modeli ve renk sıcaklığının arayüzde rolü
  • Marka, nötr, başarı, uyarı ve hata renk rolleri
  • 60-30-10 kuralıyla dengeli renk dağılımı kurma
  • Ton ve tint ölçekleriyle sistematik palet üretimi
  • WCAG kontrast oranları ve metin okunabilirliği
  • Açık ve koyu tema için renk eşlemesi planlama
Modül 3
Tipografi ve Okunabilirlik
  • Serif, sans-serif seçimi ve font eşleştirme mantığı
  • Tip ölçeği ve modüler oranla başlık-gövde hiyerarşisi
  • Satır yüksekliği, harf aralığı ve ölçü genişliği
  • Ağırlık (weight) ile vurgu ve hiyerarşi oluşturma
  • Web fontları, değişken fontlar ve yükleme performansı
  • Ekran okunabilirliği ve erişilebilir punto seçimi
Modül 4
Izgara, Boşluk ve Spacing
  • Sütun, oluk ve kenar boşluğuyla düzen ızgarası kurma
  • 8 piksel tabanlı spacing sistemi ve ritim oluşturma
  • Baseline ızgarası ile dikey hizalama sağlama
  • Responsive davranış için esnek ve sabit ızgaralar
  • İçerik yoğunluğuna göre boşluk ölçekleme kararları
  • Kart ve bölüm aralıklarında tutarlılık sağlama
Günün hedefiKatılımcı Figma'da frame ve Auto Layout ile ekran kurar, variant içeren bileşenler oluşturur ve stil ile değişkenlerle tutarlılığı ölçekler.
Modül 1
Figma Ortamı ve Frame Yapısı
  • Frame, grup ve katman yapısının doğru kurulması
  • Constraints ile öğelerin yeniden boyutlanma davranışı
  • Sayfa ve bölüm düzeniyle dosyayı organize etme
  • Pen, shape ve boolean işlemlerle görsel oluşturma
  • Grid ve layout grid ile frame içi hizalama
  • Klavye kısayollarıyla hızlı tasarım iş akışı
Modül 2
Bileşen, Variant ve Auto Layout
  • Component ve instance mantığıyla yeniden kullanım
  • Variant ile buton durumlarını tek bileşende toplama
  • Component property ile metin ve ikon değişkenleri
  • Auto Layout ile esnek, içeriğe uyan yerleşim
  • Padding, gap ve hizalama ayarlarının kullanımı
  • Nested bileşenlerle karmaşık arayüz parçaları kurma
Modül 3
Stiller, Değişken ve Tutarlılık
  • Renk, metin ve efekt stillerini kütüphaneye kaydetme
  • Figma Variables ile token tabanlı renk yönetimi
  • Mode kullanarak açık ve koyu tema arasında geçiş
  • Takım kütüphanesi ile stilleri dosyalar arası paylaşma
  • Efekt ve gölge stilleriyle yükselti (elevation) dili
  • Stil güncellemelerinin tüm ekranlara yayılması
Modül 4
İkonografi ve Görsel Varlıklar
  • Tutarlı çizgi kalınlığı ve ızgarayla ikon üretimi
  • SVG ikon içe aktarma ve optimize etme
  • İkon seti seçimi ve anlam bütünlüğünün korunması
  • Görsel, maske ve köşe yarıçapı ile medya düzeni
  • Illustration ve boş durum (empty state) görselleri
  • Varlıkların export ayarları ve ölçek seçenekleri
Günün hedefiKatılımcı arayüzü farklı ekranlara uyarlar, bileşen durumları ve mikro etkileşimler ekler, prototip bağlar ve Dev Mode ile geliştiriciye teslim eder.
Modül 1
Responsive ve Adaptif Arayüz
  • Masaüstü, tablet ve mobil kesme noktası tasarımı
  • Auto Layout ve constraints ile akışkan yeniden düzen
  • İçerik önceliğine göre mobilde sadeleştirme kararları
  • Dokunmatik hedef boyutu ve mobil ergonomi
  • Breakpoint başına tipografi ve spacing ölçekleme
  • Aynı bileşenin farklı ekranlarda uyarlanması
Modül 2
Bileşen Durumları ve Mikro Etkileşim
  • Hover, focus, pressed ve disabled durum tasarımı
  • Yükleme, boş ve hata durumlarının arayüzde ele alınması
  • Smart Animate ile yumuşak durum geçişleri
  • Geri bildirim veren mikro animasyonların amacı
  • Form doğrulama ve anlık geri bildirim tasarımı
  • Hareketin erişilebilirlik ve performans dengesi
Modül 3
Prototip ve Akış Bağlantıları
  • Frame'ler arası etkileşim ve geçiş bağlantıları
  • Overlay, scroll ve sabit öğelerle gerçekçi akış
  • Component durumlarıyla etkileşimli prototip kurma
  • Kullanıcı akışının baştan sona test edilmesi
  • Prototip linkiyle paydaşlardan geri bildirim toplama
  • Akıştaki kopuklukların prototipte tespit edilmesi
Modül 4
Geliştiriciye Teslim ve Dev Mode
  • Dev Mode ile ölçü, renk ve spacing değerlerini aktarma
  • CSS, iOS ve Android kod parçacıklarını inceleme
  • Varlıkların doğru format ve ölçekte dışa aktarımı
  • Tasarım belgeleri ve bileşen kullanım notları yazma
  • Tasarım-geliştirme teslim kontrol listesi oluşturma
  • Teslim sonrası revizyon ve sürüm yönetimi

Eğitim Kazanımları

Program sonunda katılımcılar:

✅
Görsel hiyerarşi

Kontrast, boşluk ve düzen ilkelerini kullanarak kullanıcının dikkatini doğru öğelere yönlendiren net arayüzler tasarlarsınız.

✅
Renk sistemi

Rol tabanlı bir renk paleti kurar, kontrast oranlarını gözeterek açık ve koyu tema için erişilebilir renkler seçersiniz.

✅
Tipografi ölçeği

Modüler tip ölçeği ve font eşleştirmesiyle okunabilir, hiyerarşik ve tutarlı bir metin düzeni oluşturursunuz.

✅
Izgara ve spacing

8 piksel tabanlı spacing ve sütun ızgarasıyla ekranlar arasında ritim ve hizalama tutarlılığı sağlarsınız.

✅
Figma bileşenleri

Variant, property ve Auto Layout kullanarak yeniden kullanılabilir, esnek ve bakımı kolay bileşenler üretirsiniz.

✅
Responsive tasarım

Masaüstünden mobile kesme noktaları ve akışkan düzenle her ekran boyutunda düzgün çalışan arayüzler kurarsınız.

✅
Etkileşimli prototip

Figma'da frame bağlantıları ve Smart Animate ile gerçekçi akışlar oluşturup kullanıcı deneyimini erken test edersiniz.

✅
Geliştirici teslimi

Dev Mode ve tasarım belgeleriyle arayüzü geliştiriciye eksiksiz teslim eder, uygulamada tutarlı sonuç alırsınız.

Kimler İçin Uygundur?

  • Arayüz tasarımına görsel craft açısından hâkim olmak isteyen tasarımcılar
  • grafik tasarımdan dijital ürüne geçen tasarımcılar
  • Figma'da profesyonel arayüz üretmek isteyen ön yüz geliştiricileri ile ürün ekipleri için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?
Arayüz tasarımına görsel açıdan hâkim olmak isteyen tasarımcılar, grafik tasarımdan dijital ürüne geçenler ve Figma'da profesyonel arayüz üretmek isteyen ön yüz geliştiricileri ile ürün ekipleri için uygundur. Temel tasarım sezgisi faydalıdır ancak zorunlu değildir.
Eğitimde hangi araç kullanılıyor?
Eğitim boyunca Figma kullanılır. Ücretsiz bir Figma hesabı ve güncel bir tarayıcı yeterlidir. Frame, bileşen, variant, Auto Layout, Variables ve Dev Mode gibi özellikler gerçek ekranlar üzerinde uygulamalı olarak işlenir.
UI Design ile UX tasarımı arasındaki fark nedir?
UI tasarımı ürünün görsel ve etkileşim katmanına, yani renk, tipografi, bileşen ve düzene odaklanır. UX ise kullanıcı araştırması, akış ve kullanılabilirlikle ilgilenir. Bu eğitim görsel arayüz craft'ına odaklanır; araştırma ve test konuları diğer UX/UI programlarında ele alınır.
Eğitim süresi ne kadar ve nasıl işleniyor?
Eğitim 3 gün sürer ve her gün dört modülden oluşur. Her modülde öğrenilen görsel ilke Figma'da gerçek bir ekran üzerinde uygulanır; süreç sonunda baştan sona tasarlanmış bir arayüz seti ortaya çıkar. Eğitim yüz yüze ya da online yapılabilir.
Eğitim sonunda sertifika veriliyor mu?
Programı tamamlayan katılımcılar Digital Vizyon Akademi Katılım ve Başarı Sertifikası alır. Eğitim yüz yüze ya da online yürütülebilir ve kurumun ihtiyaçlarına göre içerik uyarlanabilir.

Sertifikalandırma

Bu eğitim Digital Vizyon Akademi Başarı Sertifikası ile tamamlanır.

Eğitim başında “Ön Test”, bitiminde “Son Test” uygulanarak gelişim ölçümlenir. Değerlendirme formunu dolduran katılımcılar sertifikalarını alır. Sertifikanızın geçerliliğini Sertifika Sorgulama sayfasından doğrulayabilirsiniz.

Örnek Sertifika d Digital Vizyon AKADEMİ KATILIM SERTİFİKASI Bu sertifika [Katılımcı Adı Soyadı] adlı katılımcının aşağıdaki eğitim programını başarıyla tamamladığını belgeler. UI Design (Kullanıcı Arayüzü Tasarımı) Eğitimi Sertifika Kodu DV-2026XX00 Tarih 15.10.2026 Yetkili İmza DV AKADEMİ

Eğitim Bilgileri

Süre3 gün
SeviyeOrta Seviye
FormatOnline / Yüz Yüze / Hibrit
Sertifika✓ Var
Hemen Bilgi Al
İlgili Eğitimler

Bu Eğitimle Birlikte Tercih Edilenler

UX/UI TasarımıWeb UX & Metaverse Design Eğitimi
Tasarım ve Kullanıcı Deneyimi Eğitimleri

Web UX & Metaverse Design Eğitimi

3 günOrtaOnline / Yüz Yüze / Hibrit

Web UX ilkelerinden mekânsal arayüze, VR ve AR etkileşiminden WebXR deneyimine metaverse tasarımını öğreten orta seviye uygulamalı eğitim.

Detayları Gör →
UX/UI TasarımıYazılım Geliştiricileri için Design Thinking Atölyesi Eğitimi
Tasarım ve Kullanıcı Deneyimi Eğitimleri

Yazılım Geliştiricileri için Design Thinking Atölyesi Eğitimi

4 günİleriOnline / Yüz Yüze / Hibrit

Empati, tanımlama, fikir üretme, prototip ve testle yazılım geliştiricilerin kullanıcı odaklı düşünmeyi öğrendiği uygulamalı Design Thinking atölyesi.

Detayları Gör →
UX/UI TasarımıMobil Ekran Tasarımı ve Kullanılabilirlik Eğitimi
Tasarım ve Kullanıcı Deneyimi Eğitimleri

Mobil Ekran Tasarımı ve Kullanılabilirlik Eğitimi

3 günOrtaOnline / Yüz Yüze / Hibrit

iOS HIG, Material Design, tipografi, dokunma hedefleri, erişilebilirlik ve cihazda kullanılabilirlik testiyle uygulamalı mobil ekran tasarımı eğitimi.

Detayları Gör →
UX/UI TasarımıUI/UX Tasarımının Temelleri Eğitimi
Tasarım ve Kullanıcı Deneyimi Eğitimleri

UI/UX Tasarımının Temelleri Eğitimi

3 günTemelOnline / Yüz Yüze / Hibrit

Sıfırdan UI/UX: kavramlar, tasarım ilkeleri, Gestalt, kullanılabilirlik, wireframe ve Figma ile ilk tasarım. 3 günlük temel eğitim.

Detayları Gör →
UX/UI Tasarımı3D Design Thinking for Sales Eğitimi
Tasarım ve Kullanıcı Deneyimi Eğitimleri

3D Design Thinking for Sales Eğitimi

3 günOrtaOnline / Yüz Yüze / Hibrit

Design Thinking'i satışa uyarlayın: empati, değer önerisi tuvali, prototip ve testle müşteri odaklı satış çözümleri geliştirmeyi öğreten eğitim.

Detayları Gör →
UX/UI TasarımıAMA2034 Innovation and Design Thinking Certificate Program Eğitimi
Tasarım ve Kullanıcı Deneyimi Eğitimleri

AMA2034 Innovation and Design Thinking Certificate Program Eğitimi

3 günOrtaOnline / Yüz Yüze / Hibrit

Çift Elmas süreci, Design Thinking, iş modeli ve değer önerisi tuvaliyle inovasyonu uçtan uca yönetmeyi öğreten sertifika programı eğitimi.

Detayları Gör →
+90 (501) 369 40 14 WhatsApp [email protected] LinkedIn