Açılış Sayfası Kahraman Çekimleri: Sizinkine Yönlendirmeye Yardımcı Olacak 18 Anlaşılır Örnek [2022]

1911'de Syracuse Reklam Erkekler Kulübü, gazetecilik ve tanıtımı tartışmak için bir ziyafet düzenledi. Üyelerinden biri (Arthur Brisbane) gazetede “Bir resim kullanın. Bin kelimeye bedel."

Confusious, King Solomon, Einstein veya Aristoteles değil, bir reklamcı. ( Bunu anne babana söyle.)

100 yılı aşkın bir süredir hızlı bir şekilde ilerleyin ve Arthur'un meşhur sözleri hala doğru geliyor - özellikle de açılış sayfaları söz konusu olduğunda.

Girin: açılış sayfası kahramanı vurdu.

Başlığınız ve alt başlığınız değer teklifinizi iletiyorsa, açılış sayfası kahraman çekiminiz onu yalnızca bir görüntünün yapabileceği şekilde hayata geçirir. Bu nedenle, güçlü bir kahraman çekimi, açılış sayfası tasarımının temel dayanağıdır.

Yanlış anlayın ve dönüşüm oranlarınızın düşüşünü izleyin.

Doğru yapın (Arthur'un deneyimlerinden bildiği gibi) ve dönüşüm oranlarınızın fırladığını izleyin.

Doğru yapmak adına, farklı türdeki kahraman görüntülerini, kendinizinkini oluşturmak için gereken adımları ve iyi, kötü ve sahte olanların örneklerini keşfederek Arthur'u gururlandıracağız.

Hadi gidelim.

Açılış sayfası kahraman çekiminiz, teklifinizin değerini iletmek için kullanılan birincil resim veya videoyu ifade eder ve ziyaretçilerinizin geldiklerinde karşılaşacakları ilk resimdir.

Örneğin, Divvy'nin kahraman görselinde bir kredi kartı ve bir mobil uygulamanın nasıl yer aldığına dikkat edin; bunların her ikisi de manşetlerine “İşinizin gelişmesi için ihtiyaç duyduğu kredi ve yazılım” ifadesinin bağlamını ekler.

Bir kahraman imajı, birini satın almaya ikna edecek mi?

Kendi başına değil.

Ancak başlığınız, alt başlığınız, teklifiniz ve harekete geçirici mesajınız (CTA) ile birlikte kahraman çekiminiz, ziyaretçilerinizi bitiş çizgisine itmek için gereken bağlamı, duyguyu ve netliği sağlayabilir.

Bu, yüksek kaliteli bir kahraman çekiminin yalnızca alanı doldurmadığı anlamına gelir; teklifinizi tek başına kelimelerin asla yapamayacağı şekilde hayata geçirir ve silinmez bir ilk izlenim yaratır .

Bir kahraman bölümünü bir kahraman bölümüyle karıştırmayın.

Açılış sayfanızın kahraman bölümü , "ekranın üst kısmındaki" bölümü veya ziyaretçilerinizin aşağı kaydırmaya başlamadan önce ilk karşılaştıkları açılış sayfasının bölümünü ifade eder.

Kahraman bölümünüz, kahraman çekiminizi, başlığınızı, alt başlığınızı ve CTA'yı (en azından) içerir, ancak kahraman çekimi ve kahraman bölümü, tüm açılış sayfanızın iki ayrı öğesini ifade eder.

Animasyonlu, özel fotoğrafçılık, video veya başka bir tarz olsun, açılış sayfası kahraman çekimleri beş ana kategoriye ayrılır:

1. ürün odaklı
2. metafor
3. "vaat edilmiş topraklar"
4. süreç odaklı
5. Öz

Her birinden örnekler inceleyelim.

Ürün odaklı açılış sayfaları, ürünü çalışırken öne çıkarır. Sürpriz sürpriz.

Yeni veya karmaşık bir ürün için, ürün odaklı bir kahraman çekimi, soyut hissi somut hale getirerek teklifinizin gizemini çözmenize yardımcı olabilir.

Örneğin, Editör X'in kahraman görüntüsü, gerçek görsel düzenleyici arayüzüne sahiptir:

Metaforik kahraman çekimleri, kelimenin tam anlamıyla değil, teklifin değerini temsil eden veya sembolize eden görüntüleri kullanır.

Örneğin, ücretsiz pazarlama planı açılış sayfamızda çekilen kahraman, dolar faturaları ve gülümseyen beyinler şeklinde marka emojilerimizi içeriyor:

Vaat edilen kara kahramanları çekimleri, başarılı bir müşteriyi veya arzu edilen bir gelecekteki durumu ön plana çıkararak, ürün veya hizmetinizi kullanmanın istenen sonucunu tasvir eder.

Örneğin, Keeps abonelik saç dökülmesi ilacı, muhtemelen saç dökülmesi ilacını kullandıktan sonra memnun ve gülümseyen bir müşteri sergiliyor:

Genellikle, ürünü göstermenin mümkün olmayabileceği hizmetler veya yazılımlar için süreç odaklı kahraman çekimleri görürsünüz. Bunun yerine, hizmetin değerinden veya etkinliğinden sorumlu olan süreci görselleştirirsiniz.

Örneğin, GatherContent, yazılımının içerik yönetimi sürecini göstermek için özel bir grafik kullanır:

En az sevdiğimiz kahraman fotoğrafımız: soyut kahraman görüntüleri (veya şekiller veya desenler gibi görsel öğelerden oluşan kahraman görüntüleri).

Neden onlar bizim en az favorimiz? Çünkü onlar sadece boşluğu doldururlar. Fazla değil.

Örneğin, Semrush, birincil görsel öğesi olarak iki soyut şekle sahiptir, başka bir şey değil. Kaçırılan fırsat.

Yüksek kaliteli bir kahraman çekimi sadece alanı doldurmaz; bağlam ekler, alaka düzeyini iletir, duygu uyandırır ve kullanıcı deneyimini zenginleştirir. Ve bunu bir kombinasyon kullanarak yapar

• somutluk
• alaka
• bağlam
• duygu
• özelleştirme
• hizalama

Her birini keşfedelim.

Soyut kahraman çekimleri iki şeyi iyi yapar: 1) kesinlikle hiçbir şey ve 2) bilişsel yükü artırır (ziyaretçilerin teklifinizi anlaması için geçen süre).

