Dersin Ayrıntıları
YarıyılKoduAdıT+U+LKrediAKTSSon Güncelleme Tarihi
5GİT327Arayüz Tasarımı2+2+03425.12.2023

 
Dersin Detayları
Dersin Dili Türkçe
Dersin Düzeyi Lisans
Bölümü / Programı Görsel İletişim Tasarımı
Öğrenim Türü Örgün Öğretim
Dersin Türü Zorunlu
Dersin Öğretim Şekli Yüz Yüze
Dersin Amacı Bu dersi alan öğrencilerin:
1) Arayüz tasarımı ve yapılandırmasının method ve teknolojilerini kullanabilmeleri,
2) İçerik yönetim sistemlerini kullanarak WWW standartları için arayüz sayfaları kurmaları,
3) Arayüz sayfası yaratabilecek XD, Adobe Photshop programları ile temel web tasarım prensiplerini uygulayabilmeleri beklenmektedir.
Dersin İçeriği Bu ders öğrencilere web tasarım pratikleri ve XD yardımcı kodlama sistemleri vasıtası ile temel uygulama prensiblerini ğrenmelerinisağlar. Bu ders öğrencilere arayüz standartları, kullanılabilirliği ve iş akışı ve erişebilirliği için tasarım yapmayı tanıtır. Bu ders öğrenciler ile birlikte çoklu medyayı keşfedererk ve kendi grid sistemlerini inşa ederek “esnek” (responsive) tasarımı sayesinde arayüz tasarımına ilişkin egzersiz yapabilme bilgisi sağlar.
Dersin Yöntem ve Teknikleri
Ön Koşulları Yok
Dersin Koordinatörü Yok
Dersi Verenler Öğr.Gör. Alp Başat Buket
Dersin Yardımcıları Yok
Dersin Staj Durumu Yok

Ders Kaynakları
Kaynaklar 1
Ders Notları Mobil konseptlerinin incelenmesi
Mobil tasarımı prensipleri ve tasarım süreçleri
Sayfa tasarımı teknikleri
Navigasyon ve etkileşim
Fotografların kullanımı ve düzenlenmesi
Arayüz tasarımı için renk teorileri
Arayüz tasarımında tipografi
Proje için Atölye
Arayüz formları
Arayüzün kullanışlılığı ve evrensel kavramlar
Erişebilirlik ve uyumluluk
Hareketli elemanlar
Sayfa yapısı hakkında daha ileri seviye inceleme
Kullanıcı Deneyimini ve Geri Dönüşerini Anlama
Dökümanlar Responsive Web Tasarımı ve Uygulamaları
Ödevler ödev var
Sınavlar vixe, final

Ders Yapısı
Alan Bilgisi %100

Planlanan Öğrenme Aktiviteleri ve Metodları
Etkinlikler ayrıntılı olarak "Değerlendirme" ve "İş Yükü Hesaplaması" bölümlerinde verilmiştir.

Değerlendirme Ölçütleri
Yarıyıl Çalışmaları Sayısı Katkı
Ara Sınav 1 % 40
Yarıyıl Sonu Sınavı 1 % 60
Toplam :
2
% 100

 
AKTS Hesaplama İçeriği
İş Yükü Sayısı Süre Toplam İş Yükü (Saat)
Ders Süresi 14 4 56
Sınıf Dışı Ç. Süresi 14 3 42
Ödevler 1 4 4
Ara Sınavlar 1 4 4
Yarıyıl Sonu Sınavı 1 4 4
Toplam İş Yükü   AKTS Kredisi : 4 110

 
Dersin Öğrenme Çıktıları: Bu dersin başarılı bir şekilde tamamlanmasıyla öğrenciler şunları yapabileceklerdir:
Sıra NoAçıklama
1 Arayüz tasarımı ile ilgili temel kavramları öğrenme
2 Arayüz tasarımı yöntemleri hakkında bilgi sahibi olma
3 Web ve mobil gibi farklı ortamlar için arayüz tasarımı hakkında bilgi edinme
4 Farklı alanlar için tasarlanmış arayüz tasarımı örneklerini inceleme
5 Arayüz tasarımı için gerekli temel renk, yazı ve donanım bilgilerini edinme
6 Bilgisayar ortamında gerekli yazılımları kullanarak bir arayüz tasarımı projesi hazırlama

 
Ders Konuları
HaftaKonuÖn HazırlıkDökümanlar
1 Dersin tanıtımı, işleyiş yönteminin ve kaynakların verilmesi İnteraktif Media Tasarımında Temel Adımlar (Oğuzhan Özcan)
2 Arayüz tasarımı nedir ve örnek çalışmalar, Arayüz tasarımı yöntemleri ve tasarım gerekçeleri http://www.hasanyalcin.com/?s=aray%C3%BCz http://blog.teamtreehouse.com/10-user-interface-design-fundamentals http://www.hasanyalcin.com/?s=aray%C3%BCz
3 Etkileşim tasarımı ve etkileşim yöntemleri İnteraktif Media Tasarımında Temel Adımlar (Oğuzhan Özcan)
4 Grafiksel arayüz tasarımı, Adobe Photoshop araçları ile arayüz tasarımı İnteraktif Media Tasarımında Temel Adımlar (Oğuzhan Özcan)
5 Web ve mobil gibi farklı ortamlar için arayüz tasarımı http://www.hasanyalcin.com/?s=aray%C3%BCz
6 Arayüz tasarımı uygulaması 1 http://www.hongkiat.com/blog/photoshop-ui-tutorials/
7 Ara Sınav
8 Arayüz tasarımı uygulaması 2 http://www.hongkiat.com/blog/photoshop-ui-tutorials/
9 Adobe Illustrator araçları ile arayüz tasarımı http://design.tutsplus.com/categories/interface-design
10 Arayüz tasarımı uygulaması 3 http://www.hongkiat.com/blog/photoshop-ui-tutorials/
11 Dönem sonu projesinin belirlenmesi ve tartışılması
12 Atölye çalışması 1 http://www.hongkiat.com/blog/photoshop-ui-tutorials/
13 Atölye çalışması 2 http://www.hongkiat.com/blog/photoshop-ui-tutorials/
14 Dönem Sonu Sınavı ve Proje Teslimi

 
Dersin Program Çıktılarına Katkısı
P1 P2 P3 P4 P5 P6 P7 P8 P9 P10 P11 P12
Tüm 5 3 4 4 4 3 3 4 3 3 4
Ö1 4 3 4 4 4 3 3 4 3 2 4
Ö2 5 3 4 4 4 3 3 4 3 4 4
Ö3 3 3 4 4 4 3 3 4 3 3 4
Ö4 2 3 4 4 4 3 3 4 3 3 4
Ö5 4 3 4 4 4 3 3 4 4 4 4
Ö6 5 3 4 4 4 3 3 4 4 2 4

  Katkı Düzeyi: 1: Çok Düşük 2: Düşük 3: Orta 4: Yüksek 5: Çok Yüksek

  
  https://obs.gedik.edu.tr/oibs/bologna/progCourseDetails.aspx?curCourse=208856&curProgID=5717&lang=tr