Behance Grid ile Yan Yana Video ve Görsel Yerleşimi

Behance'e bir vaka analizi (case study) yüklerken en çok karşılaştığım kısıtlama, statik bir render ile hareketli bir videoyu yan yana koyamamaktı. Portfolyonda bir mobil uygulama arayüzü, sosyal medya reels kurgusu veya 3D ürün animasyonu sergilemek istediğinde Behance'in yerleşik editörü seni dikey bir şeride hapseder. Videoyu eklersin, koca bir blok kaplar; yanına koymak istediğin açıklayıcı görseli ise ya altına ya da üstüne atabilirsin. Bu sorunu çözmek için geliştirdiğim Behance Grid aracını stüdyomdaki gerçek projelerde nasıl kullandığımı, dosya optimizasyonundan embed kodunun yerleşimine kadar adım adım aktarmak istiyorum.

Bir motion designer ya da art director olarak projenin akış ritmini korumak zorundasın. Ziyaretçi sayfayı aşağı kaydırırken sadece sonsuz statik görseller ya da tek başına duran devasa video pencereleri görmemeli. Tasarım sürecinde aldığın kararları, yan yana duran karşılaştırmalı mikro döngülerle göstermek çalışmanın değerini katbekat artırır.

Neden Behance'in Yerleşik Blokları Yetmiyor?

Behance editörü fotoğraf tabanlı bir mantıkla inşa edilmiştir. Görselleri yan yana iki sütun veya üç sütun olarak yüklediğinde platform bunları otomatik olarak ızgaraya oturtur. Ancak işin içine video girdiğinde iki büyük engelle karşılaşırsın:

1. Ağır GIF Dosyaları: Birçok tasarımcı videoyu yan yana getirebilmek için MP4 yerine GIF formatına başvuruyor. Ancak GIF formatı 256 renk sınırı taşır. Yumuşak degradeler (gradients), hareket bulanıklığı (motion blur) ve koyu tonlar içeren temiz 3D sahneler GIF yapıldığında çamur gibi piksellenir. Üstelik dosya boyutu 30-40 MB sınırını hızla aşar ve sayfanın yüklenmesini dakikalarca geciktirir.
2. Dikey Bölünme: Behance'in yerel video yükleme aracı ya da standart iframe video gömme modülü tüm satırı kaplar. Örneğin yan yana üç farklı dikey (9:16) formatlı sosyal medya reklamını sergilemek istersen, yerel araçlar her birini alt alta dizer. Sayfa gereksiz yere uzar ve projenin genel tipografik dengesi bozulur.

İşte bu noktada birden fazla video kaynağını (Google Drive, Vimeo ya da YouTube) ve statik JPG/WebP görselleri tek bir satırda eşit yükseklikte toplayan özel bir ızgara yapısına ihtiyaç doğuyor.

Adım 1: Video ve Görseller İçin Matematiksel Oranları Ayarlamak

Behance Grid üzerinde video ve görselleri yan yana dizerken kırılma veya siyah kenar boşlukları (letterbox) yaşamamanın sırrı piksel değil, oran disiplinidir. Yan yana duracak iki ya da üç bloğun en boy oranlarının (aspect ratio) birbiriyle matematiksel olarak konuşması gerekir.

En Boy Oranı (Aspect Ratio) Standartları

• 1:1 Kare Grid: İki veya üçlü kare grid yaparken After Effects veya Premiere çıktını tam olarak 1080x1080 px ya da 1440x1440 px olarak ayarla. Yanındaki statik fotoğrafın çözünürlüğü de aynı oranda (örneğin 2000x2000 px) olmalı.
• 4:5 Dikey Sosyal Medya Gridi: Kampanya görselleri hazırlıyorsan 1080x1350 px video çıktısı al. Yanına gelecek tipografik açıklama kartı da 4:5 oranında tasarlanmalı.
• 9:16 Dikey Mobil Formatı: Mobil ekran kayıtları ve Reels/TikTok kurguları için standart 1080x1920 px kullan. Üçlü dikey grid, portfolyoda en güçlü duran yerleşimlerden biridir.

Oranlar tutarlı olduğunda, Behance Grid her sütunu tarayıcı genişliğine göre otomatik olarak ölçekler ve hiçbir eleman diğerinin boyunu aşmaz.

Adım 2: Video Sıkıştırma ve Host Etme Stratejisi

Web'de gömülü (embed) çalışan videoların anında yüklenmesi ve kesintisiz döngüye (loop) girmesi şarttır. Ziyaretçi play tuşuna basmayı beklememeli, video arka planda sessizce ve akıcı bir şekilde başlamalıdır. Bunun için video render aşamasında şu parametreleri uyguluyorum:

