İnfografik
← Ünite 13
Web Tasarımının Temelleri

Ünite 13: Web Tasarımında Yapay Zekâ Uygulamaları

GitHub Copilot'un Temeli
OpenAI'nin Codex modeli üzerine inşa edilmiştir. VS Code içerisinde doğrudan eklenti olarak çalışarak HTML, CSS ve JS kodlarını otomatik tamamlar.
Web Tasarımında 3 Paradigma
Destekleyici, Tasarım Ortaklığı ve Otomatik Üretim paradigmalarıdır. Bu üç yaklaşım, günümüzde birbirini tamamlayıcı şekilde kullanılmaktadır.
Figma AI ve Galileo AI
Kullanıcıdan alınan kısa metin girdilerini profesyonel düzeyde arayüz tasarımlarına dönüştüren tasarım araçlarıdır.
Görsel Üretim Modelleri
Stable Diffusion ve MidJourney gibi üretken modeller, tasarımcıların ihtiyaç duyduğu özgün illüstrasyon ve grafiklerin hızla oluşturulmasını sağlar.

Anahtar Kavramlar

Üretken Yapay Zekâ (Generative AI)Yeni içerik, görsel, kod veya tasarım öğeleri üretebilme kapasitesine sahip yapay zekâ modelleridir. Örnek: MidJourney ile bir web sitesi için özgün banner görselleri oluşturulması.
PersonaHedef kitleyi temsil eden kurgusal karakterlerdir. Tasarım sürecinde kullanıcı odaklı yaklaşım sağlamak için kullanılırlar; örneğin bir e-ticaret sitesi için farklı yaş gruplarını temsil eden kullanıcı profilleri.
Prompt (Komut)Yapay zekâya ne yapması gerektiğini söyleyen metin tabanlı talimatlardır. Web tasarımında 'mobil uyumlu bir restoran sitesi tasarla' gibi ifadeler birer prompt örneğidir.
Responsive (Duyarlı) TasarımBir web sitesinin farklı ekran boyutlarına ve cihazlara otomatik olarak uyum sağlamasıdır. Yapay zekâ, bu uyumu sağlamak için gerekli CSS varyantlarını otomatik oluşturabilir.
SEO (Arama Motoru Optimizasyonu)Web sitelerinin arama motorlarında daha üst sıralarda yer alması için yapılan teknik ve stratejik çalışmalardır. Yapay zekâ, anahtar kelime önerileri ve içerik analizi ile SEO sürecine destek olur.
IDE (Entegre Geliştirme Ortamı)Yazılım geliştirme süreçlerini kolaylaştıran, kod yazma, hata ayıklama ve derleme araçlarını bir arada sunan yazılımlardır. VS Code, web tasarımında en yaygın kullanılan IDE'dir.
ErişilebilirlikWeb sitelerinin engelli bireyler dahil herkes tarafından kullanılabilir olmasıdır. Yapay zekâ, görsellere otomatik alt metin ekleyerek görme engelliler için erişilebilirliği artırır.
Kod Tamamlama (Code Completion)Geliştiricinin yazdığı kodun devamını yapay zekânın tahmin ederek tamamlamasıdır. GitHub Copilot, yazılan birkaç satır koddan yola çıkarak fonksiyonları tamamlayabilir.
PrototiplemeBir web sitesinin nihai halinden önce hazırlanan, temel işlevleri ve tasarımı gösteren ön modeldir. Uizard gibi araçlar, basit çizimlerden profesyonel prototipler üretebilir.
Makine ÖğrenmesiBilgisayar sistemlerinin verilerden öğrenerek deneyim kazandığı ve kararlar aldığı yapay zekâ alt dalıdır. Web sitesinde kullanıcı davranışlarını analiz ederek içerik önerisi sunan sistemlerin temelidir.
Doğal Dil İşleme (NLP)Bilgisayarların insan dilini anlaması ve işlemesi teknolojisidir. ChatGPT gibi araçlar, bu teknoloji sayesinde kullanıcıdan gelen metin komutlarını anlayıp kod veya metin üretebilir.
Hata Ayıklama (Debugging)Kod içerisindeki mantık hatalarının veya güvenlik açıklarının bulunup düzeltilmesidir. Yapay zekâ, kod bloklarını analiz ederek olası hataları tespit edip çözüm önerisi sunabilir.

Diğer Önemli Bilgiler

VS Code Eklenti Ekosistemi

VS Code, hem klasik hem de YZ tabanlı eklenti seçenekleriyle hibrit bir çözüm sunar. Bu, onu web tasarımcıları için en çok tercih edilen editör yapar.

Erişilebilirlik Kontrolü

Yapay zekâ, ekran okuyucu uyumu ve `aria-*` etiketlerinin kullanımı gibi teknik konularda tasarımcıya 12 maddelik kontrol listeleri sunabilir.

Kod Paylaşımı ve Dosyalama

Copilot veya ChatGPT ile üretilen kodlar, `index.html`, `styles.css` ve `script.js` gibi ayrı dosyalara ayrılarak düzenli bir proje yapısı oluşturulabilir.

Ücretsiz Kullanım Kotaları

Ücretsiz yapay zekâ araçları belirli kotalara sahiptir. Çok fazla düzeltme istendiğinde kota dolabilir ve işlem yarım kalabilir.

Eğitimde Yapay Zekâ 101 Projesi

Ünite içerisinde, ChatGPT kullanılarak adım adım planlanan ve VS Code ile kodlanan hayali bir ders tanıtım sayfası örneğidir.

Sınavda Dikkat Et

  • Yapay zekâ paradigmalarını (Destekleyici, Ortaklık, Otomatik) ezberleyin; sınavda bu yaklaşımların tanımları sorulabilir.
  • VS Code eklentilerinin (Copilot, Codeium, Cline, AI Toolkit) temel işlevlerini birbirinden ayırt edin; her birinin odak noktası farklıdır.
  • Etik tartışmalar ile kullanım sınırlılıklarını karıştırmayın; özgünlük ve telif hakları etik, kota ve tutarsızlık ise kullanım sınırlılığıdır.
  • Sınavda 'tamamen' veya 'her zaman' gibi kesinlik bildiren ifadelerin geçtiği seçeneklere dikkat edin; yapay zekâ süreçlerinde insan denetimi her zaman gereklidir.
  • SEO ve erişilebilirlik ile ilgili yapay zekâ katkılarını unutmayın; bu konular metinde ayrı başlıklar altında detaylandırılmıştır.
  • Üretken yapay zekânın aynı komuta farklı sonuçlar verebileceği bilgisini unutmayın; bu durum bir 'sınırlılık' olarak değerlendirilir.