Portfolyo Sayfası ve Galeri Nasıl Tasarlanır? Uygulamalı Rehber

Biz Talha Aslan ve ekibi olarak sahada çok sayıda portfolyo sayfası inceledik. En sık gördüğümüz sorun şudur: işler güzeldir ama sayfa onları anlatmaz. Yani yüzlerce fotoğraf yan yana durur ama hiçbirinin bağlamı yoktur. Bu rehberde proje kartlarından filtrelemeye, vaka anlatımından görsel optimizasyona, lightbox erişilebilirliğinden müşteri iznine kadar bütün adımları uygulamalı biçimde ele alıyoruz.

Portfolyo sayfası hangi işi görmeli?

Bir portfolyo sayfası önce güven üretir. Ziyaretçi "bu ekip benim işime benzer bir şey yaptı mı?" sorusuna cevap arar. Dolayısıyla sayfanın görevi işleri sergilemekten çok, doğru işi doğru kişiye göstermektir.

İkinci görev karar vermeyi kolaylaştırmaktır. Örneğin bir mimarlık ofisinin sayfasına gelen kişi konut projesi arıyorsa, ofis binalarıyla vakit kaybetmemelidir. Üçüncü görev ise bir sonraki adımı açık etmektir: teklif formu, telefon ya da randevu bağlantısı göz önünde olmalıdır.

Bu üç görevi şöyle özetleyebiliriz:

• Güven: gerçek işler, açık bağlam ve tutarlı kalite.
• Seçim kolaylığı: kategori, sektör ya da hizmet türüne göre hızlı daraltma.
• Yönlendirme: her projenin sonunda net bir iletişim çağrısı.

Bu nedenle tasarıma görsellerden değil, bu üç sorudan başlamanızı öneriyoruz. Hangi ziyaretçi geliyor, ne arıyor, sayfadan çıkınca ne yapmalı? Cevaplar netleştiğinde düzen, filtre ve kart yapısı kendiliğinden ortaya çıkar. Ayrıca sayfanın genel web tasarım stratejisiyle uyumlu olması gerekir; bu konuda dönüşüm odaklı web tasarım rehberimiz iyi bir başlangıç noktasıdır.

Galeri ile vaka anlatımı arasındaki fark nedir?

Galeri, görselleri hızlıca taramak için kurulan görsel ağırlıklı bir alandır. Vaka anlatımı ise tek bir projenin hikâyesini anlatır: başlangıçtaki ihtiyaç, izlenen yol ve ortaya çıkan sonuç. İkisi aynı sayfada yaşayabilir ama aynı işi görmez.

Galeri, fotoğrafçı, iç mimar, düğün organizatörü ya da ürün üreticisi gibi işin kendisinin görsel olduğu alanlarda öne çıkar. Öte yandan danışmanlık, yazılım ya da mühendislik gibi alanlarda tek bir ekran görüntüsü çok az şey söyler. Orada ziyaretçinin asıl merak ettiği süreç ve sonuçtur.

Pratikte en sağlıklı kurgu iki katmanlıdır. Üst katmanda kart ızgarası ya da galeri yer alır ve ziyaretçi göz gezdirir. Alt katmanda her kart kendi vaka sayfasına götürür. Böylece hızlı tarama yapan kişi de ayrıntı isteyen kişi de aradığını bulur.

Örnek senaryo: bir mutfak dolabı üreticisi düşünün. Galeride yirmi farklı mutfak fotoğrafı yer alır. Ancak "dar alanda U mutfak" projesine tıklayan kişi, ölçüleri, malzeme seçimini ve kurulum süresini anlatan ayrı bir sayfaya gider. Galeri ilgiyi çeker, vaka sayfası ise ikna eder.

Hangi projeler portfolyoya girmeli?

Her işi koymak cazip gelir, ama kalabalık bir portfolyo seçici bir portfolyodan daha zayıf durur. Ziyaretçi en zayıf işinizi de görür ve kaliteyi ortalamaya göre yargılar. Bu yüzden seçim, tasarımın ilk ve en önemli adımıdır.

Seçim yaparken şu ölçütleri kullanmanızı öneriyoruz:

