Mockup ve Case Görselleştirme: Ajans ve B2B İçin Portfolyo Gücü

Mockup, “işin kendisini” değil işin doğru bağlamda nasıl göründüğünü gösterir. Bir web sitesi ekran görüntüsünü herkes koyabilir; fakat o ekranın gerçek bir cihazda, doğru ölçekte, doğru ışıkta ve doğru kullanım senaryosunda gösterilmesi, algıyı profesyonelleştirir. Ajans portfolyolarında mockup; “tasarım yaptım”dan “ürünleştirdim ve sahaya indirdim” mesajına geçiştir. B2B’de ise mockup’lar, ürün/servis çıktısının somut kanıtıdır (dashboard, landing, rapor, sunum).

Mockup nedir, portfolyo sunumunda nasıl kullanılır?

Net cevap: Mockup; tasarımın gerçek hayatta (cihaz, tabela, basılı materyal, ekran) nasıl göründüğünü gösteren görselleştirmedir. Portfolyoda ekran görüntüsünü bağlama oturtur, ölçek algısı ve profesyonellik hissi verir; “önce/sonra” ile birlikte kullanıldığında dönüşümü daha ikna edici gösterir.

Mockup’un sağladığı 5 pratik fayda

• •Bağlam: “Nerede kullanılıyor?” sorusunu anında çözer
• •Ölçek: Tipografi ve hiyerarşinin gücünü gösterir
• •Güven: “Bunu gerçekten yaptılar” hissi verir
• •Netlik: Ekran kalabalığını sadeleştirir (crop + focus)
• •Satış: Karar verici için “hayal etme” yükünü azaltır

Mini örnek (Otel): Antalya’da bir resort otelin kampanya sayfasını sadece ekran görüntüsüyle vermek yerine, mobil cihaz mockup’ında “rezervasyon akışı”yla gösterdiğinizde ikna artar.

Mini örnek (B2B): Bir SaaS dashboard’ını laptop mockup + 1 anotasyonla sunmak, screenshot çöplüğünden daha güçlüdür.

Portfolyoda “dijital iş” (web, mobil, social) ile “baskı işi” (signage, kartvizit, menü) aynı mantıkla sunulmaz. Dijitalde kullanıcı akışı ve ekran hiyerarşisi kritikken, baskıda materyalin dokusu, ölçüsü ve okunabilirlik önem kazanır. Bu bölümün hedefi: her işi doğru formatta, doğru “kanıt türü”yle sunmak.

Dijital işler: ekran görüntüsü değil “kullanım senaryosu”

1. Problem/amaç (1 cümle)
2. Ana ekran mockup (hero)
3. Akış kanıtı (2–3 ekran: önce/sonra veya kritik adım)

Özellikle B2B’de “dashboard” ve “rapor” işlerinizde, ekranın tamamını göstermek yerine kullanıcıya değer veren kısmı büyütün: filtre, KPI kartı, trend grafik, export. Otel tarafında rezervasyon akışında “tarih seçimi → oda seçimi → ödeme” gibi kritik adımları 2–3 karede netleştirmek daha ikna edicidir.

Baskı işler: gerçek hayatta görünürlük

Baskı işlerinizde şu iki hata sık olur: (1) sadece düz PDF koymak, (2) her şeyi aynı mockup’ta göstermek. Baskıda amaç: materyalin “görünürlük ve okunurluk” kanıtı. Bu yüzden:

• •Signage: uzaktan okunabilirlik
• •Menü/brochure: hiyerarşi ve düzen
• •Kartvizit: malzeme + premium algı

Before/after (önce/sonra) görselleri, case’in “en hızlı ikna” aracıdır çünkü beynimiz değişimi bir bakışta algılar. Ama yanlış yapılırsa manipülatif veya anlamsız görünür: farklı ışık, farklı kırpma, farklı ölçek; hatta bazen “önce” görseli bilerek kötü seçilir. Profesyonel yaklaşım: aynı açı, aynı ölçek, aynı alan ve net bir “ne değişti” etiketlemesi.

Önce/sonra görselleri case study’lerde nasıl hazırlanır?

Net cevap: Önce ve sonrayı aynı ölçekte ve aynı kadrajda göster; farklılıkları 2–3 işaret (callout) ile belirt ve tek cümleyle “ne iyileşti”yi yaz. Mümkünse bir performans metriği (CTR/CVR gibi) ya da süreç metriği (revizyon azalması) ile destekle.

