Orange Sound Studio - UI

Podcast kaydı, müzik prodüksiyonu, mix & mastering, seslendirme yönetmenliği ve ses tasarımı hizmetleri sunan profesyonel bir ses prodüksiyon stüdyosu olan Orange Sound Studio için geliştirilen, Next.js 16 ve React 19 altyapılı, Türkçe/İngilizce/Rusça olmak üzere tam üç dilli çok sayfalı bir web sitesi.

Hizmetler

• Next.js Geliştirme
• Üç Dilli (TR/EN/RU)
• Podcast & Ses Sektörü
• Performans

Konsept çalışma.

Genel Bakış

Orange Sound Studio için kimlik sisteminin üzerine kurduğumuz, Türkçe, İngilizce ve Rusça yayın yapan yedi sayfalık web sitesi. Podcast kaydından mix & mastering'e uzanan hizmetleri, sesi duymadan da anlatabilen bir arayüzde bir araya getirdik.

Zorluk

Bir ses stüdyosunun sattığı şey duyulur ama görünmez. Ziyaretçilerin çoğu siteye telefondan, kulaklık takmadan ve kısa bir süre için giriyor; vermesi gereken karar ise kaydının, mixinin ya da podcast bölümünün bu stüdyoda nasıl duyulacağı. Sitenin ses kalitesini fotoğrafla kanıtlamaya çalışmak yerine süreci, her hizmetin kapsamını ve sonunda elinize geçen dosyaları açıkça göstermesi gerekiyordu.

İkinci zorluk hizmetlerin genişliğiydi. Podcast prodüksiyonu, müzik kaydı, mix & mastering, seslendirme, ses tasarımı, sesli kitap ve reklam cıngılları çok farklı kişilere hitap ediyor: haftalık yayın yapan bir podcast ekibinin sorusuyla EP'sini kaydedecek bağımsız bir müzisyenin sorusu aynı değil. Hepsini tek bir uzun sayfaya sığdırmak, herkesin aradığını bulmasını zorlaştırırdı.

Son olarak site üç dilde çalışmalıydı. Rusça ve İngilizce sürümlerin sonradan eklenmiş bir çeviri gibi durmaması için dil desteğinin baştan, her sayfanın yapısına işlenmesi gerekiyordu.

Strateji

İşe yapıyı ayırarak başladık. Ana sayfa, hizmetler, projeler, referanslar, hakkımızda, blog ve iletişim yedi ayrı sayfa oldu; böylece her ihtiyacın kendi adresi var. Ana sayfanın ilk ekranında ziyaretçi; podcast, müzik kaydı, seslendirme, mix & mastering, sesli kitap, reklam cıngılı ve ses tasarımı arasından ilgilendiği hizmetleri işaretleyip doğrudan “Hizmet Al” adımına geçebiliyor. Hizmetler sayfası numaralı bir akordeon gibi çalışıyor: bir başlığı açtığınızda kısa bir açıklama, alt hizmet etiketleri ve detay bağlantısı çıkıyor.

Sesi görünür kılmak için süreci anlattık. “Baştan sona ses prodüksiyonu” bölümü kayıt, mix, mastering, ses tasarımı, seslendirme ve dağıtım adımlarını tek bir akışta sıralıyor; yanında oynatılabilen bir kayıt kartı duruyor. Bir başka bölüm, oturum sonunda teslim edilen ayrı izleri 24-bit/96 kHz WAV ve AIFF seçenekleriyle listeleyen bir indirme kartını canlandırıyor. Böylece “stüdyo kalitesi” soyut bir iddia olmaktan çıkıp somut bir teslimata dönüşüyor.

Görsel dil doğrudan marka kimliğinden geliyor. Koyu, fotoğraflı kahraman alanları ile açık zeminli içerik bölümleri sırayla ilerliyor; turuncu yalnızca aksiyonlara ve vurgulara ayrıldı, pervane işareti ise büyük ölçekli bir filigran olarak arka planda kalıyor. Başlıklar kimliğin yuvarlak hatlı yazı karakterini taşıyor. Portföy türe göre (podcast, müzik, seslendirme, ses tasarımı), blog ise kategoriye göre filtrelenebiliyor; her yazıda tarih ve okuma süresi yer alıyor.

Teknik tarafta site Next.js 16, React 19 ve Tailwind CSS ile geliştirildi. Türkçe, İngilizce ve Rusça metinler tek bir çeviri katmanından yönetiliyor; dil seçici her sayfanın üst menüsünde duruyor.

Sonuçlar

• Türkçe, İngilizce ve Rusça yayın yapan yedi sayfalık bir web sitesi yayına alındı.
• Ana sayfaya, ziyaretçinin ilk ekrandan ihtiyacını işaretleyebildiği bir hizmet seçici ve “Hizmet Al” çağrısı yerleştirildi.
• Her hizmeti alt kalemleriyle anlatan akordeon yapılı bir hizmet kataloğu hazırlandı.
• Stüdyonun iş akışını görünür kılan süreç bölümü, oynatılabilir kayıt kartı ve ayrı iz indirme kartı tasarlandı.
• Türe göre filtrelenen bir portföy ve kategorili bir blog kuruldu; kimliğin renk, işaret ve tipografi kararları arayüz bileşenlerine taşındı.

• 3 Dil
• 7 Özel Sayfa
• 6+ Kapsanan Hizmet

Canlı siteyi ziyaret et