| Kodu | Dersin Adı | Yarıyıl | Süresi(T+U) | Kredisi | AKTS Kredisi |
|---|---|---|---|---|---|
| GRF152 | WEB GRAFİK TASARIM | 2 | 4 | 2 | 4 |
DERS BİLGİLERİ |
|
|---|---|
| Dersin Öğretim Dili : | Türkçe |
| Dersin Düzeyi | ÖNLİSANS, TYY: + 5.Düzey, EQF-LLL: 5.Düzey, QF-EHEA: Kısa Düzey |
| Dersin Türü | Zorunlu |
| Dersin Veriliş Şekli | - |
| Dersin Koordinatörü | Öğr.Gör. MEHMET ÖĞÜT |
| Dersi Veren Öğretim Üyesi/Öğretim Görevlisi | Öğr.Gör. GÜL ERGÜN |
| Ders Ön Koşulu | Yok |
AMAÇ VE İÇERİK |
|
|---|---|
| Amaç: | Web Grafik Tasarımı dersi, öğrencilere web tasarımının temel ilkeleri, kullanıcı deneyimi esasları ve etkileşimli web siteleri geliştirme becerilerini kazandırmayı amaçlar. Ayrıca, görsel tasarım araçlarını ve kodlama dillerini kullanarak işlevsel ve estetik web projeleri oluşturmalarını hedefler. |
| İçerik: | Web Grafik Tasarımı dersinde öğrencilere web tasarımının temel ilkeleri, etkileşim tasarımı esasları ve kullanıcı deneyimleri hakkında bilgi verilir. Öğrenciler, web tasarım programında (Adobe Dreamweaver ya da eşdeğeri) web grafiklerinin formatları ve özellikleri, html etiketleri, çalışma alanı, araçlar, menü ve paneller, web projesi planlama ve diyagram ile oluşturma, sayfalar arası bağlantı kurma, sayfa içi sıralı ve sırasız listeler ile çalışma, web için piksel tabanlı programda görsel hazırlama ve ekleme, navigasyon tasarımı, menüler ve butonlar, web renkleri ve web tipografisi, CSS ile çalışma, stiller ile paragraf ve başlık şekillendirme, zemin ve çerçeve oluşturma, çok sütunlu dinamik sayfalar oluşturma, javascript kullanma, behaviour ekleme (pop-up pencere, buton vb) gibi web sitesi tasarlamaya yönelik bilgileri kazanırlar. Web sitesi tasarlayarak ve uygulama yaparak deneyim kazanırlar. |
DERSİN ÖĞRENME ÇIKTILARI (Öğrenciler, bu dersi başarı ile tamamladıklarında aşağıda belirtilen bilgi, beceri ve/veya yetkinlikleri gösterirler.) |
|---|
| Web tasarımının temel ilkelerini ve kullanıcı deneyimi tasarımını kavrar. |
| HTML ve CSS kullanarak etkili ve işlevsel web sayfaları tasarlar. |
| Web grafiklerinin formatlarını ve özelliklerini bilir, uygun görseller oluşturur ve entegre eder. |
| Web projelerini planlar, diyagramlar oluşturur ve tasarım sürecini organize eder. |
| Çok sütunlu dinamik sayfalar ve navigasyon menüleri gibi ileri düzey web tasarım özelliklerini uygular. |
| Piksel tabanlı programlarla web için uygun görsel içerikler hazırlar. |
| Grup çalışmalarıyla iş birliği yapma ve proje yönetimi becerilerini geliştirir. |
| Modern web tasarım araçlarını etkin bir şekilde kullanır. |
| Tasarım ve teknik kriterlere uygun profesyonel web projeleri üretir. |
HAFTALIK DERS KONULARI VE ÖNGÖRÜLEN HAZIRLIK ÇALIŞMALARI |
|||
|---|---|---|---|
| Hafta | Ön Hazırlık | Konular | Yöntem |
| 1 | Web Tasarım | Web Tasarımına Giriş: Web Tasarım Nedir? Web Tasarımda Hız ve Zaman kavramının önemi | Anlatım, soru/cevap, Uygulama |
| 2 | Web Tasarımda Grafik Materyal Kullanımı | Web Tasarımda Grafik Materyal kullanılırken nelere dikkat edilir? Arayüz tasarımları hangi kurallara göre yapılır? | Anlatım, soru/cevap, Uygulama |
| 3 | Web Sitesinde İçerik | Web Sitesinde içerik neye bakılarak hazırlanır? İçeriğin düzenlemesi ve tasarımı. | Anlatım, soru/cevap, Uygulama |
| 4 | Adobe Dreamweaver | Dreamweaver programına hızlı bir bakış, Dreamweaver menü ve panellerini tanıma. Döküman arabirim penceresi elemanlarının özellikleri ve araç çubukları. | Anlatım, soru/cevap, Uygulama |
| 5 | Site ve Web Sayfası | Yerel bir Site klasörü tanımlama. Yeni bir web sayfası oluşturma. | Anlatım, soru/cevap, Uygulama |
| 6 | CSS | Sayfa özelliklerini CSS ile düzenleme; Sayfaya yazı ekleme, Metne Paragraf-Başlık stili uygulama, listeli metinler oluşturma. | Anlatım, soru/cevap, Uygulama |
| 7 | Dreamweaver'da Resim Kullanımı | Sayfaya resim ekleme, döngülü resim, resim yer tutucu, resimleri web için optimize etme. | Anlatım, soru/cevap, Uygulama |
| 8 | - | ARA SINAV | - |
| 9 | Linkler | Site içi, site dışı, sayfa içi bağlantılar ve diğer dosya türlerine yapılan bağlantılar. Resimlere bağlantı oluşturma - resmin üzerine birden fazla bağlantı oluşturma- Resim Haritaları ile çalışma. | Anlatım, soru/cevap, Uygulama |
| 10 | Web Arayüz Tasarımı | Layout ve Mizanpaj, Sayfa tasarımları ve sayfada kullanılacak elemanları tasarlama. | Anlatım, soru/cevap, Uygulama |
| 11 | Tablolar | Tablolarla çalışma, tablo özelliklerini düzenleme. Sayfa mizanpajı için tabloları kullanma. | Anlatım, soru/cevap, Uygulama |
| 12 | Çerçeveler | Örnek çerçeve setlerinden sayfa oluşturma - Çerçeve setleri ve özellikleri - Çerçeveli sayfalarda bağlantıların oluşturulması | Anlatım, soru/cevap, Uygulama |
| 13 | Formlar ve Spry Nesneleri | Form nesneleri ile çalışma - Form nedir? - Form araçları ve özellikleri - Sayfaya form alanı ekleme. Dinamik Spry nesneleri ile çalışma - Spry nedir? - Spry nesnelerinin Form nesnelerinden farkı nedir? | Anlatım, soru/cevap, Uygulama |
| 14 | Javascript | Javascript ile etkileşim oluşturma - Öğelere görsel efektler uygulama | Anlatım, soru/cevap, Uygulama |
| 15 | Final Projesi | Web Sitesi Proje Sunumları ve Değerlendirme | Anlatım, soru/cevap, Uygulama |
| 16 | - | FİNAL | - |
| 17 | - | FİNAL | - |
KAYNAKLAR |
|---|
| HTML5, CSS3 ve JavaScript ile Web Tasarımı Dikeyeksen Yayinevi Dil:Türkçe Yazar:Burak Tokak Editör:Rahmi Dalıcı Katkıda Bulunan:Suat Özdemirci |
ÖLÇME VE DEĞERLENDİRME |
|||
|---|---|---|---|
| Yarıyıl İçi Yapılan Çalışmaların Ölçme ve Değerlendirmesi | Etkinlik Sayısı | Katkı Yüzdesi | Açıklama |
| (0) Etkisiz | (1) En Düşük | (2) Düşük | (3) Orta | (4) İyi | (5) Çok İyi |
|---|---|---|---|---|---|
| 0 | 1 | 2 | 3 | 4 | 5 |
| KNOWLEDGE | |||||||
|---|---|---|---|---|---|---|---|
| Theoretical | |||||||
| Program Yeterlilikleri/Çıktıları | Katkı Düzeyi | ||||||
| 0 | 1 | 2 | 3 | 4 | 5 | ||
| 1 |
The basic communication, design and graphic design principles related to the fields of diagnosis.
|
3 | |||||
| 2 |
Advertising, publishing, printing graphic design, such as information relating to their field of study and has the industry's needs.
|
2 | |||||
| 3 |
Used in graphic design, computer programs have sufficient knowledge to use.
|
2 | |||||
| 4 |
Job responsibilities and ethical values has information on.
|
2 | |||||
| KNOWLEDGE | |||||||
|---|---|---|---|---|---|---|---|
| Factual | |||||||
| Program Yeterlilikleri/Çıktıları | Katkı Düzeyi | ||||||
| 0 | 1 | 2 | 3 | 4 | 5 | ||
| 1 |
Contemporary, original, aesthetic and practical graphic design recognizes.
|
3 | |||||
| 2 |
Recognize and authority in the field of art and design will follow.
|
3 | |||||
| 3 |
Computer supported graphic design programs recognize.
|
3 | |||||
| 4 |
Design, implementation and recognizes the printing stage.
|
2 | |||||
| SKILLS | |||||||
|---|---|---|---|---|---|---|---|
| Cognitive | |||||||
| Program Yeterlilikleri/Çıktıları | Katkı Düzeyi | ||||||
| 0 | 1 | 2 | 3 | 4 | 5 | ||
| 1 |
Graphic design can produce a product level, has the aesthetic point of view.
|
1 | |||||
| 2 |
Creation of graphic design, implementation plans and production phases.
|
2 | |||||
| 3 |
Graphic design creates products and projects.
|
3 | |||||
| SKILLS | |||||||
|---|---|---|---|---|---|---|---|
| Practical | |||||||
| Program Yeterlilikleri/Çıktıları | Katkı Düzeyi | ||||||
| 0 | 1 | 2 | 3 | 4 | 5 | ||
| 1 |
Design prepress and postpress stages of diagnosis.
|
4 | |||||
| 2 |
All types of graphic design product design.
|
3 | |||||
| 3 |
Carries out all stages of graphic design from the preparation for printing to post-press.
|
2 | |||||
| 4 |
Photography, web design, animation production in the field is made.
|
3 | |||||
| OCCUPATIONAL | |||||||
|---|---|---|---|---|---|---|---|
| Autonomy & Responsibility | |||||||
| Program Yeterlilikleri/Çıktıları | Katkı Düzeyi | ||||||
| 0 | 1 | 2 | 3 | 4 | 5 | ||
| 1 |
Graphic design in creating products, ideas, sketches, concept creation, implementation and prepare makeready processes independently.
|
2 | |||||
| 2 |
In advertising agencies, graphic design studios, advertising departments of companies; advertising campaign creates product concepts and designs.
|
3 | |||||
| 3 |
Design, projects and exhibitions ability has to offer.
|
2 | |||||
| 4 |
The renewed communication and design perspective, current computer programs will follow.
|
2 | |||||
| OCCUPATIONAL | |||||||
|---|---|---|---|---|---|---|---|
| Learning to Learn | |||||||
| Program Yeterlilikleri/Çıktıları | Katkı Düzeyi | ||||||
| 0 | 1 | 2 | 3 | 4 | 5 | ||
| 1 |
Acquired advanced knowledge in the field of graphic design to critically evaluate.
|
2 | |||||
| 2 |
Life-long learning is conscious of the need.
|
3 | |||||
| 3 |
Develops professional knowledge and skills continuously.
|
3 | |||||
| 4 |
Design an objective perspective to gain the skill assessment.
|
2 | |||||
| OCCUPATIONAL | |||||||
|---|---|---|---|---|---|---|---|
| Communication & Social | |||||||
| Program Yeterlilikleri/Çıktıları | Katkı Düzeyi | ||||||
| 0 | 1 | 2 | 3 | 4 | 5 | ||
| 1 |
Verbal and written communication, at least one foreign language at least at the level of European Language Portfolio A2 uses information in the field of informatics and computer science monitors and communicates with colleagues.
|
2 | |||||
| OCCUPATIONAL | |||||||
|---|---|---|---|---|---|---|---|
| Occupational and/or Vocational | |||||||
| Program Yeterlilikleri/Çıktıları | Katkı Düzeyi | ||||||
| 0 | 1 | 2 | 3 | 4 | 5 | ||
| 1 |
All graphical design product, is designed in accordance with design criteria.
|
3 | |||||
| 2 |
Professional computer software professional, efficient and has the ability to use quickly.
|
3 | |||||
| 3 |
The concept, introducing professional takes photos, website design and animation.
|
3 | |||||
| 4 |
Advertising agencies and design studios as well as to the fields of study, professional liability, to act in accordance with ethical values are capable of.
|
2 | |||||
DERSİN İŞ YÜKÜ VE AKTS KREDİSİ |
|||
|---|---|---|---|
| Öğrenme-Öğretme Etkinlikleri İş Yükü | |||
| Öğrenme-Öğretme Etkinlikleri | Etkinlik(hafta sayısı) | Süresi(saat sayısı) | Toplam İş Yükü |
| Ders | 14 | 4 | 56 |
| Derse Ön Hazırlık ve Ders Sonrası Pekiştirme | 14 | 2 | 28 |
| Arazi Çalışması | 0 | 0 | 0 |
| Grup Çalışması / Ödevi | 0 | 0 | 0 |
| Laboratuvar | 0 | 0 | 0 |
| Okuma | 0 | 0 | 0 |
| Ödev | 5 | 3 | 15 |
| Proje Hazırlama | 0 | 0 | 0 |
| Seminer | 0 | 0 | 0 |
| Staj | 0 | 0 | 0 |
| Teknik Gezi | 0 | 0 | 0 |
| Web Tab. Öğrenme | 0 | 0 | 0 |
| Uygulama | 0 | 0 | 0 |
| Yerinde Uygulama | 0 | 0 | 0 |
| Mesleki Faaliyet | 0 | 0 | 0 |
| Sosyal Faaliyet | 0 | 0 | 0 |
| Tez Hazırlama | 0 | 0 | 0 |
| Alan Çalışması | 0 | 0 | 0 |
| Rapor Yazma | 0 | 0 | 0 |
| Final Sınavı | 1 | 1 | 1 |
| Final Sınavı Hazırlığı | 0 | 0 | 0 |
| Ara Sınav | 0 | 0 | 0 |
| Ara Sınav Hazırlığı | 0 | 0 | 0 |
| Kısa Sınav | 0 | 0 | 0 |
| Kısa Sınav Hazırlığı | 0 | 0 | 0 |
| TOPLAM | 34 | 0 | 100 |
| Genel Toplam | 100 | ||
| Toplam İş Yükü / 25.5 | 3,9 | ||
| Dersin AKTS(ECTS) Kredisi | 4,0 |