Bu site nasıl yapıldı?

Markanın adı zaten kancayı içinde taşıyordu: artist'in son hecesi İST— İstanbul'un kodu. Logo da yıllardır bu ayrımı yapıyor: gri “art”, cyan “ist”. Tek yaptığımız bu ayrımı sitenin merkez sahnesine taşımak oldu: İstanbul'un kuşu martı, sürü halinde uçup yazıyı kuruyor; “ist” hecesine oturan kuşlar cyan'a dönüyor.

Tek cümlelik tez: yapay zekâ dağınık bir sürü gibidir; doğru kurallarla bir markaya, bir ürüne oturur. Stüdyonun işi de tam bu.

İlk refleks “krem zemin + serif başlık” idi — şu an AI ile üretilen tasarımların en yaygın klişesi. Bunu bilinçli olarak reddettik. İstanbul'un ışığı krem değildir; lodos sonrası yıkanmış, soğuk bir gri-mavidir. Palet buradan çıktı:

• #EFF3F5sis— zemin — yıkanmış gökyüzü
• #F8FAFBkâğıt— kartlar ve yüzeyler
• #16222Emürekkep— metin — gece Boğazı laciverti
• #5E6B75çinko— ikincil metin — martı grisi
• #29ABE2cyan— marka rengi — grafikte
• #0F7FB5derin cyan— metin aksanı — kontrast için

Kritik detay: marka cyan'ı (#29ABE2) açık zeminde metin olarak yeterli kontrast vermez. Grafiklerde saf marka rengini, metinde koyulaştırılmış #0F7FB5'i kullandık.

Bricolage Grotesque başlıklarda — karakterli, ink-trap'li bir grotesk; ne nötr ne süslü. Figtree gövdede — logonun yuvarlak geometrisini sessizce yankılar. IBM Plex Mono etiketlerde — koordinatlar, bölüm numaraları, teknik diller: bir mühendislik stüdyosu olduğumuzu tip düzeyinde söyler.

Üçü de next/font/google ile self-host ediliyor: harici istek yok, CLS yok.

Açılıştaki simülasyon üç katmandan oluşur. Önce görünmez bir canvas'a “artist” yazılır ve koyu pikseller örneklenir — her piksel bir kuşun hedefi olur:

// Offscreen canvas'ta yazıyı çiz, koyu pikselleri örnekle
ctx.fillText("artist", startX, baseY);
const data = ctx.getImageData(0, 0, w, h).data;
for (let y = 0; y < h; y += step)
  for (let x = 0; x < w; x += step)
    if (data[(y * w + x) * 4 + 3] > 128)
      targets.push({ x, y, cyan: x >= istX });

Sonra her hedefe bir boid atanır. Kuşlar klasik üç kuralla uçar (ayrışma, hizalanma, yaklaşma) ve “arrive” davranışıyla hedefe süzülür: hedefe yaklaştıkça istenen hız düşer, kuş yavaşlayarak konar.

En öğretici hata da buradaydı: ilk sürümde kuşlar yazıya hiç oturmadı. Ayrışma kuvveti, konmaya çalışan kuşları sürekli birbirinden itiyordu. Çözüm tek satır: sürü kuvvetlerini hedefe olan mesafeyle sönümlemek —

// Hedefe yaklaştıkça sürü kuvvetleri söner
const flockMul = Math.min(distanceToTarget / 120, 1);
ax += separationX * 6 * flockMul;

Son katman etkileşim: imleç yaklaşınca kuşlar havalanır, sağ alttaki “yeniden uçur” sürüyü dağıtıp yeniden toplar. prefers-reduced-motion açıksa animasyon atlanır, yazı doğrudan çizilir.