Bu kadar.

Yüksek kaliteli açılış sayfası kahraman çekimleri, ürününüzü, hizmetinizi, istenen sonucu veya değer teklifinizi gerçek dünyada veya gerçeğe mümkün olduğunca yakın bir şekilde tasvir etmelidir. Basit.

Ziyaretçilerinizi çok fazla düşündürmeyin. Sanat uğruna sanattan uzak durun. Ve görsellerinizi somut tutun.

Örneğin, Dollar Shave Club, 5$'lık Razor Başlangıç ​​Setine dahil olan ürünleri göstermek için kahraman imajını kullanır. Basit ama etkili.

Yüksek kaliteli bir açılış sayfası kahraman çekimi, hedef kitlenizde anında yankılanmalı ve aynı anda başka birine "Bu benim için değil " sinyalini vermelidir.

Ziyaretçileriniz, çoğunlukla bilinçsiz zihinlerinden etkilenen anlık kararlar verir. Kahraman atışınız kimin için olduğunu ve kimin için olmadığını hemen netleştirmezse, tekrar deneyin.

Bu, aynı zamanda, açılış sayfası kahramanınızın çekimini, insanları oraya gönderen mesajlaşma ve reklam öğesiyle eşleştirmek anlamına gelir (ör. mesaj eşleşmesi).

Örneğin, Allure'ın Beauty Box kahraman çekimine baktığınızda, bunun özellikle güzellikle ilgilenen insanlar için olduğuna dair herhangi bir soru var mı?

Açılış sayfanızın kahramanı, başlığınızı ve alt başlığınızı desteklemek için can attı. Dönem.

