İnsan ve Toplum Bilimleri Fakültesi · Görsel İletişim Tasarımı · Lisans
Dersin Amacı
Bu dersin amacı, öğrencilerin web ortamını ve web tasarımının temel kavramlarını görsel, estetik ve işlevsel boyutlarıyla ele alabilmelerini sağlamak; kullanıcı odaklı tasarım yaklaşımı doğrultusunda farklı cihazlara uyumlu web sitesi tasarımları geliştirebilme yetkinliği kazandırmaktır. Ders kapsamında öğrencilerin bir web sitesini planlayabilmesi, sayfa düzeni, tipografi ve renk kararlarını web ortamına uygun biçimde verebilmesi, tasarımını kodlama bilgisi gerektirmeyen araçlarla prototipleyip yayına alabilmesi ve tasarım kararlarını gerekçelendirebilmesi hedeflenmektedir.
Ders İçeriği
Ders; web'in gelişimi, web sitesi türleri ve web tasarımının temel kavramlarıyla başlar. Hedef kitle ve içerik planlaması, site haritası ve tel kafes (wireframe) oluşturma, web için ızgara sistemleri ve sayfa düzeni, web tipografisi, renk ve görsel dil, navigasyon ve kullanılabilirlik ilkeleri ele alınır. İlerleyen haftalarda duyarlı (responsive) tasarım mantığı, masaüstü–tablet–mobil kırılımları, bileşen tabanlı tasarım ve etkileşimli prototip oluşturma Figma üzerinden işlenir. Son aşamada tasarımlar kodsuz web sitesi oluşturma araçları (Framer, Wix vb.) ile yayına alınır. Dönem sonunda öğrenciler kendi portfolyoları ya da seçtikleri bir marka için çok sayfalı, duyarlı bir web sitesi tasarlayıp yayınlar.
Zorunlu Kaynaklar
Figma Resmi Dokümantasyonu (help.figma.com)
Önerilen Kaynaklar
Krug, S. – Don't Make Me Think
Nielsen Norman Group – UX Araştırmaları ve Makaleleri (nngroup.com)
Framer / Wix Resmi Eğitim Kaynakları
Açıklamalar
Ders; web tasarımı kavramlarını teorik ve uygulamalı olarak ele almakta; öğrencilerin kodlama bilgisi gerektirmeden, Figma ve kodsuz web araçlarıyla farklı cihazlara uyumlu, kullanıcı odaklı ve yayına hazır web siteleri tasarlayabilmesini hedeflemektedir.
Kurallar
Bu derste öğrencilerin derslere düzenli katılım göstermesi ve haftalık ilerlemelerini düzenli olarak sunmaları beklenmektedir. Uygulama derslerinde öğrencilerin kendi bilgisayarlarıyla ve gerekli yazılımlar kurulu şekilde derse gelmeleri gerekmektedir. Vize ve final projeleri, ders kapsamında verilen yönergelere uygun biçimde hazırlanmalı ve belirtilen tarihlerde teslim edilmelidir. Ders sürecinde verilen geri bildirimlerin dikkate alınması ve projelerin bu doğrultuda geliştirilmesi öğrencinin sorumluluğundadır. Projelerde kullanılan görsel, yazı karakteri, ikon ve şablonların lisans koşullarına uyulması ve kaynak gösterilmesi gerekmektedir. Akademik etik kurallarına uyulması zorunludur.
Dersin Öğrenme Çıktıları
- Web tasarımının temel kavramlarını ve web sitesi türlerini açıklayabilir.
- Bir web sitesi için hedef kitle, içerik planı, site haritası ve tel kafes oluşturabilir.
- Izgara, tipografi ve renk ilkelerini web ortamına uygun biçimde uygulayabilir.
- Farklı ekran boyutlarına uyumlu web sayfası tasarımları geliştirebilir.
- Figma ile etkileşimli web sitesi prototipi hazırlayabilir.
- Tasarımını kodsuz araçlarla yayına alabilir ve tasarım kararlarını gerekçelendirebilir.
Temel Alan Dağılımı
Öğretim Yöntem ve Teknikleri
Ölçme ve Değerlendirme
AKTS / İş Yükü
| Etkinlik | Sayı | Süre (saat) | Toplam İş Yükü |
|---|---|---|---|
| Ders Süresi (Sınav Haftası Dahil) | 16 | 3 | 48 |
| Sınıf Dışı Ders Çalışma Süresi | 5 | 2 | 10 |
| Ara Sınav | 0 | 0 | 0 |
| Kısa Sınav | 0 | 0 | 0 |
| Ödev | 0 | 0 | 0 |
| Uygulama | 6 | 3 | 18 |
| Final | 1 | 3 | 3 |
Ders Akışı
| Hafta | Konu | Ön Hazırlık |
|---|---|---|
| 1 | Derse Giriş | Web tasarımı kavramına giriş; dersin kapsamı, işleyişi ve beklentilerin açıklanması. |
| 2 | Web'in Gelişimi ve Web Sitesi Türleri | Web'in tarihsel gelişimi; kurumsal site, portfolyo, e-ticaret, açılış sayfası gibi türlerin örnekler üzerinden incelenmesi. |
| 3 | Web Sitesi Planlama | Hedef kitle, amaç ve içerik planı; site haritası oluşturma. |
| 4 | Tel Kafes (Wireframe) | Düşük ve orta çözünürlüklü tel kafes çizimi; sayfa bölümlerinin ve içerik önceliğinin belirlenmesi. |
| 5 | Web İçin Izgara ve Sayfa Düzeni | Web'de ızgara sistemleri, boşluk kullanımı, görsel hiyerarşi; Figma'da çerçeve ve yerleşim ızgaraları. |
| 6 | Web Tipografisi, Renk ve Görsel Dil | Ekranda okunabilirlik, yazı karakteri eşleştirme, renk paleti ve kontrast; marka diliyle uyum. |
| 7 | Navigasyon ve Kullanılabilirlik | Menü yapıları, çağrı butonları (CTA), kullanılabilirlik ilkeleri ve örnek site incelemeleri. |
| 8 | Arasınav | Arasınav |
| 9 | Duyarlı (Responsive) Tasarım | Masaüstü, tablet ve mobil kırılımları; mobil öncelikli tasarım yaklaşımı; Figma'da otomatik yerleşim (auto layout). |
| 10 | Bileşenler ve Tasarım Sistemi | Buton, kart, menü gibi tekrar eden bileşenler; basit bir tasarım sistemi kurma. |
| 11 | Etkileşimli Prototip | Figma'da sayfa geçişleri, hover durumları ve etkileşimli prototip hazırlama. |
| 12 | Erişilebilirlik ve Görsel Optimizasyon | Renk kontrastı, okunabilirlik, alternatif metin; web için görsel boyutlandırma ve dosya formatları. |
| 13 | Kodsuz Araçlarla Yayına Alma | Framer, Wix vb. kodsuz araçlarla tasarımın web sitesine dönüştürülmesi ve yayınlanması. |
| 14 | Final Projesi Uygulama | Öğrencilerin web sitesi projelerinin sınıfta ilerletilmesi ve bireysel geri bildirim. |
| 15 | Final Projesi Uygulama | Öğrencilerin web sitesi projelerinin sınıfta ilerletilmesi ve bireysel geri bildirim. |
| 16 | Final | Final |