Uçuş fiziği gerçek martı davranışından türedi: martı sinek gibi yerinde vızıldamaz — momentumla döner, uzun kavisli yaylarda süzülür, kısa çırpış / uzun süzülüş döngüsüyle uçar. Alt sayfalardaki ambiyans sürüsü de aynı gözlemle kurulu: hizalanma yok, herkes kendi rotasında; kimi termikte tembel daireler çizer, kimi uzun hatlarda gezinir. İmlece basılı tutunca toplanmaları da gerçekten: yem gören martı davranışı.

Bir de ses katmanı var: uzaktan martı çığlıkları ve vapur düdüğü, fal.ai üzerinden üretilmiş dört kısa kayıt olarak Web Audio ile katmanlanır — rastgele aralık, pan ve hızda, hiçbir şey senkron değil. Sağ alttaki hoparlör düğmesiyle susturulur.

Sahnenin yıldızı vapur geçidi. Şehir Hatları vapuru üretilmiş görsel (nano-banana; beyaz zemin piksel piksel alfaya çevrildi) ama hareketi tamamen fizik: deniz analitik bir dalga fonksiyonu — seaSurface(x,t) — ve vapurun sallantısı bu fonksiyondan türer. Pruva ile kıç hizasındaki dalga yüksekliği farkı gövdeyi eğer, ortalaması kaldırıp indirir; dümen suyunun köpüğü hızla orantılıdır, bacadan çinko tonunda duman süzülür. Geçiş hızı smoothstep: girişte ağır, ortada gerçek seyir, çıkışta ağır.

Ve gösteri anı: vapur ekranın ortasına gelince “artist” yazısı dağılır — tüm sürü dalga dalga havalanıp vapurun üstünde ve ardında toplanır, simit peşindeki İstanbul martısı gibi onunla yol alır. Vapur çıkışa yaklaşınca kuşlar kademeli kopar ve yazı yeniden kurulur. Düdük de vapurla gelir: sahneye girişinden ~2 saniye sonra (ses açıksa).

Bir de sonsuz döngü hilesi: önce marka paletinde tek bir kare üretildi (vapur + eskort martılar), sonra bu kare bir başlangıç-bitiş video modeline hem ilk hem son kare olarak verildi. Video kendi üstüne kusursuz kapanır — dikişsiz döngü. Toplam maliyet bir dolardan az:

Süreç “güzel bir site yap” ile başlamadı. Brief üç şeyi netti: marka (Artist, AI-native ürün stüdyosu), tema (İstanbul, MURMUR'daki sığırcık yerine martı) ve serbestlik alanı (“creatifliği sana bırakıyorum”).

Üretim döngüsü hep aynıydı: kur → tarayıcıda ekran görüntüsü al → eleştir → düzelt. Sürünün yazıya oturmaması da tam böyle yakalandı: kod doğru görünüyordu, ekran görüntüsü yalan söylemedi. Site yayına girmeden önce üç tam eleştiri turundan geçti — her turda tasarım hataları, kaçan fırsatlar ve cilalanacak detaylar arandı.

1. Kancayı markadan çıkar.Bizim “art + İST” gibi — imza fikri dışarıdan ekleme, markanın içinden bul.
2. Brief'i sen yaz. Marka tanımı, tema, kısıtlar ve serbestlik alanı. Muğlak talimat, muğlak site üretir.
3. Klişeyi açıkça yasakla.“Krem zemin + serif + terracotta” üçlüsü AI'ın varsayılanı; konundan çıkan bir palet iste.
4. Cesareti tek yere harca. Bir imza teknik seç (bizde sürü simülasyonu), gerisini sessiz ve disiplinli tut.
5. Ekran görüntüsüyle iterasyon yap.Koda değil sonuca bak; AI'dan da kendi işini ekran görüntüsü üzerinden eleştirmesini iste.
6. Erişilebilirliği pazarlık dışı tut. Gerçek başlıklar, klavye odağı, reduced-motion, kontrast — canvas süs, içerik esas.
7. En az üç tur dön. İlk tur çalışır, ikinci tur güzelleşir, üçüncü tur sahiplenilir.