5 LANGKAH MUDAH MEMBUAT WIREFRAME

         

        “Wireframe”. Baru tau atau pernah dengar? Yuk kita kulik-kulik apa sih itu. Wireframe merupakan suatu kerangka untuk penataan suatu item di halaman website ataupun aplikasi berbasis android. Wireframe ini dibuat agar pengembangan desain website atau aplikasi berbasis android dapat terstruktur dan terarah. Beberapa kelebihan wireframe antara lain:

1.    Memberikan gambaran layout umum dari website atau aplikasi

2.   Akan membangun kepercayaan dengan user

3.   Akan menghemat biaya dan waktu

Fyi, si wireframe ini adalah tahapan pertama perancangan.  Walaupun kelihatannya sepele, perancangan ini memegang peranan penting juga loh. Dengan membuat perancangan, kita akan lebih mudah untuk mengganbar. Untuk menggambar, kita tidak membutuhkan alat khusus kok. Perancangan ini juga memudahkan kita dalam melakukan modifikasi. Kita tidak perlu pemrograman untuk memvisualisasikan ide-ide desain baru. Kita juga tidak perlu melakukan pengkodean, kita hanya perlu menggambar bingkai gambar seolah-olah kita menggunakan alat gambar. Nah, perancangan itu ada beberapa tahapan lagi, yaitu wireframe, storyboard, wireflow, mock up, dan prototype. Untuk pengertian masing-masing istilah itu yang mungkin aja baru didengar. Silahkan buka link ini https://www.indahrafiqa.com/2020/02/3-tahapan-pembuatan-aplikasi-yang-mudah.html

Bailik lagi bahas wireframe ya. Pembuatan wireframe dilakukan sebelum proses desain sesungguhnya dimulai untuk mempermudah kita dalam perancangan website ataupun aplikasi berbasis android. Pada tahap desain wireframe ini, kita bisa menata item-item seperti banner, header, content, footer, link, form input, dan sebagainya. Kita bisa wireframing menggunakan kertas maupun menggunakan tools khusus desain wireframing, seperti Cacoo, Jumpchart, Gliffy serta Mockflow yang memiliki toolset dan fitur yang bagus. Selain itu, ada Adobe Illustrator yang bisa kita gunakan. Pakai aplikasinya yang terbaru ya, agar toolsnya lengkap. Kalau wireframing, jangan lupa kasih warna juga ya. Biar tambah menarik dan estetik.

Proses wireframe ini biasa dikerjakan oleh UI Designer. Jadi, kalau cita-cita kalian mau jadi UI Designer, jangan lupa belajar wireframing dulu ya.

Yuk lanjut ke langkah wireframing. Langkah-langkahnya diantaranya:

  1.    Mendapatkan inspirasi

Salah satu caranya adalah dengan mengamati desain wireframe orang lain. Semakin banyak kita mengamati desain wireframe, kita akan semakin paham desain mana yang cocok untuk wireframe kita.

  2.   Pilih alat yang akan kita gunakan

Seperti yang sudah dijelaskan tadi. Kita dapat membuat wireframe menggunakan kertas maupun menggunakan tools khusus desain wireframe. Tools ini pun sangat beragam. Jadi, kita harus memilih salah satunya yang menurut kita mudah.

Jika memilih pembuatan wireframe menggunakan kertas, teman-teman bisa print template ini menggunakan ukuran A4.

Wireframe website :

https://drive.google.com/file/d/1pd_t_ZDb0el7fBl5nbIFp4-cDIdhrf8t/view

Wireframe Aplikasi android :

https://drive.google.com/file/d/1TnYMl76heMU6V6ln9R6YmFS80JkG4R1B/view

  3.   Menentukan layout dengan kotak

Kotak ini dapat mempermudah kita membagi space layar. Kita bisa membagi satu layar menjadi beberapa kotak, seperti untuk header, content, dan footer

  4.   Mulai mendesain

Nah, setelah kita menentukan layout dan membagi space. Mari mulai mendesain. Saatnya kita mencurahkan segala kreatifitas kita.

  5.   Finishing

Untuk step terakhir ini, silahkan membuat desain teman-teman semenarik mungkin. Salah satu caranya adalah dengan mewarnai desain.

Itulah 5 langkah mudah pembuatan wireframe. Semoga bermanfaat ya. Happy trying guys!