OSBSA Bilişim

Mimarlık ofisi için web sitesi örneği

Konut, ofis ve perakende işi yapan bir büro için kurduğumuz gezilebilir site. Portfolyo duruyor, altına yıl, alan ve durum eklendi.

Kısa cevap

Mimarlık sitelerinin ortak sorunu şu: fotoğraf çok, bilgi yok. Portfolyoya bakan kişi etkileniyor ama arayıp arayamayacağına karar veremiyor, çünkü projenin ne zaman yapıldığı, kaç metrekare olduğu ve bitip bitmediği yazmıyor. Aşağıdaki örnek sitede her projenin altında bu üç satır var, ayrıca avan projeden ruhsata kadar aşamaların gerçekçi süreleri ayrı bir sayfada duruyor. Fotoğraflar küçülmedi; yanlarına okunacak bir şey kondu.

Demodaki firma yok, numarası da yok; sayfanın nasıl çalıştığını görmeniz için kuruldu. Panelin parolasını görüşmede veriyoruz — isteyin, ekranda birlikte bir ürün adı değiştirelim.

Ekranda nasıl duruyor

Aşağıdakiler demonun kendi sayfalarından alındı; kurgu görsel değil.

Sakin bir ilk ekran: solda büro adı ve tek cümlelik tanım, sağda geniş bir iç mekân fotoğrafı; altta proje kartları ve her kartın köşesinde yıl ile durum rozeti.
Hero sessiz kaldı, proje kartlarına durum rozeti eklendi.
Villa projesi sayfası: üstte geniş dış cephe fotoğrafı, altında yıl 2026, alan 310 m², durum uygulama aşamasında satırlarını taşıyan tablo ve kapsam bilgisi.
Devam eden proje bitmiş gibi gösterilmiyor; durum tabloda yazılı.

Bir mimarlık sitesinde ne olmalı

Sektörü tanımayan bir ajans bunları sormaz; sorulmayınca da siteye girmez.

Proje kartında yıl, alan ve durum

Üç satır, ve bu üç satır portfolyonun tamamının okunabilirliğini değiştiriyor. Devam eden işi bitmiş gibi göstermeyen bir galeri, işverende ilk güveni kuran şey.

Aşamaları ve süreleri yazan sayfa

Avan proje, kesin proje, uygulama projesi, şantiye takibi. Her birinin ne olduğu ve kaç hafta sürdüğü. Bu sayfa telefonda her hafta tekrarladığınız açıklamanın yerine geçiyor.

Bedelin neye göre çıktığı

Rakam değil yöntem: mimari projede inşaat alanı, iç mimaride kapsam maddeleri. Fiyat yazmadan da 'bu büro nasıl hesaplıyor' sorusuna cevap vermek mümkün.

Ekip kartları

Hangi projeyi kim yürütüyor. Üç kişilik bir büroda işverenin ilk sorusu 'benim işime kim bakacak' oluyor ve fotoğraflı bir galeri bunu cevaplamıyor.

Büyük fotoğraf, hafif sayfa

Bu sektörde fotoğraf küçültülemez ama sayfa da yavaşlayamaz. Görseller yayın öncesi iki biçimde üretiliyor; telefonda ilk boyama ölçülen sürede kalıyor.

Neyi yapmadığınızı söyleyen satır

İnşaatı üstlenip üstlenmediğiniz, yapı denetimle ilişkiniz, hangi ilde iş aldığınız. Kapsam dışını yazmak, boşa geçen görüşme sayısını düşürüyor.

Müşteriniz siteye girer girmez ne arıyor

Üçü de demonun ilk ekranında cevaplanıyor. Cevap sayfanın dibinde kalırsa ziyaretçi telefonu eline alıyor ya da çıkıyor.

  1. Bu proje ne zaman yapıldı, bitti mi

    Portfolyoya bakan işveren bunu soruyor ve çoğu sitede cevap yok. Yıl yazmayan bir galeri, on yıl önceki işle geçen ay biteni aynı kefeye koyuyor; 'durum' yazmayan bir galeri de render'la bitmiş yapıyı ayırt edilemez hale getiriyor. Örnek sitede her projenin tablosunda yıl, alan ve durum var; uygulama aşamasındaki proje öyle etiketli duruyor.

  2. Ne kadar sürer, ruhsatı siz mi alıyorsunuz

    İlk telefonun ikinci sorusu bu. Örnek sitede aşama aşama gerçekçi aralıklar yazılı: avan proje dört altı hafta, kesin proje üç dört hafta, uygulama projesi dört altı hafta. Belediyedeki sürenin taahhüt edilemeyeceği de yazılı, çünkü edilemez. Süre vermeyen bir büro belirsiz görünüyor, kesin tarih veren büro ise tutamayacağı bir söz vermiş oluyor.

  3. Benim işime bakıyor musunuz

    Konut isteyen kişi mağaza projeleriyle dolu bir portfolyoda kendini bulamıyor. Örnek sitede projeler konut, ofis ve perakende olarak ayrışıyor ve her birinin kapsamı tabloda yazılı: yalnız proje mi, uygulama takibi dahil mi. Bir de tersini yazmak işe yarıyor: inşaatı üstlenmediğini, yapı denetimin ayrı bir kurum olduğunu söylemek, yanlış beklentiyle gelen görüşmeyi baştan eliyor.