1. Satmak istediğiniz işe benziyor mu? Artık almadığınız türde işleri öne çıkarmayın.
2. Elinizde kaliteli görsel ya da belge var mı? Bulanık fotoğraf iyi bir işi bile gölgeler.
3. Paylaşma izniniz var mı? İzin konusunu ileride ayrıca ele alıyoruz.
4. Anlatacak bir hikâyesi var mı? Zorlu bir ihtiyaç ve net bir çözüm, sıradan bir işten daha değerlidir.
5. Güncel mi? Eski tarzı yansıtan işler yeni müşteriyi yanlış yönlendirir.

Ayrıca kategoriler arasında denge kurun. Örneğin hizmetlerinizden biri çok güçlü ama portfolyoda yalnızca bir örneği varsa, ziyaretçi o hizmeti ikincil sanır. Kısacası portfolyo, satış önceliklerinizin aynası olmalıdır.

Saha tecrübemize dayalı bir başlangıç önerisi şudur: her ana kategori için birkaç güçlü proje seçin, sonra zamanla ekleyin. Bu bir kural değil; asıl ölçüt, ziyaretçinin kaybolmadan karar verebilmesidir.

Proje kartında hangi bilgiler yer almalı?

Proje kartı, ızgaradaki her bir kutudur ve vaka sayfasının kapısıdır. Kart küçük olduğu için her öğe yer kazanmak zorundadır. Bu nedenle kartı bir afiş gibi değil, bir özet gibi düşünün.

Etkili bir kartta genellikle şu öğeler yer alır:

• Tek bir güçlü kapak görseli: projeyi en iyi temsil eden kare.
• Kısa ve anlamlı başlık: "Proje 12" değil, "Kadıköy'de 3+1 daire yenilemesi" gibi.
• Kategori ya da sektör etiketi: filtrelerle aynı adlandırma.
• Bir cümlelik özet: ihtiyaç ya da sonuç odaklı.
• Tıklanabilir alanın tamamı: yalnızca küçük bir "detay" yazısı değil.

Kart başlığının bağlantı metni olması erişilebilirlik açısından da önemlidir. Ekran okuyucu kullanan kişi bağlantı listesinde onlarca "Devamını oku" yerine anlamlı proje adları duyar. Ayrıca kartta görseli, başlığı ve etiketi ayrı ayrı bağlantı yapmak aynı adrese üç bağlantı üretir; bunun yerine tek bir bağlantı kullanın.

Kart boyutlarının tutarlı olması da gerekir. Farklı oranlarda kapaklar ızgarayı dağınık gösterir. Dolayısıyla kapak görsellerini baştan aynı en boy oranında kırpmak, sonradan uğraşmaktan çok daha kolaydır.

Hangi ızgara düzeni işinize uyar?

Portfolyo sayfasında üç yaygın düzen vardır: eşit ızgara, taş duvar (masonry) düzeni ve liste görünümü. Taş duvar, farklı yükseklikteki görsellerin boşluk bırakmadan üst üste dizildiği düzendir. Seçim, işinizin doğasına ve ziyaretçinin nasıl tarayacağına bağlıdır.

Tablo bir başlangıç noktasıdır, kesin bir kural değildir. Örneğin bir fotoğraf stüdyosu ana sayfada taş duvar düzenini, kategori sayfalarında ise eşit ızgarayı kullanabilir. Yani aynı sitede farklı sayfalar farklı düzenlerle çalışabilir; önemli olan her sayfanın kendi amacına hizmet etmesidir.

Taş duvar düzeninde dikkat edilmesi gereken bir nokta var. Ekrandaki sıra ile belgedeki sıra farklıysa, klavyeyle gezinen kişi odak noktasının ekranda zıpladığını görür. Bu nedenle sıralamanın hem görsel hem de belge düzeninde aynı mantığı izlemesini sağlayın.

Ayrıca görsel ağırlık dengesine bakın. Tek bir parlak fotoğraf bütün ızgarayı gölgede bırakabilir. Bu dengeyi kurmak için görsel ağırlık rehberimize göz atabilirsiniz.

Filtreleme ne zaman gerekir?

