(Gambar
1)
Di
postingan ini saya akan menjelaskan tentang desain user interface aplikasi
e-commerce untuk platform mobile yang saya buat dan saya beri nama Growdhes, gambar
diatas (Gambar 1) adalah tampilan dari splash screen aplikasi growdhes. Untuk tampilan
beranda/home nya bisa dilihat di (Gambar 2). Kemudian untuk tampilan kategori
bisa dilihat di (Gambar 3) dan tampilan detail produk bisa dilihat di (Gambar
4).
(Gambar 2) (Gambar 3) (Gambar
4)
Tema
Tema
pada aplikasi growdhes ini adalah fashion, growdhes yang saya desain ini adalah
sebuah aplikasi belanja online yang menjual berbagai macam produk sepatu. Karena
target audience untuk aplikasi ini adalah usia 17th keatas dan produk yang
dijual adalah fashion sepatu, Jadi tema interface untuk aplikasi ini saya
desain modern, simple, dan elegan.
Font
Di
dalam desain UI growdhes ini saya menggunakan font Arial, font ini termasuk
dalam jenis huruf sans serif. Font arial adalah font yang simple dan sangat
mudah dibaca, terlihat tegas dan modern. User bisa membaca tulisan-tulisan yang
ada di aplikasi dengan cepat.
Warna
Untuk
warna disini saya menggunakan kombinasi warna hitam, putih dan abu-abu. Saya
menggunakan warna tersebut karena, didalam aspek psikologi warna hitam itu
bermakna mewah, kuat, elegan, kokoh dan canggih. Sedangkan untuk bagian
background di antara konten saya menggunakan warna putih. Salah satu alasannya
ialah supaya mata user bisa beristirahat tidak jenuh dan tidak membuat user
bingung, karena yang dilihat oleh user disini ialah gabungan antara gambar dan
text, maka dari itu saya menggunakan warna putih. Untuk makna positif
psikologinya ialah suci, bersih, sederhana, damai, baik, dan disiplin.
Sedangkan untuk warna abu-abu disini saya menggunakan nya karena warna ini
cocok untuk di kombinasikan dengan warna hitam dan putih hingga terlihat
simple, modern, dan elegan. Untuk makna positifnya abu-abu ini modern, cerdas,
bersih, kokoh, masa depan, dan intelektual. Jadi pemilihan warna ini sangat
sesuai dengan tema interface yang saya bangun.
Layout
Ini
adalah langkah pertama saya sebelum mendesain aplikasi growdhes. Untuk layout
home/beranda di bagian header sebelah kiri saya meletakkan desain logo kemudian
di bagian kanan saya meletakkan button cari dan keranjang meletakkan logo,
button cari dan keranjang di header tujuannya ialah agar mudah untuk dilihat
oleh user. kemudian dibawah header saya meletakkan slider untuk produk-produk
dengan penawaran harga yang khusus. Karena pada dasarnya mata akan lebih fokus
di bagian-bagian atas. Setelah itu dibagian tengah saya meletakkan konten-konten
untuk produk-produk baru. Dan di bagian footer saya meletakkan button home,
kategori, favorit, dan profil. Bisa dilihat di (Gambar 5).
(Gambar
5)
Di
Layout detail produk untuk bagian headernya tetap sama dengan yang ada di layout
beranda/home. Kemudian dibawah header saya meletakkan slider gambar produk
dengan besar supaya user bisa melihat produk/barang yang dia inginkan dengan
jelas kemudian dibawahnya saya ikuti dengan informasi detail produk seperti
nama produk, ulasannya, dan harganya. Kemudian dibawahnya lagi diikuti informasi
detail stok produk/barang. Detail stok produk/barang disini ialah seperti
informasi jumlah stok barangnya ada berapa, informasi jumlah barang yang sudah
terjual, kemudian sudah berapa kali barang ini dilihat. Setelah itu di bagian
footer ada button untuk kembai ke tampilan sebelumnya, saya meletakkan button
kembali di footer bagian kiri tujuannya supaya user mudah menekan tombol
kembali karena dekat dengan jari. Kebanyakan tombol kembali di aplikasi seperti
ini biasanya diletakkan di bagian kiri atas, menurut saya pribadi itu sangat
kurang mudah untuk di oprasikan karena letaknya terlalu jauh dari jempol kanan.
Dan ada button beli di footer bagian kanan yang menurut saya sangat mudah untuk di
operasikan. Bisa dilihat di (Gambar 6).
(Gambar
6)
*Jika ada kritik, saran, pertanyaan, dan
tanggapan dari pembaca silahkan berkomentar, bertanya, dan berdiskusi dengan
sopan pada bagian komentar yang telah disediakan. Terimakasih
Desain yang bagus
ReplyDeleteTrims,
Reza Chandra