Daha da iyisi, bunu değer teklifinizin görsel temsili olarak düşünün.

Bu, kahraman çekiminizin sayfanın başka bir yerinde verdiğiniz bazı sözleri değil, başlığınızda verdiğiniz sözü hayata geçirmesi gerektiği anlamına gelir.

Örneğin Canva, hareket halindeyken işbirliğini, şablonları ve tasarımı (mobil uygulama) gösteren ürün odaklı bir kahraman görüntüsü ile "yaratıcılık ve üretkenlik" başlıklarına bağlam ekler:

Duygusal dediğimizde, birini gözyaşlarına boğmaktan bahsetmiyoruz; markanız ve teklifiniz hakkında olumlu bir his yaratmaktan bahsediyoruz.

Çoğu, grafik tasarımınızın kalitesine bağlıdır; kaliteli web tasarımı güven oluşturur ve güvenilirlik sağlar.

Ancak, seçim görüntülerini kullanarak doğrudan kahraman çekiminizden güven, emniyet, mutluluk ve güven gibi olumlu duygular uyandırabilirsiniz.

Örneğin, Namogoo, "Müşterileriniz Namogoo'yu kullanmaya başladıktan sonra böyle hissedecek" dercesine, çeşitli mutlu-şanslı "alıcılara" sahiptir.

Namogoo, değer önermelerinin “vaat edilmiş toprakları” ile ilişkili olumlu duyguları yansıtarak, potansiyel müşterilerinden olumlu duygular uyandırır.

Veya güven ve itimat duygularını uyandırmak için doğrudan kahraman çekiminizde müşteri referansları, yıldız derecelendirmeleri veya ödüller gibi sosyal kanıtlara yer verebilirsiniz.

Stokta yok. Fotoğraf

Açılış sayfası kahraman çekimlerinizi markanıza özel tutun.

Kaynaklar nedeniyle stok fotoğrafçılığından yardıma ihtiyacınız varsa, en azından, stok fotoğrafçılığı markanızın stiline ve hissine uyması için özel bir grafiğe dönüştürün.

Örneğin, Monday.com insanların çeşitli stok fotoğraflarını kullanır, ancak bunları orijinal ve benzersiz hissettirecek şekilde açılış sayfası kahraman çekimlerinde düzenler.

Son olarak, en iyi açılış sayfası ana görselleri, dikkati kopyadan uzaklaştırmaz; manşetlere ve CTA'lara dikkat çekecek şekilde (uzak değil) zevkle hizalanırlar .

Örneğin, Apostrophe'un başlığa ve CTA'ya bakan bir dermatoloğu nasıl gösterdiğine dikkat edin?

Vücudunu ve bakışlarını sağa yönlendirmek, ziyaretçinin dikkatini aynı yöne, yani doğrudan başlığa ve CTA'ya çeken ince bir görsel ipucu yaratır.

Şimdi bunu VanMoof'un açılış sayfası kahraman çekimiyle yan yana koyun. Başlığı ve CTA'yı öne çıkarmaz; onları gömer.

Şimdi eğlence kısmına gelelim: açılış sayfası kahraman çekim örnekleri.

Bu bölümü üç farklı kategoriye ayırdık:

1. İyi (10 örnek)
2. Kötü (4 örnek)
3. Sahte (4 örnek)

Niye ya?

Çünkü tüm kahraman çekimleri süper kahraman değildir ve ne yapmayacağını öğrenmek, ne yapacağını öğrenmek kadar önemlidir.

Onları işaretleyin. Bunları hızlıca kaydırma dosyanıza ekleyin. Tüm arkadaşlarına söyle.

1. Canva Profesyonel
2. doo
3. Halk
4. Adobe Yaratıcı Bulut
5. KlientBoost
6. kare boşluk
7. spline
8. Anlık Çağrı
9. yazı biçimi
10. Armadillo

Sevdiğimiz şey: Başlığa bağlam ekleyen, dikkati CTA'dan uzaklaştırmayan ve olumlu duygular uyandıran ürün odaklı kahraman çekimi.