Filtreleme, proje sayısı arttığında ve ziyaretçilerin farklı şeyler aradığı durumlarda gerekir. Az sayıda proje varsa filtre çubuğu boş bir kalabalık yaratır. Öte yandan çok sayıda iş tek akışta dururken filtre yoksa ziyaretçi aradığını bulmadan sayfayı terk eder.

İyi bir filtre sistemi için şu ilkeleri öneriyoruz:

• Ziyaretçinin dilini kullanın: iç departman adları değil, müşterinin aradığı hizmet ya da sektör adları.
• Seçenek sayısını sınırlı tutun; çok sayıda filtre karar yorgunluğu yaratır.
• "Tümü" seçeneğini her zaman ekranda tutun.
• Seçili filtreyi görsel olarak belirgin yapın ve ekran okuyucuya da bildirin.
• Sonuç boşsa boş bir alan bırakmayın; diğer kategorilere yönlendiren bir mesaj yazın.

Erişilebilirlik tarafında filtre düğmeleri gerçek düğme olmalıdır. Seçili durumu aria-pressed gibi bir öznitelikle duyurmak, ekran okuyucu kullanıcısının hangi filtrenin açık olduğunu anlamasını sağlar. Ayrıca filtre değiştiğinde sonuç sayısını bir canlı bölge ile bildirmek ("6 proje var" gibi) yön kaybını önler.

E-ticarette ürün filtrelerinin satışa etkisi ayrı bir konu; bunun ayrıntıları için ürün filtreleme yazımıza bakabilirsiniz. Portfolyoda ise filtrenin amacı satın almadan çok güven inşa etmektir.

Filtre adresleri SEO'yu nasıl etkiler?

Filtrelerin adres çubuğuna nasıl yansıdığı, arama motorlarının sayfanızı nasıl gördüğünü belirler. Yalnızca JavaScript ile çalışan ve adresi değiştirmeyen filtreler kullanıcı için iyi olabilir. Ancak bu durumda "konut projeleri" gibi bir kategori kendi başına aranabilir bir sayfa olmaz.

Kategori, gerçekten aranan bir konuysa onu ayrı ve kalıcı bir adrese taşımayı düşünün. Örneğin "ofis iç mimarisi projeleri" araması değerliyse, bu kategori kendi başlığı, kısa açıklaması ve proje listesiyle bağımsız bir sayfa olabilir. Böylece hem ziyaretçi hem arama motoru o sayfayı doğrudan bulur.

Öte yandan sıralama, renk ya da yıl gibi çok sayıda küçük filtre kombinasyonu ayrı adres üretirse, neredeyse aynı içeriğe sahip yüzlerce sayfa oluşabilir. Bu da tarama bütçesini boşa harcar. Dolayısıyla yalnız anlamlı kategorilere kalıcı adres verin, ince filtreleri sayfa içi tutun.

Kısacası filtreler iki gruba ayrılmalıdır. Birinci grup aranan kategorilerdir ve kendi sayfasını hak eder. İkinci grup ise yalnızca kullanım kolaylığı sağlar ve dizine girmesi gerekmez. Bu ayrımı tasarım aşamasında yapmak, sonradan yönlendirme ve temizlik yükünü azaltır.

Vaka sayfasını hangi sırayla kurmalısınız?

Vaka sayfası, bir projenin baştan sona hikâyesidir ve portfolyonun asıl ikna gücü buradadır. Ziyaretçi bu sayfada "benim sorunum da buna benziyor" demelidir. Bu nedenle sayfa bir fotoğraf albümü değil, okunabilir bir anlatı olmalıdır.

Biz vaka sayfalarında genellikle şu sırayı kullanıyoruz:

1. Özet kutusu: müşteri türü, sektör, hizmet kapsamı ve süre.
2. İhtiyaç: proje başlamadan önceki durum ve hedef.
3. Yaklaşım: hangi seçenekleri değerlendirdiniz, neden bu yolu seçtiniz?
4. Süreç görselleri: eskiz, ara aşama ve son hal.
5. Sonuç: ölçülebilir veri varsa kaynağıyla, yoksa nitel gözlemle.
6. Müşteri görüşü: yalnızca izinli ve gerçek bir alıntı.
7. Sonraki adım: benzer bir proje için iletişim çağrısı.

