Penegrtian Wireframe,Mockup, dan Prototype
Wireframe adalah sebuah kerangka untuk menata suatu item di laman website atau aplikasi. Pembuatan wireframe biasanya dilakukan sebelum pembuatan produk tersebut dilakukan. Item yang berkaitan seperti teks, gambar, layoiting, dan sebagainya.
Wireframe biasa ditugaskan kepada ahlinya, yang biasa dikenal sebagai UI/UX Designer. Untuk melakukannya, seorang UI/UX Designer menggunakan kertas coretan atau software khusus untuk wireframing. Wireframe hanya menampilkan lembaran yang terdiri dari kotak-kotak dan garis-garis untuk mengatur tata letak berbagai elemen pada website atau aplikasi.
Wireframe memungkinkan seorang developer dengan mudah mengerjakan pengembangan struktur dan arah dari website atau aplikasi yang akan dibangun. Bayangkan saja jika tidak adanya konsep ini, developer mungkin akan kebingungan saat website atau aplikasi telah jadi. Namun, setelah selesai diperiksa karena tidak membuat wireframe terlebih dahulu maka terdapat banyak revisi di setiap tampilan. Sehingga pekerjaan tersebut dapat memperlambat waktu, sedangkan deadline proyek tersebut harus segera terselesaikan.
Pada browser sendiri, kita sering menemukan berbagai tampilan website atau aplikasi yang indah dan menarik. Gambar rangka itulah yang dikenal dengan skema halaman atau blueprint layout halaman. Itu semua merupakan panduan visual yang mewakili kerangka tampilan aplikasi. Wireframe dibuat untuk tujuan mengatur elemen dan mencapai tujuan tertentu. Tujuan itu biasanya diinformasikan berdasarkan tujuan bisnis dan ide kreatif.
Sedangkan pada aplikasi, kita sering menemukan pada halaman awal terdapat banyak elemen yang memiliki tujuan dan respon berbeda-beda. Bentuk visual dan elemen yang menarik, mewakili blueprint pada suatu aplikasi. Semua elemen dan bentuk visual pada halaman aplikasi awalnya dibuat dengan wireframe.
2.Isi Wireframe
Pada saat kita membangun suatu halaman web atau aplikasi, tentunya ada beberapa pertimbangan dan hal wajib yang perlu kamu ketahui. Pertimbangan tersebut antara lain:
- Halaman harus menyesuaikan dengan website atau aplikasi secara keseluruhan.
- Isi seperti tulisan, gambar, video, dan lainnya, harus memenuhi tujuan dan dapat disampaikan ke pengguna dengan baik.
- Elemen di setiap isi, links, dan widgets harus berhubungan dengan elemen lainnya.
- Halaman web atau aplikasi harus terlihat sebagaimana yang diminati user.
Wireframe juga perlu menjelaskan beberapa hal penting seperti berikut ini :
- Apa saja isi yang ada di dalam halaman website atau aplikasi?
- Apa isi yang paling penting untuk diutamakan dan harus menonjol?
- Kemana user akan diarahkan?
- Bagaimana user bergerak di sekitar halaman?
- Bagaimana isi tersebut diorganisir melalui halaman?
Menggambar di kertas putih kosong memungkinkan desainer untuk dapat mengerjakan sebuah wireframe secara mudah dan cepat. Ini merupakan poin dasar bagi desainer awal karena mudah dan murah. Jika kamu memiliki skill menggambar yang baik, maka proses akhir dari wireframe dapat dilakukan sekaligus.
Jika kamu tertarik membuat wireframe menggunakan software atau aplikasi, ada beberapa tools yang recommended buat kamu. Di antaranya adalah Figma, Zeppelin, Cacoo, Jumpchart, Gliffy, Adobe Illustrator, dan Mockflow Whimsical. Dari tools tersebut, terdapat toolset dan fitur tambahan yang sangat membantumu dalam pengerjaan suatu konsep desain. Harga yang ditawarkan pun bervariasi, ada yang gratis dengan fitur seadanya dan biaya bulanan dengan fitur lengkap.
3.Perbedaan Wireframe,Mockup, Dan Prototype
Pada dasarnya, UI/UX Designer membuat berbagai contoh konsep desain tidak hanya menggunakan wireframe. Adapun istilah mockup dan prototype yang mudah dimengerti dan memiliki bentuk user interface yang lebih terlihat. Mudahnya, perbedaan tersebut dapat terlihat melalui fungsi utama tiap konsep tersebut.
Seperti yang telah dijelaskan sebelumnya, Wireframe merupakan blueprint dari sebuah arsitektur. Konsep wireframe hanya bertujuan untuk menyampaikan susunan, layout, navigasi, struktur, dan organisasi konten. Wireframe biasanya hanya bergambar hitam putih saja dan menekankan pada isi dari konten yang akan dibuat.
Mockup adalah konsep yang lebih dalam untuk penyampaian berbagai aspek desain visual, seperti gambar, warna, dan tipografi. Waktu pengerjaan mockup sama dengan wireframe, yaitu sebelum produk itu dibuat. Hanya saja gambar yang diberikan mockup lebih detail dan terperinci.
5.Tutorial Membuat Wireframe Pada Figma
1. Buka Figma & Buat File Baru
Setelah login ke Figma, klik “New File” untuk membuat project baru. Di layar awal, kamu akan melihat kanvas kosong seperti gambar di bawah ini:
(tempatkan gambar tampilan awal Figma)
2. Buat Frame untuk Ukuran Desktop
Klik Frame Tool (F) → pilih ukuran desktop, misalnya 1440 × 1024 px. Frame ini akan menjadi area kerja utama untuk wireframe kita.
(tempatkan gambar memilih ukuran frame)
3. Tambahkan Header dan Navigasi
-
Buat persegi panjang di bagian atas frame sebagai header.
-
Tambahkan logo di pojok kiri atas (pakai lingkaran atau ellipse).
-
Sisipkan search bar atau opsi menu di sebelah kanan header.
(tempatkan gambar header & navigasi)
4. Desain Hero Section
Bawah header, buat area hero section: banner, headline atau teks utama, dan tombol action.
Gunakan bentuk-bentuk dasar terlebih dahulu agar tampilannya jelas dan rapi.
(tempatkan gambar hero section)
5. Konten Utama (Main Content)
-
Di bagian utama halaman, buat layout deskripsi atau gambar besar di sebelah kiri.
-
Tambahkan beberapa kotak kecil di kanan untuk kategori produk atau fitur.
-
Gunakan group atau duplikasi agar tampilannya konsisten.
(tempatkan gambar konten utama)
6. Footer
Terakhir, di bagian bawah frame tambahkan footer yang berisi kontak, alamat, sosial media, dan informasi lain yang diperlukan.
Gunakan bentuk persegi panjang sebagai dasar dan teks sederhana untuk item footer.
(tempatkan gambar footer)
7. Pengesahan & Finishing
-
Periksa kembali semua bagian: header, navigasi, hero, konten utama, footer.
-
Rapikan nama layer supaya mudah diedit nanti.
-
Jika sudah puas, bagikan link atau ekspor desain sesuai kebutuhan.
0 Comments