Pratikum Interaksi Manusia dan Komputer

Pertemuan 1
Pengenalan Balsamiq Mockups
Sebelum membuat suatu aplikasi anda dapat mendesain terlebih dahulu desain yang
anda inginkan, dapat anda buat menggunakan aplikasi balsamiq mockups, langkah yang di
lakukan sebagai berikut :
1. Download Aplikasi Balsamiq Mockups 3.3.6, di alamat
https://balsamiq.com/download/
2. Kemudian Instal Aplikasi tersebut sebagai berikut langkahnya :
a. Pilih lokasi yang akan di install setelah itu pilih Continue
b. Akan muncul di bawah ini
c. Jika Selesai dapat masuk ke tampilan awal di project awal:
Pratikum Interaksi Manusia dan Komputer – Program Studi Teknik Informatika – S1
Oleh : Astrid Novita Putri , S.Kom, M.Kom
1
3. Carilah ide untuk membuat rancangan desain anda, seandainya anda akan membuat
sistem aplikasi web, anda dapat mengkombinasi tampilan yang akan anda buat, dari
website lain maupun dari ide anda, dan harap di perhatikan, rancangan desain yang
anda buat harus interaktif yang terkait dengan pengguna, dari tampilan, warna dan
kemudahan pengguna dalam mengerti dalam memakai.
4. Untuk membuat tampilan web pilih Big  Browser  kemudian Drag
5. Ketik alamatnya seandainya http://fastkuliner.com
Pratikum Interaksi Manusia dan Komputer – Program Studi Teknik Informatika – S1
Oleh : Astrid Novita Putri , S.Kom, M.Kom
2
6. Anda dapat mengubah ukuran dan Posisi di bagian Position dan Size, Untuk mengubah
warna dapat di ganti di bagian Background.
7. Kemudian silahkan mulai berkreasi sekreatif mungkin, saya ambil contoh membuat aplikasi
web dari website http://www.kraukk.com/
8. Kemudian untuk tombol menggunakan Buttons pilih Button kemudian drag dan beri nama
Link nama halaman yang anda inginkan, Contoh : Home
Pratikum Interaksi Manusia dan Komputer – Program Studi Teknik Informatika – S1
Oleh : Astrid Novita Putri , S.Kom, M.Kom
3
9. Untuk warna tinggal ubah di sebelah kanan Background, untuk member gambar pilih Media
 Image  Drag image
10. Pilih Gambar yang akan di gunakan, di bagian menu bawah kanan pilih di tombol +
Pratikum Interaksi Manusia dan Komputer – Program Studi Teknik Informatika – S1
Oleh : Astrid Novita Putri , S.Kom, M.Kom
4
11. Maka akan muncul di bawah ini :
Tugas !
Buatlah suatu perancangan desain aplikasi baik aplikasi web, desktop ataupun
mobile dengan tema “Technoprenurship”. Buatlah tampilan interface yang friendly
dan mudah di pahami oleh pengguna, sehingga menimbulkan kenyamanan dan
kemudahan dalam mendapatkan informasi di sistem tersebut
Pratikum Interaksi Manusia dan Komputer – Program Studi Teknik Informatika – S1
Oleh : Astrid Novita Putri , S.Kom, M.Kom
5
Pertemuan 2
Membuat Tampilan Halaman Utama
Sebelum membuat tampilan menu utama, alangkah baiknya kita membayangkan
rancangan seperti apa yang akan kita buat, kemudian tema apa yang akan kita rancang.Ada
banyak sekali kemudahan dari yang kita buat dengan fasilitas dari Balsamiq Mockups.
Sebagai Contoh saya membuat Tema Technoprenurship dengan tema “Risoles”, saya
menjual produk saya dengan Nama “Risol-Risol Ceria”.
Untuk Logo dapat di cari pada Button dan untuk Maps dapat di pilih di Media  Street Map
Selamat Mencoba ^_^
Pratikum Interaksi Manusia dan Komputer – Program Studi Teknik Informatika – S1
Oleh : Astrid Novita Putri , S.Kom, M.Kom
6
Pertemuan 3
Membuat Tampilan Halaman Produk
Pada halaman ini anda di tuntut untuk menyampaikan produk apa saja yang akan
anda jual dan beri keterangan harga yang akan di tawarkan. Beri diskon ataupun promo
yang akan anda tawarkan, seandainya : “Promo Hanya Bulan Januari”
Produk yang di Tawarkan untuk “Risol-Risol Ceria”
Product
Diskon
Price
Stawberry Creamy Risol
10 %
IDR 11.999,00
Mayonnaise Beef Risol
15%
IDR 17.999,00
Pitcure Produk
Pratikum Interaksi Manusia dan Komputer – Program Studi Teknik Informatika – S1
Oleh : Astrid Novita Putri , S.Kom, M.Kom
7
Choco Risol
20%
IDR 10.999,00
Keju Risol
10%
IDR 13.999,00
Potato Risol
10%
IDR 10.999,00
Pratikum Interaksi Manusia dan Komputer – Program Studi Teknik Informatika – S1
Oleh : Astrid Novita Putri , S.Kom, M.Kom
8
Pertemuan 4
Membuat Tampilan Cara Pemesanan
Pada pertemuan ini kita akan membuat tampilan cara pemesanan, di dalam rancangan
desain ini anda dapat membuat tampilan deskripsi gambaran produk yang akan anda jual
beserta cara pemesanan, seandainya memberi penjelasan via BBM, Whats up, email.
Selamat Mencoba ^_^
Pratikum Interaksi Manusia dan Komputer – Program Studi Teknik Informatika – S1
Oleh : Astrid Novita Putri , S.Kom, M.Kom
9
Pertemuan 5
Membuat Tampilan Keranjang Pemesanan
Seandainya customer telah memesan melalui website dan memilih apa saja yang akan di
pesan, maka akan masuk ke menu tampilan keranjang pemesanan di bawah ini, sebagai repot
customer pembelian apa saja yang di beli di “Risol Ceria”.
Selamat Mencoba ^_^
Pratikum Interaksi Manusia dan Komputer – Program Studi Teknik Informatika – S1
Oleh : Astrid Novita Putri , S.Kom, M.Kom
10
Pertemuan 6
Membuat Tampilan Kasir dan Penjualan Pada Android
Di Android sekarang tersedia aplikasi kasir dengan menggunakan android hanya tinggal
memencet harga anda dapat mengetahui total dan hasil keuntungan sehari yang anda
dapatkan. Alamat : https://play.google.com/store/apps/details?id=com.lentera.nuta
Aplikasi yang dibuat oleh Jogja Digital Valley (JDV) bekerja sama dengan Telkom
menjualkan produk tersebut hingga mencapai ratusan toko sudah menggunakan. Anda dapat
membuat desain lebih cantik dan menarik dengan mencari kekurangan dari aplikasi tersebut.
Pratikum Interaksi Manusia dan Komputer – Program Studi Teknik Informatika – S1
Oleh : Astrid Novita Putri , S.Kom, M.Kom
11
Pertemuan 7 & Pertemuan 8
Silahkan Anda Presentasikan Peoject akhir Hasil Design aplikasi baik itu
mobile, web, ataupun desktop dan kegunaan aplikasi tersebut.
Pratikum Interaksi Manusia dan Komputer – Program Studi Teknik Informatika – S1
Oleh : Astrid Novita Putri , S.Kom, M.Kom
12