Menjadi seorang UI/UX designer yang sedang membangun sebuah sistem, aplikasi ataupun website baru adalah proses yang sangat menyenangkan. Ada banyak ide yang muncul dari pikiran kita sebagai seorang personal maupun bekerja sebagai salah satu anggota tim product development.

Dahulu, ketika masih duduk di bangku kuliah, semua ide yang muncul dari pikiran saya langsung dituangkan ke dalam bentuk koding user interface (UI) dengan bahasa HTML, CSS dan diselingi framework Bootstrap.

Seiring berjalannya waktu, saya menyadari bahwa proses dari menuangkan ide langsung ke dalam bentuk user interface melangkahi 3 proses yang sangat penting, yaitu proses pembuatan wireframe, mockup, dan prototyping.

1. Apa itu wireframe?

contoh wireframe
Foto: Envato

Menurut experienceux, wireframe adalah proses membuat struktur website, yang artinya proses seorang UI/UX, product, graphic designer atau apapun yang kamu sebut, membuat struktur awal yang akan menjadi pondasi dimana, dan bagaimana layout website tersebut dibangun.

Dari wireframe tersebut, akan terlihat jelas dimana letak judul, gambar, dan elemen-elemen lain yang akan ditampilkan.

Seseorang tidak perlu repot untuk menyisipkan copywriting, konten, gambar hingga pewarnaan yang akan dibuat. Karena, dalam prosesnya, wireframe hanya mementingkan peletakan dari konten yang akan ditampilkan.

Maka, tidak jarang wireframe disebut juga dengan konsep desain.

1.1. Kenapa wireframe penting?

Beberapa hal penting yang menjadi alasan kenapa wireframe harus dibuat sebelum membangun website adalah:

  1. Memperhatikan user experience atau pengalaman pengguna saat berkunjung ke website/aplikasi/sistem. Apakah mudah untuk dipahami, atau justru sulit untuk dipahami.
  2. Mempermudah proses review antara tim dengan stakeholder. Bayangkan ketika proses review terjadi setelah kamu membuat ratusan ribu barisan kode HTML/CSS, tentu akan menyulitkan ketika proses revisi, bukan?
  3. Mempermudah penjelasan mengenai fungsi yang akan dipakai setiap halaman.

Untuk kamu yang baru ingin belajar membuat website, sangat direkomendasikan untuk tidak melompati langkah yang satu ini. Jangan buang waktumu sia-sia hanya karena memikirkan apa warna yang akan dipakai, jenis font apa yang ingin dipakai, dan apa copywriting yang menggigit pengunjung.

1.2. Apa saja aplikasi untuk membuat wireframe?

Ada banyak aplikasi pembuatan wireframe yang tersedia di internet, tentu tidak semuanya saya pakai. Yang pasti harus lebih murah, dan komplit, bila perlu gratis.

Artikel ini tidak saya buat hanya untuk menceritakan pengalaman pribadi ataupun menceritakan tentang pentingnya proses wireframing pada pembuatan web/app bagi kamu yang sudah paham dunia desain web/app saja. Artikel ini juga saya buat untuk memberi tahu (((bukan mengajari))) kepada orang-orang yang sebelumnya belum pernah sama sekali mengenal dunia desain web/app. Maka, saya juga akan menuliskan tentang apa saja aplikasi yang bisa membantu.

1.2.1. Figma

Gratis, unlimited, komplit, dan bisa berjalan di web. Inilah 4 alasan kenapa Figma menjadi salah satu aplikasi wireframe yang paling sering saya gunakan. Bahkan, di dalam Figmapun, saya sekaligus bisa membuat mockup di dalam satu project.

Karena Figma berjalan di web, maka Figmapun bisa digunakan secara bersama berkolaborasi dengan anggota tim lainnya. Satu project banyak desainer. Harapannya, bisa mempercepat proses pengerjaan.

1.2.2. Balsamiq Wireframe

Aplikasi untuk membuat wireframe selanjutnya yang saya pakai adalah Balsamiq milik Balsamiq Studios yang bisa berjalan di website, dan dekstop version.

Dengan tagline “Life’s too short for bad software!”, Balsamiq Wireframe memang benar-benar membantu tim saya untuk membangun wireframe dengan sangat jelas tanpa harus memulai dari 0.

Balsamiq Wireframe memiliki menu-menu yang langsung berbentuk elemen yang akan dibangun, misalkan elemen gambar, teks, menu navigasi, hingga tabel dan yang lainnya.

Sayangnya, Balsamiq bisa dijalankan secara sempurna (banyak project, dan elemen) jika berlangganan paket yang mereka tawarkan. Untuk saat ini, biaya langganan Balsamiq Cloud Our Web App 2 Project adalah biaya yang paling murah, yaitu $9/bulan.

1.2.3. HotGloo

HotGloo adalah alat UX, wireframe, dan prototyping yang dirancang untuk membuat wireframe sebuah website, aplikasi, dan sistem informasi layaknya Balsamiq dan Figma. Uniknya, HotGloo jauh lebih mudah dipahami dan digunakan, sekalipun untuk pemula.

Sayang, layaknya pisau bermata dua, ada kelebihan pasti ada kekurangan. HotGloo memang memberikan kita akses pembuatan wireframe yang lebih mudah. Tapi, semuanya bisa kita dapatkan hanya jika sudah berlangganan paketnya.

Selesaikan terlebih dahulu struktur website/aplikasinya. Setelah itu, kamu masih bisa bereksperimen dan memikirkan tentang pewarnaan, copywriting, dan gambar pada proses pembuatan mockup.

2. Apa itu mockup?

contoh mockup
Foto: Mockup

