Mimarlık ofisi web sitesi

Mimarlık ofisi web sitesi, ofisin işini görsel ve metinle anlatan, aranınca bulunan ve yeni işi davet eden bir portfolyodur. İyi bir mimar web sitesinde üç şey birlikte bulunur: projeyi künyesiyle ve süreciyle anlatan sayfalar, büyük ama hızlı açılan görseller ve ofisin kim olduğunu söyleyen sakin bir dil. Biz bunları hazır tema kullanmadan, ofisin kendi tasarım diliyle kuruyoruz.

Bu sayfada mimarlık ve iç mimarlık ofisleri için nasıl çalıştığımızı anlatıyoruz. Anlattıklarımızın çoğunu hayalî bir stüdyo için kurduğumuz örnek mimarlık sitesinde canlı olarak görebilirsiniz. Genel yaklaşımımız ve diğer sektörler için web tasarım hizmeti sayfasına bakabilirsiniz.

Mimarlık ofisi sitesinde olması gereken sayfalar

Bir mimari portfolyo sitesi, sayfa sayısıyla değil, her sayfanın bir soruyu yanıtlamasıyla değer kazanır. Ziyaretçi genellikle şunları sorar: Ne yapmışlar? Nasıl çalışıyorlar? Kimler? Nasıl ulaşırım?

• Ana sayfa. Ofisin yaklaşımını tek paragrafta söyleyen bir giriş ve son dönem işlerinden bir seçki.
• Projeler. Kategoriye göre süzülen bir liste ve her proje için ayrı bir sayfa. Sitenin ağırlık merkezi burasıdır.
• Hizmetler ve süreç. Mimari tasarım, iç mimarlık, restorasyon, uygulama danışmanlığı gibi disiplinler ve bir işin tanışmadan teslime nasıl ilerlediği.
• Stüdyo ve ekip. Kurucuların özgeçmişi, çalışma alanları, ofisin önem verdiği ilkeler.
• Yarışmalar, yayınlar ve basın. Ödüller, sergiler, dergi yazıları, konuşmalar.
• Yazılar. Ofisin bilgisini paylaştığı kısa metinler. Aramada bulunmanın en sağlam yolu budur.
• İletişim. Adres, harita, çalışma saatleri ve kısa bir proje talep formu.

Örnek sitemizde bu yapının karşılıkları var: proje arşivi, hizmetler ve süreç, stüdyo ve ekip, galeri, yazılar ve iletişim. Kurumsal sitelerde genel olarak hangi sayfaların bulunması gerektiğini kurumsal web sitesinde olması gereken sayfalar yazımızda ayrıca ele aldık.

Proje sayfası nasıl anlatılır: görsel, künye, süreç

Bir proje sayfası, güzel fotoğrafların art arda dizildiği bir albüm değildir. Ziyaretçi yalnız sonucu değil, kararı görmek ister. Bu yüzden her proje sayfasını aynı omurgayla kuruyoruz.

Kapak ve künye

Sayfa, projeyi en açık anlatan tek bir kapak görseliyle açılır. Hemen ardından bir künye gelir. Künye, projenin kimlik kartıdır ve bir tabloda durur:

Künye alanı	Örnek
Tür	Konut, ofis, restorasyon, iç mimari
Yıl	Tamamlanma ya da tasarım yılı
Yer	İlçe ve il
Alan	Metrekare
Kapsam	Mimari proje, iç mimari, uygulama danışmanlığı
Durum	Tamamlandı, uygulamada, projelendiriliyor

Künyeyi tablo olarak kurmak hem okuru hem arama motorunu rahatlatır. Bilgiler her projede aynı yerde durur, ekran okuyucular tabloyu başlıklarıyla okur.

Bağlam ve tasarım yaklaşımı

Künyeden sonra iki kısa bölüm gelir. Bağlam, sorunu anlatır: arsa, mevcut yapı, işverenin ihtiyacı. Tasarım yaklaşımı, verilen kararları anlatır: eğime gömülen bir kütle, kaldırılan bölme duvarlar, korunan eski bir bağ duvarı. Malzeme, ışık ve takvim gibi notlar kısa maddeler olarak eklenir.

Bağlık Evi sayfası bu kurguyu bir konut üzerinden, Taş Konak Restorasyonu sayfası ise rölöve, restitüsyon ve koruma kurulu onayı gibi adımları olan bir restorasyon üzerinden gösteriyor.

Görseller

Görseller metnin arasına, anlattıkları kararın yanına yerleşir. Her görselin bir alt yazısı vardır; görme engelli ziyaretçiler için ayrıca açıklayıcı bir alternatif metni olur. Görsele tıklanınca büyük boyutu açılır, klavyeyle de gezilebilir. Proje anlatımını ayrıntılı ele aldığımız mimarlık ofisi web sitesinde proje anlatımı yazısında örnek metinler de bulacaksınız.

Büyük fotoğraf ve hızlı sayfa bir arada

