PT 14 - Membuat Rancangan (Antar Muka) Dengan Balsamiq

Modul KULIAH SEKOLAH TINGGI TEKNOLOGI INFORMASI NIIT Mata Kuliah Interaksi Manusia dan Komputer Semester Genap 2021/2022 Dosen Arisantoso, S.T., M.Kom Modul 1 (Satu) Pertemuan 14 (Empat Belas) Topik Membuat Rancangan (Antar Muka) Dengan Balsamiq Sub Topik Rancangan Antar Muka dari IMK dengan Balsamiq Materi 14.1. Definisi Prototipe Mockup 14.2. Instal Aplikasi Balsamiq 14.3. Membuat Prototipe Menggunakan Balsamiq 14.4. Tugas Mandiri Membuat Antar Muka menggunakan Aplikasi Mockup Capaian Mampu mempresentasikan hasil analisa usabilitas dan Pembelajaran rancangan muka dari interaksi manusia dan computer.

BAB XIV MEMBUAT RANCANGAN (ANTAR MUKA) DENGAN BALSAMIQ 14.1. Definisi Prototipe Mockup Mengapa, kita perlu membuat prototipe mockup? Untuk Anda yang belum tahu atau baru belajar menjadi seorang desainer UI/UX, prototipe adalah sebuah gambar atau sketsa dasar dari software yang hendak digarap. Di sini, tugas seorang desainer adalah turut serta bersama developer menyusun bentuk dari aplikasi atau website yang sedang dikerjakan. Pun dengan adanya prototipe dasar, maka developer bisa dengan lebih mudah menyusun komponen dari produk software yang dikerjakan. Namun ingat, prototipe mockup ini adalah sebuah bentuk sketsa dasar atau awal saja, bukan gambaran hasil akhir dari aplikasi atau website yang sedang dibuat. Salah satu contoh nya Balsamiq. Balsamiq mockup adalah alat bantu untuk mempermudah Anda menyusun seperti apa bentuk awal dari software yang sedang dibuat. Dengan adanya prototipe, Anda dan tim bisa lebih gampang menganalisis kinerja software, memperkirakan fitur-fitur utama serta posisinya, dan memperkirakan apakah software dapat digunakan dengan mudah oleh user atau belum. Tentunya sebelum bisa menggunakan Balsamiq untuk mendesain, Anda perlu mendownload Balsamiq terlebih dahulu. Sesungguhnya ada cukup banyak software yang bisa digunakan untuk membuat rancangan prototipe UI/UX website atau aplikasi, seperti Adobe XD, InVision Studio, dan Figma Studio. Namun di antara semua nama software desain tersebut, Balsamiq adalah software termudah yang bisa membantu Anda lebih cepat dalam proses belajar membuat mockup prototipe. Bagaimana dengan fitur-fitur Balsamiq? Tenang, Balsamiq menghadirkan banyak fitur editing lengka yang semuanya dapat diunduh dan digunakan secara gratis untuk versi demo. Untuk Anda yang belum download Balsamiq mockup, Anda bisa mendownloadnya via link website resmi Balsamiq di: https://balsamiq.com/download/ Apapun project yang Anda kerjakan, Balsamiq telah terbukti mampu memprosesnya (loading) dengan cepat, anti lelet apalagi mengakibatkan perangkat mengalami kemacetan (lag). Kemudian, hasil prototipe yang dirancang dapat diekspor dalam beragam bentuk seperti link untuk dicoba dijalankan via browser. 132

Sebelum memulai, berikut ini ada sedikit tips yang wajib Anda ketahui untuk bisa merancang sebuah prototipe yang bagus: 1. Buatlah tatanan desain dan pemosisian fitur-fitur yang berurutan serta sesuai kebutuhan. Trik ini akan membuat desain Anda tetap rapi. 2. Gunakan kombinasi warna yang baik, memiliki kontras dan enak dilihat. 3. Memakai platform atau gadget yang mendukung proses pengembangan project. 4. Berikan sejumlah assets gambar untuk mempercantik desain. 14.2. Instal Aplikasi Balsamiq Pertama-tama, buka https://balsamiq.com/download/ lalu tunggu hingga download otomatis berjalan pada hardware atau gadget yang Anda gunakan. Gambar 14.1. Aplikasi Balsamiq Apabila download sudah selesai dijalankan, maka selanjutnya adalah melakukan instalasi. Instalasi Balsamiq dapat dilakukan dengan mudah. Cukup klik file yang baru terdownload, kemudian klik ‘run’. Apabila muncul box berisi instruksi download, Anda tinggal mengikuti perintah yang diberikan seperti mengklik ‘next’ hingga mencapai tombol ‘finish’. Instalasi akan dijalankan otomatis oleh komputer sampai Anda sukses memperoleh tombol shortcut menuju aplikasi Balsamiq di dekstop. Jika instalasi sudah beres, bukalah aplikasi. 133

14.3. Membuat Prototipe Menggunakan Balsamiq 1. Setelah aplikasi berhasil diinstall di PC atau laptop silahkan anda buka aplikasi tersebut. Gambar 14.2. Tampilan Aplikasi balsamiq Gambar diatas merupakan tampilan awal ketika membuka aplikasi balsamiq mockup 2. Langkah berikutnya yaitu memilih platform yang akan digunakan , dengan cara memilih menu toolbar container, di bagian container telah disajikan berbagai macam platform penampil aplikasi yaitu Browser, Smartphone dan Ios. Pada tutorial kali ini saya ingin membuat menggunakan platform Smartphone. Cara menggunakannya cukup mudah cukup klik gambar smartphone dan tarik kebagian tengah layar. 134

Gambar 14.3. Memilih Platform yang digunakan 3. Apabila tampilan device sudah muncul silahkan tambahkan keterangan di bagian atas dengan cara memilih menu text dan pilih label. Text yang dipilih juga dapat diubah propertinya, seperti mengubah ukuran font. 4. Setelah anda membuat keterangan login, langkah berikutnya membuat form username dan password dengan cara pilih bagian menu Form dan pilih text input. 5. Setelah form username dan kata sandi berhasil dibuat, langkah selanjutnya membuat tombol masuk dengan cara tetap pada menu form dan pilih button. 6. Apabila prototipe berhasil dibuat, silahkan periksa dan jalankan hasil karya anda dengan menekan tombol play di bagian kanan atas aplikasi. Di bawah ini gambar hasil prototipe login. 135

Gambar 14.4. Prototipe Berhasil dibuat Gambar 14.5. Hasil Tampilan Prototipe 136

7. Setelah prototipe dirasa sudah baik, silahkan export hasil nya ke bentuk PDF, dengan cara memilih menu project dan pilih export to PDF. Langkah-langkah diatas merupakan salah satu pembuatan rancangan antar muka prototipe login, untuk mengerti lebih dalam silahkan membuat prototipe dengan berbagai macam fitur maupun tampilan, misalnya membuat halaman dashboard admin. Anda juga bisa menambahkan file assets gambar ke dalam aplikasi ,tetapi memakan waktu yang lebih lama dalam menjalankannya. 14.4. Tugas Mandiri Membuat Antar Muka menggunakan Aplikasi Mockup. Buatlah rancangan berdasarkan User Experience (Rancangan Antar Muka) dalam bentuk Mockup. Dikerjakan masingmasing. *Lakukan observasi kepada mahasiswa lain di kelas, apa keinginan mereka terkait aplikasi user interface yang sudah Anda buat. (Cantumkan hasil survei) Dipresentasikan di Pertemuan ke 15 137