Di dalam dunia pembuatan website dan aplikasi, mockup digunakan sebagai alat untuk merepresentasikan tampilan seperti apa yang akan dimunculkan berdasarkan struktur yang telah dibuat pada proses wireframing, lengkap dengan copywriting, konten, warna, gambar hingga elemen UI kecil lainnya.

2.1. Kenapa mockup itu penting?

Setidaknya ada 3 alasan penting menurut justinmind kenapa mockup harus dibuat sebelum website dieksekusi dan dibangun dengan barisan coding:

1. Memprediksi kesalahan lebih cepat

Bukan tidak mungkin kamu akan menemukan kesalahan fungsional dan estetika ketika berada di fase awal membangun website. Dalam proses membuat mockup, kamu memiliki kontrol yang lebih luas untuk menentukan positioning, dan visual yang akan ditampilkan.

Tampilan tersebut akan dikirimkan kepada front end developer ketika sudah sampai pada tahap final, dimana navigasi, struktur, konten, hingga estetika dari desain website yang sudah dibangun sudah tercapai.

2. Revisi tampilan lebih cepat

Coding itu tidak mudah, sekalipun dikerjakan oleh seorang profesional jika dalam proses pengembangannya terdapat banyak revisi yang diminta.

Percayalah, tidak ada front end developer ataupun UI Developer yang ingin hasil desainnya direvisi di tengah perjalanan. Kalaupun ada revisi, itu tentang fungsionalitas dan responsitifitas dari web/app/sistem tersebut saja. Bukan tentang layout, pewarnaan, ataupun sisi estetika lainnya.

Biarkan proses revisi tampilan tersebut diselesaikan lebih cepat pada saat proses pembuatan mockup.

3. Tempat kolaborasi antara tim product dengan developer

Apapun aplikasi untuk membuat mockup yang kamu gunakan, semuanya bisa menjadi tempat kolaborasi yang terintegrasi antara tim product dengan developer terkait proses handover desain.

Di dalam aplikasi tersebut, kamu (dan saya) bisa membagikan seluruh element, catatan, spesifikasi, dan panduan masing-masing halaman yang telah dibuat.

2.2. Apa saja aplikasi untuk membuat mockup website, aplikasi mobile dan sistem informasi?

Ini adalah aplikasi favorit saya untuk membuat mockup website. Kalau kamu punya rekomendasi lain, kirim di kolom komentar, ya…

2.2.1. Figma

Figma lagi? Ya, betul! Figma memang is the best. Satu aplikasi yang membantu saya dalam proses pembuatan wireframe, mockup dan prototype. Pokoknya gratis dan lengkap banget.

Saya tidak mau berkomentar apapun lagi tentang Figma, sepertinya sudah cukup jelas saya tulis di atas tentang apa itu Figma.

2.2.2. Sketch

Aplikasi membuat mockup website, aplikasi dan sistem informasi selanjutnya adalah Sketch. Aplikasi mockup yang powerfull tapi hanya bisa berjalan di sistem operasi MacOS.

Powerfull, lengkap dan (((sangat ringan))) adalah alasan kenapa saya pakai Sketch juga. Sayang, hanya pemilik MacOS saja yang bisa merasakannya. Sampai saat ini pun saya masih berharap Sketch akan ada di versi Windows dengan tambahan fitur yang akan menjadikannya lebih menarik.

2.2.3. Marvel App

Jarang saya pakai, tapi punya fitur yang sangat menarik. Inilah Marvel App. Dengannya, kamu mendapatkan akses semua fungsionalitas inti yang dibutuhkan untuk membangun produk digital – wireframe, prototype, dan menghasilkan spesifikasi desain di satu tempat.

Jujur saja, tampilan Marvel App sangat menarik perhatian saya. Sayang, untuk mendapatkannya, saya harus mengeluarkan uang terlebih dahulu. Terpaksa sampai saat ini saya hanya bisa melihat-lihat saja tutorialnya di Youtube.

3. Apa itu prototype?

contoh prototype
Foto: InvisionApp

Proses membuat website selanjutnya pada tahap desain UI/UX adalah prototype. Proses yang harus dilakukan tapi opsional sebelum seorang programmer mulai mengerjakan tugasnya.

Bagi fifteendesign, prototype adalah mockup interaktif dari desain web/app sehingga mockup dari desain web/app yang sedang dikerjakan bisa dilihat fungsionalitasnya, mulai dari menu drop-down, tombol, form, hingga fungsionalitas simpel lainnya.

Simulasinya bisa dilihat dari gambar di atas, ketika angka yang berada di tampilan aplikasi sebelah kiri diklik oleh user, maka akan secara otomatis user dilempar ke halaman kedua yang ada di sebelah kanan.

Dengan cara inilah, programmer, stakeholder, client, ataupun user dapat lebih mudah memahami bagaimana desain sistem tersebut bekerja, apa yang harus dilakukan ketika berada di halaman tersebut, dan tentu saja yang terakhir adalah apa yang masih membuat bingung dan harus segera direvisi.

###

Inilah apa yang saya dan tim lakukan ketika memiliki ide untuk membuat sebuah website ataupun aplikasi. Kami menuangkannya ke dalam alur cerita ide atau yang biasa disebut dengan flowchart, kemudian dituangkan kembali ke dalam bentuk wireframe, yang diikuti dengan mockup dan prototype.

Bagaimana dengan milikmu?

Author

I'm UI/UX Enthusiast who passionate about startup business things

2 Comments

  1. Awesome! Its truly amazing post, I have got much clear idea about from this post. Gretal Walton Gotthard

  2. Hello. This post was really motivating, particularly because I was browsing for thoughts on this topic last Saturday. Reta Alon Roybn

Write A Comment