| Dersin Türü | Zorunlu |
|---|
| Dersin Düzeyi | Lisans |
|---|
| Dersin Yılı | 4 |
|---|
| Dersin Yarıyılı | Yedinci Yarıyıl (Güz) |
|---|
| AKTS | 4 |
|---|
| Öğretim Eleman(lar)ı |
|
| Öğrenme Kazanımları |
Bu dersin sonunda öğrenciler;
- Tasarım sistemi, örüntü kütüphanesi (pattern library) ve arayüz kiti (UI kit) kavramlarını ayırt eder; bir tasarım sisteminin ilkelerini, kapsamını ve kullanım kurallarını tanımlar.
- Renk, tipografi, boşluk sistemi, ızgara, köşe yarıçapı ve katman derinliği gibi tasarım temellerini; temel ve anlamsal tasarım belirteçleri (primitive ve semantic design tokens), Styles, Variables ve Modes aracılığıyla sistemleştirir.
- Yeniden kullanılabilir bir bileşen mimarisi kurar; Components, Variants, Component Properties, bileşim, durumlar, adlandırma, kütüphane organizasyonu ve kullanım dokümantasyonunu tutarlı biçimde geliştirir.
- Etkileşim ve görsel arayüz örüntülerini tarihsel bağlam, kullanıcı ihtiyacı, platform, kullanılabilirlik, marka ve erişilebilirlik ölçütleriyle karşılaştırır ve uygun örüntüyü gerekçeli biçimde seçer.
- Bir dijital ürünün görev akışlarını ve kullanıcı arayüzü durumlarını tanımlar; Figma'da gezinme, üst katmanlar (Overlays), kaydırma davranışı, Interactive Components ve Variables kullanarak yüksek doğruluklu prototip oluşturur.
- Tasarım sistemini ve prototipi tutarlılık, kullanılabilirlik ve erişilebilirlik açısından değerlendirir; geribildirim ve temel kullanıcı testi bulgularına göre iyileştirir.
- Belgelenmiş tasarım sistemiyle bütünleşen yüksek doğruluklu bir dijital ürün prototipini profesyonel biçimde sunar.
|
| Veriliş Biçimi | Yüz Yüze |
|---|
| Önkoşullar | Yok |
|---|
| Önerilen Dersler | |
|---|
| Ders Tanımı | Bu ders, dijital ürünler için tasarım sistemlerinin kurulmasını, belgelenmesini ve bu sistemlerin etkileşimli prototiplere uygulanmasını kapsar. Tasarım sistemi ile arayüz kiti arasındaki fark; sistem ilkeleri, tasarım temelleri, temel ve anlamsal tasarım belirteçleri, Variables, Modes, tipografi, renk, boşluk sistemi, ızgara, köşe yarıçapı, katman derinliği, bileşen mimarisi, Variants, durumlar, adlandırma, kütüphane organizasyonu, kullanım kuralları ve temel yönetişim başlıkları üzerinden ele alınır.
Ders kapsamında kullanıcı arayüzü tasarım örüntüsü (UI design pattern) kavramı hem tekrar eden etkileşim sorunlarına yönelik çözüm örüntüleri hem de tarihsel ve güncel görsel arayüz dilleri bağlamında incelenir. Skeuomorphism, Flat Design, Material Design, Neumorphism, Glassmorphism, Claymorphism, Brutalism ve Bento UI; tarihsel bağlamları, karakteristik özellikleri, kullanım alanları, erişilebilirlik ve kullanılabilirlik sınırlılıkları bakımından karşılaştırılır.
Öğrenciler görev akışları, etkileşim durumları, gezinme, üst katmanlar, kaydırma davranışı, Interactive Components ve Variables aracılığıyla yüksek doğruluklu prototipler geliştirir. Geçiş ve mikro-etkileşimler, kullanıcıya yön, durum ve geribildirim sağlamak için gerekli olduğu ölçüde ele alınır. Final projesinde tasarım örüntüsü seçimi, tasarım sistemi ve etkileşimli prototip tek bir dijital ürün deneyimi içinde bütünleştirilir. |
|---|
| Ders İçeriği |
| HAFTA |
KONULAR |
|
1. Hafta |
GİT326 kapsamında ele alınan Components, Variants, Auto Layout, Styles ve Variables yapılarının tekrarı; ders kapsamı ve dönem projesinin açıklanması. |
|
2. Hafta |
Tasarım sistemlerine giriş; tasarım sistemi, örüntü kütüphanesi ve arayüz kiti arasındaki fark; tasarım sisteminin amaçları, ilkeleri, paydaşları, kapsamı ve temel parçaları. |
|
3. Hafta |
Tasarım sisteminin temelleri ve tasarım belirteçleri; renk, tipografi, boşluk sistemi, ızgara, köşe yarıçapı, katman derinliği ve ikonografi; temel ve anlamsal tasarım belirteçleri, adlandırma ve ölçek oluşturma. |
|
4. Hafta |
Figma'da Variables, Styles ve Modes; Variable Collections, değişkenler arasında referanslama, kullanım kapsamları, renk/sayı/metin/mantıksal değişken türleri ve bağlamsal Modes. Ara Proje 1: Tasarım temelleri ve belirteç sistemi. |
|
5. Hafta |
Bileşen mimarisi; bileşen sınırları, bileşim, Variants, Component Properties, Instance Swap, içerik alanları (Slots), durum modeli ve bileşen arayüzü yaklaşımı. |
|
6. Hafta |
Kütüphane organizasyonu ve dokümantasyon; bileşen adlandırma, kategoriler, kullanım kuralları, bileşen yapısı ve davranışı, doğru/yanlış kullanım örnekleri, erişilebilirlik notları ve temel yönetişim. Ara Proje 2: Belgelenmiş bileşen ailesi. |
|
7. Hafta |
Kullanıcı arayüzü tasarım örüntüsü kavramı; örüntü, yerleşik kullanım, eğilim ve karşı örüntü ayrımı; gezinme, veri girişi, içerik organizasyonu, aşamalı gösterim, seçim ve geribildirim örüntüleri. |
|
8. Hafta |
Tarihsel arayüz dilleri; Skeuomorphism, Flat Design ve Material Design; teknik olanak, metafor, keşfedilebilirlik, katman derinliği ve sistem yaklaşımı. |
|
9. Hafta |
Güncel ve deneysel arayüz dilleri; Neumorphism, Glassmorphism, Claymorphism, Brutalism ve Bento UI; kullanım bağlamı, erişilebilirlik, performans ve okunabilirlik. Ara Proje 3: Örüntü analizi ve tasarım sistemiyle arayüz uygulaması. |
|
10. Hafta |
Final projesi stüdyo çalışması; etkileşim tasarımı ve kullanıcı arayüzü durumları, kullanıcı akışları, gezinme, üst katmanlar, kaydırma davranışı, Interactive Components, Variables ve temel prototip yapısının kurulması. |
|
11. Hafta |
Final projesi kritik I: Problem tanımı, kullanıcı akışları, gezinme yapısı, kullanıcı arayüzü durum envanteri, tasarım sistemi ilkeleri, tasarım temelleri ve belirteç/değişken yapısının değerlendirilmesi. |
|
12. Hafta |
Final projesi kritik II: Bileşen mimarisi, Variants, Component Properties, durumlar, kütüphane organizasyonu, dokümantasyon ve seçilen kullanıcı arayüzü örüntülerinin değerlendirilmesi. |
|
13. Hafta |
Final projesi kritik III: Ekranlar, sistem-prototip bütünlüğü, Interactive Components, kullanılabilirlik, erişilebilirlik ve kullanıcı testi bulgularının değerlendirilmesi. |
|
14. Hafta |
Final proje kritiği ve sunumu: Son düzenlemeler, tasarım sistemi, Figma dosyası, dokümantasyon, etkileşimli prototip ve test bulgularının teslimi. |
|
| Kaynaklar | Ders web kaynakları üzerinden yürütülecek olup, önerilen erişimlerin (güncel çevrimiçi eğitim platformları ve dokümantasyon dahil) listesi derslerde paylaşılacaktır. |
|---|
| Öğretim Yöntemleri |
- Anlatım
- Sorun/Problem Çözme
- Proje
- Eğitim-Uygulama
- Sunum
- Soru-Cevap
|
|---|
| Değerlendirme |
|
Sayısı |
Toplam Katkısı (%) |
| Proje |
1 |
70 |
| Devam |
1 |
10 |
| Toplam(%) |
|
80 |
| Yıl İçinin Başarıya Oranı(%) |
|
80 |
| Finalin Başarıya Oranı(%) |
|
20 |
| Toplam(%) |
|
100 |
|
| AKTS İş Yükü |
| Aktivite |
Sayı |
Süre (Saat) |
İş Yükü |
| Ara Sınav |
1 |
1 |
1 |
| Kısa Sınavlara hazırlık |
|
|
|
| Sınıf Dışı Ders Çalışma Süresi |
14 |
1 |
14 |
| Final Sınavına Hazırlık |
|
|
|
| Ders Saati |
14 |
4 |
56 |
| Ara Sınava Hazırlık |
|
|
|
| Laboratuvar |
|
|
|
| Final Sınavı |
1 |
1 |
1 |
| Ödevler |
3 |
8 |
24 |
| Proje |
1 |
24 |
24 |
| Toplam İş Yükü | 120 |
| Toplam İş Yükü / 30 | 4 |
| Dersin AKTS Kredisi | 4 |
|
| Dil | Türkçe |
|---|
| Staj / Uygulama | Yok |
|---|
