Design tampilan device pada Smartphone
Desain tampilan aplikasi atau sering disebut user interface merupakan salah satu komponen yang penting dalam sebuah aplikasi mobile seperti Android, karena user interface merupakan cara user untuk berkomunikasi dengan program. Sebuah user interface yang baik akan membuat user nyaman dengan aplikasi yang kita buat.
Desain tampilan Aplikasi ini digunakan sebagai mockup sebelum diimplementasikan menjadi sebuah aplikasi untuk monitoring dan kontrol dari produk HUFO trolley ini. Sebelum mendesain tampilan aplikasi dilakukan sebuah riset mengenai apa saja yang akan dimuat dalam aplikasi dan membuat sketsa peletakan fitur atau sering disebut dengan wireframe application.
pada tampilan aplikasi HUFO trolley terdapat tombol switch untuk mengaktifkan dan mematikan Bluetooth , selain itu juga terdapat tampilan untuk monitoring produk seperti kecepatan, kapasitas baterai, jarak yang telah ditempuh dan posisi dari alat yang ditampilkan dalam nilai bujur dan lintang.
Dalam hal mendesain tampilan aplikasi dapat menggunakan beberapa aplikasi yang memang dikhususkan untuk mendesain tampilan sebuah aplikasi seperti figma,adobe XD dan lain-lain. Dari beberapa aplikasi yang telah disebutkan memiliki beberapa kesamaan dari fitur-fiturnya sehingga jika ingin beralih dari figma ke adobe xd atau sebaliknya tidak terlalu rumit.
Untuk mendesain tampilan kali ini digunakan adobe XD, Adobe XD adalah sebuah alat yang disediakan gratis oleh Adobe untuk desain UI / UX dan prototyping berbagai platform termasuk web, ponsel, tablet, dan lainnya. Adobe XD menyediakan banyak fitur yang diharapkan dalam tools UX. Banyak tools yang sudah ada dan tidak asing, sementara yang lain telah dirancang ulang untuk mendukung desain UX terbaik. Misalnya, akan menemukan alat menggambar yang berfungsi seperti yang dilakukan dengan aplikasi Adobe lainnya. Di sisi lain, layer sedikit berbeda, sekali lagi untuk mengakomodasi cara kerja desainer UX.
Pada lembar kerja terlihat bahwa setiap elemen berada pada layernya sendiri. Lapisan berisi ikon yang menunjukkan jenis konten apa yang terletak pada lapisan itu apakah itu gambar, bentuk, folder, dll.
Proses mendesain tampilan aplikasi HUFO trolley berpedoman pada wireframe yang telah dibuat sebelumnya , wireframe disini sebagai gambaran kasar dari desain aplikasi yang akan dibuat, selanjutnya dalam adobe XD mengkonversikan wireframe yang telah dibuat menjadi desain tampilan aplikasi dengan menambahkan ilustrasi,icon, pemilihan pallet warna dan tipografi (font tulisan).
Selain mendesain tampilan, penambahan animasi seperti scroll, drag, tap dll juga dapat ditambahkan melalui prototype sehingga tampilan hampir menyerupai aplikasi sebenarnya, untuk membuat animasi diperlukan penggandaan dari desain master dengan berubah beberapa posisi ataupun tipografi dibuat berbeda sedikit dengan desain master agar dapat dianimasikan.
Desain yang telah dibuat dapat dikonversi menjadi gambar atau sering disebut proses rendering menjadi file berformat PNG atau JPG. File yang telah di render nantinya dapat dibuat menjadi mockup aplikasi dengan menambahkan frame dari sebuah smartphone.
