Kahraman görseller, web yaratıcılarının web sitelerine gelen ziyaretçileri çekici bir biçimde selamlamak için sıklıkla kullandıkları şeydir.

Eğer hiç merak ettiyseniz" kahraman resmi nedir? ", Doğru yerdesin. Bu yazıda, güçlü görsel efektlerle güzel kahraman görüntülerini nasıl oluşturabileceğiniz konusuna bir göz atacağız.

Bir kahraman görüntüsü, web yaratıcıları tarafından bir web sayfasının üst kısmındaki büyük boyutlu içeriği tanımlamak için kullanılan terimdir.

Bir kahraman imajının rolü, ziyaretçinizi şirketiniz veya şirketinizle tanışır tanışmaz karşılamaktır. organizasyon. Web geliştirme araç setindeki kahraman görsel türlerinin bolluğu, web sitenize bir kahraman görseli eklemek için pek çok neden getiriyor.

Bunu yapmanın ana avantajlarını anlayalım ve neden?

Kahraman resmi nedir?

"İyi bir ilk izlenim" erdemini benimseyen kahraman görüntüleri tipik olarak aşağıdaki özelliklerden bir veya daha fazlasına sahiptir:

  • Yüksek kaliteli bir görüntü
  • Büyüleyici bir video
  • Bir görüntü kaydırıcı veya multimedya atlıkarınca
  • Hareketli veya statik illüstrasyon
  • Görsel içeriğin yanında veya önünde başlıklar ve açıklamalar

Stil açısından, kahraman resimlerine uygulandığını göreceğiniz ortak tasarım ayrıntıları şunları içerir:

  • Arka plan resimleri veya arka plan bindirmeleri olan videolar
  • Sabit veya yapışkan konumlandırma
  • İşaret etme, şeffaflık veya kaplamadaki değişikliği etkiler
  • Görüntüyü yukarıdaki başlıktan veya sonraki içerikten ayıran kontrast öğeleri

Web tasarımındaki kahraman görsellerinin yeniliği, bir yandan web sayfasında çok özel ve tanımlanmış bir alanla çalışıyor olmanızdır. Öte yandan, sayfa içeriğinizin bu bölümünü tasarlarken kullanacağınız stil, efekt ve teknik seçenekleri kesinlikle sonsuzdur.

Neden bir kahraman resmi kullanmalısınız?

Kahraman görüntünüzün tasarımı ve işlevselliği yüksek kalibreli olduğunda, otomatik olarak kullanıcı güvenilirliğini ve güvenini kazanırsınız. Kahraman resminiz ve onu çevreleyen kahraman içeriği, genellikle benzersiz satış noktanızı aktarmanız için ilk fırsatınızı temsil eder. organizasyon ve dönüşüm için ana kullanıcı iletişim noktası.

Belirli kullanıcı davranışlarını tetiklemek istediğinizde, ziyaretçileriniz üzerinde güçlü bir ilk izlenim bırakan birinci sınıf, güçlü bir kahraman resmi başlamak için en iyi yoldur.

Kalıcı bir ilk izlenim bırakabilirsiniz

İlk izlenimler hayatın birçok alanında önemlidir, ancak özellikle de kullanıcıların web sitesi estetiğiyle nasıl ilişki kurduğuna gelince.

İnsan-makine etkileşimi (HCI) ve görselleştirme uzmanlarının sonuçları Google Araştırma Bir web sitesinin başarısında kahraman görsellerinin etkisini kanıtlamak:

Bu çalışma, " Web sitesi ilk izlenimlerinde görsel karmaşıklık ve prototipliğin rolü : estetik yargıları anlamaya çalışmak ”, Görsel karmaşıklığın ve prototipikliğin bir web sitesinin tasarımını ve kullanıcılarının ilk izlenimlerini nasıl etkilediğini inceler.

