Blog Yazısı · Web Tasarım

Portfolyo Sayfası Tasarımı: Vaka Kartından Detaya

KepezWeb Ekibi 7 dk okuma Web Tasarım
Portfolyo Sayfası Tasarımı: Vaka Kartından Detaya

Anasayfadaki kısa referans şeridi ile tam portfolyo sayfası farklı işler görür. Bu rehberde vaka kartı, filtre ve detay sayfası mimarisini ziyaretçinin karar sürecine göre nasıl kuracağınızı sade adımlarla ele alıyoruz.

Ajans ve hizmet sitelerinde portfolyo sayfası tasarımı, yalnızca “yaptığımız işler” galerisi kurmak değildir. Ziyaretçi genelde anasayfadaki kısa referans şeridinden bir güven sinyali alır; asıl seçim ise vaka listesi, filtre ve detay sayfasında şekillenir. Bu rehber, anasayfa şeridinden farklı olarak vaka mimarisini nasıl kuracağınızı, hangi bilginin nerede durması gerektiğini ve karttan detaya akışı nasıl netleştireceğinizi adım adım anlatır.

Amaç, projenizi abartmak değil; okuyucunun “bu ekip bizim sorunumuza benzer bir işi çözmüş mü?” sorusuna hızlı ve dürüst cevap vermektir. KepezWeb yaklaşımında portfolyo, satış metninin uzantısı değil; kanıt ve bağlam katmanıdır.

Anasayfa referans şeridi ile portfolyo sayfası neden ayrı düşünülmeli?

Anasayfa referans şeridi kısa bir güvence alanıdır: birkaç logo, bir-iki cümlelik sonuç vurgusu veya öne çıkan vaka görseli yeterlidir. Portfolyo sayfası ise tarama, karşılaştırma ve derinleşme içindir. Aynı içeriği iki yere kopyalamak hem okuma yorgunluğu yaratır hem de hangi projenin kime hitap ettiğini belirsizleştirir.

Pratik ayrım şudur: anasayfa “güven sinyali verir”, portfolyo “uygun vakayı buldurur”, detay sayfası “nasıl çalıştığınızı açıklar”. Bu üç katman netleşince ziyaretçi menüde kaybolmaz; hizmet sayfasından portfolyoya, oradan iletişime doğal geçer.

Vaka listesi bilgi mimarisi: neyi, hangi sırayla gösterin?

Liste sayfasının görevi, her projeyi uzun uzun anlatmak değil; doğru detaya giden kısa yolu açmaktır. Bilgi mimarisini kurarken önce “ziyaretçi hangi soruya göre tarıyor?” diye sorun. Ajans ve hizmet sitelerinde en sık görülen tarama eksenleri şunlardır:

  • Sektör (ör. e-ticaret, üretim, hizmet, kamu)
  • Hizmet türü (web tasarım, e-ticaret, özel yazılım, SEO)
  • Proje tipi (yeniden tasarım, sıfırdan kurulum, entegrasyon)
  • İşletme ölçeği veya kanal (B2B, B2C, çok dilli)

Liste sayfasında her vaka için tutarlı bir kart şablonu kullanın. Kartlar arasında alan sırası değişirse tarama bozulur. Tutarlılık, görsel çeşitlilikten daha çok işe yarar; ziyaretçi her kartta aynı yerde aynı tür bilgiyi arar.

Liste sayfasında olması gereken temel alanlar

  • Proje adı veya müşteri/marka adı (izin ve gizlilik politikasına uygun)
  • Kısa problem cümlesi (tek satır, jargon az)
  • Hizmet etiketi (1–3 etiket yeterli)
  • Sektör veya bağlam etiketi
  • Kapak görseli veya arayüz karesi
  • “Vakayı incele” bağlantısı

Sonuç rakamı uydurmak veya “başarı garantisi” hissi veren abartılı vurgular eklemek güveni zedeler. Sayı koyacaksanız yalnızca müşteriyle paylaşıma açık, doğrulanmış ve bağlamı net olan verileri kullanın. Aksi halde nitel sonuç cümlesi (ör. “sipariş akışı sadeleştirildi”) daha güvenlidir.

Filtre, etiket ve sıralama: sade tutun, abartmayın

Filtre, portfolyo büyüdükçe gereklidir; az sayıda vakada ise gürültü yaratabilir. Onun altında filtre paneli eklemek yerine, önce etiketleri temizleyin. Aynı anlama gelen “kurumsal site”, “kurumsal web”, “şirket sitesi” gibi parçalı etiketler tarama kalitesini düşürür.

İyi bir filtre seti genelde üç ekseni geçmez: sektör, hizmet, proje tipi. Daha fazlası mobilde sıkışır ve “sonuç bulunamadı” riskini artırır. Sıralamada “öne çıkan”, “yeni eklenen” ve “alfabetik” gibi sade seçenekler yeterlidir. “En başarılı” gibi öznel sıralamalar şeffaflık sorunu doğurur.

