| Ders Kodu: | NMC203 | ||||
| Ders İsmi: | Etkileşimli Web Tasarımı | ||||
| Ders Yarıyılı: | Güz | ||||
| Ders Kredileri: |
|
||||
| Öğretim Dili: | İngilizce | ||||
| Ders Koşulu: | |||||
| Ders İş Deneyimini Gerektiriyor mu?: | Hayır | ||||
| Dersin Türü: | Zorunlu | ||||
| Dersin Seviyesi: |
|
||||
| Dersin Veriliş Şekli: | Yüz yüze | ||||
| Dersin Koordinatörü: | Araş. Gör. NEVZAT ALP BÜYÜKYÜKSEL | ||||
| Dersi Veren(ler): | Dr.Çağan Çankırılı | ||||
| Dersin Yardımcıları: |
| Dersin Amacı: | Öğrencilerin kullanıcı deneyimi ve arayüz tasarımının temel kavramlarını öğrenerek yaratıcı ve estetik web siteleri tasarlaması beklenmektedir. |
| Dersin İçeriği: | Bu derste katılımcılar arayüz tasarımının ve kullanıcı deneyiminin temellerini öğrenecektir. Temel kavramlar öğrenildikten sonra yaratıcı bir fikir üzerinden web sitelerinin nasıl tasarlanacağı Adobe XD programı üzerinden çalışılacaktır. Bu dersin temelinde yaratıcı düşünce, görsel iletişim, uygulayarak öğrenme ve deneysellik yer almaktadır. |
|
Bu dersi başarıyla tamamlayabilen öğrenciler;
1) Tasarım mantığının ve metotlarının kavranması 2) Kullanıcı deneyimi ve arayüz tasarımının temellerinin kavranması 3) Kullanıcı ile doğru iletişim kurulması 4) WEB sitesi üretim sürecinin görsel olarak çözümlenmesi 5) Estetik yönü kuvvetli ürünlerin yaratılması |
| Hafta | Konu | Ön Hazırlık |
| 1) | Derse giriş ve web’in temel çalışma mantığı | “What is the Web?” kısa video veya makale Basit HTML sayfası örnekleri |
| 2) | HTML temelleri | W3Schools: HTML Basics Basit profil sayfası örneği |
| 3) | Semantik HTML ve sayfa yapısı | Semantic HTML makalesi Basit blog sayfası örneği |
| 4) | CSS’e giriş | CSS Basics dokümanı |
| 5) | Box model ve layout mantığı | CSS Box Model görsel anlatım |
| 6) | Flexbox ile modern yerleşim | Flexbox oyunları (Flexbox Froggy vb.) |
| 7) | Responsive tasarıma giriş | Responsive design örnekleri |
| 8) | CSS Grid ve gelişmiş layout teknikleri | CSS Grid temel rehberi |
| 9) | Kullanıcı deneyimi (UX) ve arayüz prensipleri | Basit UX prensipleri makalesi |
| 10) | JavaScript’e giriş | JavaScript basics dokümanı |
| 11) | DOM ve kullanıcı etkileşimleri | DOM manipülasyonu örnekleri |
| 12) | Dönem projesi geliştirme | Önceki haftalardaki tüm notlar |
| 13) | Proje geliştirme ve geri bildirim | Proje taslağı |
| 14) | Final proje sunumları | Final proje dosyası |
| Ders Notları / Kitaplar: | UI is Communication - How to design intuitive, user-centered interfaces by focusing on effective communication. McKay, Everett N. 2013. About Face: The Essentials of Interaction Design, Fourth Edition. Cooper, Alan. 2014. WEB Design Best Studios. Wiedemann, Julius. |
| Diğer Kaynaklar: | UI is Communication - How to design intuitive, user-centered interfaces by focusing on effective communication. McKay, Everett N. 2013. About Face: The Essentials of Interaction Design, Fourth Edition. Cooper, Alan. 2014. WEB Design Best Studios. Wiedemann, Julius. |
| Ders Öğrenme Kazanımları | 1 |
2 |
3 |
4 |
5 |
|---|---|---|---|---|---|
| Program Kazanımları |
| Etkisi Yok | 1 En Düşük | 2 Orta | 3 En Yüksek |
| Dersin Program Kazanımlarına Etkisi | Katkı Payı |
| Değerlendirme Yöntemleri ve Kriterleri | Aktivite Sayısı | Katkı Payı |
| Ödev | 10 | % 20 |
| Ara Sınavlar | 1 | % 30 |
| Final | 1 | % 50 |
| Toplam | % 100 | |
| Aktiviteler | Aktivite Sayısı | Aktiviteye Hazırlık | Aktivitede Harcanan Süre | Aktivite Gereksinimi İçin Süre | İş Yükü | ||
| Ders Saati | 14 | 0 | 2 | 28 | |||
| Uygulama | 14 | 0 | 2 | 28 | |||
| Proje | 2 | 16 | 32 | ||||
| Ödevler | 11 | 5 | 55 | ||||
| Ara Sınavlar | 1 | 16 | 16 | ||||
| Final | 1 | 16 | 16 | ||||
| Toplam İş Yükü | 175 | ||||||