Yazarlar, çalışma katılımcılarına web sitesinden 119 gerçek ekran görüntüsü gösterdiler ve görsel karmaşıklık ve prototipliğin, serginin ilk 50 görüntüsünde ve hatta bazen 17 ms içinde kullanıcının estetik algısını etkilediğini buldular.

Web yaratıcıları olarak vardığımız sonuç oldukça basittir: Seçtiğimiz kahraman resmi ve onu sayfamızda sunma şeklimiz, kullanıcı duyarlılığını ve davranışını büyük ölçüde etkiler.

Ekranın üst kısmındaki içeriğinizden en iyi şekilde yararlanacaksınız

katlanmış web tasarımının üstünde
Alınmıştır: crazyegg.com

Bir web sayfasının "ekranın üst kısmı" bölümü basit terimlerle tanımlanabilir: ekranınızı dolduran içerik / sayfanız yüklendikten sonra web tarayıcı penceresinin alt sınırının üzerinde görünen içerik. İçeriğin görülmesi için kaydırma yapılması gerekiyorsa, "ekranın altında" bulunduğu anlamına gelir.

“Ekranın üstü” kavramı, dijital medya çağından çok önce, baskı tasarımı ve yayıncılığında ortaya çıktı. Hepimiz ilk sayfanın üst yarısında bir şeyi hemen fark etmenin nasıl bir şey olduğunu biliyoruz ve hatta ilk sayfadaki içeriğin satın alıp almamaya karar vermemizi sağladığını söylemek bile güvenli. bir gazete bayisinde.

Bu nedenle, ekranın üst kısmındaki içeriğiniz web sitenizin başarısında önemli bir engel olabilir.

Ne demek istiyoruz?

Bir web sitesi ziyaretçisinin içeriğiniz ve ekranın üst kısmındaki resimlerle kafası karışırsa, web sitenizden hızla ayrılırlar. Kahraman imajınız ve çevresi açıksa, ilgi çekiciyse ve değer önerinizi iyi temsil ediyorsa, daha fazla sadık kalmaya meyilli olacaktır.

Sonuç olarak, kahraman bölümünüzün görüntüsüne ve içeriğine ne kadar çok yatırım yaparsanız, kullanıcıların hızlı çıkış yapma olasılığı o kadar azalır.

Duyarlı Tasarım hakkında unutma

Ekran kırışıklığının konumunun, cihazın ekran boyutuna bağlı olduğunu unutmayın. Bu, duyarlı tasarımda önemli bir husustur, çünkü ekranın üst kısmındaki içerik, birden fazla cihaz boyutuna uygulanabilecek şekilde özelleştirilmeli ve yapılandırılmalıdır.

Web tasarımcıları ve geliştiricileri genellikle cihaza özel kesme noktaları Bu duyarlılığı garanti etmek için. Bu, web sitesi tasarımınızın ilgili ekran boyutlarına uyarlanabilirliği üzerinde tam kontrol sağlar ve kahraman imajınızın tehlikeye atılmış görünümü veya etkisinden kaçınır.

Aşırı bilgi yüklemesi olmadan değer teklifinizi belirtin

bir kahraman görüntüsü nasıl oluşturulur

" kavramına aşina olabilirsiniz.bilgi bombardımanıWeb sitesi tasarımında ve kullanıcı deneyimi : Markamızı ve iş değerimizi temsil ederken çok fazla içerik, özellikle yazılı içerik kullanmaktan kaçınmak istiyoruz.

Bu anlamda bir görsel, illüstrasyon veya video kullanımı 1 kelimeye bedeldir. İnce ayarlı etkili marka imajı, tüm hikayenizi tek bir görsel ortamda yakalayacaktır. Hikayenizi ve markalaşma teklifinizi sözlü olarak ifade etmek yerine, kullanıcınızın üzerindeki bilişsel yükü basit ve kullanıcı dostu bir şekilde hafifletebilirsiniz.

