INTERAKSI MANUSIA DAN KOMPUTER

DESAIN INTERAKTIF

TUGAS INDIVIDU
Disusun Untuk Memenuhi Salah Satu Tugas
Mata Kuliah Interaksi Manusia dan Komputer
Dosen Pengampu : Alam Rahmatulloh., S.T., M.T.

Oleh :
Nama : Rizki Setiawan
NPM : 187006101
Kelas :D

PROGRAM STUDI INFORMATIKA

FAKULTAS TEKNIK UNIVERSITAS SILIWANGI
TASIKMALAYA
2020
Tools yang digunakan
Dalam pembuatan tugas desain interaktif ini saya menggunakan tools Adobe XD
untuk membuat desain interaktif aplikasi Booking Hotel.

Desain Interaktif Interface Aplikasi Booking Hotel

 Halaman Splash Screen

 Halaman Login
 Halaman Daftar

 Halaman Pendaftaran Sukses

 Halaman Utama

 Halaman Detail
 Halaman Booking Hotel

 Halaman Pembayaran
 Halaman Pembayaran Sukses

 Halaman Profile
 Halaman About

Fungsi, Kelebihan dan Kekurangan Adobe XD

Adobe XD merupakan software yang berfungsi untuk membuat wireframe atau
kerangka kerja, screen layout and production dan membuat kerangka, menetapkan alur
kerja yang telah dibuat agar tidak rancu dengan proyek desain, berbagi link pekerjaan
kita dengan desainer lain, mendukung asset desain dari photoshop dan illustrator
sehingga desainer bisa membuat desain di software tersebut terlebih dahulu lalu
kemudian di import ke Adobe XD.

Adapun kelebihan yang dimiliki oleh Adobe XD antara lain :

 Prototyping tools
Dengan tools ini, maka para desainer aplikasi mobile bisa membuat alur kerja
yang lebih baik dan terperinci sekaligus teratur sehingga ketika ada proyek desain
lainnya, tidak akan saling mengganggu dan tetap pada jalurnya sendiri.
 Focused design tools
Dengan tools ini, maka para desainer aplikasi mobile membuat kerangka kerja,
mockup hingga screen layouts and production untuk desain yang lainnya.
 Asset design from Photoshop, Sketch, Illustrator
Seperti yang sudah diketahui, Adobe memiliki beberapa perangkat lunak lainnya
yang juga digunakan untuk desain seperti Photoshop, Sketch dan Illustrator. Untungnya,
platform ini bisa memasukkan aset desain dari perangkat lunak tersebut ke dalam
proyek sehingga memudahkan pekerjaan.
 Built-in sharing
Tools ini bisa membuat kamu merekam video selama proses pengerjaan desain
sehingga bisa dicek oleh desainer lainnya lewat fitur Creative Cloud.
 Fast perfomance
Tentu saja performa yang cepat ditawarkan, sehingga berapa banyak pengerjaan yang
kamu lakukan bisa berjalan dengan lancar tanpa lagging.

Adapun kekuragan yang dimiliki oleh Adobe XD antara lain :

 Difficult animating UI
Dengan membuat prototype maka kita bisa menunjukkan apa yang akan
ditampilkan dari aplikasi mobile tersebut, namun dengan Adobe XD, tidak ada tools
animasi yang support dengan Adobe XD sehingga bisa menyulitkan.
 No CSS export
CSS export bisa membuat desainer bekerja lebih simpel lagi dan membuat
pengerjaan lebih cepat juga. Namun, di dalamnya belum ada fitur ini. Padahal di dalam
platform Photoshop sendiri sudah ada menggunakan plugin Zeplin.
 Copy/Paste feature
Tentu saja di dalam perangkat lunak buatan Adobe memiliki fitur copy paste
untuk desain yang sudah dibuat. Ada modifikasi yang bisa dilakukan juga di sana
sehingga lebih mudah. Namun Adobe XD malah membuat fitur copy paste yang tidak
mumpuni sehingga menyulitkan kinerja desainer nantinya.
 Prototype live preview
Desainer bisa memberikan live preview protoype dari aplikasi mobil yang
dibuat. Sayangnya, live preview prototype ini baru bisa bekerja di Mac, tidak dengan
OS Windows. Hal ini cukup merugikan juga.
 Setiap software pasti memiliki kelebihan dan kekurangan masing-masing. Oleh
karena itu setelah mengetahui kelebihan dan kekurangan Adobe XD sebagai user kita
bisa memilih penggunaan software sesuai kebutuhan masing-masing.

Penjelasan Desain Interaktif Aplikasi Booking Hotel

1. Penggunaan Warna
Pada desain aplikasi yang saya buat memiliki warna dominan yaitu warna biru,
putih dan hitam, Penggunaan warna tersebut terkesan simple dan modern. Warna hitam
dominan digunakan untuk teks, alasan nya karena dalam desain aplikasi tersebut latar
belakangnya memakai warna putih jadi teks dengan warna hitam akan terlihat jelas.
2. Useful (Dapat mengerjakan sesuatu)
Desain aplikasi yang saya buat merupakan mobile apps yang digunakan untuk
melakukan booking hotel atau penginapan, sehingga aplikasi tersebut berguna bagi
orang yang sedang mencari hotel ataupun penginapan ketika sedang liburan ataupun
untuk istirahat.
3. Usable (Dapat mengerjakan sesuatu dengan mudah)
Dilihat dari tampilan yang simple dan jelas, kemungkinan besar desain aplikasi
yang dibuat tersebut sudah dapat digunakan oleh user dengan mudah untuk digunakan
sesuai dengan kebutuhan user.
4. Pemetaan
Untuk pemetaan pada desain aplikasi tersebut misalkan pemetaan tombol
ataupun pemetaan tata letak pilihan hotel sudah sesuai, karena pemetaan tersebut
memungkinkan user untuk menggunakan aplikasi dengan mudah meskipun baru
pertama kali menggunakan aplikasi tersebut.
5. Ragam Interaksi
Pada desain aplikasi tersebut terdapat beberapa ragam interaksi yang digunakan.
Pertama terdapat ragam interaksi berbasis menu bisa dilihat terdapat menu side bar pada
desain aplikasi tersebut yang mudah untuk digunakan. Kemudian terdapat ragam
interaksi berbasis borang seperti dalam halaman pembayaran pada aplikasi tersebut
yang digunakan untuk mengisi data user untuk keperluan pembayaran booking hotel.
6. Konsisten
Dalam desain tersebut konsitensi dapat terlihat pada tampilan disetiap halaman
desain aplikasi. Seperti pada tampilan halaman yang didominasi warna yang sama
kemudian style yang sama dan jenis font yang sama di setiap halaman memberikan
keselarasan antara satu halaman dengan halaman yang lain.
7. General (Umum)
Desain aplikasi tersebut memiliki desain yang sudah sering di jumpai atau sudah
familiar dengan user yang biasa menggunakan aplikasi berbasis mobile. Oleh karena itu
user akan lebih mudah dalam menggunakan aplikasi ini tidak perlu untuk menyesuaikan
diri lagi untuk menggunakan aplikasi tersebut.