Sonuç bölümünde dürüst olun. Uydurma yüzde, doğrulanamayan başarı rakamı ya da "satışları uçurduk" gibi kaynaksız iddialar güveni yıkar. Ölçülebilir bir veri yoksa, teslim edilen işin kapsamını ve müşterinin geri bildirimini anlatmak yeterlidir.

Bu yapıyı sitenizde biz kurarız: proje kartlarından vaka şablonuna kadar bütün kurguyu web tasarım hizmetimiz kapsamında planlıyor, içerik yerleşimini sizinle birlikte netleştiriyoruz. Ayrıca müşteri logolarını sergilemek isterseniz referans şeridi rehberimiz vaka sayfalarıyla birlikte iyi çalışır.

Portfolyo görsellerini nasıl hazırlamalısınız?

Portfolyo görselleri sayfanın en ağır yüküdür. Yüksek çözünürlüklü fotoğraflar olduğu gibi yüklenirse, sayfa yavaşlar ve mobil ziyaretçi bekler. Bu nedenle her görseli yüklemeden önce hazırlamak gerekir.

Hazırlık sürecinde şu adımları izlemenizi öneriyoruz:

1. Görseli ekrandaki en büyük kullanım boyutuna göre küçültün; dar bir kart için devasa dosya tutmayın.
2. Modern format kullanın. Google, WebP ve AVIF dahil yaygın formatları destekler.
3. Kart için küçük, lightbox için büyük ayrı sürümler hazırlayın.
4. Dosya adını anlamlı yazın: rakam dizisi yerine projeyi anlatan kısa bir ad.
5. Gereksiz meta verileri, özellikle konum bilgisini temizleyin.

Boyut küçültmek ve format çevirmek için resim küçültme aracımızı ve JPG WebP çevirme aracımızı kullanabilirsiniz. Ayrıca farklı ekran genişlikleri için birden fazla sürüm sunmak, srcset özniteliğiyle mümkündür; tarayıcı uygun olanı kendisi seçer.

Google'ın görsel SEO en iyi uygulamaları sayfası da duyarlı görseller için picture öğesi ya da srcset kullanmayı ve her zaman bir yedek src adresi bırakmayı öneriyor. Genel görsel optimizasyonu için görsel optimizasyonu rehberimiz daha ayrıntılı bilgi veriyor.

Tembel yüklemeyi ve düzen kaymasını nasıl yönetirsiniz?

Tembel yükleme (lazy load), ekranda henüz görünmeyen görsellerin ancak ziyaretçi yaklaştığında indirilmesidir. Uzun bir galeride bu yöntem ilk açılışı ciddi biçimde hafifletir. Ancak yanlış uygulandığında tam tersi etki yaratır.

web.dev'in tarayıcı düzeyinde tembel yükleme makalesi açık bir uyarı yapıyor: tembel yüklemeyi yalnızca ilk görünüm dışındaki görsellerde kullanın. Yani sayfa açıldığında görünen kapak görseli ya da ilk sıradaki kartlar normal yüklenmelidir. Aksi halde en büyük içerik öğesinin (LCP) görünmesi gecikir.

İkinci kritik nokta düzen kaymasıdır. Görsel yüklenmeden önce yeri ayrılmazsa, fotoğraf geldiğinde altındaki her şeyi aşağı iter. Bu nedenle aynı kaynak, bütün görsellere genişlik ve yükseklik değeri vermeyi öneriyor; böylece tarayıcı yeri önceden ayırır.

Bu iki konu Core Web Vitals ölçümlerini doğrudan etkiler. Ayrıntılar için tembel yükleme yazımıza ve CLS iyileştirme rehberimize bakabilirsiniz. Kısacası galerinin ilk satırını hızlı yükleyin, gerisini erteleyin ve her görselin kutusunu baştan çizin.

Erişilebilir bir lightbox nasıl çalışmalı?

Lightbox, bir görsele tıklanınca onu sayfanın üzerinde büyük gösteren katmandır. Teknik olarak bir modal iletişim kutusudur, dolayısıyla modal kurallarına uymalıdır. Klavyeyle açılamayan ya da kapatılamayan bir lightbox, ziyaretçiyi sayfada hapseder.