Siteyi kendiniz yönetiyorsunuz

Aşağıdakiler demonun kendi panelinden alındı. Hazır site satan sağlayıcıların çoğu panelden söz ediyor ama ekranını göstermiyor.

Örnek Mimarlık panelinde proje listesi: konut projesi, ofis iç mimarisi, mağaza tasarımı ve villa projesi satırları; her birinin yanında yıl ve yayında kutusu.
Yeni proje eklemek ya da durumu güncellemek panelden.
Villa projesi kaydının formu: ad, özet, gövde metni ve teknik tablo satırları; yıl, alan ve durum alanları doldurulmuş halde görünüyor.
Proje uygulama aşamasından tamamlandıya geçtiğinde tek satır değişiyor.

Panel demoda açık. Adresi /demo/mimarlik/panel; parolayı görüşmede veriyoruz. İstediğiniz kadar karıştırabilirsiniz, panelin altındaki "demoyu sıfırla" düğmesi her şeyi eski hâline döndürüyor.

Bu sitede neler var

Hepsi demoda çalışıyor. Yazmadığımız şey yok demektir.

Yönetim paneli

  • Ürün ve hizmet

    Kalem ekleyip çıkarıyor, adını ve açıklamasını değiştiriyor, sırasını siz belirliyorsunuz.

  • Teknik tablo

    Ürün sayfasındaki ölçü ve süre satırları panelden yazılıyor: solda ad, sağda değer.

  • İçerik sayfaları

    Hakkımızda, süreç, sertifikalar. Yeni sayfa açmak için bizi aramanız gerekmiyor.

  • Haber ve yazı bölümü

    Panelden yazı ekleyip yayınlıyorsunuz: başlık, özet, gövde ve tarih. Yazı aynı anda sitede ve ana sayfadaki son yazılar şeridinde beliriyor.

  • Rakam şeridi

    Ana sayfadaki dört rakam (kuruluş yılı, teslim süresi, kapasite) panelden güncelleniyor.

  • Gelen talepler

    Formdan gelen her talep panelde: ad, telefon, e-posta ve yazdığı mesajla.

  • Yedek indirme

    Sizin sürümünüzde bir düğme bütün içeriği JSON dosyası olarak indiriyor.

  • Parola korumalı

    Panel ayrı bir girişin arkasında; ziyaretçi panelin varlığını görmüyor.

Arama motoru tarafı

  • Sayfa başına tek H1

    Her sayfanın tek ana başlığı var. Eski sitelerde en sık bulduğumuz hata bu.

  • Başlık ve açıklama

    Arama sonucunda görünen iki satır her sayfa için ayrı yazılıyor.

  • Sektör şeması

    İşin türünü söyleyen yapısal veri gömülü: nakliyatta MovingCompany, klinikte Dentist.

  • Soru–cevap işaretlemesi

    Sık sorulanlar FAQPage biçiminde işaretli; sonuçta açılır cevap olarak çıkabiliyor.

  • Site haritası ve robots

    Panelden eklediğiniz ürün haritaya kendiliğinden giriyor, kaldırdığınız çıkıyor.

  • Görseller AVIF ve WebP

    Fotoğraflar yayın öncesi iki biçimde üretiliyor; tarayıcı desteklediğini indiriyor.

  • Telefonda açılış hızı

    Yavaş 4G'de ölçülen LCP 1,6 saniye (Google'ın eşiği 2,5) ve sayfa inerken zıplamıyor.

Formlar ve iletişim

  • Teklif formu

    Gönderilen talep veritabanına yazılıyor ve panelde görünüyor. Süs değil.

  • WhatsApp ve arama

    İkisi de hazır mesajla ve tek dokunuşla açılıyor; numara kopyalanmıyor.

  • Bot koruması

    Forma gizli bir tuzak alanı gömülü. İstenirse doğrulama kutusu da ekleniyor.

