VisionByVolt

Dünya kuruluyor

TREN
Kaydır · projelerimi gör

Bağımsız tasarım ve geliştirme stüdyosu

Her projeye ayrı birdünya.

Markanız için sıfırdan bir konsept kuruyorum; rengi, yazısı ve hareketiyle. Sonra onu hızlı ve elle tutulur bir siteye çeviriyorum. Şalteri çevirin: bu site de seçtiğiniz işin diline bürünür.

İşleri görProje başlat

Seçili işler

3 dünya, daha fazlası yolda

Sıradaki dünya

Üç saniyede karar verilir. Biz o üç saniyeyi çizeriz.

Yeniden tasarım önerisi

Nöropazarlama araştırma ajansı

Neromark

Nasıl yapıldı

  1. Sinyal alanı

    Hero, tek bir Three.js düzleminde özel shader ile çizilen bir çizgi alanı: EEG dalgalarının üç boyutlu sırtları. Dalgalar zamanla kendiliğinden akar; sahne yalnızca ekrandayken çizilir.

  2. İmleç = bakış

    İmleç göz izleme cihazının bakış noktası gibi davranır. Baktığın yerde sinyal yükselir ve ısı kırmızısı bir leke oluşur. Dokunmatik ekranda bakış, sayfadaki hedeflere otomatik sakkadlarla gider.

  3. Fiksasyon izi

    Üstte numaralı daireler ve aralarında sakkad çizgileri: bir göz izleme raporunun görünümü. Süs değil, ajansın ölçtüğü şeyin kendisi.

  4. Okunurluk ve ritim

    Başlık satır satır yükselir, manifesto kelime kelime kaydırmayla açılır, yöntem bölümü masaüstünde yatay kayar, sayılar sayarak gelir. Hepsi aynı yavaşlayan yumuşak eğriyi kullanır.

  5. Geri dönüşler

    Hero girişi saf CSS'tir, JavaScript başarısız olsa da içerik görünür. Hareket azaltma açıkken sahneler son durumda durur. 3D bileşen ağır olduğu için gecikmeli yüklenir; içerik sunucuda üretilir.

  6. Metin

    Yalnızca mevcut sitenin metni kullanıldı; eski tasarımdan hiçbir öğe alınmadı. Her şey sıfırdan çizildi.

Tüketici davranışını göz izleme ve EEG ile ölçen bir ajans için yeniden tasarım. Site bir laboratuvar defteri gibi okunur; ziyaretçi kendi dikkatinin ölçüldüğünü hisseder.

İmza

Hero'da gerçek zamanlı bir EEG topografyası. İmleç bakış noktasıdır: baktığın yerde sinyal yükselir, numaralı fiksasyon noktaları iz bırakır.

Sıradaki dünya

Karanlık, ışığın en pahalı malzemesidir.

Kurgusal marka · konsept

Ölçüye dikim terzi evi, İstanbul

Vanta Atelier

Nasıl yapıldı

  1. Figürler

    Sekiz tam boy moda görseli yapay zekâ ile üretildi (Seedream 5 Pro). Arka planları yerel bir modelle (rembg, birefnet-general) silindi, saydam WebP'ye çevrildi. Görseller gerçek kişi ya da gerçek marka değil.

  2. Koridor

    Figürler Three.js'te düz düzlemler olarak derinlikte dizili. Özel bir shader sisi, yakınlıkla değişen pozlamayı ve hafif sallanmayı verir. Odaktaki parçanın arkasındakiler kendiliğinden solar, metin temiz kalır.

  3. Işık

    Her figürün arkasında sıcak bir pus ve tavandan ince bir ışık demeti var. Işık demeti ve pus birbirine eklenir, sisle sönümlenir. Kenar çizgisi yok: ışık siluetin etrafından dolaşır.

  4. Scroll = kamera

    Sayfa kaydıkça kamera koridorda ilerler. Her parçada kısa bir bekleme var, parçanın notu figürün karşı tarafında açılır. Toz parçacıkları derinlik hissini tamamlar.

  5. Tipografi

    Başlıklar geniş kesimde büyük harf, vurgular italik. Rakamlar ve fiyatlar italik serifle yazılır. Hero'da canlı bir İstanbul saati çalışır.

  6. Geri dönüşler

    WebGL yoksa bakır kenarlı bir ışık havuzu gösteren CSS posteri kalır. Zayıf cihazda çözünürlük düşer, toz kapanır. Koridor ekran dışındayken çizim durur.