W3C'nin modal iletişim kutusu deseni şu davranışları tanımlıyor:

1. Açıldığında odak, katmanın içindeki bir öğeye geçer.
2. Tab ve Shift ile Tab, odağı katmanın içinde döndürür; odak dışarı kaçmaz.
3. Escape tuşu katmanı kapatır.
4. Kapandığında odak, katmanı açan öğeye geri döner.
5. Ekranda belirgin bir kapatma düğmesi yer alır.
6. Katmanın erişilebilir bir adı olur, örneğin ekrandaki bir başlığa bağlanarak.

Modern tarayıcılarda yerleşik dialog öğesi bu işin önemli bir kısmını kendisi karşılar. Modal olarak açıldığında arka plandaki içerik etkisiz hale gelir ve Escape tuşu varsayılan olarak çalışır. Böylece sıfırdan odak tuzağı yazmak yerine sağlam bir temelden başlarsınız.

Ayrıca önceki ve sonraki görsel düğmelerinin anlamlı adı olmalıdır. Yalnızca ok simgesi olan bir düğme ekran okuyucuda anlamsız kalır. Ek olarak "3 / 12" gibi bir konum bilgisi, ziyaretçinin galeride nerede olduğunu anlamasını kolaylaştırır.

Galeride alt metni nasıl yazarsınız?

Alt metin, görseli göremeyen kişiye görselin işlevini aktaran kısa açıklamadır. WCAG'nin metin dışı içerik ölçütü, anlam taşıyan her görselin eşdeğer bir metin alternatifi olmasını ister. Süs amaçlı görsellerin ise yardımcı teknolojiler tarafından atlanabilmesi gerekir.

Portfolyoda alt metin yazarken şu yaklaşımı öneriyoruz:

• Görselin ne gösterdiğini değil, o bağlamda ne anlattığını yazın.
• Proje adını ve öne çıkan detayı ekleyin: "Ahşap kaplamalı açık mutfak, ada tezgâh ve asma lambalar" gibi.
• Aynı projedeki görsellere aynı metni kopyalamayın; her kare neyi farklı gösteriyorsa onu söyleyin.
• Anahtar kelime doldurmaktan kaçının.
• Kart başlığı zaten görseli anlatıyorsa tekrar etmeyin.

Son madde önemlidir. Kartta görsel ve başlık aynı bağlantının içindeyse, alt metin başlığı tekrarlarsa ekran okuyucu aynı şeyi iki kez okur. Bu durumda görselin yalnızca süs işlevi olup olmadığını düşünün.

Alt metnin genel kuralları için alt metin rehberimiz örneklerle anlatıyor. Ayrıca sitenin bütününde erişilebilirlik standartlarını görmek isterseniz WCAG standartları yazımız yol gösterir.

Mobilde portfolyo sayfası için hangi kararlar önemli?

Mobilde portfolyo sayfası çoğu zaman tek sütuna düşer ve bu doğal bir tercihtir. Ancak masaüstündeki dört sütunlu ızgarayı küçültüp ikiye indirmek, küçük ve zor okunan kartlar üretebilir. Bu nedenle mobil düzeni ayrı bir tasarım kararı olarak ele alın.

Mobilde dikkat edilmesi gereken başlıca konular şunlardır. İlk olarak filtre çubuğu yatay kaydırılabilir olabilir ama seçili filtre ekranda kalmalıdır. İkinci olarak dokunma alanları parmakla rahatça dokunabileceğiniz büyüklükte olmalıdır. Üçüncü olarak lightbox içinde kaydırma hareketi ile önceki ve sonraki görsele geçiş, düğmelere ek olarak sunulabilir.

Öte yandan mobilde yüklenen görsel boyutu masaüstüyle aynı olmamalıdır. Dar ekrana masaüstü çözünürlüğünde bir fotoğraf göndermek, veri ve süre israfıdır. Burada srcset ve sizes öznitelikleri devreye girer.

Örnek senaryo: bir iç mimarlık ofisinin sitesine telefondan gelen bir kişi, metroda düşük bağlantıyla galeriye bakıyor. İlk iki kart hemen geliyor, alttakiler kaydırdıkça iniyor. Lightbox tam ekranı kaplıyor ve kapatma düğmesi başparmağın ulaşabileceği yerde. Bu küçük kararlar, ziyaretçinin sayfada kalmasını sağlar.

