Pratikum Interaksi Manusia dan Komputer – Program Studi Teknik Informatika – S1 Oleh : Astrid Novita Putri , S.Kom, M.Kom 1

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 2

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 3

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 4

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 5

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 6

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 7

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 Pitcure Produk

Stawberry Creamy Risol 10 % IDR 11.999,00

Mayonnaise Beef Risol 15% IDR 17.999,00

Pratikum Interaksi Manusia dan Komputer – Program Studi Teknik Informatika – S1 Oleh : Astrid Novita Putri , S.Kom, M.Kom 8

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 9

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 10

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 11

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 12

Pertemuan 7 & Pertemuan 8

Silahkan Anda Presentasikan Peoject akhir Hasil Design aplikasi baik itu

mobile, web, ataupun desktop dan kegunaan aplikasi tersebut.