25 Contoh Tata Letak Situs Web (Dengan Wireframe Beranotasi)

25 contoh tata letak situs web dari pustaka template We.Inc, masing-masing dengan wireframe kotak struktur halaman, pratinjau desain, alasan tata letak berhasil, dan bisnis yang cocok. Dilengkapi panduan memilih pola yang tepat.

Tata letak situs web adalah urutan dan susunan bagian pada halaman: apa yang muncul pertama, apa yang berdampingan, dan di mana tombol utama berada. Di bawah ini terdapat 25 tata letak, masing-masing ditampilkan sebagai wireframe kotak sederhana dan pratinjau desain lengkap. Semua 25 adalah We.Inc template designs, bukan situs pelanggan, dikelompokkan berdasarkan jenis bisnis yang sesuai. Kotak biru di setiap wireframe adalah ajakan bertindak utama.

Cara membaca wireframe

Setiap baris kotak adalah satu pita halaman, dari atas ke bawah saat Anda menggulir. Kotak berdampingan terletak di sebelah satu sama lain di layar desktop; di ponsel, kotak tersebut menumpuk dalam urutan yang sama, sehingga kotak kiri muncul terlebih dahulu. Halaman ini membahas tata letak seluruh halaman. Untuk bagian atas halaman secara khusus, lihat hero section examples; untuk menu, lihat navigation examples.

Lima pola tata letak dalam satu tabel

Pola	Urutan bagian	Terbaik ketika	Contoh di bawah
Corong layanan	Hero, layanan, bukti, formulir	Pengunjung butuh penawaran atau pemesanan	1-8
Kunjungan	Hero, menu, cerita, jam dan peta	Orang datang langsung ke tempat Anda	9-14
Pesan atau bergabung	Hero, harga atau jadwal, pemesanan	Janji temu, kelas, keanggotaan	15-19
Grid	Hero, grid item, detail, pertanyaan	Listingan, produk, portofolio	20-24
Pembaca	Hero, karya, tentang, daftar	Tujuannya adalah audiens yang kembali	25

Tata letak bisnis layanan

1. Perdagangan darurat: pita mendesak di bawah hero

Template: Ironpeak Roofing (desain template We.Inc, bukan situs pelanggan).

Mengapa berhasil: Pita berwarna penuh lebar tepat di bawah hero menangkap orang dengan masalah mendesak (kerusakan badai) sebelum mereka menggulir. Gunakan untuk: Tukang atap, restorasi, tukang kunci, derek.

2. Multi-jasa dengan blok area layanan

Template: Summit Trades (desain template We.Inc, bukan situs pelanggan).

Mengapa berhasil: Tiga kartu layanan setara, lalu daftar area yang dilayani, menjawab "apakah Anda melakukan ini, di sini?" dalam dua guliran. Gunakan untuk: Bisnis apa pun dengan area perjalanan yang ditentukan.

3. Daftar layanan dengan spesialisasi unggulan

Template: Voltline Electric (desain template We.Inc, bukan situs pelanggan).

Mengapa berhasil: Satu layanan bernilai tinggi mendapat bagiannya sendiri, sehingga halaman menjual pekerjaan yang paling Anda inginkan tanpa menyembunyikan yang lain. Gunakan untuk: Perdagangan dengan satu spesialisasi menguntungkan.

4. Daftar periksa dan penawaran instan

Template: Brightwell Cleaning (desain template We.Inc, bukan situs pelanggan).

Mengapa berhasil: Daftar periksa yang terlihat tentang apa yang disertakan dalam setiap kunjungan menjawab kekhawatiran utama (apa yang saya dapatkan?) sebelum formulir harga. Gunakan untuk: Pembersihan, perawatan halaman, layanan kolam renang.

5. Cerita pengrajin lokal

Template: Halden Woodworks (desain template We.Inc, bukan situs pelanggan).

Mengapa berhasil: Menyebutkan kota dalam judul dan menunjukkan "bagaimana pekerjaan berlangsung" membangun kepercayaan untuk pekerjaan besar yang sekali jadi. Gunakan untuk: Tukang kayu, kontraktor, perenovasi.

6. Firma profesional: bidang praktik dan orang

Template: Sterling & Vance LLP (desain template We.Inc, bukan situs pelanggan).

Mengapa berhasil: Orang memilih firma berdasarkan bidang hukum kemudian orangnya; tata letak mengikuti urutan itu. Gunakan untuk: Hukum, akuntansi, nasihat keuangan.

7. Konsultansi: bukti terlebih dahulu

Template: Linden Consult (desain template We.Inc, bukan situs pelanggan).

Mengapa berhasil: Bukti langsung setelah hero, kemudian halaman membingkai layanan sebagai masalah yang dikenali pembeli. Gunakan untuk: Konsultan, pelatih, layanan B2B.

8. Halaman akuntan singkat

Template: Ledgerline CPA (desain template We.Inc, bukan situs pelanggan).