Işık gittiğinde geriye kesim kalır: omuz hattı, yaka, kumaşın düşüşü. Poz veren model yok; sekiz parça karanlık bir koridorda sisten bakır bir ışıkla ayrılır.

İmza

Scroll kameranın kendisi. Koridorda ilerledikçe figürler derinlikten çıkar, her parçanın notu karşı tarafta açılır.

Sıradaki dünya

Her kare bir elin işi.

Kurgusal marka · konsept

Kâğıt kesme animasyon stüdyosu, İstanbul

Kuklacı

Nasıl yapıldı

  1. Kâğıt katmanlar

    Hero, Three.js'te derinlikte dizili altı kâğıt tabakadan oluşur. Kenarlar eğri değil, makasla kesilmiş gibi düz parçalardan çizilir. Tek bir ışık, katmanların birbirine gerçek gölge düşürmesini sağlar.

  2. 12 kare

    Sahne saniyede 12 kez çizilir, aradaki zamanlarda hiçbir şey yapmaz. Her karede katmanlar küçük bir miktar oynar: el ile yeniden yerleştirilmiş gibi bir titreme.

  3. Scroll = deklanşör

    Yürüyüş bölümünde sayfa kaydıkça kedi yalnızca yeni bir kare çekildiğinde hareket eder. Bacaklar dört karelik bir döngüde, arka plan katmanları farklı hızlarda kayar.

  4. Makas sahnesi

    Scroll ilerledikçe makas bir martının hatlarını kesiyor. Çizgi yalnızca yeni bir kare çekildiğinde uzar, makas her karede açılıp kapanır. Sonunda kesilen kuş, deliğinden kaldırılır.

  5. Kesik kenar

    Düğmeler, kartlar ve bölüm kenarları çokgen kırpmayla kesilir. Üzerine gelince kâğıt hafifçe titrer. Yuvarlak köşe ya da yumuşak gölge yok.

  6. Geri dönüşler

    WebGL yoksa ya da hareket azaltma açıksa aynı katmanlar düz bir kâğıt kolaj olarak gösterilir. Sahne yalnızca kare değiştiğinde çizildiği için cihazı yormaz.

  7. Metin

    Marka, filmler ve metinler kurgusaldır; bu site yalnızca bir tasarım örneğidir.

Elle kesilip kare kare çekilen filmler yapan bir stüdyo için site. Sayfa da aynı yöntemle çalışır: hareket akmaz, karelerle sıçrar; kâğıt katmanlar gerçek gölge düşürür.

İmza

Scroll kameranın deklanşörü. Kâğıttan kedi sokağı yirmi dört karede geçer, her kare ayrı bir adımdır.

Yaklaşım

Şablon yok. Her seferinde baştan.

  1. Dinlemek

    Markanın neyi, kimin için ve neden yaptığını anlıyorum. Önce kelimeler, sonra pikseller.

  2. Dünya kurmak

    Her proje için ayrı bir konsept: palet, yazı, hareket dili ve tek bir imza fikri. Önceki işten bileşen taşınmaz.

  3. Üretmek

    Next.js, Three.js ve GSAP ile hızlı, erişilebilir ve telefonda da etkileyici bir site. Lighthouse 90'ın altı teslim edilmez.

  4. Teslim

    Temiz, belgelenmiş kaynak kodu elinize veriyorum; ekibiniz kendi altyapısına uyarlayıp yayınlar. Yayına alma ve uyarlama isterseniz ayrı bir hizmet olarak eklenir.

Teslim paketinde

  • Kaynak kodNext.js projesi, build'i temiz, bağımlılıkları sabitlenmiş.
  • Devir kılavuzuÇalıştırma, klasör yapısı ve dikkat edilecek noktalar tek README'de.
  • İçerik ve stil haritasıMetinler tek dosyada; renk ve yazı token'ları tek yerde.
  • Lisans notlarıFontların, görsellerin ve kütüphanelerin lisansları listeli.
  • Geri dönüşlerHareket azaltma, WebGL'siz tarayıcı ve zayıf cihaz davranışları anlatılmış.

İletişim

Bir dünyakuralım.

Ne yaptığınızı, kimin için yaptığınızı ve sitenin ne zaman hazır olması gerektiğini yazın. İki iş günü içinde dönüyorum.

Kısaca: ne yapıyorsunuz, site neyi değiştirmeli, takvim.