Dalam pembuatan desain aplikasi atau website, seorang UI/UX Designer bertugas membuat wireframe.
Namun, tahukah kamu apa itu wireframe? Singkatnya, wireframe adalah kerangka website atau aplikasi untuk memberi gambaran struktur desain yang akan dibuat nantinya.
Sebelum membahas lebih jauh lagi, tahukan kamu apa itu wireframe? tidak sedikit yang langsung membuat desain website atau aplikasi dengan visualisasi secara nyata.
Dalam artikel ini kamu akan mengetahui apa itu wireframe, fungsi dan elemen hingga perbedaannya dengan mockup.
Apa Itu Wireframe?
Wireframe adalah kerangka, struktur, atau sketsa berbentuk kotak-kotak dan garis, yang dibuat bertujuan untuk merepresentasikan sebuah desain website atau aplikasi yang hendak dibangun.
Kerangka tersebut dibuat oleh UX/UI Designer sebelum masuk pada desain yang lebih nyata.
Pada wireframe hanya terdapat kerangka sederhana berupa garis besar desain yang berwarna hitam dan putih, di sana juga dibuat struktur layout mulai dari header website atau aplikasi, navigasi, footer, dan masih banyak lagi.
Proses pembuatan wireframe website atau aplikasi disebut wireframing. Proses ini menuntut Anda untuk mengatur semua komponen website sesuai dengan tata letak yang diinginkan.
Dengan wireframe, proses pembuatan user interface dapat lebih terfokus dan terarah
Sehingga ketika masuk pada proses desain yang lebih nyata desainer tahu bagaimana penempatan tata letaknya dan tinggal mengkolaborasikan dengan visual serta konten atau informasi yang ingin disampaikan.
Seorang UI designer biasanya tidak bekerja sendiri. Wireframe website akan dibahas dengan tim web development atau klien untuk mendapat hasil rancangan desain terbaik.
Fungsi Wireframe
Pembuatan wireframe bukan hanya sekedar mempermudah desainer saja, terdapat beberapa fungsi lain, diantaranya yaitu sebagai berikut.
1. Menjaga agar tetap fokus pada user
Wireframe adalah wadah untuk berkomunikasi dan menerima feedback dari user.
Mereka dapat memberikan saran dan masukan terkait desain web atau aplikasi pada tahap ini.
Dengan begitu, desainer juga dapat mewujudkan produk yang memang sesuai dengan kebutuhan pengguna.
2. Mempermudah penentuan fitur
Tidak semua klien paham dengan istilah teknis seperti hero image, CTA, dll. Namun, dengan membuat wireframe, kamu bisa lebih mudah menjelaskan fitur, fungsi, serta tujuan dari aplikasi tersebut.
Pada tahap wireframe, antara desainer dan klien akan melahirkan keputusan-keputusan tepat untuk masuk pada tahap selanjutnya.
3. Pembuatan cepat dan murah
Perlu kamu tahu, wireframe bisa dibuat bermodalkan kertas dan pulpen saja.
Cukup dengan kedua benda tersebut kamu bisa mulai membuat sketsanya.
Namun, apabila dirasa masih kurang, terdapat banyak aplikasi untuk membantu membuat wireframe.
4. Memberikan Gambaran Website Sejak Awal
Tak perlu menunggu website jadi untuk tahu konsep desainnya. Dengan wireframe, semua orang yang terlibat dalam proses pengembangan website bisa mengetahui gambaran website sejak awal.
5. Pengembangan Lebih Terstruktur
Dengan adanya wireframe, pengembangan website jauh lebih terstruktur. Tidak hanya konsep dasar sudah diketahui, masing-masing komponen juga sudah tertata dengan baik termasuk navigasinya.
6. Memudahkan Koordinasi
Penggunaan wireframe website memudahkan koordinasi dalam pengembangan website.
Baik ketika Anda mengerjakan website sendiri atau untuk klien.
Semua proses pengerjaan website bisa mengacu pada kerangka dasar yang sudah disepakati.
Jadi ketika berdiskusi untuk melakukan perbaikan, Anda bisa melihat pada wireframe tersebut.
Komponen pada Wireframe
Setelah mengerti fungsinya, ketika hendak membuat wireframe pastikan kamu tahu apa saja jenis komponen utamanya.
1. Desain Informasi
Elemen pertama yaitu desain informasi, elemen ini merupakan cara bagaimana kamu dapat menjelaskan informasi yang ingin disampaikan pada pengguna.
Sehingga pengguna dapat paham informasi apa yang sedang kamu sampaikan.
Beberapa contoh elemen desain informasi seperti link, input, paragraf, gambar, dan masih banyak lagi yang sekiranya bisa membantu menyampaikan informasi.
2. Komponen Navigasi
Sebuah antarmuka website atau aplikasi harus mudah dipahami pengunjung.
Maksudnya, pengguna tidak perlu waktu lama untuk menemukan menu, dan bagaimana menuju menu tersebut.
Ketika membuka website mungkin kamu sering menemukan tombol navigasi dengan model dan letak yang hampir mirip.
Hal ini sengaja dibuat karena pengguna sudah terbiasa dengan letak navigasi tersebut sehingga tidak akan bingung lagi.
3. Desain Interface
Ketiga yaitu desain interface, ini merupakan proses penempatan berbagai elemen seperti tombol, ikon, gambar, menentukan warna, ukuran font, dan elemen desain lainnya.
Elemen itulah yang terdapat pada interface dan memudahkan pengguna untuk berinteraksi.
4. Layout Utama
Selanjutnya komponen utama wireframe adalah layout utama website atau aplikasi.
Komponen ini biasanya berupa kotak-kotak yang telah diatur sesuai dengan tata letak halaman website.
Dalam komponen ini, terdapat beberapa bagian, seperti header, menu navigasi, body, hingga letak sidebar.
5. Elemen Tambahan
Elemen tambahan bisa dimasukkan dalam wireframe sesuai jenis dan kebutuhan website.
Sebagai contoh, jika kamu merancang website untuk toko online, elemen tambahan yang bisa kamu gunakan meliputi fitur cek resi, form konfirmasi pemesanan, hingga layanan chat dengan pembeli secara langsung.
Tipe Wireframe
Terdapat beberapa tipe wireframe adalah jenis sketsa atau gambaran yang sering digunakan oleh para UX Designer.
Ada tiga jenis tipe wireframe yang biasa digunakan, diantaranya adalah:
1. Low Fidelity
Pertama adalah tipe low fidelity, tipe ini merupakan yang paling sederhana. Pasalnya wireframe ini hanya berupa gambaran kasar tanpa ada skala, kisi, ataupun ukuran pixel.
Jenis wireframe ini tidak terlalu detail dan hanya berisi kotak serta dilengkapi teks untuk menunjukkan sebuah label dan heading.
Tipe low fidelity cocok digunakan untuk kamu yang memiliki banyak konsep sehingga ingin cepat menyelesaikan wireframe-nya.
2. Mid Fidelity
Mid fidelity merupakan tipe yang paling umum digunakan. Dibandingkan sebelumnya, tipe ini memiliki detail yang lebih lengkap, layout serta semua fitur aplikasi juga dijabarkan secara jelas.
Meskipun tipe wireframe ini masih sederhana, dan hanya menggunakan warna hitam, putih dan abu-abu namun pembuatannya sudah menggunakan tools, seperti Sketch atau Balsamiq.
3. High Fidelity
Tipe high fidelity merupakan yang paling lengkap dan detail diantara ketiganya, bahkan sudah menggunakan layout yang sudah spesifik.
Maka dari itu pada tipe ini dapat menggunakan gambar sebenarnya dan memasukan konten tertulis.
Apa Bedanya Wireframe dan Mockup?
Jika wireframe berupa sketsa kotak-kotak serta garis berwarna hitam dan putih, maka mockup lebih kompleks dari itu. Mockup memiliki elemen lebih detai, seperti warna, tipografi, dan gambar.
Wireframe dan mockup sama-sama dibuat sebelum produk tersebut mulai dibangun.
Meski begitu, tetap ada perbedaan diantara keduanya. Nah, berikut ini tabel perbedaan antara wireframe dan mockup.
Wireframe
- Menjabarkan produk atau desain dengan ketelitian rendah
- Sebuah struktur kerangka dari desain atau produk
- Bertujuan untuk membantu desainer dan developer dalam memahami produk yang akan dibangun
Mockup
- Menyajikan rancangan produk dengan ketelitian yang lebih tinggi
- Sebuah visualisasi desain, sehingga terlihat lebih nyata
- Bertujuan untuk memberikan gambaran pada klien tentang seperti apa produk akan dibuat
Cara Membuat Wireframe dalam 5 Langkah
1. Melakukan Riset
Langkah pertama dalam membuat wireframe adalah melakukan riset untuk merancang website agar sesuai dengan trend web design.
Hal ini penting mengingat perkembangan kebutuhan dari tiap jenis website berbeda.
Selain itu, riset juga dilakukan agar Anda mendapatkan inspirasi desain yang menarik.
Bisa dari website lain secara umum atau dari website kompetitor. Hal ini dilakukan agar Anda mendapat referensi rancangan desain website yang disukai pengunjung.
2. Menyiapkan Tools
Setelah Anda melakukan riset, langkah selanjutnya adalah menyiapkan tools untuk membangun desain wireframe.
Untuk membuat gambar desain yang sederhana, Anda bisa menggunakan kertas dan pensi saja.
Sedangkan, untuk membuat gambaran yang lebih detail, berbagai tools wireframe bisa Anda manfaatkan.
Apa saja tools wireframe tersebut?
• Mockflow
Pertama, wockflow adalah software desain yang dapat Anda gunakan untuk membuat rancangan website atau aplikasi.
Tool ini memiliki fitur khusus bernama WireframePro yang dapat digunakan membuat wireframe dengan visualisasi langsung.
• Mockingbird
Kedua, mongkingbird adalah software pembuat wireframe yang mudah digunakan berkat fitur drag and drop.
Tampilannya yang user friendly akan memudahkan Anda membuat kerangka desain yang menarik.
• Cacoo
Ketiga, cacoo merupakan salah satu software wireframe yang cukup simpel, baik dari sisi tampilan maupun pilihan menunya.
Tool ini cocok digunakan bahkan untuk pemula sekalipun. Tak perlu melakukan instalasi pada komputer Anda karena tool ini bisa digunakan secara online melalui browser.
• Figma
Ingin menggunakan tool wireframe yang gratis tapi powerful? Figma bisa menjadi pilihan.
Anda dapat mendesain website dengan mudah menggunakan berbagai fitur yang dimilikinya.
Salah satunya, fitur real-time collaboration yang membuat koordinasi pembuatan mockup bisa dilakukan dengan cepat.
• Balsamiq
Balsamiq merupakan software untuk membuat wireframe yang populer. Anda bisa memanfaatkan versi desktop atau web-basednya.
Dengan penyimpanan secara online, hasil wireframe Anda bisa diakses dari mana saja.
Bahkan dengan fitur collaborative editing, koordinasi pembuatan kerangka desain website menjadi lebih mudah.
3. Melakukan Setting Grid
Setelah menentukan tools yang digunakan, saatnya melakukan setting grid.
Kamu akan mengatur halaman website menjadi beberapa kolom sebagai tempat dari komponen yang sudah ditentukan.
Tujuan dari melakukan setting grid adalah membuat penataan lebih mudah dengan hasil yang rapi.
Jadi, tampilan website akan terlihat lebih seimbang dengan beberapa komponen di dalamnya.
4. Menentukan Tata Letak
Selesai dengan langkah setting grid, waktunya kamu untuk menentukan tata letak elemen website.
Dengan bantuan grid tadi, kamu bisa menggunakan bentuk kotak untuk setiap komponen yang akan digunakan. Atur komposisi komponen dengan baik.
Misalnya, apakah akan menempatkan logo di tengah halaman website ataupun di sisi kanan kiri.
Kamu juga bisa menentukan seberapa besar bagian footer website tersebut. Sesuaikan letak ini dengan keinginanmu.
Pada tahap ini pula, kamu juga bisa berdiskusi dengan tim untuk tata letak yang terbaik untuk website tersebut.
5. Tuliskan Informasi Konten Anda
Nah, setelah komponen diatur dengan tata letak yang baik, saatnya menuliskan informasi kontenmu.
Untuk memastikan strukturnya sesuai keinginan, kamu bisa melakukannya bertahap.
Pastikan juga informasi konten jelas dan mudah dibaca. Cobalah gunakan ukuran dan jenis font yang berbeda untuk masing-masing komponen.
Jadi, bisa sekaligus membedakan berbagai informasi dalam desain tersebut.
Setelah tahapan ini selesai, kamu bisa melanjutkannya dengan bentuk visual yang lebih detail.
Kesimpulan
Wireframe adalah kerangka aplikasi atau web yang sedang dibuat. Kamu juga sudah paham perbedaan antara wireframe dan mockup.
Meskipun mirip dan sama-sama dibuat untuk merepresentasikan produk, namun tetap ada perbedaan di keduanya.
Bagaimana, sudah lebih tahu apa itu wireframe dan fungsinya? Semoga artikel ini membantu ya!