Boş durum metnini de tasarlayın. Filtre sonucu boşsa ziyaretçiyi hizmet sayfasına veya iletişim formuna bırakmayın; “bu kombinasyonda örnek yok, benzer sektör veya hizmeti deneyin” gibi yönlendirici bir mesaj verin. Bu küçük ayrıntı, portfolyo sayfası tasarımının kullanılabilirliğini belirgin biçimde etkiler.

Vaka kartı tasarımı: tıklanmayı değil, doğru tıklamayı hedefler

Kartın işi dikkat çekmek kadar “bu vaka bana uygun mu?” sorusunu 2–3 saniyede cevaplamaktır. Bu yüzden görsel seçimi ile metin hiyerarşisi birlikte planlanmalıdır. Yalnızca estetik ekran görüntüsü, bağlam olmadan zayıf kalır; yalnız metin ise tarama hızını düşürür.

Kart metninde abartılı sıfatlardan kaçının. “Kapsamlı dönüşüm”, “üstün deneyim” gibi boş övgüler yerine somut iş cümlesi yazın: “Bayi paneli ve kademeli fiyat listesi tek akışta birleştirildi” gibi. Ziyaretçi kendi dilini duyduğunda detaya girer.

Kartta sık yapılan hatalar

  • Her karta farklı alan düzeni koymak
  • Etiket sayısını abartıp okunurluğu bozmak
  • Görseli kırpmadan yükleyip yüzleri veya arayüz metnini kesmek
  • Detay linkini belirsiz “incele” ile bırakmak (hedef net olsun)
  • Anasayfa şeridindeki aynı üç vakayı listede de sonsuz tekrar etmek

Görsellerde dosya adı, boyut ve alternatif metin düzeni de önemlidir; bu katman hem erişilebilirlik hem de keşfedilebilirlik için görsel SEO pratikleriyle uyumlu kurulmalıdır.

Vaka detay sayfası: kanıt, süreç ve sınırlar

Detay sayfası, listenin vaadini boşa çıkarmamalıdır. Ziyaretçi buraya “nasıl yaptınız ve bize uyar mı?” diye gelir. İyi bir detay iskeleti genelde şu sırayı izler:

  1. Bağlam: kim, hangi sektör, hangi kısıt
  2. Problem: iş tarafında ne bozuluyordu
  3. Yaklaşım: hangi kararlar alındı, neler elendi
  4. Çözüm: ekran, akış veya sistem parçaları
  5. Sonuç: ölçülebilen veya nitel olarak doğrulanmış çıktı
  6. Öğrenilenler / sınırlar: her şey mükemmel bitmediğini dürüstçe belirtmek
  7. Sonraki adım: ilgili hizmet veya teklif çağrısı

Bu iskelet, hem B2B hem hizmet ajansı sitelerinde işler. Özellikle “sınırlar” bölümü güven üretir: hangi kapsamın dışında kaldığınızı yazmak, abartılı vaatten daha ikna edicidir. Güven sinyallerini abartmadan kurmak için E-E-A-T ve işletme sitesi güven sinyalleri çerçevesini de referans alabilirsiniz.

Detay sayfasında CTA yerleşimi

Detay sayfasında tek bir eylem hedefi seçin. “Hemen ara”, “teklif al”, “benzer proje planla” seçeneklerini aynı anda eşit güçte koymak kararı dağıtır. Ana eylem genelde teklif veya keşif görüşmesidir; ikincil eylem ilgili hizmet sayfasına gidebilir. Buton metni, renk ve konum kararlarını netleştirmek için CTA butonu tasarımı rehberindeki hiyerarşi mantığı faydalıdır.

Liste, kart ve detay: ne nerede durmalı?

Aşağıdaki özet tablo, bilgi mimarisini ekipler arasında hizalamak için pratik bir kontrol listesi sunar. Aynı veriyi her katmana kopyalamak yerine “katmana özgü rol” tanımlayın.

KatmanBirincil amaçOlması gerekenKaçınılması gereken
Anasayfa referans şeridiHızlı güven sinyaliAz sayıda logo/vaka, tek satır bağlamUzun vaka anlatımı, filtre paneli
Portfolyo listesiTarama ve eşleştirmeTutarlı kartlar, sade filtre/etiketHer kartta farklı alan düzeni
Vaka kartıUygunluğu 2–3 sn’de göstermekProblem cümlesi, hizmet/sektör etiketiBoş övgü sıfatları, aşırı etiket
Vaka detayıSüreç ve kanıtı açıklamakProblem–yaklaşım–sonuç–sınır iskeletiDoğrulanmamış rakam, belirsiz vaat
İlgili CTA alanıSonraki adımı netleştirmekTek ana eylem, ilgili hizmet linkiEşit güçte çoklu eylem yığını