Sevdiğimiz şey: Doo, hatırlatma uygulamasından gerçek ekran görüntüleri gösterir. Basit, somut, bağlamsal, özel, etkili.

Sevdiklerimiz : Public, gerçek, özgün kullanıcılarla birlikte uygulamalarından ekran görüntülerini gösteren döngüsel bir videoya sahiptir. Bu video, kullanım kolaylığını, hedef pazarını ve mobil uyumluluğunu ustaca yakalamak için ürün odaklı ve vaat edilen araziyi birleştiriyor.

Sevdiğimiz şey: Tasarım yazılımınızın gücünü göstermenin, kolaylaştırdığı gerçek tasarımları sergilemekten daha iyi bir yolu yoktur. Belki bir yol: logonuzu tasarımın konusu yaparak. Bravo, Adobe.

Sevdiğimiz şey: KlientBoost'ta metaforik açılış sayfası kahraman çekimlerini SEVİYORUZ. Temel olarak, 15 dakikalık şöhretlerine ihtiyaç duyan marka maskotlarından oluşan bir aileyi büyüttüğümüz için, aynı zamanda değer önermelerimizi farklı ve eğlenceli bir şekilde gösterdikleri için. Gülümseyen açılış sayfalarını ve yağan paraları kim sevmez ki?

Sevdiğimiz şey : Squarespace her zaman tasarıma öncelik verir. Bu nedenle, açılış sayfası kahraman görüntülerinin çoğu modern sanattan çok modern sanata benzemesi şaşırtıcı değil. Ancak daha önce de belirttiğimiz gibi, sanat için sanat, açılış sayfası kahraman çekimleri söz konusu olduğunda onu kesmez. Ürününüzü gerçek hayatta bu sanatın içinde yakalamadığınız sürece hayır. Ve Squarespace'in burada yaptığı tam olarak budur.

Sevdiğimiz: Bu görüntüden bunu anlamak biraz zor (web sayfalarını ziyaret etmenizi öneririm), ancak Spline'ın 3D kahraman çekimi, farenizi tıklayıp üzerine getirdiğinizde hareket ediyor. İşbirlikçi 3B tasarım araçları sattıkları düşünülürse oldukça temiz.

Sevdiğimiz şey: SnapCall, hedef pazarlarının değerli bulabileceği (müşterilerinizle uzaktan etkileşim kurmak gibi) yaygın bir kullanım durumunu (veya sorunlu bir noktayı) göstermek için kahramanca çekimlerini kullanır. Alt başlıklarının "tek tıklamayla görüntülü aramalarla çığır açan bir müşteri deneyimi sunma" vaatlerini göz önünde bulundurarak mantıklı.

Sevdiğimiz: Ürün odaklı konuşun. Typeform, kahraman görüntüsü olarak gerçek hayatta gömülü bir Typeform formu kullanır. Ziyaretçiler aslında “Beni dene” düğmesine tıklayabilir ve formu kendileri deneyimleyebilir. Parlak.

Sevdiğimiz şey: Metafor uyarısı. Vücudunu bir evin etrafına saran bir armadillo, onu kendi bebeği gibi koruyormuş gibi. Marka vaadini ve değer önerisini daha iyi bir şekilde iletmek bile mümkün mü? Şans yok.

Daha kötülerini de gördük, ancak bu açılış sayfası kahraman çekimleri hala yeterli değil.

1. Semrush
2. InVision
3. DUVAR
4. Cep Koruması

Sevmediğimiz şey: Metaforlar başarısız olduğunda şunlar olur. Semrush, muhtemelen “Herhangi bir SEO zorluğu için araçlar” değer önerisini vurgulamak için bir araç kutusu kullanır. Yalnızca araç kutusu bir cetvel, büyüteç ve dişli ile doldurulur. Sıhhi tesisat aletleri mi satıyorsunuz? Veya SEO araçları?