Mengapa berhasil: Empat bagian. Untuk pembeli yang sudah tahu butuh akuntan, lebih sedikit lebih cepat. Gunakan untuk: Layanan apa pun di mana pembeli tiba sudah memutuskan.

Tata letak makanan dan perhotelan

9. Kafe: menu, cerita, kunjungan

Template: Ember & Roast (desain template We.Inc, bukan situs pelanggan).

Mengapa berhasil: Menu terlebih dahulu, kunjungan terakhir: orang memeriksa apa yang Anda sajikan, lalu di mana dan kapan. Gunakan untuk: Kafe, toko roti, bar.

10. Toko roti dengan pemesanan di muka

Template: Flour & Fern (desain template We.Inc, bukan situs pelanggan).

Mengapa berhasil: Bagian pemesanan khusus mengubah penjelajahan menjadi pre-order. Gunakan untuk: Toko roti, tukang daging, persiapan makan.

11. Restoran dengan gulir panjang

Template: Azafran (desain template We.Inc, bukan situs pelanggan).

Mengapa berhasil: Untuk restoran tujuan, suasana menjual pemesanan, sehingga halaman bercerita sebelum bertanya. Gunakan untuk: Makan malam mewah, menu cicip, venue.

12. Restoran tiga bagian

Template: Crust (desain template We.Inc, bukan situs pelanggan).

Mengapa berhasil: Hero, menu, kunjungan. Bagian paling sedikit yang bisa dimiliki restoran dan tetap menjawab setiap pertanyaan. Gunakan untuk: Restoran kasual, makanan bawa pulang.

13. Jadwal terlebih dahulu

Template: ROAM (desain template We.Inc, bukan situs pelanggan).

Mengapa berhasil: Ketika lokasi berubah setiap hari, "di mana Anda hari ini" adalah pertanyaan utama, sehingga langsung di bawah hero. Gunakan untuk: Food truck, pasar, pop-up.

14. Layanan acara dengan formulir pertanyaan

Template: Harvest & Vine (desain template We.Inc, bukan situs pelanggan).

Mengapa berhasil: Jenis acara di depan memungkinkan pengunjung memilah sendiri; menu contoh membuat harga terasa konkret. Gunakan untuk: Katering, perencana, venue.

Tata letak pemesanan dan keanggotaan

15. Salon berbasis pemesanan

Template: Lumé Salon & Beauty Spa (desain template We.Inc, bukan situs pelanggan).

Mengapa berhasil: Daftar harga dan blok pemesanan adalah semua yang dibutuhkan sebagian besar pengunjung salon. Gunakan untuk: Salon, barbershop, studio kuku dan bulu mata.

16. Jadwal kelas dan harga

Template: Tidewater Yoga (desain template We.Inc, bukan situs pelanggan).

Mengapa berhasil: Jadwal lalu harga lalu penawaran kunjungan pertama mengikuti keputusan siswa baru. Gunakan untuk: Yoga, pilates, tari, seni bela diri.

17. Gym dengan program dan tingkatan

Template: Iron (desain template We.Inc, bukan situs pelanggan).

Mengapa berhasil: Tingkatan keanggotaan berdampingan memudahkan perbandingan; sesi pertama gratis menurunkan hambatan. Gunakan untuk: Gym, klub, keanggotaan.

18. Klinik: perawatan, tim, lokasi

Template: Verdant Family Health (desain template We.Inc, bukan situs pelanggan).

Mengapa berhasil: Pasien ingin tahu apa yang Anda tangani, siapa yang akan mereka temui, dan cara ke sana. Gunakan untuk: Klinik, dokter gigi, fisioterapi.

19. Dokter hewan dengan catatan mendesak

Template: Meadowpaw Veterinary (desain template We.Inc, bukan situs pelanggan).

Mengapa berhasil: Bagian kunjungan memberi tahu kasus darurat untuk menelepon, sehingga formulir pemesanan tidak digunakan untuk keadaan darurat. Gunakan untuk: Dokter hewan, perawatan mendesak, layanan apa pun dengan keadaan darurat.

Tata letak grid: listingan, toko, dan portofolio

20. Grid listingan

Template: Keystone Realty (desain template We.Inc, bukan situs pelanggan).

Mengapa berhasil: Pembeli mendapat grid; penjual mendapat bagian mereka sendiri dan ajakan bertindak terpisah. Gunakan untuk: Properti, sewa, dealer mobil.

21. Halaman produk tunggal

Template: Verre Halo (desain template We.Inc, bukan situs pelanggan).

Mengapa berhasil: Harga ada di bilah menu dan di akhir; segalanya di antaranya menjawab "apakah ini sepadan?" Gunakan untuk: Merek satu produk, peluncuran, produk crowdfunding.

22. Toko produksi terbatas

Template: Cellar & Rowan (desain template We.Inc, bukan situs pelanggan).

Mengapa berhasil: Produk terlebih dahulu, lalu cerita yang membenarkan harga, lalu daftar untuk batch berikutnya. Gunakan untuk: Pembuat, lilin, keramik, makanan.