Yukarıdaki ekran görüntüsü şuradan alınmıştır. Millbrook İnşaat, "üst düzey yüzeyler ve detaylara dikkat ile konut inşaatı" konusunda uzmanlaşmış Perth merkezli bir inşaat şirketi. Elementor web siteleri için ana sayfadaki kahraman resmi, "ekranın üst kısmındaki" arayüzünü mükemmel şekilde kullanıyor. Mutlu, modern bir evin ve açık havuzun göz alıcı, net fotoğrafı, pozitif, rahatlatıcı hisler uyandırıyor.

Bir adım daha ileri giderek, tam yükseklikteki arka plan görüntüsünün stil seçimleri ve bir 'battaniye'nin boyutu, firmanın lüks konut mülkleri yaratma konusundaki güçlü becerisini gösteriyor. Değer önerisi yüzme havuzu suyu kadar nettir ve kullanıcılar gerekli tüm bilgileri rahatça alırlar.

Kahraman resimleriniz potansiyel müşterileri dönüştürmeye yardımcı olabilir

bir kahraman görüntüsü nasıl oluşturulur

Çekici ve görünür temas noktaları, bir dönüştürme-yeniden üretim kullanıcı akışı için temel bir bileşendir. Bu nedenle, kahraman bölümünün harekete geçirici mesajı ile kahraman imajınızın kendisi arasındaki ilişki, web sitesi oluşturma hedeflerinizi gerçekleştirebilir veya bozabilir.

CTA metinlerinizin " Şimdi üye Ol "" DAHA FAZLA "" İletişim », Vb., kahraman imajınız tüm cephelerde şeffaf bir şekilde koordine edilmelidir: görünürlük, mesajlaşma, renk şeması, görünüm, vb.

Potansiyel müşterilerle güvenilir ve etkili konuşmalar, rahat ve doğal bir atmosfere dayanır; Bunu başarmanın en iyi yolu görsel olarak hoş görüntülerdir.

Tarafından oluşturulan Elementor web sitesinde tam olarak gördüğümüz şey budur. STL Karikatürü, etkinlik eğlence hizmetleri sunan karikatürist sanatçılardan oluşan bir ekip. Animasyonlu başlık (kahraman metni), mutlu müşterileri kahraman görüntülerinde betimliyor ve karikatür sanatçılarının her bir kişi için neler sağladığını gösteriyor.

Yani, kollarınızı sıvayıp pratiklere girmeye başladığınızda, ne tür bir kahraman imajının kullanılacağına karar verme sürecinde neler oluyor?

Dört farklı kahraman görseli türünü ve hangisinin web siteniz için en iyi olduğunu nasıl değerlendireceğinizi keşfedelim.

# 1 Ürün kahramanı resmi

bir kahraman görüntüsü nasıl oluşturulur

Bir ürün kahraman resmi, büyük bir yüksek resimdir. tanım markanın ürününden. Bu görseller, ürünün değer önermesini görselleştirmeye izin verdiği sürece statik veya hareketli/hareket halinde sunulabilir.

Web tasarımcıları arasında ürün kahraman görüntülerini sergilemek ve kişiselleştirmek için popüler yöntemler şunları içerebilir:

  • Şirketin web sitesinde yukarıda gördüğümüz gibi, bireysel bir ürünün ayrıntılı / anlık görüntü örneği avustralya abonelik avo sevgilisi.
  • Pano gibi bir dijital ürün arabiriminin ekran görüntüsü.

Ürün kahramanı resimleri genellikle aşağıdakilerin web sitelerinde bulunur:e-Ticaret (ama münhasıran değil). Potansiyel müşteriler, mağazanın alışveriş ihtiyaçlarına uygunluğu hakkında bilinçli karar vermeyi destekleyen gerçek ürün örneklerini görmeyi bekler.

Avo lover, müşterilerinin kapılarına kadar gelen haftalık taze avokado aboneliklerini satın almak için kullandıkları e-ticaret web sitesini oluşturmak için Elementor'u kullandı.