Sevmediğimiz şey: Ve soyut başarısız olduğunda olan budur. Yine de, bu açılış sayfası InVision'ın yeni “Freehand” yazılımını tanıttığı için anlıyoruz. Ama neden bir kadını duvarda “serbest elini” gösteriyor? Evet, hayır. Kaçırılan fırsat. İnsanlar, özellikle yeni bir yazılım türü olduğunda, yazılımı gerçek hayatta görmek isterler.

Sevmediğimiz şey: Aşırı yüklenmiş. Hatta neye odaklanıyoruz? MURAL, ürün odaklı bir kahraman çekimi kullanmaya çalışıyor, ancak çok fazla sıkıştırdılar ve her bir özelliğin ne yaptığını ayırt etmeyi zorlaştırıyorlar. Şimdi görebiliyorum: çok fazla insan çok fazla özelliğin temsil edilmesini istiyor, bu yüzden tasarımcı, "Eff, hepsini oraya atacağız" dedi.

Sevmediğimiz şey: Bu soyut tasarımın en rahatsız edici yanı, bir tür ses dalgası gibi görünmesi. Ancak PocketGuard kişisel bir finans uygulamasıdır. Ders? Kahraman atışınızın, kazara olsa bile, ilk bakışta farklı bir hizmet gibi görünmediğinden emin olun.

Evet, sahtekarlığı unutamayız. Bu kahraman çekimleri, açılış sayfası gayrimenkulünün en değerli parçasını doğrudan boşa harcar.

1. interkom
2. Anket maymun
3. Harekete geçmek
4. ZoomBilgi

Nefret ettiğimiz şey: Balonu şişiren bir kadın mı? “Daha fazla web sitesi ziyaretçisini ödeme yapan müşterilere dönüştürün” değer teklifinizi bu şekilde mi göstereceksiniz? Salıncak ve bir bayan.

Nefret ettiğimiz şey: Açılış sayfalarının dönüştürmek için her zaman kahraman çekimlerine ihtiyacı yoktur. Bu yüzden onları "görsel bir şeye ihtiyacınız var" diye sıkmayın. Boşluk dolduruculara hayır deyin (ahem, SurveyMonkey).

Nefret ettiğimiz şey: Sanırım bir huni. Ama daha çok bir ampule benziyor. Güçlü bir görselden yararlanabilecek metin ağırlıklı bir açılış sayfasında, Act-On asıl noktayı kaçırıyor. Bu açılış sayfasına logolarını bile dahil etmediklerini söylemeye gerek yok.

Nefret ettiğimiz şey: Yeni uzatma kablomu teslim eden bir Amazon drone mu? Evet. Yerleşimden (sağ üstte) bahsetmeye gerek bile yok, dikkatinizi alt kısımdaki CTA'dan ona doğru değil, uzağa çekiyor.

Sonuç olarak?

Açılış sayfası kahraman çekimleri her şekilde ve türde olsa da, en iyileri aşağıdakilerin bir kombinasyonunu içerir:

• somutluk
• alaka
• bağlam
• duygu
• özelleştirme
• hizalama

İster küçük bir işletme, ister küresel bir kuruluş olun, açılış sayfası kahraman çekiminizi tamamlamak için bu öğelere öncelik verin.

Kahraman atışınızın isabetli olup olmadığını bilmek ister misiniz?

Kahraman atış testini deneyin.

Bir arkadaş veya meslektaş bulun (tercihen açılış sayfanızın tanıttığı ürünle hiç karşılaşmamış biri), açılış sayfasını yükleyin ve kahraman görüntüsünü incelemeleri için onlara beş ila on saniye verin.

Değer teklifinizi ve beraberindeki kahraman çekimini iki cümleyle doğru bir şekilde tanımlayamazlarsa, farklı varyasyonları test etmeye başlamanın zamanı gelmiştir.

Şimdi git ve Arthur'u (ve bizi) gururlandır.

Hazır oradayken, açılış sayfası başlıklarında ustalaşmayı unutmayın. Bunu nasıl yapacağınızla ilgili her şeyi burada bir sonraki blogumuzda okuyun.