Müşteri izni ve gizlilik neden önemli?

Portfolyodaki her iş bir müşteriye aittir ve paylaşmak için izin gerekir. Logo, mekân fotoğrafı, ekran görüntüsü ya da müşteri görüşü fark etmez. İzinsiz yayın, hem ilişkiyi hem de itibarınızı riske atar.

İzin konusunda şu pratikleri öneriyoruz:

• Sözleşmeye portfolyoda paylaşım maddesi ekleyin ve kapsamını açık yazın.
• Gizli kalması gereken projelerde müşteri adını, logoyu ve tanınabilir detayları çıkarın; "anonim vaka" olarak sunun.
• Fotoğraflarda yer alan kişilerin onayını alın.
• Ekran görüntülerinde gerçek kişisel verileri bulanıklaştırın ya da örnek verilerle değiştirin.
• Görsel dosyalarındaki konum meta verisini yayından önce temizleyin.

Konut projelerinde bu konu özellikle hassastır. Çünkü bir evin iç fotoğrafı ve konum bilgisi bir araya geldiğinde, ev sahibinin mahremiyeti zarar görebilir. Bu yüzden adres yerine yalnızca semt ya da şehir yazmak çoğu zaman yeterlidir.

Kişisel verilerin işlenmesi konusunda genel çerçeve için KVKK ve GDPR uyumlu web sitesi yazımıza göz atabilirsiniz. Not: bu bölüm hukuki danışmanlık değildir; sözleşme maddeleri için bir hukukçuya danışın.

Google, portfolyo sayfasını ve görselleri nasıl bulur?

Google görselleri HTML içindeki img öğesinin src özniteliğinden bulur. Google'ın resmi belgesi, CSS arka plan görsellerini dizine eklemediğini açıkça belirtiyor. Dolayısıyla portfolyo kartlarındaki önemli görselleri arka plan olarak değil, gerçek görsel öğesi olarak yerleştirin.

İkinci konu bağlamdır. Görselin yakınındaki başlık, açıklama ve alt metin, Google'a görselin ne anlattığını söyler. Yalnızca görsellerden oluşan, hiç metin içermeyen bir galeri bu yüzden arama tarafında zayıf kalır. Kısa bir kategori açıklaması ve anlamlı kart başlıkları bu boşluğu doldurur.

Üçüncü konu keşiftir. Çok sayıda görsel içeren sitelerde görsel site haritası, Google'ın gözden kaçırabileceği dosyaları bulmasına yardım eder. Aynı belge, görseller bir içerik dağıtım ağında dursa bile site haritasında listelenebileceğini de belirtiyor.

Ayrıca dosya adları ve uzantıların gerçek dosya türüyle uyumlu olması gerekir. Google arama sonuçlarında yanlış bir görselin göründüğü durumlar için yanlış görsel sorunu yazımız çözüm yollarını anlatıyor. Kısacası belirgin, bağlamlı ve keşfedilebilir görseller, portfolyonun arama tarafında da çalışmasını sağlar.

Portfolyo sayfasında ziyaretçiyi teklife nasıl taşırsınız?

Dönüşüm, ziyaretçinin portfolyoyu gördükten sonra iletişime geçmesidir. Güzel bir galeri tek başına bunu sağlamaz; ziyaretçiye açık bir sonraki adım sunmanız gerekir. Bu nedenle iletişim çağrısını sayfanın sonuna saklamayın.

Etkili yerleşimler şunlardır. Her vaka sayfasının sonunda "Benzer bir proje için teklif alın" gibi bağlama uygun bir çağrı kullanın. Kategori sayfalarında, örneğin ofis projeleri listesinin altında, o hizmete özel bir kısa form sunun. Ayrıca uzun galerilerde kaydırma sırasında ulaşılabilen sade bir iletişim düğmesi düşünebilirsiniz.

Ayrıca güven öğelerini çağrının yakınına koyun. Örneğin izinli bir müşteri görüşü, çalıştığınız sektörlerin kısa bir listesi ya da süreç adımlarınızın özeti, ziyaretçinin son tereddüdünü giderir. Ancak bu öğeleri abartmayın; sade bir düzen, kalabalık bir rozet duvarından daha inandırıcıdır.