Avo lover'ın müşteri tabanı, dar bir ilgi alanına sahip niş bir pazardır, bu nedenle ürün kahraman imajı seçimleri son derece mantıklıdır. Potansiyel aboneler avokado meraklılarıdır; ürünlerin yakından ve karmaşık bir fotoğrafını görmek, tam olarak görmek istedikleri şeydir.

En İyi Uygulamalar:

  • Arka plan görüntülerinin kalitesine yatırım yapın

Arka plan resminiz bir fotoğraf, video, illüstrasyon vb. olsun, resim dosyası kristal netliğinde çözünürlükte mümkün olduğunca hafif olmalıdır.

  • Kontrast seviyelerine dikkat edin

Kahraman bölümü resminizin (veya herhangi bir bileşenin) önüne metin eklerseniz, web sitesi öğeleri arasındaki karşıtlığın güçlü ve kolayca görülebildiğinden emin olun. Bu, arka plan kaplamalarının ve filtre efektlerinin son derece yararlı olabileceği yerdir.

# 2 Müşteri kahramanının resmi

Çevrimiçi işletmeler tarafından kullanılan aşağıdaki kahraman görüntüsü türü, katma değerlerini göstermek için alternatif bir yaklaşım benimser: müşterilerinin ürünü kullandığını gösterme. Bu bakış açısı, ziyaretçilerinizle empati kurmanın stratejik bir yoludur ve onların acı noktalarını anladığınızı ve ihtiyaçlarını karşılayabileceğinizi kısaca gösterir.

Yukarıdaki video klip, tarafından oluşturulan Elementor sitesinden alınmıştır. alexander Fischer, Sağlık ve fitness ile ilgili çeşitli hizmetler sunan Stuggart tabanlı bir kişisel antrenör.

Alexander'ın müşteri kahramanı imajı, sağlıklı ve formda bir yaşam tarzının keyfini çıkaran memnun bir müşteriden daha fazlasını gösterir. Kahraman görüntüsü, müşterisinin sevdikleriyle bağ kurmasını ve bağlantı kurmasını gösteren bir videoya yer vererek bunu bir adım daha ileri taşıyor.

En İyi Uygulamalar:

  • Kullanım senaryolarınızı ve müşteri deneyiminizi paylaşın

En baskın kullanım durumunu göstererek ürününüzü farklılaştırın. İş hedeflerinizi ve değerinizi aktaran bir resim, ziyaretçinin benzersiz teklifinizden nasıl yararlanacağını gösterir.

  • Hedef kitlenizle ilişki kurun

Resminizde yer alacak kişi türünü seçerken hedef kitlenizin hesaba katıldığından emin olun. Alanla ilgili anlayışınızı ve müşterilerinizi memnun etme yeteneğinizi ileten bir resim seçin.

# 3 Kurucu kahramanın görüntüsü

bir kahraman görüntüsü nasıl oluşturulur

Bir kurucu kahraman resmi, web sitesi ziyaretçisini selamlamak için kahraman bölümüne yerleştirilen, işletme sahibinin kurucusunun büyük bir resmidir.

Kurucu kahraman resimleri, aşağıdaki resimde gösterildiği gibi genellikle serbest çalışanlar, psikolog, makyaj sanatçısı veya müzisyen gibi işletme sahipleri için portföy web sitelerinde kullanılır. Elementor web sitesi Yukarıdaki Jasmine Cain tarafından.

Bir kurucu kahraman imajının en büyük erdemi, bir isme yüz vermesidir; web sitesi ziyaretçisini hizmet sağlayıcıya bağlar ve iki kişi arasında hoş bir dinamik oluşturur.

Kurucu kahraman imajınız için resim seçimi dikkatli yapılmalıdır. Aralarından seçim yapabileceğiniz birçok seçenekle, aşağıdakilere kadar kaynar:

markanızın mesajını en güçlü şekilde ne iletecek?

Bu, kurucunun doğrudan kameraya bakıp gülümsediği ya da belki farklı bir yöne baktığı bir fotoğraf mı?

Yoksa çalışkan işletme sahibinin samimi bir fotoğrafı daha mı uygun olur?

