Hero section adalah bagian teratas dari halaman website, biasanya berisi
- Judul besar (headline)
- Gambar atau ilustrasi utama
- Subjudul (kalau perlu)
- Tombol ajakan (CTA / Call to Action)
Tujuannya sederhana:
memberikan gambaran cepat tentang isi atau tujuan website, dan mengarahkan pengunjung untuk melakukan aksi tertentu (misalnya: daftar, beli, atau lihat produk).Komponen Umum Hero Section
Headline: Kalimat utama yang menyampaikan pesan intiSubheadline: Penjelasan tambahan (opsional) untuk memperjelas maksud headline
Visual: Gambar, ilustrasi, atau video yang mendukung konten
Kenapa Hero Section Penting?
- Kesan PertamaIni bagian pertama yang dilihat pengunjung, jadi penting untuk tampil menarik dan jelas.
- Arahkan Tindakan PengunjungTombol CTA bisa langsung mengarahkan pengunjung ke langkah selanjutnya yang kamu inginkan.
- Menjelaskan Tujuan WebsiteDalam beberapa detik, pengunjung bisa tahu: "Oh, ini web jualan produk", atau "Ini jasa desain grafis".
Tips Membuat Hero Section yang Efektif
- Gunakan headline yang singkat dan jelas
- Pilih visual yang mendukung konten, jangan asal cantik
- Buat tombol CTA yang menonjol, mudah diklik dan terlihat jelas
- Pastikan tampil responsif di mobile dan desktop
Contoh Website dengan Hero Section Baik
- Dropbox – Sederhana, fokus ke manfaat utama, CTA jelas
- Duolingo – Headline menarik, visual mendukung, ajakan langsung
- Tokopedia – Fokus pada promosi utama dan navigasi yang jelas
