Web siteleri artık yalnızca metinlerin, görsellerin ve butonların alt alta sıralandığı sayfalardan ibaret değil. Özellikle moda, otomotiv, mimari ve yaratıcı projelerde ziyaretçiyi doğrudan hikâyenin içine alan farklı tasarım anlayışları giderek daha fazla karşımıza çıkıyor.
Bunlardan biri de kullanıcının kaydırma hareketini hikâyenin bir parçası haline getiren web siteleri.
Ziyaretçi aşağı doğru kaydırdığında klasik bir web sayfasındaki gibi yalnızca yeni bir bölüme geçmiyor. Ekranın tamamını kaplayan görüntü değişiyor, yeni bir video devreye giriyor ve site sahneler halinde ilerliyor.
Biz de TEDLEYN’de benzer bir deneyimin yapay zekâ kullanılarak ne kadar kolay oluşturulabileceğini görmek için Bolt’u denedik.
İlk adım siteyi değil, hikâyeyi hazırlamak
Sürece doğrudan Bolt’a prompt yazarak başlamadık.
Öncelikle web sitesinde kullanacağımız videoları hazırladık. Çünkü bu tarz bir projede deneyimi yalnızca web tasarımı değil, kullanıcının kaydırdıkça karşılaşacağı sahneler oluşturuyor.
Videoların birbirleriyle görsel olarak uyumlu olması önemli. Renk, hareket ve kompozisyon açısından tamamen farklı görüntüler kullanıldığında sahneler arasındaki geçiş etkisi zayıflayabiliyor.
Bizim planımız oldukça basitti: Site açıldığında ilk video ekranın tamamını kaplayacak, kullanıcı aşağı kaydırdığında ikinci sahne gelecek ve hikâye diğer videolarla devam edecekti.
Videolar hazır, sıra Bolt’ta
Videoları hazırladıktan sonra Bolt üzerinde yeni bir proje oluşturduk.
Bolt, oluşturmak istediğiniz web sitesi veya uygulamayı doğal dille tarif ederek çalışan bir projeye dönüştürmenizi sağlayan yapay zekâ destekli bir geliştirme ortamı.
Buradaki önemli nokta, yalnızca bir web sitesi görseli üretmemesi. Arka planda gerçek bir web projesi ve çalışan kod oluşturuluyor. Böylece ortaya çıkan sonucu tarayıcıda deneyebiliyor, değişiklik isteyebiliyor ve projeyi geliştirmeye devam edebiliyorsunuz.
Bizim istediğimiz yapı üç temel unsurdan oluşuyordu: tam ekran videolar, her kaydırmada yeni bir sahne ve akıcı geçişler.
Doğru prompt sonucu değiştiriyor
Yapay zekâyla web sitesi oluştururken yalnızca ne istediğinizi değil, sitenin nasıl davranmasını istediğinizi de açık şekilde anlatmak gerekiyor.
“Modern bir web sitesi oluştur” gibi genel bir komut başlangıç için yeterli olabilir ancak sonuç üzerinde fazla kontrol sağlamıyor.
Bizim oluşturduğumuz yapıya benzer bir site için kullanılabilecek prompt ise şöyle:
Tam ekran video bölümlerinden oluşan sinematik bir web sitesi oluştur. Her sahne tarayıcı ekranının tamamını kaplasın. Kullanıcı aşağı kaydırdığında mevcut sahne yerini bir sonraki videoya bıraksın. Geçişler akıcı olsun. Tasarım klasik uzun bir web sayfası gibi değil, kaydırdıkça ilerleyen interaktif bir hikâye gibi hissettirsin. Masaüstü ve mobil ekranlara uyumlu bir yapı oluştur.
Buradaki fark küçük gibi görünse de önemli. Yapay zekâya yalnızca tasarımın nasıl görünmesi gerektiğini değil, kullanıcıyla nasıl etkileşime girmesi gerektiğini de anlatıyoruz.
İlk sonuç istediğimiz gibi değildi
Promptu gönderdikten sonra Bolt sitenin ilk versiyonunu oluşturdu. Ancak ortaya çıkan sonuç ilk denemede istediğimiz sinematik deneyimi tam olarak vermedi.
Özellikle videoların ekranın tamamını kaplaması ve sahneler arasındaki geçiş davranışı üzerinde yeniden çalışmamız gerekti.
Projeyi baştan oluşturmak yerine sorunları Bolt’a tek tek tarif ettik.
Örneğin video ekranın tamamını kaplamıyorsa yalnızca “videoyu büyüt” demek yerine daha net bir komut vermek mümkün:
Video bölümünün tarayıcı ekranının tamamını kaplamasını sağla. Kenarlarda veya üst ve alt bölümlerde boşluk kalmasın.
Bu yaklaşım yapay zekânın hangi problemi çözmesi gerektiğini daha iyi anlamasını sağlıyor.
Birkaç düzenlemeyle istediğimiz yapı ortaya çıktı
Yaptığımız düzeltmelerin ardından site açıldığında kullanıcıyı doğrudan tam ekran video karşılamaya başladı.
Aşağı kaydırıldığında mevcut sahne yerini bir sonraki videoya bırakıyor. Böylece kullanıcı klasik bir web sayfasında aşağı doğru ilerlemek yerine hikâyenin yeni bölümüne geçmiş gibi hissediyor.
Ortaya çıkan sonuç yalnızca bir tasarım konsepti veya görsel prototip de değil.
Gerçekten çalışan bir web sitesi.
Bolt tarafından oluşturulan proje üzerinde daha sonra değişiklik yapılabiliyor, proje dosyaları dışarı aktarılabiliyor ve farklı bir hosting altyapısında çalıştırılabiliyor. İstenirse Bolt’un kendi yayınlama seçenekleri de kullanılabiliyor.
Kod bilmeden yapılabilir mi?
Biz bu projenin ilk çalışan versiyonunu oluştururken kod yazmadık.
Ancak bu, arka tarafta kod olmadığı anlamına gelmiyor.
Aslında yapay zekâ burada kodu ortadan kaldırmıyor. Kullanıcı ile kod arasındaki iletişim biçimini değiştiriyor.
Kullanıcı yapmak istediği şeyi doğal dille tarif ediyor, yapay zekâ gerekli kodu oluşturuyor ve sonucu tarayıcıda çalıştırıyor.
Bu durum özellikle fikirleri hızlı şekilde test etmek isteyenler açısından önemli. Daha önce çalışan bir prototip oluşturmak için geliştirici desteği veya belirli seviyede kod bilgisi gerekirken artık fikrin ilk versiyonunu çok daha hızlı görmek mümkün.
Daha karmaşık projelerde ise performans, güvenlik, erişilebilirlik ve kod kalitesi gibi konularda teknik bilgi hâlâ önemini koruyor.
Her web sitesi için doğru yöntem değil
Kaydırdıkça değişen tam ekran videolar etkileyici bir deneyim oluşturabiliyor ancak bu tasarım her proje için uygun değil.
Yoğun video kullanımı özellikle mobil cihazlarda veri tüketimini artırabilir. Videolar doğru şekilde optimize edilmezse sayfa performansı da olumsuz etkilenebilir.
Büyük bir haber sitesi, kapsamlı bir e-ticaret platformu veya yüzlerce sayfadan oluşan kurumsal bir yapı için bu yöntemi ana navigasyon sistemi haline getirmek doğru tercih olmayabilir.
Ancak ürün lansmanları, yaratıcı portfolyolar, moda koleksiyonları, otomobil tanıtımları, mimari projeler ve marka kampanyaları gibi görsel hikâye anlatımının önemli olduğu projelerde oldukça güçlü sonuçlar ortaya çıkabilir.
Asıl değişen şey web sitesi yapmak değil
Denememizde en dikkat çekici nokta sitenin kısa sürede oluşturulması değildi.
Daha önemli olan, kafamızdaki bir etkileşim fikrini doğal dille tarif ederek kısa süre içerisinde tarayıcıda gerçekten deneyebileceğimiz çalışan bir ürüne dönüştürebilmekti.
Yapay zekâ destekli geliştirme araçlarının web dünyasında yarattığı değişim de burada ortaya çıkıyor.
Bir fikrin nasıl görüneceğini ve çalışıp çalışmayacağını görmek için artık her zaman projenin tamamını sıfırdan geliştirmek gerekmiyor.
Bazen iyi hazırlanmış birkaç video, doğru tarif edilmiş bir fikir ve iyi bir prompt başlangıç için yeterli olabiliyor.
Kaynaklar