Telefon ekranı

  • Önce telefon

    Sayfalar dar ekrana göre kuruldu, masaüstü düzeni onun üstüne bindi.

  • Yapışık alt çubuk

    Dar ekranda altta Ara ve WhatsApp düğmeleri; kaydırma nereye giderse gitsin orada.

Dil ve barındırma

  • Sitenin dili

    Demolar ve size kurulan sürüm Türkçe. İngilizce, Arapça, Almanca, Rusça ve Fransızca altyapısı çalışıyor; kurulumu ek hizmet olarak fiyatlanıyor.

  • Nerede duracak

    Kendi sunucunuza da kurulur bizimkine de (Node 22 ve MariaDB). Kendi klasörü ve veritabanı olduğu için taşınabiliyor.

Mimarlık tarafında ayrıca

  • Proje tablosu

    Yıl, alan, durum ve kapsam satırları her proje sayfasında; panelden siz yazıyor ve durumu tek tıkla güncelliyorsunuz.

  • Proje günlüğü

    Şantiye notu ve malzeme kararları için ayrı bir yazı bölümü; sitenin zaman içinde yeni adres kazandığı yer burası.

Sık sorulanlar

Render kullanabilir miyiz
Kullanabilirsiniz, ama fotoğraftan ayırt edilebilir olması gerekiyor. Uygulanmamış bir projenin görselini bitmiş yapı gibi sunmak, işveren şantiyeye gelip başka bir şey gördüğünde açıklaması zor bir duruma dönüşüyor. Örnek sitede durum alanı tam olarak bunun için var: 'uygulama aşamasında' yazan bir projede görselin render olması sorun değil.
Yarışma derecelerimizi yazalım mı
Gerçekten aldıysanız elbette; adıyla, yılıyla ve veren kurumla yazın. Demoda böyle bir satır yok, çünkü büro hayalî ve olmayan bir dereceyi örnek olarak göstermek istemedik. Bu tercihi kendi sitenize de öneriyoruz: doğrulanamayan bir ibare, doğrulanabilir on ibarenin değerini düşürüyor.
İngilizce de olsun mu
Yurt dışı iş alıyorsanız ya da yabancı işveren çalışıyorsanız mantıklı. Altyapı hazır; İngilizce, Arapça, Almanca, Rusça ve Fransızca kurulabiliyor ve ek hizmet olarak fiyatlanıyor. Yalnız çeviriyi bizim üretmemizi beklemeyin, proje metinleri sizin dilinizden çıkmalı; kötü çeviri bir mimarlık sitesinde fotoğraftan daha çok zarar veriyor.
Portfolyoyu biz mi girmeliyiz
Panelden siz giriyorsunuz: proje adı, metin, tablo satırları ve fotoğraflar. İlk dört beş projeyi birlikte yapıyoruz, gerisi alışkanlık. Yeni bir proje eklediğinizde site haritasına kendiliğinden giriyor, kaldırdığınızda çıkıyor.
Instagram'ımız var, site gerekli mi
İkisi farklı iş yapıyor. Instagram yeni işi gösteriyor, site arşivi tutuyor ve aramada karşılığı oluyor. Bir işveren üç yıl önceki bir projeyi Instagram'da bulamıyor; siteye giren kişi ise durumuna, alanına ve yılına bakarak inceleyebiliyor. Site paylaşımlarınızı da besliyor: bağlantı verdiğiniz yer kendi sayfanız oluyor.
Projelerimizin çoğu gizli, yayımlayamıyoruz
İşveren izni olmayan projeyi yayımlamayın. O durumda sayfanın ağırlığı süreç tarafına kayıyor: aşamalar, kapsam, ekip ve çalışma şekli. Yayımlanabilir üç dört proje ile iyi yazılmış bir süreç sayfası, izinsiz yirmi projeden daha çok iş getiriyor.

Sonraki adım

Demodaki villa projesi sayfasını açın ve tablonun üç satırına bakın: yıl, alan, durum. Kendi portfolyonuzda bu üçü yazılı mı? Sonra proje süreci sayfasını okuyup kendi aşamalarınızla karşılaştırın; mimarlıkta siteyi işe yarar kılan şey fotoğrafın büyüklüğü değil, altındaki satırlar.

Projenizi konuşalım

Ne istediğinizi kısaca yazın; kapsamı, süreyi ve bedeli içeren bir teklifle dönelim.