En İyi Uygulamalar:

  • Ölçü ve ölçülere dikkat edin

Ziyaretçilere tam olarak görmeleri gereken ayrıntıları gösteren net, iyi boyutlandırılmış bir resim (veya video) kullanın. Gerekirse, görüntüleri kırparak ve daha az önemli içeriği kaldırarak daha geniş alanlara odaklanabilirsiniz.

  • Resminizin neyi iletmesi gerektiğine odaklanın

Arka planın rolü, tam tersi değil, önündeki kişiye odaklanmak olmalıdır. En etkili kurucu kahraman resimleri, gülümseyen işletme sahibini gösterecek ve müşterilerini mutlu etme tutkusunu ima edecektir.

# 4 Bağlamsal olmayan kahraman resmi

bir kahraman görüntüsü nasıl oluşturulur

Bağlamsal olmayan kahraman görüntüleri, adından da anlaşılacağı gibi, ürün veya işletme sahibiyle görünüşte 'ilgisiz' bir şey gösteren dizilerdir. Bağlamsal olmayan bir kahraman imajının amacı, görsel çağrışım veya bilinçaltı bir mesaj yoluyla ziyaretçi üzerinde bir izlenim bırakmaktır. Bağlamsal olmayan resmin görüntülenmesi, kullanıcıya ürünün veya markanın ne olduğunu gösterir, ancak dolaylı olarak.

Bu teknik, örneğin, Elementor'un dijital pazarlama şirketi tarafından oluşturulan web sitesindeki yukarıdaki örnekte kullanılmaktadır. AP Teknolojisi, Oklahoma merkezli. Şirketin web sitesi, Oklahoma City gökdelenlerinin benzersiz bir açısını gösteren geniş ve net bir arka plan görüntüsü kullanıyor.

Bu fotoğraf, web sitesinin ana metninde belirtildiği gibi, şirketin değer önerisini temsil ediyor: İşinizi kurun ve şehirdeki en yüksek ofis kuleleri kadar yüksek büyümesini izleyin.

İnsan gözü, gökyüzüne hakim olan fiziksel yapıları görür görmez, bu pazarlama profesyonellerinin işletmeleri yerden yükseklere çıkarmak için çalıştığını anlıyor.

En İyi Uygulamalar:

  • Ziyaretçilerin görselin neden alakalı olduğunu anladığından emin olun

Ürününüzün doğrudan bir görselini göstermeseniz de, ürününüzün değeri ile bağlamsal olmayan kahraman görseliniz arasında bağlantı kurmanın hala kolay olduğundan emin olun. Kullanıcıların alaka düzeyini düşünmek için zaman harcamasına gerek yoktur.

  • Kahraman resmi ile kahraman metni arasında net bir bağlantı kurun

Görselinizle birlikte yerleştirdiğiniz kahraman metni, görsel içeriğiyle doğrudan ilgili olmalıdır. Metninizin birkaç tekrarını ve ifadelerin seçimini gerektirse bile bu bir zorunluluktur.

  • Uyumlu bir tasarım şeması oluşturun

Düğme metinleri ve arka planlar, başlıklar veya açıklamalar için seçtiğiniz renkler, ana resim veya sanat eseriyle uyumlu olmalıdır. Bu, web sitenizdeki tıklanabilir aksanlar için de geçerlidir:

gezinme menüsünün öğeleri, logo, vb ...

Web sitemizin prestiji, marka varlığımız ve profesyonel güvenilirliğimiz için tutarlı bir görsel dilin ne kadar önemli olduğunu hepimiz biliyoruz. Bu, tasarım stili kılavuzlarının gerçekten yardımcı olabileceği yer, özellikle de kahraman resimlerinizin web sitesi tasarımınızla uyumlu olduğundan emin olmak için.

Kahraman imajınızı nasıl test edersiniz: sevdiğimiz yöntemler

