Contoh Bagian Hero Situs Web untuk Usaha Kecil (Beranotasi)
Contoh bagian hero situs web untuk usaha kecil dengan anotasi: enam layar pertama, kebutuhan pelanggan, pilihan desain dan batasannya, tabel perbandingan, serta brief hero yang bisa disalin. Semua contoh adalah desain templat We.Inc.
Bagian hero adalah layar pertama sebuah halaman. Untuk usaha kecil, bagian ini harus menjawab tiga hal sebelum pengunjung menggulir: apa yang Anda lakukan, di mana (atau untuk siapa), dan langkah berikutnya. Enam contoh di bawah adalah desain templat We.Inc, bukan situs pelanggan. Untuk tiap contoh, kami mencatat kebutuhan pelanggan, hal yang dilakukan desain, dan hal yang perlu diperbaiki sebelum digunakan.
Metode pemilihan dan audiens
Kami memilih tampilan pertama dari galeri We.Inc dengan pendekatan berbeda: berfokus pada headline, foto, video, dan portofolio. Masing-masing dinilai berdasarkan tiga pertanyaan di atas. Tangkapan layar menampilkan layar pertama versi desktop; di ponsel, hero yang sama akan tersusun ulang, jadi periksa desain pilihan Anda di ponsel sungguhan juga (lihat desain web mobile-first).
Contoh dengan anotasi
1. Headline manfaat ditambah dua tombol (tukang leding)
Kebutuhan: mendapat bantuan segera. Desain: headline singkat tentang manfaat, satu kalimat mengenai layanan, tombol utama "Pesan Sekarang" dan tautan sekunder "Lihat layanan kami". Perbaiki sebelum digunakan: ilustrasi pengukur bertuliskan "Respons cepat" disertai keterangan waktu respons rata-rata. Itu klaim sementara; ganti dengan informasi yang benar (nomor lisensi, wilayah layanan) atau hapus. Tambahkan nomor telepon untuk penelepon yang membutuhkan bantuan segera.
2. Janji spesifik, bukti lokal, dan foto (akuntan)
Kebutuhan: memutuskan apakah firma ini layak dihubungi. Desain: headline konkret, nama kota di teks pengantar dan kalimat, foto cakrawala kota setempat, tombol "Mulai Hari Ini" serta tautan "Hubungi kami". Perbaiki sebelum digunakan: lencana di atas foto adalah teks templat; pertahankan hanya angka yang dapat Anda buktikan.
3. Foto dan baris statistik (perawatan kebun)
Kebutuhan: meminta penawaran perawatan kebun rutin. Desain: headline sederhana, nama kota di kalimat, tombol "Dapatkan Penawaran" dan "Lihat Hasil Terbaru", serta deretan angka. Perbaiki sebelum digunakan: angka (tahun, proyek, peringkat) adalah teks sementara dalam templat. Ganti dengan angka nyata yang dapat diperiksa atau hapus; angka rekaan merusak kepercayaan dan dapat melanggar aturan iklan.
4. Video layar penuh dengan headline suasana (restoran)
Kebutuhan: merasakan suasana, lalu memesan. Desain: nama restoran di atas video dapur, dengan lokasi dan jam buka di bagian bawah. Perbaiki sebelum digunakan: tidak ada tombol yang terlihat; "Reservasi" hanya berupa tautan kecil di sudut. Tambahkan tombol "Pesan meja" yang jelas dan pastikan video cukup ringan untuk dimuat di ponsel.
5. Foto dekat produk dengan pernyataan singkat (toko perhiasan)
Kebutuhan: melihat kualitas perhiasan. Desain: foto dekat menjadi daya tarik utama, dengan headline dua kata dan tautan "Jelajahi koleksi". Perbaiki sebelum digunakan: headline tidak menjelaskan penawaran atau lokasinya. Tambahkan kalimat seperti "Cincin buatan tangan dan layanan perbaikan di [kota]", serta gunakan foto produk Anda sendiri.
6. Tampilan pertama berfokus pada portofolio (arsitek)
Kebutuhan: menilai mutu pekerjaan sebelumnya. Desain: headline tegas di atas gambar rancangan, kolom catatan layanan, dan kartu proyek unggulan dengan tautan "Lihat proyek". Perbaiki sebelum digunakan: headline pada desain ini terpotong di tengah kalimat ("Buildings that // modern here..."); tulis ulang agar terbaca utuh pada semua lebar layar. Tambahkan cara untuk memulai pertanyaan.
Perbandingan
| Contoh | Menjelaskan apa | Menjelaskan lokasi | Langkah selanjutnya jelas | Perbaikan utama |
|---|---|---|---|---|
| Tukang leding | Ya | Hanya di logo | Ya | Klaim sementara, tanpa telepon |
| Akuntan | Ya | Ya | Ya | Lencana templat |
| Perawatan kebun | Ya | Ya | Ya | Angka sementara |
| Restoran | Sebagian | Ya (alamat) | Tidak | Tambahkan tombol pemesanan |
| Toko perhiasan | Tidak | Hanya di logo | Ya | Jelaskan apa dan di mana |
| Arsitek | Sebagian | Di dalam kalimat | Lemah | Headline terputus, tanpa pertanyaan |
Demonstrasi awal dan brief hero yang bisa disalin
Diisi untuk bisnis fiktif, "Green Row Landscaping" (demonstrasi berlabel; tidak ada hasil yang diklaim), lalu diikuti kolom kosong untuk disalin:
Headline (apa yang Anda lakukan, untuk siapa): Desain dan pembuatan taman untuk lahan kecil
Kalimat pendukung (lokasi + cara): Di [kota]. Penawaran kami tertulis dan kami sendiri yang mengerjakan.
Tombol utama: Jadwalkan kunjungan lokasi
Tautan kedua: Lihat taman terbaru
Bukti (hanya yang nyata): Berasuransi - tautan ke ulasan Google
Gambar: foto taman selesai milik sendiri, sudah dikompres
Telepon (ketuk untuk menelepon): tampil di header
Headline:
Kalimat pendukung:
Tombol utama:
Tautan kedua:
Bukti (hanya yang nyata):
Gambar:
Telepon:Uji pilihan headline dengan penganalisis headline.
Hal yang dapat diadaptasi dan yang tidak boleh disalin
- Adaptasi strukturnya (headline, kalimat pendukung, tombol, bukti), bukan kata-katanya.
- Jangan pertahankan angka, peringkat, atau lencana templat yang tidak dapat Anda buktikan.
- Periksa kontras teks di atas foto atau video dengan pemeriksa kontras warna.
- Kompres gambar hero (kompresor gambar dapat membantu); gambar ini sering menjadi elemen paling lambat di halaman.
Mulai dengan templat yang sesuai
Pilih gaya hero yang cocok untuk bisnis Anda dari templat bisnis, lalu edit dengan pembuat situs web We.Inc. Paket Free menyediakan hingga 3 situs templat dengan alamat we.inc (tanpa kredit AI dan domain khusus); Starter seharga $20/bulan menambahkan fitur pembuatan berbantuan AI dan domain khusus (harga). Periksa hasilnya dengan penilai situs web dan susun anggarannya dengan kalkulator biaya situs web.
Mulai membuat situs web bisnis Anda
Pertanyaan yang sering diajukan
Apa yang sebaiknya dicakup bagian hero situs web?
Apa yang Anda lakukan, di mana atau untuk siapa, satu tombol utama, dan bila sesuai bukti nyata serta foto pekerjaan Anda sendiri.
Haruskah bagian hero menggunakan video?
Hanya jika video memberi nilai tambah dibanding foto, cepat dimuat di ponsel, dan teks serta tombol tetap mudah dibaca. Selalu tambahkan tombol yang jelas.
Apakah situs bisnis ini sungguhan?
Tidak. Ini adalah desain templat We.Inc yang digunakan untuk menunjukkan pola hero dan hal yang perlu diperbaiki sebelum diterbitkan.
Mulai gratis · Tanpa kartu kredit
Product
- AI Website Builder: Describe a site in plain English; it's live in minutes
- White Label Platform: Your brand, your domain, your margin
- Enterprise: SSO, custom SLAs, and dedicated support
- Developer API: Embed site generation into your SaaS
Who It's For
- For Agencies: Resell under your brand
- For Freelancers: Your own branded builder
- For Hosting Providers: Add a builder to your stack
- For SaaS Platforms: Embed site creation via API
- For Startups
- For Financial Services
- For Healthcare
Features
- Drag & Drop Editor
- Built-in SEO Tools
- Custom Branding
- Client Dashboard
- Reseller Billing (Stripe Connect)
Resources
- Blog
- Help Center
- Free Business Tools
- Website Templates
- Glossary & Guides
- Integrations
- Developers
- Benchmark
- Windows App