GİT423

Güzel Sanatlar Fakültesi \ Görsel İletişim Tasarımı

3

6

Zorunlu

Türkçe

Bu dersin önkoşulu bulunmamaktadır.

Görsel İletişim Tasarımı Lisans Programı

Her öğrencinin bireysel olarak yürüteceği HTML ve CSS tabanlı görsel iletişim web tasarımı projesini geliştirmesi beklenir. Öğrencilerin kendi belirleyeceği konu bağlamında tasarladıkları web sitesin arayüz görsellerinin hazırlanması ve kodlarının yazılması beklenmektedir. Belirlenen süre içerisinde projeyi başarılı olarak tamamlayabilmek bu dersin gereksinimlerindendir.

https://www.w3schools.com/html/default.asp
https://www.w3schools.com/css/default.asp
https://www.acikakademi.com/
https://gelecegiyazanlar.turkcell.com.tr/konu/egitim/201-html5-css/html5-ve-css-uzerine-genel-bilgiler
https://tympanus.net/codrops/

Web Tasarımı dersi, kullanıcı deneyimi (UX) ve arayüz tasarımı (UI) prensipleri doğrultusunda estetik ve işlevsel web siteleri oluşturmayı amaçlar. Öğrencilerin, görsel hiyerarşi, tipografi, renk kullanımı ve erişilebilirlik gibi temel tasarım unsurlarını öğrenerek, modern ve kullanıcı dostu web arayüzleri tasarlamaları hedeflenmektedir.

1. Temel tasarım ilke ve elemanlarını dijital ortamda uygulayarak, kullanıcı odaklı ve etkili web sayfaları oluşturur.
2. Web tasarımında kullanıcı deneyimi (UX) ve kullanıcı arayüzü (UI) prensiplerini göz önünde bulundurarak, görsel hiyerarşi ve estetik düzenlemeler yapar.
3. Renk, tipografi, görsel unsurlar ve layout düzeni gibi temel tasarım öğelerini, web projesinin yapısına uygun şekilde entegre eder.
4. Dijital medyayı kullanarak, web ürününde interaktif ve çekici görsel anlatım stratejileri geliştirir.
5. Web tasarım sürecinde planlama, problem çözme ve proje yönetimi becerilerini uygulayarak, kapsamlı bir tasarım stratejisi oluşturur.
6. Marka kimliği ve mesajın net iletilmesi amacıyla, sembolik ve görsel anlatım unsurlarını web tasarımına yansıtır.
7. Web sitesinin kullanıcı dostu navigasyon yapısını oluşturmak için, sayfa düzeni ve içerik hiyerarşisini etkili biçimde planlar.
8. Dijital tasarım araçları ve uygulamaları kullanarak, güncel trendlere uygun, dinamik ve özgün web tasarım çözümleri üretir.
9. Statik ve dinamik görsel ögeleri harmanlayarak, etkileşimli ve kullanıcı ile bütünleşen web sayfaları tasarlar.
10. Web ürününde tipografi ve layout düzenlemeleriyle, metin ve görsel ögeler arasında uyumlu bir denge kurar.
11. Tasarım sürecinde edindiği bilgileri, eleştirel değerlendirme ve sürekli gelişim çerçevesinde web projelerine yansıtarak, yenilikçi çözümler üretir.
12. Hazırladığı web tasarımı projelerini profesyonel portföy sunumlarıyla destekleyerek, dijital iletişim ve görsel anlatım gücünü sergiler.

1. Hafta: HTML KODLAMA STANDARTLARI, HTML & CSS ne demektir? Neden önemlidir?, Web sitelerinde HTML ve CSS altyapısı kullanım yöntemleri nelerdir?
2. Hafta: Yazılım geliştirme editörleri ve kullanım yöntemleri, HTML Kodlama Standartları, 3. Hafta: HTML etiketleri ve kullanım özellikleri, HTML interaktif form kullanımları
4. Hafta: HTML etiketleri ve özelliklerini kullanarak temel özelliklere sahip çok sayfalı bir web sitesi geliştiriniz. Geliştirme esnasında Visual Studio Code editörünün özelliklerinden yararlanılarak, uyumlu ek (plug-in) ile sunucu simülasyonundan faydalanınız. HTML ödevleri minimum 3, maksimum 5 HTML sayfadan oluşmalıdır. HTML etiketlerini kullanarak font, renk seçimleri ile tablo etiketleri ile yerleşim temellerini kullanın. Sayfalar arasında geçiş yapmak için link verme etiklerinin özelliklerini inceleyiniz.
5. Hafta: HTML ETİKETLERİ İLE YAPILACAK TEMEL WEB SİTESİNİN TAMAMLANMASI, Ödevler HTML dosyaları ve onlara bağlı görsel öğelerin olduğu bir klasörü sıkıştırarak E-Posta yoluyla gönderilmesi gerekmektedir. CSS GİRİŞ, CSS Yazım Kuralları, Yorum Satırı Kullanımı, CSS Seçiciler (class, identity), Stil tanıma öncelikleri, Shorthand kodlama standartları
6. Hafta: CSS ÖZELLİKLERİ, Background kullanımı, Metin özellikleri, Font Özellikleri Kullanımı, Google Font entegrasyonu
7. Hafta: CSS TASARIM ÖĞELERİ, Margin - Padding Kullanım, Outline tanımlamaları, İleri Düzey Font Özellikleri Kullanımı, Display Yöntemi, Position ve katman kullanımı
8. Hafta: CSS ANİMASYON, Float - Clear Kullanımı, CSS Seçicileri ileri düzey kullanımı, Transition basit animasyon kullanımı, 2D ve 3D Transform kullanım
9. Hafta: CSS YERLEŞİM YÖNTEMLERİ, Flex Kullanımı, Prefix (Tarayıcı uyumluluğu) Kontrolleri, Grid Kullanımı
10. Hafta: CSS CİHAZ ODAKLI TASARIM YÖNTEMLERİ, Responsive ve Adaptive cihaz odaklı tasarım mantıkları, HTML ve CSS Site, Daha önce hazırlanmış olan HTML ödevinin öğrenilen CSS özellikleri ile beraber zenginleştirimesi. Ödevler minimum 3, maksimum 5 HTML sayfadan oluşmalıdır. CSS dosyası ayrı bir klasörde bulunmalıdır.
11. Hafta: ÖDEV 2: HTML VE CSS ÖZELLİKLERİ KULLANILARAK YAPILACAK TEMEL WEB SİTESİNİN TAMAMLANMASI, Ödevler HTML dosyaları ve onlara bağlı görsel öğelerin olduğu bir klasörü sıkıştırarak E-Posta yoluyla gönderilmesi gerekmektedir.
12. Hafta: FİNAL PROJESİ

• HTML Ödev Notu % 15
• HTML & CSS Ödev Notu % 15
• Final Proje Notu % 70