Making most of third party libraries?

I started this article with a question that when should we avoid using external libraries. I came across many incidents where many popular external libraries could lead to app issues for any buggy…

独家优惠奖金 100% 高达 1 BTC + 180 免费旋转

Visual Design

Sebelum memulai membahas lebih dalam, alangkah lebih baik kita mulai dari pengertiannya terlebih dahulu. Apa itu visual design? visual design merupakan penggunaan dari ilustrasi, warna, layout, typography, dan bentuk dari tampilan aplikasi sehingga dapat meningkatkan user experience sehingga pengguna merasa lebih puas untuk menggunakan aplikasi kita. Visual design merupakan perpaduan dari graphic design dan UI design. Pada dasarnya sebuah aplikasi dilandasi dengan design guidelines yang sudah saya bahas dalam artikel sebelumnya.

Wireframe
Wireframe merupakan kerangka awal untuk melakukan penataan letak items sebelum dimulainya desain yang sesungguhnya. Wireframe termasuk dalam low-fidelity design untuk merepresentasikan sebuah produk. Dengan adanya wireframe, seorang web developer sangat terbantu karena pekerjaan mereka menjadi terstruktur dan terarah. Hal ini juga mengurangi kesempatan untuk melakukan perbaikan ketika tahap pengembangan, karena revisi dari desain tampilan akan dilakukan di awal.

Tampilan Login

Tampilan Homepage

Tampilan Explore

Mockup
Tahap selanjutnya setelah membuat wireframe adalah membuat sebuah mockup. Mockup merupakan high-fidelity static desain diagram, yang merepresentasikan tampilan dari aplikasi dengan pewarnaan dan bentuk yang sudah menyerupai produk aslinya. Namun, mockup bersifat tidak interaktif dan tidak dapat di-klik. Ia hanya representasi dari User Interface dari sebuah aplikasi secara keseluruhan.

Salah satu tools untuk membuat mockup yang bisa digunakan secara bersama adalah figma, marvelapp, dan adobeXD. Berikut ini adalah beberapa contoh tampilan dari mockup Ping! Auction.

Tampilan Login

Tampilan Homepage

Tampilan Explore

Prototype
Prototype merupakan tahapan terakhir dalam sebuah fase desain. User bisa melakukan simulasi dalam sebuah prototype karena sudah bersifat interaktif dan clickable. Dengan protoype yang baik, web developer dapat dengan mudah untuk mengembangkan aplikasi karena sudah terdapat gambaran dari flow dan fungsionalitas aplikasinya.

Mari kita bahas satu per satu. Namun sebelum itu mari kita cari tahu apsih itu usability heuristics. Usability itu sendiri merupakan seuatu kondisi dimana seseorang dapat menggunakan sesuatu alat atau objek dengan mudah sehingga tujuan dari orang tersebut tercapai. Sedangkan heuristics itu merupakan prosedur untuk melakukan pengecekan ulang dan melakukan perkiraan sebelum terbuatnya kesimpulan. Jadi jika kedua kata tersebut dikombinasikan, usability heuristics merupakan kondisi dimana sebuah objek atau alat melakukan perkiraan dari segala kemungkinan yang ada hingga akhirnya tujuan orang tersebut menggunakan alat tersebut dapat tercapai dengan mudah. Dalam kasus ini, alat yang dimaksud adalah aplikasi yang dibangun.

Selain itu, icons yang kami gunakan juga merupakan icon universal yang disediakan oleh Material-UI sehingga icon yang digunakan pada setiap action akan mencerminkan action tersebut pada dunia asli.