Skip to main content
Anda telah mengetahui apa itu Wireframe dan manfaatnya. Nah, sekarang saatnya kita latihan untuk menggambar Wireframe. Seperti pada latihan membuat sketsa pada Crazy Eight, Anda tidak perlu menjadi ahli gambar untuk membuat Wireframe, yang terpenting adalah konteksnya. Jadi jangan takut dan ragu ya! Anda hanya perlu membiasakan diri untuk mengutarakan ide ke dalam Wireframe. Ada dua jenis desainer dalam membuat Wireframe, ada yang suka menggambar langsung menggunakan tangan dan tidak terlalu rapi. Namun, ada juga yang menggambar dengan teliti menggunakan penggaris. Nah, jenis mana yang Anda pilih? Itu terserah sesuai kenyamanan Anda. Tak perlu berlama-lama lagi, mari kita coba latihan membuat replikasi Wireframe dari aplikasi Play Store dengan bentuk seperti ini:
20210816124736f260ed0b269c7788133395bc00b1cc6a.jpeg Mari siapkan kertas dan alat menggambar terlebih dahulu. Berikut ini adalah langkah-langkahnya:
  1. Buat bingkai handphone terlebih dahulu dengan persegi panjang yang cukup besar sehingga Anda memiliki ruang untuk menggambar di dalamnya:
    2021081612502204ccb766adee4b5258ac26ae6479c008.jpeg
  2. Kita mulai dari bagian yang paling atas, yakni kolom pencarian. Gambarlah persegi dengan icon pencarian di sebelah kiri dan avatar di sebelah kanan. Untuk mengganti foto, Anda bisa menggunakan tanda silang penuh. Kemudian sebagai pengganti teks, cukup gunakan garis horisontal saja seperti ini.
    20210816125021a03e75b03419014f5b4f9ae64b31658f.jpeg
  3. Selanjutnya untuk menu tab, Anda dapat merepresentasikannya seperti berikut:
    20210816125023984b1ca1bb86ace1f39718ec313407d1.jpeg
  4. Kemudian untuk menggambar menu filter yang berupa dropdown, gambarlah seperti ini:
    202108161250245be6842c17fdaf3cc31277b81d266a49.jpeg
  5. Selanjutnya kita mulai dari posisi bawah dulu, supaya nanti ketika menggambar list bisa sesuai. Pada bagian bawah terdapat Bottom Navigation yang bisa digambarkan seperti ini:
    20210816125022de7dacd2df746b4aa69abef08d20dfd8.jpeg
  6. Terakhir, buat list yang menunjukkan data yang banyak.
    20210816125025e58fbeba5f83f8f60249fb976dd3a86a.jpeg
Keren! Apakah Anda sudah merasa menjadi UX Designer? Ini merupakan langkah awal yang sangat penting dan akan sering dilakukan. Untuk memudahkan proses menggambar, Anda juga boleh menggunakan penggaris. Ingat! Bagian penting dari proses ini adalah mengetahui struktur dari suatu halaman.  Nah, supaya kemampuan Anda lebih terasah, cobalah membuat Wireframe kembali untuk aplikasi favorit. Ingat selalu bahwa latihan adalah cara terbaik untuk mendesain yang lebih baik. Jika Anda merasa butuh mengganti kertas, ganti saja dan ulang kembali. Semakin banyak berlatih, Anda akan semakin ahli dalam menggambar Wireframe.