Perancangan Antar Muka Aplikasi

Posting kali ini saya buat sebagai bagian dari materi bimbingan Prakerin online, khusus untuk grup siswa/i bimbingan Prakerin Inne.

Untuk membuat sebuah aplikasi yang baik, maka dibutuhkan perancangan yang matang dan mencakup semua keseluruhan fitur yang ada di dalam aplikasi tersebut, baik aplikasi berbasis web, desktop maupun mobile.

Salah satu metode perancangan yang penting untuk dibuat adalah User Interface Design (UI Design). UI Design ini digunakan sebagai prototype aplikasi yang akan dibuat nanti. Untuk membuat UI Design, kita dapat membuatnya secara manual menggunakan aplikasi image editor seperti Photoshop, Illustrator, dan sebagainya. Namun kita juga dapat membuatnya menggunakan aplikasi pembuat diagram seperti Microsoft Visio.  
Saat ini sudah ada aplikasi pembuat UI Design otomatis seperti ForeUI. Lisensi aplikasi ini adalah propietary, namun kita dapat menggunakan versi trial selama 15 hari.

Contoh UI Design adalah sebagai berikut:

Contoh UI Design dan Realisasi Aplikasi

Pada gambar di atas, kita dapat melihat bahwa setiap komponen yang ada di dalam perancangan tersebut kemudian direalisasikan pada aplikasi yang dibuat.

Manfaat perancangan UI:
1. Memudahkan saat pembuatan aplikasi (coding) karena setiap komponen terkecil seperti button dapat tertuang di dalam perancangan tersebut
2. Memberikan batasan pembuatan aplikasi sehingga pada saat aplikasi dibuat, tidak melenceng dari tujuan pembuatan aplikasi
3. Memudahkan proses pembuatan basis data karena akan tergambar dengan jelas field (kolom) apa saja yang akan dibuat di dalam basis data
4. Sekali mendayung, dua tiga pulau terlampaui. Pembuatan UI Design akan dimasukkan ke dalam bab Perancangan Aplikasi, sehingga sambil membuat aplikasi, kalian juga menyelesaikan laporan.

Bahan Bacaan:
1. http://designmodo.com/user-interface-design-examples/
2. https://www.academia.edu/10468541/UI_UX_User_Interface_and_User_Experience_example_www.facebook.com
3. http://designinstruct.com/roundups/free-ui-kits/


Tugas Perancangan UI:

Buatlah perancangan User Interface per halaman/ tampilan aplikasi  dari aplikasi kalian masing-masing. Jika direncanakan akan ada 20 halaman web/ tampilan desktop, maka buatlah 20 gambar perancangan UI setiap halaman, lalu disimpan dalam format .jpeg. Simpanlah gambar sesuai dengan nama halaman masing-masing. Misalnya, halaman index maka disimpan dengan nama index.jpg

Posting perancangan UI ke dalam blog kalian masing-masing, dan kirim LINK POST tersebut ke grup WA "Bimbingan Prakerin Inne", paling lambat hari Minggu, 10 April 2016 pukul 12 siang. Terima Kasih.

Selamat Mengerjakan!