Membuat Desain Aplikasi Android di Smartphone / Tablet dengan UI Design Tool

Sebelum membuat aplikasi android agar lebih mudah kita dapat mendesain tampilannya terlebih dahulu. Ada beberapa aplikasi di play store yang digunakan untuk membuat desain aplikasi android. Tapi saya menemukan aplikasi yang cukup mudah digunakan dan mempunyai feature yang unik. Aplikasi tersebut adalah UI Design Tool. Ui design tool dapat didownload gratis di play store. Berikut ini beberapa featurenya

1. Mendukung banyak form
2. Link antar form
3. Preview desain aplikasi
4. Support image
5. Icon yang disediakan cukup lengkap
6. Support klik komponen dan icon untuk aksi popup informasi

Kekurangan dari aplikasi ini adalah kita belum dapat mengexportnya menjadi file image. Jadi jika kita ingin membuka hasil desainnya di perangkat android lainnya, perangkat android tersebut juga harus diinstall aplikasi ini. Format yang digunakan oleh aplikasi ini adalah .bkFile

Download UI design tool dilink berikut : https://play.google.com/store/apps/details?id=com.aba.uidesigntool&referrer=utm_source%3Dgoogle%26utm_medium%3Dorganic%26utm_term%3Dui+design+tool+playstore&pcampaignid=APPU_r5fPVNWuPOLAmwXu9YCQBQ

image

Seperti ini tampilan workbenchnya

image

Klik New Design untuk membuat desain baru. Selanjutnya berikan nama desainnya

image

Selanjutnya pilih Add

image

Kemudian berikan nama page desainnya

image

Klik Create Design. Langkah selanjutnya pilih format halamannya

image

image

Menu komponen dan lain – lain ada disebelah kiri, geser panelnya untuk menggunakan

image

image

Ini adalah panduan untuk menggunakan editor komponen

image

Pilih Add Shape dan tempatkan komponen tersebut di halaman desainnya

image

Untuk memberikan aksi ketika diklik isi teks pada Display Message

image

Seperti ini hasilnya jika komponen tersebut diklik. Akan muncul popup pesan yang kita tulis sebelumnya.

image

Kita juga dapat menambahkan image dari sdcard

image

Untuk mempermudah dan mempercepat pembuatan desain, kita dapat menggunakan feature Copy. Klik copy kemudian pilih komponen yang ingin dicopy.

image

Untuk menambahkan icon pilih Add Icon dan klik icon yang telah disediakan

image

Icon tersebut juga dapat kita berikan keterangan popup ketika diklik. Cara memberikan aksi popup informasi caranya sama  seperti diatas. Seperti ini informasi yang ditampilkan ketika icon tersebut diklik

image

Nah, bagaimana jika kita ingin link ke form lain ketika icon atau komponen diklik?. Caranya cukup mudah, pada Design Page pilih Add untuk membuat form / page baru

image

Pada page baru tersebut isi dengan komponen, klik pada icon atau komponen yang diberikan aksi pada page / form 1. Kemudian pilih Move Other Page untuk link dari page / form 1 ke page 2

image

Seperti ini hasil rancangan saya dengan aplikasi tersebut

image

Link form kedua ketika http://www.marisharingilmu.wordpress.com diklik

image

Selamat mencoba dan semoga bermanfaat🙂

Untuk pertanyaan, saran dan kritik, silahkan ditulis di kolom komentar

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s