Kahraman imajınız için çeşitli seçeneklerle denemeye başladığınızda, hangi seçeneğin en fazla etkileşimi sağladığını hemen değerlendirebilir ve en etkili tasarım hakkında fikir edinebilir ve sonuçta buna bağlı kalabilirsiniz.

Mümkün olan en iyi kahraman imajını kullandığınızdan emin olmak için kurulumu kolay ve zengin bilgi sağlayan bazı olmazsa olmaz test yöntemleri burada.

A / B Kahraman imajınızı test edin

A / B testi, tasarımcının kahraman bölümü için iki veya daha fazla seçenek oluşturmasını gerektirir (başlıkların ve kopyalarının iki versiyonu, kahraman görüntüsünün kendisi, düzen bölümü, yazı tipi boyutu veya aklınıza gelebilecek başka herhangi bir şey olsun) - tamamen size kalmış.

Kullanıcılar kahraman resminizin üzerine geldiğinde bir karışım modu kullanmaya karar verdiğinizi, ancak hangi modun kullanıcı deneyimini en çok iyileştireceğini bilmediğinizi hayal edin.

Gerçekleştirin A / B testi iki farklı mod seçeneği arasında (sonuçta 13 karışım modu seçeneği vardır), hangisinin en fazla gezinme, tıklama ve nihayetinde daha fazla etkileşim aldığını görmek için birden fazla modu denemenize olanak tanır.

A / B kahraman bölümünüzü test etmedeki en yaygın ve önemli adımlardan biri de en az iki CTA düğmesi seçeneğini test etmektir - hangi düğmenin en fazla dönüşümü aldığını belirlemek için.

Spesifik olarak, bir CTA düğmesinin rengini test etmek, her zaman hangi düğme renginin kullanıcıları en çok çektiğini ve ilgisini çektiğini anlamanıza olanak tanıyan yararlı bir deneyimdir. Düğme rengi A / B testi, web tasarımcıları arasında çok popülerdir, çünkü gerçekleştirmesi hızlı ve kolaydır ve ek tasarım kaynakları gerektirmez.

Kullanıcı davranışını keşfetmek için ısı haritası araçlarını kullanın

Isı haritası araçları, kullanıcıların bir web sayfasında tıkladığı yerleri belirler ve analiz eder. Bu araçlar, web sitesi ve açılış sayfası sahiplerinin, kullanıcıların içerikte aktif olarak nasıl gezindiğini tam olarak görmelerini sağlar. Bu, araç, kullanıcıların bağlantılar, düğmeler, seçenekler ve tabii ki CTA'lar gibi temel öğelerle (ve nasıl) etkileşime girip girmediğini belirlediğinde gerçekleştirilir.

Web sitesi sahiplerinin ısı haritası araçlarını kullanarak toplayabileceği bazı bilgiler:

  • Tıklanamayan öğeler kullanıcıların dikkatini dağıtır.
  • Düğme boyutları çok büyük veya çok küçük.
  • Düğmelerin renkleri görünmüyor.

Web sitenizin kahramanı olun

Kahraman bölümünüzü ve kahraman görüntüsünü tasarlamak, web tasarım sürecinizdeki en önemli ve etkili kararlardan biridir. Web yaratıcıları genellikle bir web sitesinin kahraman bölümüne web sitesi sunumunuzun “açılış eylemi”, esasen hoş geldiniz jestiniz olarak atıfta bulunur.

Web sitesi trendleri sürekli gelişiyor ve web tasarım olanaklarına yeni özellikler ekliyor. Tasarım değerlendirmelerinizde kahraman bölümünüzü ön planda tutmak her zaman önemlidir - web sitenizi kalabalığa sunma potansiyeline her zaman ulaştığından emin olun.

Elementor Pro'yu Hemen Alın!

Sonuç

Buraya ! Size bir kahraman imajını nasıl yapacağınızı gösteren bu makale bu kadar. Oraya nasıl gideceğinizle ilgili herhangi bir endişeniz varsa fbize bildirin Yorumlar.

Ancak, ayrıca kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.

Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.

...