Before/after için 6 kural

• •Aynı çözünürlük ve kırpma
• •Aynı cihaz/çerçeve (mockup)
• •Renk/ışık farkı yok (adil karşılaştırma)
• •2–3 callout (fazlası gürültü)
• •Tek cümle “iyileşme cümlesi”
• •Eğer metrik varsa tek metrik (odağı bozma)

Mini örnek (Otel): Bodrum’daki bir otelin kampanya sayfasında “rezervasyon CTA” konumunun değişmesi, before/after ile tek bakışta anlaşılır; yanında “daha net CTA” etiketi.

Mini örnek (B2B): Funnel landing’de form alanlarının sadeleşmesi ve kanıt bloklarının eklenmesi, before/after + 1 metrik paneliyle anlatılır.

Bir case’i “görsel hikâye”ye çevirmek, tasarımcı için de ajans yöneticisi için de satış ekibi için de aynı soruya cevap verir: Neyi değiştirdik ve neden işe yaradı? Görsel storytelling; problemden çözüme, kanıttan next step’e akan bir mini film gibidir. Bu yüzden case sayfasında görseller, rastgele dizilmez; bir akışla ilerler.

Case görselleştirme modeli: Hook → Bağlam → Dönüşüm → Kanıt → Next step

• •Hook (1 cümle): “X sorununu Y ile çözdük”
• •Bağlam: hero mockup
• •Dönüşüm: before/after
• •Kanıt: 1 grafik veya 1 sosyal kanıt kartı
• •Next step: deliverables + CTA

Bu model, “Mockups; Case Visualisation; Before/After Grids; Portfolio Design” entitelerini tek bir case görselleştirme modeli içinde birleştirir ve her projede tekrar edilebilir hale getirir.

Fark yaratan mini bölüm: Ekran görüntüsü listesi değil “bağlam + sonuç” (Competitor Gap)

Rakip portfolyoların çoğu sadece ekran görüntüsü listeler; bu, izleyiciye bağlam vermez. Farkı yaratan yaklaşım: her ekrana “neden önemli” etiketi koymak ve bir sonuç kanıtı eklemek.

• •Örn: “Bu ekran, rezervasyonda en çok drop olan adım” gibi kısa notlar
• •B2B’de: “Bu panel, haftalık rapor süresini azaltır” gibi fayda etiketleri

Aynı görsel model, farklı sektörlerde farklı kanıt türleri ister. Otelde “deneyim ve güven” ağır basar; B2B’de “netlik ve sonuç” daha kritik olur. Burada amaç; sektör senaryosuna göre hangi görsel setin daha iyi çalışacağını önceden bilmek.

Otel case örneği 1: Web yenileme + rezervasyon akışı

• •Hero: ana sayfa + booking CTA (mobil mockup)
• •Before/After: ana sayfa hero bölümü (hiyerarşi/CTA)
• •Akış: tarih seçimi → oda seçimi (2 ekran)
• •Kanıt: “daha net CTA” + tek metrik trend (Varsayım: dönüşüm niyetine olumlu etki)
• •Not (GEO doğal): Antalya/Belek/Side/Kemer/Bodrum gibi destinasyon otellerinde “konsept/deneyim” görselleri hero mockup’ta daha güçlü çalışır (spam yapmadan).

Otel case örneği 2: Kampanya (erken rezervasyon / son dakika)

• •Hero: kampanya görseli signage + sosyal post mockup
• •Before/After: feed grid (kampanya dili)
• •Kanıt: 1 performans grafiği (CTR trend) + 1 sosyal kanıt (yorum)
• •Maskeleme: otel adı/NDA gerekiyorsa blur

B2B case örneği: Funnel/performans odaklı landing

• •Hero: landing + form alanı mockup
• •Before/After: form sadeleşmesi, kanıt blokları eklenmesi
• •Kanıt: 1 grafik (lead → meeting dönüşümü)
• •Next step: deliverables (A/B plan, tasarım seti, banner seti)

Key Statistics / Data Point (sheet dolu): Güçlü görsel case’ler, yeni müşteri görüşmelerinde en çok referans verilen materyallerden biri hâline geliyor. (Kesin rakam değil; pratik gözlem ve satış materyali davranışı.)