• Codec: H.264 (MP4)
• Profil: High Profile, Level 4.2
• Bitrate: VBR, 1 Pass. Hedef bitrate 4-6 Mbps, maksimum 8 Mbps. Kısa döngüler (3-6 saniye) için toplam dosya boyutunu 5-10 MB civarında tut.
• Ses: Eğer video görsel bir animasyon döngüsüyse ses kanalını render sırasında tamamen kapat (Disable Audio). Bu hem dosya boyutunu düşürür hem de mobil tarayıcıların otomatik oynatma (autoplay) engellerine takılmasını önler.

Barındırma (Hosting) Seçenekleri

Videolarını nereye yükleyeceğin, sunumunun hızını belirler. Google Drive hızlı prototipleme ve bağımsız döngüler için idealdir; videonun paylaşım linkini "Bağlantıya sahip olan herkes görüntüleyebilir" olarak ayarlayıp doğrudan Behance Grid içine yapıştırabilirsin. Vimeo Plus/Pro kullanıyorsan, doğrudan mp4 linki çekebileceğin veya oynatıcı kontrollerini gizleyebileceğin temiz bir alternatif sunar. YouTube kullanacaksan, videoyu "Liste Dışı" (Unlisted) yükleyip ekleyebilirsin.

Adım 3: Behance Grid Kullanarak Yerleşimi İnşa Etmek

Behance Grid aracının çalışma mantığı son derece basittir: Sütun sayısını seçersin, video ve görsel URL'lerini ilgili kutulara girersin, önizlemede hizalamayı kontrol edip tek tıkla sana özel oluşturulan embed (iframe) kodunu kopyalarsın.

Örnek bir yerleşim senaryosu üzerinden gidelim: Bir markaya yaptığım ambalaj ve motion branding çalışmasında sol tarafta ambalajın 3D dönen animasyonunu (1:1), sağ tarafta ise ambalajın basılı fotoğrafını (1:1) konumlandırdım. Benzer bir görsel yaklaşımı daha önce yürüttüğüm CMF by Nothing Türkiye çalışmalarında da uygulayarak cihazın arayüz hareketlerini ürün render'larıyla dengelemiştim.

1. Behance Grid arayüzünde 2 sütunlu şablonu seç.
2. Birinci sütuna Google Drive'a yüklediğin video linkini yapıştır.
3. İkinci sütuna hazırladığın yüksek çözünürlüklü JPG görsel bağlantısını ekle.
4. Arka plan rengini Behance projenin arka plan hex koduyla (genellikle #FFFFFF veya koyu projeler için #0A0A0A) eşleştir.
5. Çıkan iframe embed kodunu kopyala.

Adım 4: Behance Editörüne Yerleştirme ve Canlı Kontrol

Kopyaladığın embed kodunu Behance proje editörüne eklemek için sağdaki araç çubuğunda yer alan Embed (Göm) simgesine tıkla. Kodu yapıştırıp onayladığında ızgara Behance içine yerleşir.

Burada dikkat etmen gereken kritik detay, Behance'in stil ayarlarındaki kenar boşluklarıdır (Margin & Spacing). Proje ayarlarından "Grid Spacing" değerini sıfırlarsan veya grid bloğunu tam genişlik (Full Bleed) yaparsan, video ve görseller ekranın kenarlarına kadar kesintisiz oturur. Bu teknik, modern ve stüdyo kalitesinde bir vaka analizi oluşturmanın en hızlı yoludur.

Sık Yapılan Hatalar

• Farklı En Boy Oranları: Bir tarafa 16:9 yatay video, yanına 4:5 dikey afiş koyarsan araç görseli orantılı tutmak için boşluk bırakır. Yan yana gelecek elemanların en-boy oranlarını mutlaka baştan eşitle.
• Aşırı Yüksek Bitrate: 4K 60fps bir videoyu direkt Drive'a atıp embed etmek mobil kullanıcıların kotasını tüketir ve takılmalara yol açar. Web için her zaman 1080p ve optimize bitrate kullan.
• Görünür Oynatıcı Kontrolleri: Oynatma çubuğu, ses açma simgesi ve durdurma butonları vaka analizinin profesyonelliğini zedeler. Behance Grid bu kontrolleri otomatik gizleyerek videoyu yaşayan bir poster gibi sunar.

Kendi portfolyonda video ve statik görselleri hiyerarşik bir ritimle sunmak istiyorsan ücretsiz Behance Grid aracını hemen deneyebilirsin. Farklı formatlar veya özel proje yerleşimleri üzerine fikir alışverişi yapmak istersen bana iletişim formu üzerinden dilediğin an yazabilirsin.