Mimarlık sitelerinin en sık yaşadığı sorun, büyük görsellerin sayfayı ağırlaştırmasıdır. Telefonda açılması uzun süren bir portfolyo, en güzel projeyi bile göstermeden kapanır. Görselden ödün vermeden hızı korumak için birkaç tekniği birlikte kullanıyoruz.

• Modern görsel biçimleri. Fotoğrafları JPEG yerine WebP gibi modern biçimlere çeviriyoruz. Aynı görünüm çok daha küçük dosyayla elde edilir.
• Duyarlı görseller. Her görseli birkaç farklı genişlikte üretiyoruz. Telefon küçük olanı, geniş ekran büyük olanı indirir. Tarayıcı hangisinin gerektiğine kendisi karar verir.
• Tembel yükleme. İngilizcede lazy loading denen bu yöntemde, ekranın altında kalan görseller ziyaretçi o noktaya yaklaşınca yüklenir. İlk açılışta yalnız kapak görseli gelir.
• Kayma olmayan düzen. Her görselin genişliği ve yüksekliği önceden bellidir. Görsel yüklenirken sayfa zıplamaz, okunan satır kaçmaz.
• Büyük boyut yalnız istenince. Tam ekran görsel, ziyaretçi bir fotoğrafı büyütmek istediğinde yüklenir.

Bu işin size düşen tarafı basit: fotoğrafları en yüksek çözünürlükte, sıkıştırılmamış olarak bize iletin. Küçültme, kırpma ve biçim dönüştürmeyi yapım sırasında biz yapıyoruz. Aynı projenin fotoğraflarında renk ve ışık tutarlı olmalı; gerekiyorsa seçki ve sıralama için birlikte çalışıyoruz. Render, çizim ve maket fotoğraflarını da aynı düzende ekleyebilirsiniz. Plan ve kesit gibi çizimleri, büyütüldüğünde çizgileri bulanıklaşmasın diye uygun biçimde hazırlıyoruz. Görsel sayısı arttıkça site ağırlaşmaz. Her sayfa yalnız kendi görsellerini, yalnız gerektiği kadar yükler.

Örnek mimarlık sitemiz, diğer örnek sitelerimizle birlikte mobil Lighthouse ölçümünde 96–100 performans, 100 erişilebilirlik ve 100 en iyi pratikler puanı alıyor; sayfa kayması ölçüsü (CLS) 0,05’in altında. Bu sonuçları özel kodlanmış, statik sayfalarla elde ediyoruz. Neden hazır tema ya da WordPress yerine bu yolu önerdiğimizi WordPress mi, özel kodlanmış site mi yazısında anlattık; WordPress’in doğru seçim olduğu durumları da orada bulacaksınız.

Ofisin yaklaşımı ve ekip

Mimarlıkta iş, çoğu zaman bir kişiye ya da küçük bir ekibe duyulan güvenle başlar. Bu yüzden ekip sayfası, bir isim listesinden fazlası olmalı. Her kurucu için kısa bir özgeçmiş, çalıştığı alanlar ve gerçek bir portre yeterlidir. Stok görsel kullanmıyoruz; elinizde fotoğraf yoksa çekim için yönlendirme yapıyoruz.

Ofisin yaklaşımını anlatan metin de bu sayfada yer alır. “Az malzeme, doğru ışık, uzun ömürlü detay” gibi tek bir cümle, uzun bir tanıtım yazısından daha çok şey söyler. Çalışma süreci ayrıca anlatılır: tanışma ve yer ziyareti, ihtiyaç programı, konsept ve avan proje, uygulama projesi, şantiye takibi, teslim. Örnek sitemizin hizmetler sayfası bu süreci altı adımda gösteriyor. İşveren ne zaman ne bekleyeceğini bildiğinde ilk görüşmeye daha hazırlıklı gelir.

İç mimar web sitesi kuruyorsak vurguyu biraz kaydırıyoruz. İç mimarlıkta malzeme, renk seçkisi, sabit mobilya ve aydınlatma detayları öne çıkar. Bu yüzden yakın plan malzeme görsellerine ve önce plan, sonra mekân akışına daha çok yer açıyoruz.

Yarışmalar, yayınlar ve basın

Yarışma ödülleri, sergiler ve yayınlar bir ofisin birikimini gösterir. Ama dağınık durduklarında kaybolurlar. Bunları tek bir arşivde, yıllara göre sıralı bir liste olarak topluyoruz.

• Yarışmalar. Yarışma adı, yıl, sonuç (ödül, mansiyon, satın alma) ve varsa proje sayfasına bağlantı.
• Yayınlar. Dergi, kitap ya da çevrimiçi yayın adı, tarih ve bağlantı.
• Konuşmalar ve sergiler. Etkinlik adı, yer ve tarih.

Bu arşivi kayıtlar hâlinde tutuyoruz. Yeni bir ödül ya da yayın eklendiğinde ana sayfadaki seçki ve ilgili proje sayfası kendiliğinden güncellenir. Örnek sitemizdeki proje arşivi aynı mantıkla çalışıyor: öne çıkan projelerin altında yıl, kategori, yer ve durum bilgisiyle bir arşiv tablosu var. Kategori süzgeci seçildiğinde adres de değişiyor; “yalnız restorasyon projeleri” görünümünü bir bağlantıyla paylaşabiliyorsunuz.

