Perbedaan Mockup dan Wireframme

 

Apa itu Wireframe?

 

Tidak berbeda dengan cetak biru arsitektur, Wireframe adalah kerangka kerangka dua dimensi dari laman web atau aplikasi. Wireframe memberikan gambaran yang jelas tentang struktur halaman, tata letak, arsitektur informasi, aliran pengguna, fungsionalitas, dan perilaku yang diinginkan. Karena wireframe biasanya mewakili konsep produk awal, gaya, warna, dan grafik dibuat seminimal mungkin. Wireframe dapat digambar dengan tangan atau dibuat secara digital, tergantung pada seberapa banyak detail yang dibutuhkan.

Wireframing adalah praktik yang paling umum digunakan oleh desainer UX. Proses ini memungkinkan semua pemangku kepentingan untuk menyetujui di mana informasi akan ditempatkan sebelum pengembang membangun interface dengan kode.

 

Wireframes melayani tiga tujuan utama:

Wireframes menjaga konsep tetap fokus pada pengguna

Wireframes secara efektif digunakan sebagai perangkat komunikasi; mereka memfasilitasi umpan balik dari pengguna, memicu percakapan dengan pemangku kepentingan, dan menghasilkan ide di antara para desainer. Melakukan pengujian pengguna selama tahap wireframing awal memungkinkan perancang untuk menyimpan umpan balik yang jujur, dan mengidentifikasi poin-poin penting yang membantu membangun dan mengembangkan konsep produk.

Wireframing adalah cara sempurna bagi para desainer untuk mengukur bagaimana pengguna akan berinteraksi dengan antarmuka. Dengan menggunakan perangkat seperti Lorem Ipsum, teks pseudo-Latin yang bertindak sebagai placeholder untuk konten di masa mendatang, desainer dapat meminta pengguna dengan pertanyaan seperti "apa yang Anda harapkan akan ditulis di sini?". Wawasan ini membantu perancang untuk memahami apa yang terasa intuitif bagi pengguna, dan menciptakan produk yang nyaman dan mudah digunakan

 

Wireframes memperjelas dan menentukan fitur situs web

Saat mengomunikasikan ide Anda kepada klien, mereka mungkin tidak memiliki leksikon teknis untuk mengikuti istilah seperti "gambar pahlawan" atau "ajakan bertindak". Fitur khusus Wireframing akan menyampaikan dengan jelas kepada klien Anda bagaimana mereka akan berfungsi dan tujuan apa yang akan mereka layani. Wireframing memungkinkan semua pemangku kepentingan untuk mengukur berapa banyak ruang yang perlu dialokasikan untuk setiap fitur, menghubungkan arsitektur informasi situs ke desain visualnya, dan memperjelas fungsionalitas halaman.

 

Melihat fitur pada gambar rangka juga akan memungkinkan Anda untuk memvisualisasikan bagaimana semuanya bekerja bersama — dan bahkan mungkin meminta Anda untuk memutuskan untuk menghapus beberapa fitur jika Anda merasa fitur tersebut tidak cukup berfungsi dengan elemen laman lainnya. Tahap wireframing adalah saat pemangku kepentingan bisa brutal!

 

Wireframe cepat dan murah untuk dibuat

Bagian terbaik tentang wireframes? Mereka sangat murah dan mudah dibuat. Faktanya, jika Anda memiliki pena dan kertas, Anda dapat dengan cepat membuat sketsa wireframe tanpa mengeluarkan uang sepeser pun. Banyaknya alat yang tersedia berarti Anda juga dapat membuat wireframe digital dalam beberapa menit 

 

Seringkali, ketika sebuah produk tampak terlalu bagus, pengguna cenderung tidak jujur ​​tentang kesan pertama mereka. Tetapi dengan mengekspos inti dari tata letak halaman, kekurangan dan poin nyeri dapat dengan mudah diidentifikasi dan diperbaiki tanpa pengeluaran waktu atau uang yang signifikan. Semakin lambat dalam proses desain produk, semakin sulit untuk membuat perubahan!

Apa itu Mockup?

Mockup adalah ssesuatu yang lebih mendalam dari garis rangka wireframe. Mockup adalah gambar rangka statis yang menyertakan detail UI yang lebih bergaya dan visual untuk menampilkan model yang realistis tentang tampilan halaman atau aplikasi akhir. Cara yang baik untuk memikirkannya adalah bahwa Wireframe adalah cetak biru dan mockup adalah model visual.

Mockup biasanya menyertakan detail visual tambahan seperti:

- Warna, gaya, grafik, dan tipografi

- Tombol dan style teks

- Grafik navigasi

- Jarak komponen

Mockupadalah alat yang berguna untuk memahami dan mengkomunikasikan seperti apa tampilan antarmuka akhir dan memberi pemangku kepentingan kesempatan untuk melihat pilihan desain dan gaya sebelum berkomitmen untuk membangun aplikasi dalam prototipe fungsional.