23. Peluncuran produk

Template: Loop (desain template We.Inc, bukan situs pelanggan).

Mengapa berhasil: Rilis berikutnya memimpin; grid toko melayani orang yang menginginkan sesuatu sekarang. Gunakan untuk: Edisi terbatas, pakaian, kolektibel.

24. Grid portofolio di depan

Template: Drafthouse (desain template We.Inc, bukan situs pelanggan).

Mengapa berhasil: Enam proyek langsung setelah judul; pekerjaan melakukan penjualan. Gunakan untuk: Arsitek, desainer, fotografer.

Tata letak personal dan kreator

25. Penulis dengan buletin

Template: Plume (desain template We.Inc, bukan situs pelanggan).

Mengapa berhasil: Karya, lalu daftar buletin: tujuannya adalah pembaca yang kembali, bukan satu pertanyaan. Gunakan untuk: Penulis, kreator, pembicara.

Cara memilih tata letak

1. Tentukan satu tindakan yang Anda inginkan dilakukan sebagian besar pengunjung (telepon, pesan, beli, tanyakan, berlangganan). Itulah yang menjadi kotak biru.
2. Daftar tiga pertanyaan yang ditanyakan pengunjung sebelum melakukannya (misalnya: apakah Anda melayani area saya, berapa biayanya, dapatkah saya mempercayai Anda). Masing-masing mendapat satu bagian, dalam urutan itu.
3. Pilih pola dari tabel di atas yang sesuai.
4. Hapus bagian yang tidak dapat Anda isi dengan konten nyata. Bagian "Hasil" kosong atau ulasan placeholder lebih merusak daripada halaman yang lebih pendek.
5. Periksa di ponsel. Kotak berdampingan menumpuk; pastikan tombol utama masih muncul lebih awal (lihat desain mobile-first).

Setelah satu halaman menjadi panjang, bagi menjadi beberapa halaman. Struktur situs web menunjukkan cara bagian-bagian di atas menjadi peta situs.

Kesalahan tata letak yang umum

• Menempatkan formulir kontak hanya di bagian bawah halaman panjang, tanpa tombol di header.
• Tiga kolom teks untuk audiens yang menggunakan ponsel; gunakan kartu yang menumpuk dengan rapi.
• Mempertahankan nomor template, ulasan, atau lencana yang tidak dapat Anda dukung.
• Galeri sebelum pengunjung tahu apa yang Anda lakukan.

Gunakan salah satu tata letak ini

Setiap tata letak di sini adalah template di pustaka template We.Inc. Pada paket gratis Anda dapat menggunakan hingga 3 situs template di alamat we.inc (tanpa kredit AI, tanpa domain kustom). Starter seharga $20/bulan menambahkan pembuatan AI, sehingga Anda dapat meminta perubahan seperti "pindahkan ulasan di atas layanan", dan domain kustom; lihat harga. Buat mockup versi Anda terlebih dahulu dengan generator mockup situs web, lalu periksa hasilnya dengan penilai situs web.

Pertanyaan yang sering diajukan

Apa itu tata letak situs web?

Urutan dan susunan bagian pada halaman: apa yang muncul pertama, apa yang berdampingan, dan di mana ajakan bertindak utama berada. Tata letak berbeda dari struktur, yaitu cara halaman-halaman terhubung di seluruh situs.

Apa tata letak terbaik untuk situs web usaha kecil?

Untuk sebagian besar bisnis layanan: hero dengan satu tombol yang jelas, layanan, bukti seperti ulasan, dan formulir kontak atau penawaran, dalam urutan tersebut. Lihat tata letak 1–8 untuk variasinya.

Berapa banyak bagian yang harus ada di halaman beranda?

Sebanyak yang diperlukan untuk menjawab pertanyaan utama pengunjung, dan tidak lebih. Contoh-contoh di sini berkisar dari empat bagian hingga sebelas. Mulai dari yang lebih sedikit: Anda selalu bisa menambah, tetapi halaman yang lebih panjang lebih jarang dipangkas.

Apakah ini situs web bisnis nyata?

Tidak. Semua 25 adalah desain template We.Inc, digunakan untuk menampilkan pola tata letak.

Bagaimana tata letak berubah di perangkat mobile?

Kotak berdampingan menumpuk secara vertikal dalam urutan yang sama, jadi tempatkan item terpenting di sebelah kiri dan pertahankan tombol utama agar tetap muncul lebih awal. Periksa pratinjau ponsel sebelum dipublikasikan.

Apa perbedaan tata letak dan struktur?

Tata letak adalah susunan satu halaman. Struktur adalah cara halaman-halaman terhubung di seluruh situs: hierarki, URL, dan tautan internal. Tata letak yang baik di dalam struktur yang buruk tetap menyulitkan pengunjung.

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

Company

• About Us
• Pricing
• Apply to the Partner Program
• Contact
• Careers
• Security

View Sitemap