URL, iç bağlantı ve içerik bakımı

Portfolyo URL’leri okunabilir ve tutarlı olmalıdır. “proje-1”, “vaka-yeni” gibi anlamsız yollar hem ekip içi yönetimi hem de paylaşımı zorlaştırır. Anlamlı slug ve sade hiyerarşi için SEO dostu URL yapısı ilkelerini portfolyo klasörüne de uygulayın.

İç bağlantıda aşırıya kaçmayın. Her vakadan anasayfaya, blogun tamamına ve tüm hizmetlere link vermek yerine; ilgili 1 hizmet sayfası ve gerektiğinde 1 tamamlayıcı rehber yeterlidir. Örneğin bir kurumsal site vakasında kurumsal web tasarım hizmetine, e-ticaret vakasında e-ticaret hizmet sayfasına bağlanmak doğal ve faydalıdır.

Portfolyo canlı bir arşivdir. Eski ekran görüntüleri, kapanmış ürünler veya artık sunmadığınız hizmetler sayfada kalırsa güven zedelenir. Yılda en az bir kez etiketleri, kapak görsellerini ve “hâlâ temsil ediyor muyuz?” sorusunu gözden geçirin. Az ama güncel vaka, şişkin ama bayat arşivden daha ikna edicidir.

Uygulanabilir kurulum adımları

Sıfırdan kuruyor veya mevcut sayfayı toparlıyorsanız şu sıra işleri hızlandırır:

  1. Hedef okuyucuyu netleştirin: karar verici mi, teknik ekip mi, satın alma mı?
  2. Vaka envanteri çıkarın; gizlilik ve yayın izni olanları ayırın.
  3. Etiket sözlüğünü tek sayfada sabitleyin (sektör, hizmet, tip).
  4. Kart şablonunu kilitleyin; sonra görsel dilini zenginleştirin.
  5. Detay iskeletini tüm vakalara uygulayın; eksik alanları boş bırakmayın, ya doldurun ya alanı kaldırın.
  6. Filtreyi yalnızca vaka sayısı gerektirdiğinde açın.
  7. Her detayda tek ana CTA ve bir ilgili hizmet linki bırakın.
  8. Yayın sonrası mobilde tarama, boş filtre durumu ve yükleme hissini kontrol edin.

Bu adımlar, web tasarım sürecinde portfolyoyu “sonradan eklenen galeri” olmaktan çıkarıp satış ve güven katmanına taşır. KepezWeb projelerinde de aynı mantık geçerlidir: önce bilgi mimarisi, sonra görsel cilâ.

Sıkça Sorulan Sorular

Portfolyo sayfasında kaç vaka göstermeliyim?

Sayıdan çok temsil gücü önemlidir. Farklı sektör ve hizmet kombinasyonlarını karşılayan, güncel ve izinli vakalar yeterliyse listeyi şişirmeyin. Ziyaretçi on zayıf örnekten çok üç net örnekten karar verir.

Müşteri adını ve logosunu her zaman kullanabilir miyim?

Hayır. Yayın izni, sözleşme ve marka kullanım koşulları net olmadan isim veya logo koymayın. Gerekirse anonimleştirilmiş vaka anlatımı (sektör + problem + çözüm) kullanın; bu, uydurma referanstan daha güvenlidir.

Anasayfada portfolyo bölümü varsa ayrı sayfa şart mı?

Çoğu ajans ve hizmet sitesinde evet. Anasayfa şeridi tarama ve karşılaştırma için yetersiz kalır. Ayrı portfolyo sayfası, filtre, tutarlı kartlar ve detay derinliği sağlar; anasayfa ise yalnızca öne çıkanları taşır.

Vaka detayında rakam yoksa sayfa zayıf mı görünür?

Zorunlu değildir. Doğrulanmamış rakam eklemek güveni bozar. Süreç adımları, karar gerekçeleri, önce-sonra arayüz farkı ve net problem tanımı çoğu ziyaretçi için yeterli kanıt üretir.

Filtre mi arama kutusu mu daha doğru?

Orta ölçekli portfolyoda etiket filtreleri genelde yeterlidir. Arama kutusu, vaka sayısı ve içerik hacmi büyüdüğünde devreye girer. İkisini birden koyacaksanız aynı etiket dilini kullanın; aksi halde sonuçlar tutarsızlaşır.

Portfolyo ve referans mimarisini sitenizin hizmet yapısıyla birlikte sadeleştirmek istiyorsanız, ihtiyaçlarınıza göre net bir sayfa iskeleti çıkarmak için teklif al sayfasından KepezWeb ekibiyle iletişime geçebilirsiniz. Önce doğru bilgi mimarisi, sonra kalıcı güven.

Bu yazıyı paylaş