Contoh wireframe website paling mudah dipahami lewat halaman yang sering dibuat: beranda company profile, landing page, halaman produk, halaman artikel, dan versi ponselnya. Wireframe adalah kerangka halaman berupa kotak, garis, dan label yang menunjukkan letak menu, judul, gambar, teks, dan tombol, tanpa warna dan desain akhir. Tujuannya satu: menyepakati struktur dan urutan isi sebelum waktu dihabiskan untuk memilih warna dan foto.
Artikel ini berisi lima contoh wireframe yang kami gambar sendiri untuk menjelaskan pola umum, lengkap dengan alasan urutan seksinya. Kelima gambar itu rancangan kami, bukan salinan dari situs nyata. Sebagai pembanding, di bagian low-fidelity ada dua wireframe nyata buatan orang lain dari Wikimedia Commons: sketsa di buku tulis dan wireframe digital yang dibuat dengan Balsamiq. Setelah itu ada penjelasan beda low-fidelity dan high-fidelity, beda wireframe dengan mockup dan prototype, langkah membuat wireframe sendiri, dan kesalahan yang paling sering kami temui.
Kalau istilah UI dan UX masih asing, bacalah dulu penjelasan UI/UX adalah, karena wireframe adalah salah satu alat kerja utama di bidang itu.
Wireframe website adalah kerangka, bukan desain
Wikipedia mendefinisikan wireframe website sebagai panduan visual yang mewakili kerangka sebuah situs. Kerangka itu bisa dipecah menjadi tiga komponen: desain informasi (isi apa yang ditampilkan dan bagaimana dikelompokkan), desain navigasi (bagaimana pengunjung berpindah halaman), dan desain antarmuka (elemen apa yang dipakai untuk berinteraksi). Tata letak halaman adalah tempat ketiganya bertemu, dan wireframe adalah gambar yang menunjukkan hubungan di antara ketiganya.
Dalam praktik, wireframe menjawab hal-hal yang sering terlewat saat orang langsung membicarakan tampilan:
- Apa yang pertama kali dilihat pengunjung di layar pertama?
- Seksi apa saja yang ada di halaman, dan urutannya bagaimana?
- Di mana tombol utama, misalnya tombol WhatsApp atau formulir?
- Informasi apa yang wajib ada supaya pengunjung berani menghubungi?
- Bagaimana susunannya berubah ketika dibuka di ponsel?
Karena tidak memuat warna dan foto, diskusi tentang wireframe tidak tersesat ke selera. Pertanyaan "biru atau hijau" ditunda, dan yang dibahas lebih dulu adalah "apakah harga perlu tampil di beranda". Dari pengalaman kami, keputusan seperti itu jauh lebih menentukan apakah website menghasilkan pertanyaan pelanggan dibanding pilihan warna. Pembahasan desain visual yang dikerjakan setelah wireframe disepakati ada di artikel desain website.
Contoh 1: wireframe beranda website company profile
Beranda company profile harus menjawab tiga pertanyaan dalam beberapa detik: usaha ini apa, untuk siapa, dan bagaimana menghubunginya. Wireframe di bawah menunjukkan urutan yang paling sering kami pakai sebagai titik awal.
Urutan seksinya dari atas ke bawah:
- Header berisi logo, menu ke halaman utama, dan satu tombol kontak yang selalu terlihat.
- Hero dengan judul yang menyebut apa yang Anda kerjakan dan untuk siapa, satu kalimat pendukung, tombol utama, dan satu gambar.
- Layanan dalam tiga sampai enam kartu, masing-masing menaut ke halaman layanannya.
- Alasan memilih, berisi hal yang bisa dibuktikan, misalnya jam operasional, area layanan, atau garansi tertulis.
- Bukti: foto pekerjaan, sertifikat, atau testimoni. Kalau belum ada, lebih baik kosong daripada dikarang.
- Pertanyaan umum yang biasa ditanyakan lewat WhatsApp.
- Ajakan menghubungi dan footer berisi alamat, jam buka, dan tautan kebijakan.
Contoh tampilan jadinya bisa Anda bandingkan di artikel contoh website company profile. Kalau Anda sedang menyiapkan website jenis ini, struktur halaman dan isinya juga kami jelaskan di halaman jasa pembuatan website company profile.
Contoh 2: wireframe landing page
Landing page berbeda dari beranda karena hanya punya satu tujuan: membuat pengunjung melakukan satu tindakan, misalnya mengisi formulir atau mengklik WhatsApp. Karena itu wireframe landing page biasanya tidak memuat menu lengkap, dan setiap seksi dirancang untuk menjawab satu keraguan sebelum tombol berikutnya muncul.
Urutan yang sering dipakai: judul yang mengulang janji iklan, masalah yang dialami pengunjung, cara produk menyelesaikannya, bukti, penawaran beserta harga atau syaratnya, pertanyaan umum, lalu tombol terakhir. Tombol utama biasanya muncul lebih dari sekali, karena pengunjung memutuskan di titik yang berbeda-beda. Gambar sampul artikel ini adalah contoh wireframe landing page dengan pola tersebut.
Konsep landing page secara lengkap ada di artikel landing page adalah, dan contoh tampilan jadinya kami bahas di contoh landing page. Dua artikel itu melengkapi wireframe ini: satu menjelaskan alasannya, satu lagi menunjukkan hasilnya.
Contoh 3 dan 4: wireframe halaman produk dan halaman artikel
Halaman produk di toko online atau katalog punya pola yang hampir baku, dan pola itu ada karena pembeli mencari informasi yang sama di mana pun. Wireframe-nya biasanya dibagi dua kolom di desktop: galeri foto di kiri, lalu di kanan nama produk, harga, pilihan varian, tombol beli atau pesan, dan ringkasan pengiriman. Di bawahnya ada deskripsi lengkap, spesifikasi, ulasan, dan produk terkait.
Yang sering terlupa di wireframe halaman produk adalah informasi yang menjawab keraguan terakhir sebelum membeli: ongkos kirim, waktu pengiriman, dan cara retur. Letakkan dekat tombol, bukan di halaman lain. Langkah membangun toko online dari awal ada di panduan cara membuat toko online.
Halaman artikel blog punya kebutuhan yang lain lagi. Pembaca datang dari mesin pencari untuk satu jawaban, jadi wireframe-nya menempatkan judul, tanggal, dan paragraf pembuka yang langsung menjawab di layar pertama. Daftar isi membantu artikel panjang, gambar diletakkan di dekat paragraf yang dijelaskannya, dan ajakan ke layanan diletakkan di akhir, bukan di tengah paragraf.
Tabel ini lebih lebar dari layar. Geser ke samping untuk melihat seluruh kolom.
| Jenis halaman | Tujuan utama | Seksi wajib di wireframe | Letak tombol utama |
|---|---|---|---|
| Beranda company profile | Menjelaskan usaha dan mengarahkan ke halaman yang tepat | Hero, layanan, alasan memilih, bukti, kontak | Header dan hero, diulang di akhir |
| Landing page | Satu tindakan, misalnya klik WhatsApp | Janji, masalah, solusi, bukti, penawaran, FAQ | Hero, setelah penawaran, dan di akhir |
| Halaman produk | Membeli atau memesan produk | Galeri, nama, harga, varian, pengiriman, deskripsi | Di samping galeri, dekat harga |
| Halaman artikel | Menjawab satu pertanyaan pembaca | Judul, pembuka yang menjawab, daftar isi, isi, penutup | Di akhir artikel |
| Halaman kontak | Memudahkan menghubungi | Pilihan kontak, jam layanan, alamat, peta, formulir | Paling atas, sebelum formulir |
Contoh 5: wireframe versi ponsel
Banyak pengunjung website usaha membukanya lewat ponsel, jadi wireframe ponsel bukan tambahan. Wireframe ponsel bukan sekadar mengecilkan versi desktop. Kolom-kolom desktop harus diubah menjadi satu kolom, dan urutannya perlu dipikirkan ulang karena pengunjung hanya melihat satu blok dalam satu waktu.
Beberapa keputusan khas wireframe ponsel:
- Menu dilipat ke ikon, tetapi tombol kontak tetap terlihat di header.
- Tombol utama menempel di bagian bawah layar untuk halaman produk dan landing page.
- Tabel lebar diubah menjadi kartu bertumpuk atau digeser ke samping di dalam kotaknya sendiri.
- Teks pembuka dipendekkan supaya judul dan tombol muat di layar pertama.
- Area sentuh cukup besar dan tidak saling berdempetan, supaya tidak salah ketuk.
Menggambar versi ponsel di tahap wireframe jauh lebih murah daripada menemukan masalahnya setelah website jadi. Kecepatan di ponsel juga layak diperhatikan sejak awal, misalnya dengan tidak menaruh video besar di layar pertama. Cara mengukurnya kami tulis di cara cek kecepatan website.
Low-fidelity dan high-fidelity: dua tingkat detail wireframe
Wireframe tidak harus rapi sejak awal. Menurut Wikipedia, wireframe low-fidelity menyerupai sketsa kasar atau tiruan cepat yang memakai persegi panjang dan label untuk mewakili konten, dengan teks isian atau konten simbolis bila konten asli belum ada. Wireframe jenis ini dipakai di tahap awal untuk memusatkan diskusi pada struktur dan fungsi, bukan tampilan.
Wireframe high-fidelity memuat lebih banyak konten nyata, pilihan huruf yang spesifik, dan informasi ukuran gambar, sehingga lebih dekat ke halaman akhir dan lebih lama dibuat. Wikipedia mencatat bahwa warna biasanya tetap tidak dipakai di tahap ini. High-fidelity berguna untuk dokumentasi dan untuk serah terima ke pengembang.
Tabel ini lebih lebar dari layar. Geser ke samping untuk melihat seluruh kolom.
| Aspek | Low-fidelity | High-fidelity |
|---|---|---|
| Bentuk | Kotak, garis, dan label sederhana | Tata letak mendekati halaman jadi |
| Konten | Teks isian atau konten simbolis | Judul dan teks yang mendekati versi final |
| Huruf dan gambar | Belum ditentukan, gambar diwakili kotak silang | Ukuran huruf dan dimensi gambar sudah jelas |
| Alat | Kertas, papan tulis, atau alat digital sederhana | Alat desain antarmuka |
| Waktu buat | Cepat, cocok untuk mencoba beberapa versi | Lebih lama, cocok setelah struktur disepakati |
| Dipakai untuk | Menyepakati struktur dan urutan seksi | Dokumentasi dan serah terima ke pengembang |
Untuk website company profile yang sederhana, low-fidelity yang rapi biasanya sudah cukup. High-fidelity lebih berguna untuk aplikasi web dengan banyak layar dan status, misalnya formulir bertahap atau dasbor, karena di sana detail kecil menentukan apakah alurnya bisa dipakai.
Wireframe, mockup, dan prototype: urutan kerjanya
Tiga istilah ini sering tertukar, padahal masing-masing punya tugas sendiri dalam proses pembuatan website.
- Wireframe menjawab pertanyaan struktur: apa saja isinya dan di mana letaknya.
- Mockup menjawab pertanyaan tampilan: warna, huruf, foto, dan ikon, dalam gambar statis yang belum bisa diklik.
- Prototype menjawab pertanyaan alur: bagaimana rasanya berpindah dari satu layar ke layar lain, misalnya dari halaman produk ke formulir pesanan.
Tidak semua proyek butuh ketiganya. Website company profile lima halaman sering cukup dengan wireframe lalu langsung ke desain visual. Aplikasi web dengan alur yang rumit hampir selalu butuh prototype, karena kesalahan alur baru terasa ketika dicoba. Siapa mengerjakan tahap yang mana kami jelaskan di artikel web developer adalah.
Cara membuat wireframe website sendiri
Anda tidak perlu menjadi desainer untuk membuat wireframe low-fidelity yang berguna. Langkah berikut cukup untuk menghasilkan bahan diskusi yang jelas dengan siapa pun yang akan membangun website Anda:
- Tulis tujuan halaman dalam satu kalimat. Contoh: "halaman ini membuat calon pelanggan menghubungi lewat WhatsApp untuk menanyakan jadwal".
- Daftar pertanyaan pengunjung. Ambil dari pertanyaan yang paling sering masuk lewat WhatsApp atau telepon.
- Urutkan jawaban menjadi seksi. Pertanyaan yang paling menentukan keputusan diletakkan paling atas.
- Gambar kotak untuk setiap seksi di kertas, dengan label isi, lalu tandai tombol utama.
- Gambar versi ponsel dalam satu kolom, dan cek apakah tombol utama tetap mudah dijangkau.
- Uji ke orang lain. Tunjukkan sketsa ke satu atau dua pelanggan, lalu tanyakan apa yang mereka cari lebih dulu.
Sketsa kertas yang difoto sudah cukup sebagai bahan. Kalau ingin versi digital, alat desain antarmuka seperti Figma atau alat khusus wireframe seperti Balsamiq bisa dipakai, dan pemakai page builder bisa langsung menyusun blok kosong di editornya. Page builder yang populer di WordPress kami bahas di Elementor adalah. Urutan langkah membangun website secara keseluruhan, dari domain sampai tayang, ada di cara bikin website.
Kesalahan yang sering muncul di wireframe
Kesalahan di tahap wireframe murah untuk diperbaiki, tetapi hanya kalau disadari di tahap itu. Berikut yang paling sering kami temui:
- Mulai dari tampilan, bukan isi. Wireframe yang diisi kotak "gambar keren" tanpa tahu isinya akan berubah total saat konten nyata datang.
- Terlalu banyak seksi di beranda. Beranda yang memuat semua informasi membuat pengunjung tidak tahu harus ke mana. Pindahkan detail ke halaman layanan.
- Tombol utama tidak jelas. Kalau ada lima tombol dengan bobot sama, tidak ada yang utama. Pilih satu tindakan yang paling penting.
- Lupa status kosong dan pesan kesalahan. Untuk formulir dan aplikasi web, gambarkan juga tampilan saat data belum ada atau isian salah.
- Tidak menggambar versi ponsel. Masalah seperti tabel yang terlalu lebar atau tombol yang tertutup baru ketahuan setelah website jadi.
- Mengisi dengan klaim yang belum ada. Kotak testimoni atau angka klien di wireframe cenderung diisi karangan saat website dikejar tenggat. Tandai sebagai opsional sampai buktinya ada.
Untuk website pribadi, misalnya portofolio profesional, pola wireframe-nya sedikit berbeda karena tokohnya adalah Anda sendiri. Susunan yang kami sarankan ada di website personal branding.
Wireframe dalam proyek pembuatan website
Di proyek pembuatan website, wireframe adalah titik di mana pemilik usaha dan pembuat website menyepakati isi sebelum pekerjaan besar dimulai. Semakin rumit proyeknya, semakin penting tahap ini. Untuk website company profile, struktur halaman biasanya disepakati dalam bentuk daftar seksi dan sketsa sederhana. Untuk aplikasi web, wireframe menjadi bagian dari dokumen spesifikasi.
Di tempat kami, aplikasi web dimulai dengan Sprint Spesifikasi selama 5 hari kerja seharga Rp1.900.000. Isinya wawancara kebutuhan, alur pengguna, daftar fitur, wireframe utama, dan estimasi harga tetap beserta tenggatnya. Biaya sprint dipotong penuh dari harga proyek bila Anda lanjut. Rinciannya ada di halaman jasa pembuatan aplikasi web dan daftar lengkap paket di harga pembuatan website.
Kesimpulan
Contoh wireframe website di atas menunjukkan satu pola: setiap jenis halaman punya tujuan sendiri, dan wireframe yang baik menyusun seksi sesuai pertanyaan pengunjung, bukan sesuai selera tampilan. Beranda mengarahkan, landing page mengajak satu tindakan, halaman produk menjawab keraguan sebelum membeli, halaman artikel menjawab pertanyaan, dan versi ponsel memastikan semua itu tetap terjangkau di layar kecil.
Mulailah dengan kertas dan daftar pertanyaan pelanggan. Wireframe kasar yang disepakati bersama jauh lebih berguna daripada desain cantik yang strukturnya masih diperdebatkan.
Kalau Anda sudah punya sketsa atau daftar seksi dan ingin dibantu merapikannya menjadi website, kirim fotonya lewat WhatsApp kami (membuka WhatsApp di tab baru). Kami balas dengan masukan struktur, paket yang cocok, dan perkiraan waktu pengerjaan.
Sumber
- Wikipedia, Website wireframe (tab baru), untuk definisi wireframe, tiga komponen kerangka (desain informasi, navigasi, antarmuka), serta ciri low-fidelity dan high-fidelity.
