Mimarlıkta işin kendisi en güçlü anlatımdır; web sitesinin görevi ise bu işi en iyi şekilde sahnelemek. Bu projede, mimari çalışmaları ön plana çıkaran ve tasarım anlayışını ziyaretçiye aktaran portfolyo odaklı bir web sitesi geliştirdik.

Neler geliştirdik

  • Proje portfolyosu: mimari projeleri büyük görseller ve videolarla sunan sayfalar.
  • Hareketli anlatım: mekânları sinematik bir dille tanıtan video ve geçiş kurguları.
  • Stüdyo ve iletişim: tasarım yaklaşımını anlatan bölümler ve net iletişim noktaları.
  • Proje detay sayfaları: her projenin konum, yıl ve kapsam bilgileriyle sunulduğu sayfalar.
  • Kategori filtreleri: projeleri türüne göre süzme.
  • İçerik yönetimi: sayfaların, görsellerin ve metinlerin yazılım bilgisi gerektirmeden panelden güncellenmesi.

Mimari dilin yalınlığını yansıtan minimal bir arayüz tasarladık; tipografiyi ve boşlukları, görsellerin önüne geçmeyecek bir çerçeve olarak kullandık. Video içeriklerini hafif ve hızlı yüklenecek şekilde optimize ederek sinematik etkiyi performanstan ödün vermeden sunduk.

Nasıl çalıştık

Mimarlık için önce içerik yapısını ve sayfa hiyerarşisini çıkardık. Tasarımı Figma'da ana sayfadan başlayarak tüm sayfa şablonlarına yaydık. Onaylanan tasarımı bileşen bileşen koda döktük, içerikleri girdik ve siteyi farklı ekran boyutlarında ve tarayıcılarda test ederek yayına aldık.

Teknik altyapı

Siteyi React ve Next.js ile geliştirdik; TypeScript kodun güvenilirliğini, Tailwind CSS arayüzün tutarlılığını sağlıyor. İçerik, Node.js ve MySQL üzerinde çalışan bir yönetim panelinden güncelleniyor. Sayfalar sunucu tarafında oluşturulduğu için site hızlı açılıyor ve arama motorlarında doğru şekilde dizinleniyor.

Sonuç

Ortaya, mimari projeleri hak ettikleri sadelik ve etkiyle sergileyen, ziyaretçiye tasarım anlayışını ilk bakışta hissettiren bir portfolyo sitesi çıktı.