MANUAL BOOK UI DAN UX IMK

PROJECT LAB INTERAKSI MANUSIA DAN KOMPUTER

Re-make: Info BMKG

Nama : Fadhillah Farid

NPM : 52419120

Kelas : 3IA17

LABORATORIUM TEKNIK INFORMATIKA

UNIVERSITAS GUNADARMA

2022
 MEMBUAT WIREFRAME DAN MOCK UP

Tampilan diatas merupakan tampilan awal dari figma yang bisa diakses dari link
https://www.figma.com/. Pada tampilan tersebut terdapat untuk membuat file baru, membuat
papan tulis dan diagram kemudian terdapat fitur untuk mengimport file. Untuk membuat
Wireframe dan Mock Up bisa dengan memilih desain baru “New Design File”

Tampilan baru desain pada figma akan tampak seperti gambar diatas. Pilih icon Frame
seperti gambar diatas karena pembuatan wireframe dan mockup ini berbasis aplikasi android
maka pilih frame sesuai ukuran android yaitu frame android small.
 Tahap berikutnya adalah pembuatan header dari tampilan Beranda pada aplikasi info
BMKG, pilih icon kotak pada menu bar figma kemudian pilih rectangle, buat header sesuai
dengan ukuran yang diinginkan seperti gambar diatas. Karena header info BMKG berwarna
biru, maka header yang ingin dibuat juga diganti menjadi warna biru dengan mengubah fill
rectangle tersebut menjadi warna biru dengan kode warna 1F1BFF. Ulangi Langkah tersebut
untuk membuat latar dari cuaca terkini, siaran pers, peringatan dini cuaca, dan info gempa bumi
sesuai dengan warna yang diinginkan menggunakan fitur dari rectangle.
 Tahap berikutnya adalah menambahkan gambar peta pada bagian info gempa bumi
terkini, Cari gambar peta dari google, kemudian copy gambar tersebut. Pada figma klik area
frame yang ingin di ubah menjadi gambar, paste gambar pada frame tersebut.

Pada paragraph sebelumnya sudah dilakukan penambahan gambar pada desain,

selanjutnya adalah menambahkan icon seperti garis tiga, pengaturan dll. Untuk mencari icon
yang dibutuhkan bisa dengan mengambil icon tersebut dari website www.flaticon.com,
kemudian copy icon tersebut > paste pada halaman figma > atur ukuran dan pindahkan icon
tersebut sesuai tempat yang diinginkan. Untuk membuat teks tulisan pada desain bisa dengan
mengklik icon T pada menu bar figma, arahkan pada bagian yang ingin ditambahkan teks
kemudian input tulisan dan tekan enter. Ulangi cara menambahkan icon dan teks tersebut untuk
membuat semua icon dan teks yang dibutuhkan pada pembuatan mockup aplikasi info BMKG.
HASIL WIREFRAME DAN MOCKUP
 MEMBUAT PROTOTYPE

Mock Up merupakan Media visual atau preview dari sebuah konsep desain “datar”
yang diberikan efek visual sehinggal hasilnya sangat tampak atau menyerupai wujud nyata.
Dengan ditambahkan prototype pada mock up info BMKG dapat menghasilkan design UI yang
dapat dijalankan serta tampilan yang hampir sama dengan aplikasi berserta fungsi-fungsi yang
akan disajikan pada aplikasi info BMKG.

Untuk membuat sebuah prototype pada mockup yang sudah dibuat, bisa dengan cara
memilih menu Prototype yang berada pada sisi sebelah kanan tampilan figma disebelah menu
design. Ketika sudah masuk kedalam menu Prototype, selanjutnya adalah memilih bagian mana
yang akan melakukan perpindahan tampilan pada mockup yang sudah dibuat. Karena pada
aplikasi BMKG saat mengklik pilihan menu (garis 3) di menu utama akan berpindah tampilan
ke Menu Pilihan, maka pada garis 3 di menu utama akan diberikan Prototype ke halaman menu
pilihan. Kemudian terdapat icon pengaturan pada menu utama. Icon pengaturan akan diberikan
Prototype ke halaman pengaturan seperti pada gambar diatas. Untuk memberikan fitur
Prototype bisa dengan cara mengarahkan mouse kearah icon pengaturan hingga terdapat tanda
+ kemudian Tarik ke halaman yang ingin dituju hingga terdapat garis biru seperti pada gambar
diatas. Ulangi Langkah yang sama untuk membuat prototype pada semua desain yang
dibutuhkan untuk membuat MockUp aplikasi info BMKG. Pada halaman utama yang akan di
beri prototype yaitu icon garis 3 ke halaman pilihan menu, icon pengaturan ke halaman
pengaturan dan info gempa bumi terkini akan dibuat prototype ke halaman gempa bumi. Pada
halaman menu pilihan dibuatkan prototype pada icon garis 3 ke halaman utama, fitur cuaca ke
halaman prakiraan cuaca, dan info gempa bumi ke halaman gempa bumi. Kemudian pada
halaman pengaturan ditambahkan prototype jika mengklik teks pilih lokasi prakiraan cuaca
akan diarahkan ke halaman prakiraan cuaca.
HASIL PEMBUATAN PROTOTYPE