Yapay zekâ ile web sitesi yapma sürecinde ilk çalışan ekranı görmek artık oldukça erişilebilir. Asıl emek, o ekranı işletmenin ihtiyacına bağlamakta başlıyor. Hangi içerik gösterilecek, ziyaretçi ne yapabilecek ve yayınlandıktan sonra kim güncelleyecek? Kendi işlerimde tasarımla geliştirmeyi bu sorular üzerinden ilerletiyorum. Aşağıdaki akış, tek bir komut tarifinden çok, bir fikrin kullanılabilir siteye dönüşürken geçtiği karar noktalarını anlatıyor.
1. Brief’i sayfa listesinden önce hazırlamak
Başlangıçta “ana sayfa, hakkımızda, iletişim” listesi çıkarmak kolay. Ben önce ziyaretçinin geliş nedenini belirliyorum. Ürün karşılaştırmak mı istiyor, hizmet hakkında bilgi mi arıyor, yoksa bir proje talebi mi bırakacak? Aynı işletme için bu amaçlar farklı girişler, farklı içerikler ve farklı iletişim alanları gerektirebilir. AI’ya vereceğim ilk bağlam, bu hedeflerle birlikte mevcut içerik ve kaynakların kısa bir özeti oluyor.
Örneğin profesyonel ekran satan bir mağazada yalnız büyük ürün fotoğrafı yeterli olmayabilir. Ekran boyutu, kullanım alanı ve teknik çizim seçimi etkiliyorsa bunların kaynağı baştan belli olmalı. Ekran Market çalışmasında görsel tasarım ile mevcut Ticimax ürün yapısını birlikte düşünmemin nedeni buydu. Sepeti yeniden geliştirmek yerine, özel vitrinin mevcut ticaret akışıyla nerede birleşeceğini tarif ettim.
2. Görsel yönü gerçek içerikle denemek
Brief netleşince birkaç görsel yönü sınırlı bir bölüm üzerinde denemeyi tercih ediyorum. Tipografi, renk, görsel oranları ve boşluk kullanımı ana sayfanın ilk bölümüyle bir ürün kartında birlikte değerlendirilebilir. Bütün sayfaları aynı anda parlatmak yerine, bu küçük örneğin markayı taşıyıp taşımadığına bakıyorum. Sonradan gelecek uzun ürün adı veya Türkçe başlık için de yer bırakıyorum.
AI bu aşamada kompozisyon alternatifi veya kavramsal görsel üretmekte yardımcı olabilir. Ancak bir mekân görseli, gerçek müşteri kurulumu gibi sunulmamalı. Benzer biçimde hoş görünen bir ürün çizimi teknik belge yerine geçmez. Seçtiğim yönü gerçek ürün fotoğrafı, doğrulanmış metin ve dar ekran görünümüyle yan yana değerlendirdiğimde, ilk taslağın hangi kısımlarının değişmesi gerektiği daha açık ortaya çıkıyor.
3. React uygulamasını veriyle birlikte kurmak
React’e geçerken ekranı başlık alanı, ürün listesi, filtre, detay ve iletişim gibi sorumluluklara ayırıyorum. Önce gerçek veriyle çalışan sade sürümü görmek faydalı oluyor. Bu aşamada ürün adının, durumunun ve bağlantısının doğru yerde görünmesi, kartın giriş efektinden daha öncelikli. React’in bileşen ve veri akışı yaklaşımı bu ayrımı düşünmek için iyi bir başvuru sağlıyor.
Sonra hangi bilginin etkileşim sırasında değişeceğini belirliyorum. Seçilen kategori, açık detay penceresi ve aktif ürün ölçüsü farklı durumlar olabilir. Aynı bilgiyi birkaç yerde ayrı ayrı tutarsam bir alan güncellenirken diğeri eski kalabilir. AI’dan bileşen yazmasını isterken verinin kaynağını ve değişikliklerin hangi alanları etkileyeceğini de anlatıyorum. Böylece görsel taslakla çalışan uygulama arasındaki farkı daha erken görebiliyorum.
4. İçerik ve SEO’yu son güne bırakmamak
Sayfa adresleri, başlıklar ve içerik hiyerarşisi tasarımla birlikte oluşuyor. Bir proje sayfasında katkım, çalışmanın durumu ve sınırları anlaşılmalı. Yayına alınmış bir mağazayla korumalı önizleme aynı kelimelerle anlatılmamalı. Başlık ve açıklama alanlarına da sayfada bulunmayan başarılar eklemiyorum. Arama sonucunda görünen vaat ile sayfanın sunduğu içerik birbirini tutmalı.
Google’ın AI içerik rehberi doğruluk, kalite ve kullanıcıya katkı üzerinde duruyor. Ben bunu, çok sayıda benzer metin üretmek yerine her sayfanın neden var olduğunu açıklama sorumluluğu olarak ele alıyorum. Bir kaynak kütüphanesi, gerçek kullanım notuyla değer kazanabilir. Bir ürün sayfası ise belirsiz teknik değeri tahmin ederek dolu gösterilmemeli. Boşluğun gerekçesini dürüstçe belirtmek bazen daha iyi bir içerik kararıdır.
5. Testte ilk ekrandan dışarı çıkmak
Kontrol ederken ziyaretçinin yapacağı kısa bir yolculuğu izliyorum: ana sayfadan ürüne geç, filtreyi değiştir, bir detayı aç, kapat ve iletişime ulaş. Bir formun görünmesi, mesajın gerçekten teslim edildiğini kanıtlamaz. Form yalnız e-posta taslağı açıyorsa bunu açıkça yazmak gerekir. Aynı şekilde örnek verinin ekranda görünmesi, canlı veri bağlantısının tamamlandığını göstermez.
Dar ekranda uzun başlığa, klavyeyle odak sırasına ve hareket azaltma tercihine bakıyorum. 3D desteklenmediğinde temel bilginin kullanılabilir kalmasını da önemsiyorum. Unisign deneyimindeki ekran girişinde animasyonu atlama seçeneği, bu düşüncenin bir örneği. Derleme kontrolüyle tarayıcıda davranış kontrolü farklı soruları yanıtladığı için ikisini birlikte değerlendiriyorum.
6. Yayın yöntemini sitenin ihtiyacına göre seçmek
Yayın aşamasında hangi özelliklerin sunucu istediğini yeniden kontrol ediyorum. İçeriği derleme sırasında hazırlanan bir portfolyo statik olarak sunulabilir; Next.js’in statik dışa aktarma seçeneği bunun yollarından biri. Ancak giriş, kalıcı kayıt veya mesaj gönderimi gibi bir yetenek varsa ilgili sunucu akışı ayrıca kurulmalı. Tasarımın hazır olması bu bağlantıların hazır olduğu anlamına gelmiyor.
Son kontrolü gerçek alan adında yapıyorum: doğrudan alt sayfa açılıyor mu, görseller yükleniyor mu, iletişim doğru yere gidiyor mu ve canonical adresler doğru alan adını gösteriyor mu? Yayından sonra düzenleme sorumluluğunu da belirlemek gerekiyor. Benim için AI ile site yapmanın tamamlanmış hali, teslim edilen ekranları açıklayabildiğim ve bir sonraki değişikliği nereden yapacağımı bildiğim noktada ortaya çıkıyor.