Yayınları kendi sitenizde listelemenin bir yararı daha var: sizden söz eden sitelere bağlantı vermek ve onların size verdiği bağlantıyı karşılamak, ofisinizin adını arama motorları için de daha tanınır kılar.

İki dilli portfolyo

Yurt dışı yarışmalara katılan, yabancı yatırımcıyla çalışan ya da yurt dışından iş başvurusu alan ofisler için İngilizce bir sürüm gerekir. İki dilli portfolyoyu baştan bu ihtiyaca göre kuruyoruz.

• Her dilin kendi adresi olur: Türkçe sayfalar kökte, İngilizce sayfalar ayrı bir yolda.
• Arama motorlarına hangi sayfanın hangi dildeki karşılığı olduğu bildirilir. Böylece İngilizce arayan, İngilizce sayfaya ulaşır.
• Künye alanları ve proje kayıtları iki dilde aynı yapıdadır. Bir projeyi eklerken iki dilin metnini yan yana girersiniz.
• Çeviriyi makineye bırakmıyoruz. Mimari terimlerin doğru karşılığı, metnin tonu kadar önemlidir.

Bugün yalnız Türkçe yayımlamak istiyorsanız siteyi ikinci dile hazır kuruyoruz. İngilizce sürümü ileride, yeniden yapım gerekmeden ekleyebilirsiniz.

Projeleri kendiniz ekleyin, site düzenini korusun

Bir portfolyo, yeni projeler eklendikçe yaşar. Ama her ekleme ayrı bir tasarım işine dönüşürse site kısa sürede dağılır. Bunu önlemek için projeyi sabit alanlardan oluşan bir kayıt olarak tanımlıyoruz: başlık, kategori, künye bilgileri, bağlam, yaklaşım, notlar ve görseller.

Yeni bir proje eklemek bu alanları doldurmaktan ibarettir. Sayfa düzeni, görsellerin boyutlandırılması, galeriye ve arşive eklenmesi kendiliğinden olur. İhtiyaca göre içerik dosyaları ya da basit bir yönetim akışı kuruyoruz. Düzenli güncellemeyle uğraşmak istemezseniz, yayından sonra aylık bakım kapsamında projeleri biz ekliyoruz.

Kaynak kodu istenirse devrediyoruz. Siteniz bir platformun aboneliğine bağlı kalmaz.

Aramada bulunmak ve süreç

Mimar web sitesine gelen ziyaretçi çoğu zaman iki yoldan gelir: ofisin adını arayarak ya da “restorasyon mimarı”, “iç mimar ofis tasarımı” gibi bir ihtiyacı arayarak. İlki için temiz bir teknik temel, ikincisi için içerik gerekir.

• Her projenin kendi sayfası. Tek bir galeri sayfası yerine, aranabilir başlığı ve açıklaması olan ayrı proje sayfaları.
• Yapısal veri. Ofis bilgileri, adres ve projeler arama motorlarının okuyabileceği biçimde işaretlenir.
• Yazılar. Ofisin bilgisini paylaştığı kısa yazılar, ihtiyacı arayan kişiyi size getirir. Örnek sitede taş ev restorasyonu ve küçük ofislerde ferahlık üzerine yazılar bulunuyor.
• Erişilebilirlik. WCAG 2.2 AA seviyesini hedefliyoruz: klavyeyle gezinme, yeterli kontrast, açıklayıcı görsel metinleri. Ayrıntısı erişilebilir web sitesi sayfasında.

Mevcut bir siteniz varsa, yeni siteye geçerken eski proje adreslerini tek tek yeni karşılıklarına yönlendiriyoruz. Nasıl yaptığımızı web sitesi yenilerken SEO yazısında anlattık.

Süreç, bir keşif görüşmesiyle başlar. Uzaktan ya da yüz yüze, Türkiye’nin her yerinden ofislerle çalışıyoruz. Ardından site haritası ve tasarım gelir, onayınızdan sonra kod yazılır. Süreyi en çok proje metinlerinin ve görsellerin hazır olup olmaması belirler. Neye göre değiştiğini web sitesi kaç günde yapılır yazısında açıkladık.

Başka sektörlerde nasıl çalıştığımızı görmek isterseniz iki komşu sayfa var. İç mekânını tasarladığınız bir kafe ya da restoran için restoran ve kafe web sitesi, konut projesi geliştiren işverenleriniz için emlak ve inşaat web sitesi.

Örnek siteyi gezdikten sonra kendi ofisinize göre bir site istemek için teklif sihirbazını kullanabilirsiniz. Mimarlık sektörü seçili gelir; istediğiniz sayfaları ve özellikleri işaretleyip talebinizi gönderirsiniz. En geç iki iş günü içinde dönüyoruz. Önce konuşmak isterseniz iletişim sayfası da açık.