Gambar pahlawan adalah yang sering digunakan pembuat web untuk menyapa pengunjung situs web mereka dalam format yang menarik.
Jika Anda pernah bertanya-tanya " apa itu gambar pahlawan? ", Anda berada di tempat yang tepat. Pada artikel ini, kita akan melihat topik dan bagaimana Anda dapat membuat gambar pahlawan yang indah dengan efek visual yang kuat.
Gambar pahlawan adalah istilah yang digunakan oleh pembuat web untuk menggambarkan konten berukuran besar di bagian atas halaman web.
Peran gambar pahlawan adalah untuk menyambut pengunjung Anda segera setelah mereka bertemu dengan perusahaan Anda atau organisasi. Banyaknya jenis gambar pahlawan di perangkat pembuat web membawa begitu banyak alasan untuk menyertakan gambar pahlawan di situs web Anda.
Mari kita pahami keuntungan utama melakukan ini, dan mengapa?
Apa itu gambar pahlawan?
Merangkul kebajikan "kesan pertama yang baik", gambar pahlawan biasanya memiliki satu atau lebih karakteristik berikut:
- Gambar berkualitas tinggi high
- Video yang menawan
- Penggeser gambar atau sebuah korsel multimedia
- Ilustrasi animasi atau statis
- Header dan deskripsi di samping atau di depan konten visual
Dalam hal gaya, detail desain umum yang akan Anda lihat diterapkan pada gambar pahlawan meliputi:
- Gambar latar belakang atau video dengan hamparan latar belakang
- Posisi tetap atau lengket or
- Menunjuk mempengaruhi perubahan transparansi atau overlay
- Elemen kontras yang membedakan gambar dari header di atas atau konten berikutnya
Kebaruan gambar pahlawan dalam desain web adalah bahwa di satu sisi Anda bekerja dengan ruang yang sangat spesifik dan pasti di halaman web. Di sisi lain, pilihan gaya, efek, dan teknik untuk digunakan saat mendesain bagian konten halaman ini benar-benar tidak terbatas.
Mengapa Anda harus menggunakan gambar pahlawan?
Ketika desain dan fungsionalitas gambar pahlawan Anda memiliki kaliber tinggi, Anda secara otomatis mendapatkan kredibilitas dan kepercayaan pengguna. Citra pahlawan Anda dan konten pahlawan di sekitarnya sering kali mewakili peluang pertama Anda untuk menyampaikan nilai jual unik Anda organisasi dan titik kontak pengguna utama untuk konversi.
Saat ingin memicu perilaku pengguna tertentu, citra pahlawan terbaik dan kuat yang membuat kesan pertama yang kuat pada pengunjung Anda adalah cara terbaik untuk memulai.
Anda dapat membuat kesan pertama yang abadi
Kesan pertama penting dalam banyak bidang kehidupan, tetapi terutama ketika berhubungan dengan bagaimana pengguna berhubungan dengan estetika situs web.
Hasil para ahli dalam interaksi manusia-mesin (HCI) dan visualisasi di Google Research membuktikan pengaruh gambar pahlawan pada keberhasilan sebuah situs web:
Pelajaran ini, " Peran kompleksitas visual dan prototipe dalam kesan pertama situs web : bekerja untuk memahami penilaian estetika ”, Mempelajari bagaimana kompleksitas visual dan prototipikal memengaruhi desain situs web dan kesan pertama penggunanya.
Penulis menunjukkan 119 tangkapan layar aktual dari situs web kepada peserta studi mereka dan menemukan bahwa kompleksitas visual dan prototipe memengaruhi persepsi estetika pengguna dalam 50 gambar pertama pameran, dan terkadang bahkan dalam 17 milidetik.
Sebagai pembuat web, kesimpulan kami cukup sederhana: Gambar pahlawan yang kami pilih dan cara kami menampilkannya di halaman kami sangat memengaruhi sentimen dan perilaku pengguna.
Anda akan mendapatkan hasil maksimal dari konten Anda di paro atas
Bagian “paro atas” halaman web dapat didefinisikan dengan istilah sederhana: konten yang memenuhi layar Anda / muncul di atas batas bawah jendela browser web setelah halaman Anda dimuat. Jika konten memerlukan pengguliran untuk dilihat, itu berarti konten tersebut berada "di bawah flip".
Konsep “above the fold” berasal dari desain dan penerbitan cetak, jauh sebelum era media digital. Kita semua tahu bagaimana rasanya segera melihat sesuatu di paruh atas halaman pertama, dan bahkan aman untuk mengatakan bahwa konten di halaman pertama sering kali membuat kita memutuskan apakah akan membeli surat kabar atau tidak, atau berhenti. di kios koran.
Inilah tepatnya mengapa konten Anda di paro atas bisa menjadi pemecah masalah besar dalam kesuksesan situs web Anda.
Apa yang kita maksud?
Jika pengunjung situs web bingung dengan konten dan gambar Anda di paro atas, mereka akan segera meninggalkan situs web Anda. Jika citra pahlawan Anda dan lingkungannya di paro atas jelas, menarik, dan mewakili proposisi nilai Anda dengan baik, dia akan lebih cenderung bertahan.
Pada akhirnya, semakin banyak Anda berinvestasi pada gambar dan konten bagian pahlawan Anda, semakin kecil kemungkinan pengguna untuk keluar dengan cepat.
Jangan lupa tentang Desain Responsif
Perlu diingat bahwa lokasi lipatan layar bergantung pada ukuran layar perangkat. Ini merupakan pertimbangan penting dalam desain responsif, karena konten paruh atas harus disesuaikan dan dikonfigurasi dengan cara yang dapat diterapkan ke berbagai ukuran perangkat.
Desainer dan pengembang web sering menggunakan breakpoint khusus perangkat untuk menjamin ketanggapan ini. Ini memberi Anda kendali penuh atas kemampuan beradaptasi desain situs web Anda dengan ukuran layar yang relevan dan menghindari tampilan atau dampak yang dikompromikan dari gambar pahlawan Anda.
Nyatakan proposisi nilai Anda tanpa informasi yang berlebihan
Anda mungkin akrab dengan konsep "informasi yang berlebihanDalam desain situs web dan pengalaman pengguna : Kami ingin menghindari penggunaan terlalu banyak konten, terutama konten tertulis, saat mewakili merek dan nilai bisnis kami.
Dalam pengertian ini, penggunaan gambar, ilustrasi, atau video bernilai 1 kata. Penyesuaian citra merek yang efektif akan menangkap seluruh cerita Anda dalam satu media visual. Alih-alih mengungkapkan cerita dan proposisi branding Anda, Anda mungkin dapat meringankan beban kognitif pengguna Anda dengan cara yang sederhana dan ramah pengguna.
Tangkapan layar di atas diambil dari Konstruksi Millbrook, sebuah perusahaan konstruksi berbasis di Perth yang mengkhususkan diri dalam "konstruksi perumahan dengan sentuhan akhir kelas atas dan perhatian terhadap detail". Untuk situs web Elementor mereka, gambar pahlawan di beranda memanfaatkan antarmuka "paro atas" dengan sempurna. Foto rumah modern dan kolam renang luar ruangan yang menarik dan segar memicu getaran positif dan santai.
Mengambil langkah lebih jauh, pilihan gaya gambar latar belakang tinggi penuh dan ukuran 'selimut' menunjukkan kemampuan kokoh perusahaan untuk menciptakan properti hunian mewah. Proposisi nilai sejernih air kolam renang, dan pengguna dengan nyaman menyerap semua informasi yang diperlukan.
Gambar pahlawan Anda dapat membantu mengonversi prospek
Titik kontak yang menarik dan terlihat adalah bahan dasar untuk alur pengguna konversi-reproduksi. Inilah sebabnya mengapa hubungan antara ajakan bertindak bagian pahlawan dan gambar pahlawan Anda sendiri dapat membuat atau menghancurkan tujuan pembangunan situs web Anda.
Biarkan teks CTA Anda mengatakan " Inscrivez-vous pemeliharaan "" Baca lebih lanjut "" Contactez-nous », Dll, gambar pahlawan Anda harus dikoordinasikan secara transparan di semua lini: visibilitas, pengiriman pesan, skema warna, penampilan, dll.
Percakapan yang kredibel dan efektif dengan klien potensial didasarkan pada suasana yang nyaman dan alami; citra visual menyenangkan adalah cara terbaik untuk mencapai hal ini.
Inilah yang kami lihat di situs web Elementor yang dibuat oleh Karikatur STL, tim seniman kartun yang menyediakan layanan hiburan acara. Judul animasi (teks pahlawan) menggambarkan pelanggan yang bahagia dalam gambar pahlawan mereka, menunjukkan apa yang disediakan oleh seniman kartun untuk setiap orang.
Jadi, setelah Anda menyingsingkan lengan baju dan mulai mempraktikkannya, apa yang terjadi dalam proses memutuskan jenis gambar pahlawan apa yang akan digunakan?
Mari kita jelajahi empat jenis gambar pahlawan yang berbeda dan cara menilai mana yang paling cocok untuk situs web Anda.
Gambar pahlawan produk #1
Gambar utama produk adalah gambar tinggi yang besar definisi dari produk merek tersebut. Gambar-gambar ini dapat disajikan secara statis atau bergerak/beraksi, selama memungkinkan untuk memvisualisasikan proposisi nilai produk.
Cara populer di kalangan desainer web untuk memamerkan dan mempersonalisasi gambar pahlawan produk mereka dapat mencakup:
- Contoh detail / snapshot dari produk individual, seperti yang kita lihat di atas di situs web perusahaan Langganan Avo Lover Australia.
- Cuplikan layar antarmuka produk digital, seperti dasbor.
Gambar pahlawan produk biasanya ditemukan di situs webe-Commerce (tetapi tidak eksklusif). Pembeli potensial berharap untuk melihat contoh produk aktual, yang mendukung pengambilan keputusan berdasarkan informasi tentang kesesuaian toko untuk kebutuhan belanja mereka.
Kekasih Avo menggunakan Elementor untuk membuat situs web e-niaga mereka, yang digunakan klien mereka untuk membeli langganan mingguan alpukat segar yang dikirim ke depan pintu mereka.
Basis pelanggan pecinta Avo adalah ceruk pasar di area minat yang ditentukan secara sempit, sehingga pilihan gambar pahlawan produk mereka sangat masuk akal. Pelanggan potensial adalah penggemar alpukat; melihat foto produk dari dekat dan rumit adalah persis apa yang ingin mereka lihat.
Praktik terbaik:
- Berinvestasi dalam kualitas gambar latar belakang
Apakah gambar latar belakang Anda adalah foto, video, ilustrasi, dll., file gambar harus seringan mungkin, dengan resolusi sebening kristal.
- Perhatikan tingkat kontras
Jika Anda menambahkan teks di depan gambar bagian pahlawan Anda (atau komponen apa pun), pastikan kontras antara elemen situs web kuat dan mudah dilihat. Di sinilah overlay latar belakang dan efek filter bisa sangat berguna.
# 2 Gambar pahlawan klien
Jenis gambar pahlawan berikut yang digunakan oleh bisnis online mengambil pendekatan alternatif untuk menunjukkan nilai tambah mereka: menunjukkan pelanggan mereka menggunakan produk. Perspektif ini adalah cara strategis untuk berempati dengan pengunjung Anda, dengan singkat menunjukkan bahwa Anda memahami titik rasa sakit mereka dan dapat memenuhi kebutuhan mereka.
Klip video di atas diambil dari situs Elementor yang dibuat oleh Alexander Fisher, pelatih pribadi yang berbasis di Stuggart yang menyediakan berbagai layanan terkait kesehatan dan kebugaran.
Citra pahlawan pelanggan Alexander menunjukkan lebih dari sekadar pelanggan yang puas menikmati gaya hidup sehat dan bugar. Gambar pahlawan mengambil langkah lebih jauh dengan menampilkan video yang menampilkan ikatan kliennya dan terhubung dengan orang yang dicintai.
Praktik terbaik:
- Bagikan kasus penggunaan dan pengalaman pelanggan Anda
Bedakan produk Anda dengan menunjukkan use case yang paling dominan. Gambar yang menyampaikan tujuan dan nilai bisnis Anda menunjukkan bagaimana pengunjung akan mendapat manfaat dari penawaran unik Anda.
- Kaitkan dengan audiens target Anda
Pastikan audiens target Anda diperhitungkan saat memilih tipe orang yang akan ditampilkan dalam gambar Anda. Pilih gambar yang mengomunikasikan pemahaman Anda tentang bidang tersebut dan kemampuan Anda untuk menyenangkan pelanggan Anda.
# 3 Gambar pahlawan pendiri
Gambar pahlawan pendiri adalah gambar besar pendiri pemilik bisnis, ditempatkan di bagian pahlawan untuk menyapa pengunjung situs web.
Gambar pahlawan pendiri sering digunakan di situs web portofolio untuk pekerja lepas, pemilik bisnis seperti psikolog, penata rias, atau musisi seperti yang ditunjukkan pada gambar. Situs web elemen oleh Jasmine Cain di atas.
Keutamaan terbesar dari citra pahlawan pendiri adalah bahwa ia menempatkan wajah pada sebuah nama; itu menghubungkan pengunjung situs web ke penyedia layanan, menciptakan dinamika yang menyenangkan antara dua individu.
Pilihan gambar untuk gambar pahlawan pendiri Anda harus ditangani dengan hati-hati. Dengan banyak pilihan untuk dipilih, yang bermuara pada:
apa yang akan menyampaikan pesan merek Anda dengan cara sekuat mungkin?
Apakah ini foto pendiri yang menatap lurus ke kamera dan tersenyum, atau mungkin melihat ke arah yang berbeda?
Atau, apakah foto candid pemilik bisnis pekerja keras akan lebih cocok?
Praktik terbaik:
- Perhatikan ukuran dan dimensi
Gunakan gambar (atau video) yang jelas dan berukuran baik yang menunjukkan kepada pengunjung detail persis yang perlu mereka lihat. Jika perlu, Anda dapat fokus pada area gambar yang lebih luas dengan memotongnya dan menghapus konten yang kurang penting.
- Fokus pada apa yang harus disampaikan oleh gambar Anda
Peran latar belakang harus fokus pada orang di depannya, bukan sebaliknya. Gambar pahlawan pendiri yang paling berdampak akan menunjukkan pemilik bisnis yang tersenyum, menyiratkan semangatnya untuk membuat pelanggan senang.
# 4 Gambar pahlawan non-kontekstual
Gambar pahlawan non-kontekstual adalah, seperti namanya, urutan yang menampilkan sesuatu yang tampaknya 'tidak terkait' dengan pemilik produk atau bisnis. Tujuan dari gambar pahlawan non-kontekstual adalah untuk membuat kesan pada pengunjung melalui asosiasi visual atau pesan bawah sadar. Melihat gambar non-kontekstual menunjukkan kepada pengguna apa produk atau merek itu, tetapi secara tidak langsung.
Teknik ini digunakan, misalnya, dalam contoh di atas dari situs web Elementor yang dibangun oleh perusahaan pemasaran digital Teknologi AP, berbasis di Oklahoma. Situs web perusahaan menggunakan gambar latar belakang yang lebar dan jelas yang menunjukkan sudut unik gedung pencakar langit Kota Oklahoma.
Foto ini mewakili proposisi nilai perusahaan, sebagaimana dinyatakan dalam teks pahlawan situs web: Bangun bisnis Anda dan saksikan bisnis itu tumbuh, setinggi menara perkantoran tertinggi di kota.
Segera setelah mata manusia melihat struktur fisik yang mendominasi langit, ia memahami bahwa para profesional pemasaran ini bekerja untuk membuat bisnis berdiri, ke puncak.
Praktik terbaik:
- Pastikan pengunjung memahami mengapa gambar itu relevan
Meskipun Anda tidak menampilkan visual langsung dari produk Anda sendiri, pastikan bahwa menghubungkan nilai produk Anda dengan citra pahlawan non-kontekstual Anda masih mudah dikenali. Pengguna tidak perlu menghabiskan waktu memikirkan relevansinya.
- Buat tautan yang jelas antara gambar pahlawan dan teks pahlawan
Teks pahlawan yang Anda tempatkan bersama dengan gambar Anda harus berhubungan langsung dengan konten visualnya. Ini adalah suatu keharusan, bahkan jika itu membutuhkan beberapa iterasi teks Anda dan pilihan kata-katanya.
- Buat skema desain yang kohesif
Warna yang Anda pilih untuk teks tombol dan latar belakang, tajuk atau deskripsi harus berkoordinasi dengan gambar pahlawan atau karya seni. Ini juga berlaku untuk aksen yang dapat diklik di situs web Anda:
elemen menu navigasi, logo, dll ...
Kita semua tahu betapa pentingnya bahasa visual yang konsisten untuk prestise situs web kita, kehadiran merek, dan kredibilitas profesional. Di sinilah panduan gaya desain dapat sangat membantu, terutama dalam memastikan gambar pahlawan Anda selaras dengan desain situs web Anda.
Cara menguji gambar pahlawan Anda: metode yang kami sukai
Setelah Anda mulai bereksperimen dengan beberapa opsi untuk gambar pahlawan Anda, Anda dapat segera menilai opsi mana yang menghasilkan keterlibatan paling banyak dan mendapatkan wawasan tentang desain yang paling efektif - dan akhirnya tetap dengan yang itu.
Berikut adalah beberapa metode pengujian yang harus dimiliki yang mudah disiapkan dan memberikan banyak pengetahuan untuk memastikan Anda menggunakan gambar pahlawan terbaik.
A / B Uji gambar pahlawan Anda
Pengujian A / B mengharuskan perancang untuk membuat dua atau lebih opsi untuk bagian pahlawan (apakah itu dua versi judul dan salinannya, gambar pahlawan itu sendiri, bagian tata letak, ukuran font, atau apa pun yang dapat Anda pikirkan) - itu sepenuhnya terserah Anda.
Bayangkan Anda memutuskan untuk menggunakan mode campuran ketika pengguna mengarahkan kursor ke gambar pahlawan Anda, tetapi Anda tidak tahu mode mana yang paling meningkatkan pengalaman pengguna.
Lakukan a Tes A/B antara dua opsi mode yang berbeda (ada 13 opsi mode campuran, bagaimanapun juga), memungkinkan Anda mencoba lebih dari satu mode untuk melihat mana yang paling banyak melayang, klik, dan akhirnya lebih banyak interaksi.
Salah satu langkah paling umum dan penting dalam pengujian A / B bagian pahlawan Anda adalah juga menguji setidaknya dua opsi tombol CTA - untuk mengidentifikasi tombol mana yang mendapatkan konversi paling banyak.
Secara khusus, menguji warna tombol CTA selalu merupakan pengalaman yang berguna yang memungkinkan Anda memahami warna tombol mana yang paling menarik dan melibatkan pengguna. Pengujian A / B warna tombol sangat populer di kalangan desainer web karena cepat dan mudah dilakukan dan hampir tidak memerlukan sumber daya desain tambahan.
Gunakan alat peta panas untuk menemukan perilaku pengguna
Alat peta panas mengidentifikasi dan menganalisis tempat di mana pengguna mengklik halaman web. Alat ini memungkinkan pemilik situs web dan halaman arahan untuk melihat dengan tepat bagaimana pengguna secara aktif menavigasi konten. Ini dilakukan setelah alat mengidentifikasi apakah pengguna berinteraksi dengan elemen kunci (dan bagaimana), seperti tautan, tombol, opsi, dan tentu saja, CTA.
Berikut adalah beberapa informasi yang dapat diperoleh pemilik situs web dari menggunakan alat peta panas:
- Item yang tidak dapat diklik mengalihkan perhatian pengguna.
- Ukuran tombol terlalu besar atau terlalu kecil.
- Warna tombol tidak terlihat.
Jadilah pahlawan situs web Anda
Tren situs web terus berkembang, menambahkan fitur baru ke kemungkinan desain web. Itu selalu penting untuk menjaga bagian pahlawan Anda di garis depan pertimbangan desain Anda - memastikan bahwa itu selalu mencapai potensinya dalam menyajikan situs web Anda kepada orang banyak.
Dapatkan Elementor Pro Sekarang!
Kesimpulan
Di Sini ! Itu saja untuk artikel ini yang menunjukkan cara membuat gambar pahlawan. Jika Anda memiliki kekhawatiran tentang cara menuju ke sana fberi tahu kami di komentar.
Namun, Anda juga bisa berkonsultasi sumber daya kita, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.
Namun sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.
...