Formu kısa tutun. Ad, iletişim bilgisi ve proje hakkında bir alan çoğu zaman yeterlidir. Ayrıca formda hangi projeden geldiğini otomatik iletmek, ilk görüşmeyi hızlandırır; böylece ekibiniz ziyaretçinin neye ilgi duyduğunu baştan bilir.

Portfolyo sayfanızı bu mantıkla yeniden kurmak isterseniz, web tasarım hizmeti sayfamızdan teklif isteyebilirsiniz. Projenizin kapsamını inceleyip size uygun bir yapı ve iş planı öneriyoruz.

Yayın öncesi kontrol listesi

Portfolyo sayfasını yayına almadan önce aşağıdaki listeyi tek tek kontrol etmenizi öneriyoruz. Her madde kısa sürer, ama birlikte büyük fark yaratır.

• Her proje için yazılı paylaşım izniniz var mı?
• Kapak görselleri aynı en boy oranında mı?
• Kart başlıkları anlamlı ve tek bağlantı içinde mi?
• Filtre düğmeleri klavyeyle çalışıyor ve seçili durumu duyuruyor mu?
• İlk görünümdeki görseller normal, alttakiler tembel yüklemeyle mi geliyor?
• Bütün görsellerin genişlik ve yükseklik değeri var mı?
• Lightbox Escape ile kapanıyor ve odak açan öğeye dönüyor mu?
• Alt metinler bağlama uygun ve tekrarsız mı?
• Konum meta verisini temizlediniz mi?
• Her vaka sayfasında bağlama uygun bir iletişim çağrısı var mı?
• Mobilde dokunma alanları rahat mı, filtre çubuğu kullanılabilir mi?

Listeyi ekip içinde paylaşmak da işe yarar. Örneğin içerik ekleyen kişi izin ve alt metin maddelerini, geliştirici ise yükleme ve klavye maddelerini kontrol eder. Böylece sorumluluk netleşir ve hiçbir madde arada kaybolmaz.

Bu listeyi her yeni proje eklediğinizde de kullanın. Çünkü portfolyo yaşayan bir sayfadır ve bozulmalar genellikle zamanla, aceleyle eklenen projelerle başlar.

Sık yapılan hatalar nelerdir?

Sahada en sık karşılaştığımız hatalar birbirine benzer. Birincisi, her işi ayrım yapmadan yüklemektir. Bu durumda güçlü projeler kalabalığın içinde kaybolur ve ziyaretçi kaliteyi ortalamaya göre yargılar.

İkincisi, bağlamsız galeridir. Yalnızca fotoğraflardan oluşan bir sayfa ne yaptığınızı, kimin için yaptığınızı ve nasıl yaptığınızı söylemez. Kısa açıklamalar ve vaka sayfaları bu sorunu çözer.

Üçüncüsü, ağır ve sıkıştırmasız görsellerdir. Kameradan çıktığı gibi yüklenen dosyalar sayfayı yavaşlatır, özellikle mobil ziyaretçiyi kaçırır. Dördüncüsü, klavyeyle kullanılamayan lightbox'tır; ziyaretçi açtığı katmanı kapatamaz ve sayfadan çıkar.

Beşincisi, izinsiz paylaşımdır. Müşterinin istemediği bir projeyi yayınlamak, en iyi tasarımı bile anlamsız kılar. Son olarak, iletişim çağrısının eksik olması da yaygındır. Ziyaretçi ikna olur ama nereye tıklayacağını bilmez.

Bu hataların ortak noktası, ziyaretçinin gözünden bakmamaktır. Bu nedenle yayından önce sayfayı hiç görmemiş birine telefonda açtırın ve aradığı bir projeyi bulmasını isteyin. Takıldığı her yer, düzeltmeniz gereken bir noktadır.

Özetle iyi bir portfolyo sayfası seçici, bağlamlı, hızlı, erişilebilir ve yönlendiricidir. Bu beş özelliği birlikte kurduğunuzda, galeriniz yalnızca güzel görünmekle kalmaz, iş de getirir.