Apa itu hero banner toko online?
Hero banner toko online adalah gambar besar di bagian atas halaman toko, hal pertama yang dilihat pengunjung dan yang menentukan kesan seluruh toko. Gambar ini harus memperkenalkan brand, menonjolkan satu produk atau pesan, dan menyisakan ruang untuk judul serta tombol, sambil tetap terlihat rapi agar langsung dipercaya dalam sekejap.
Di Morphic, Anda membuat banner ini dari satu prompt teks lewat browser. Jelaskan produknya, nadanya, dan tampilan brand Anda, lalu sesuaikan dan unduh dalam HD. Hasilnya hero banner yang tajam dan mendorong konversi, tanpa sesi foto atau jasa desainer.
Tentukan pesan dan titik fokus
Pilih apa yang dijual hero ini, produk andalan, koleksi baru, atau janji brand, lalu satu baris kalimat yang membawanya. Fokus yang jelas membuat banner tidak terasa ramai.
Jelaskan komposisi hero-nya
Buka Morphic dan jelaskan scene-nya: produk atau model diletakkan dengan ruang kosong yang disengaja untuk judul dan tombol, dengan pencahayaan yang sesuai nada brand Anda. Buat beberapa komposisi lalu pilih yang paling seimbang.
Sisakan ruang untuk teks dan tombol
Minta area kosong yang jelas, biasanya di salah satu sisi, tempat judul dan tombol ajakan bertindak Anda akan duduk tanpa menutupi subjeknya. Ini menjaga teksnya tetap terbaca saat sudah tayang.
Terapkan gaya brand
Minta palet brand Anda dan nada yang sesuai dengan tampilan toko lainnya, bersih dan minimal, hangat dan editorial, atau berani dan mencolok. Konsistensi dengan tokonya membuat hero ini terasa menyatu.
Ekspor dalam ukuran responsif
Buat versi desktop yang lebar dan crop vertikal untuk HP agar hero-nya pas di semua layar, lalu unduh masing-masing dalam HD dan pasang di homepage Anda.
Dua komposisi hero dengan ruang teks di sisi berlawanan untuk produk yang sama.
Ciri hero banner yang bagus
| Kualitas | Artinya | Kenapa penting |
|---|---|---|
| Titik fokus jelas | Satu produk atau pesan memimpin | Pengunjung paham tokonya dalam sekejap |
| Ruang aman untuk teks | Ada tempat untuk judul dan tombol | Teksnya tetap terbaca di atas gambar |
| Nada sesuai brand | Cahaya dan palet sesuai tokonya | Hero ini langsung membangun kepercayaan |
| Tampilan responsif | Pas di desktop maupun HP | Banner terlihat disengaja di layar apa pun, termasuk HP |
Morphic vs cara tradisional
| Morphic | Sesi foto plus desain | |
|---|---|---|
| Biaya | Tersedia di Morphic | Biaya sesi foto dan jasa desain |
| Waktu | Hero selesai dalam hitungan menit | Berhari-hari dari brief sampai file final |
| Skill yang dibutuhkan | Jelaskan scene-nya dengan kata-kata | Kemampuan fotografi dan layout |
| Iterasi | Buat ulang untuk setiap ide | Pemotretan atau pembuatan ulang untuk setiap opsi |
FAQ
Minta ruang kosong yang disengaja, biasanya di satu sisi, tempat judul dan tombol Anda akan duduk tanpa menutupi subjeknya. Itu menjaga teksnya tetap terbaca saat banner sudah tayang.
Ya. Sebutkan palet dan nada toko Anda, lalu buat hero-nya sesuai itu agar terasa menyatu dengan homepage.
Ya. Buat komposisi desktop yang lebar dan crop vertikal untuk HP agar hero-nya pas di kedua layar, lalu unduh masing-masing dalam HD.
Tidak. Jelaskan produk atau modelnya dan scene yang Anda mau, lalu komposisinya langsung dibuat tanpa perlu sesi foto. Gambar referensi bersifat opsional.
Sebanyak yang Anda mau. Buat ulang komposisi dan nada yang berbeda dengan cepat, lalu pilih yang paling kuat sebelum dipublikasikan.
Ya. Hero banner yang Anda buat dengan Morphic bebas dipakai di toko online dan kampanye Anda.