Mencari referensi merupakan hal yang wajib dilakukan ketika ingin mendesain atau sudah dalam proses mendesain. Namun, terkadang kita bingung — bagian apa saja sih yang dapat dijadikan referensi?
Dengan artikel ini, saya akan coba membantu kamu — terutama yang mempertanyakan hal diatas, untuk mengetahui bagian-bagian UI yang bisa dijadikan referensi.
Biasanya dalam mencari referensi, saya akan mulai dengan bagian:
I. Layout
Layout adalah bentuk rangka dari susunan-susunan informasi dan komponen yang diatur sesuai keinginan atau project goals.
Contoh:
Dari di user interface sebelah kiri, mempunyai layout seperti gambar kanan.
II. Warna
Menurut saya, warna merupakan hal yang paling penting dalam sebuah desain. Kenapa? Gini, pernah ga kamu melihat sebuah desain dengan layout yang bagus, font yang keren, namun mempunyai kombinasi warna yang aneh? Pasti mempengaruhi visual dari desain tersebut bukan?
Kadang juga kombinasi warna yang bagus dapat menutupi kekurangan desain tersebut dari sisi apapun.
Mencari referensi warna bisa dilakukan dengan cara:
Surfing di Google, Dribbble, ̶P̶a̶n̶t̶a̶i̶ ̶, dsb.
Bagaimana carannya? Gampang kok! Kamu tinggal cari desain yang menurut kamu mempunyai kombinasi yang bagus, lalu cari Hex codenya, setelah itu modifikasi sedikit jika menurutmu masih kurang dan Voila! Jadi deh referensi kombinasi warnamu.
Di internet pun terdapat banyak color generator yang dapat membantu kamu dalam mencari paduan warna atau bahasa kerennya color palette untuk dijadikan referensi.
III. Font
Sama halnya dengan warna, font juga dapat dijadikan referensi.
Font mungkin lebih sulit dijadikan referensi. Kenapa? Biasanya, desainer jarang mencantumkan font yang dipakainya di deskripsi, sehingga kita pun tidak tau kombinasi font apa saja yang digunakan.
IV. Komponen
Komponen? Mencakup banyak dong? Iya, betul!
Komponen yang saya maksud disini seperti button, navbar, snackbar, slider, dan lain-lain.
Masa untuk membuat button aja harus cari referensi? Buang-buang waktu aja!
Biasanya hal yang jarang kita perhatikan kadang diperhatikan oleh users. Kalau kita bisa mengaplikasikan “attention to detail” dengan desain kita, tidak ada salahnya bukan? Bisa saja hasil referensi button yang kita dapatkan bisa membantu kita untuk menentukan ukuran button yang sesuai — yang tanpa kita sadari dapat memudahkan user untuk menekannya.
V. Shadow
Biasanya yang baru mulai mendesain UI jarang memperhatikan bagian ini, padahal yang kita ketahui shadow yang smooth dan clean merupakan salah satu kunci desain yang ciamik.
Mencari referensi shadow pun, sama caranya dengan mencari referensi warna.
VI. Header, Footer, Navigation, Side bar, & Content.
5 Bagian ini biasanya paling sering ditemukan di desain berbasis web. 5 Bagian ini pun, sangat bisa untuk dijadikan referensi.
VII. Copy
Copy bukanlah hal yang bisa kita anggap remeh. Kadang perubahan sedikit pada copy dapat ber-impact pada desain.
Percaya lah, “Register” lebih enak dilihat ketimbang “Lorem”.
Sama halnya dengan bagian lainnya, mencari referensi copy pun bisa di mana saja, mulai dari website portfolio online hingga aplikasi atau website yang sudah mengudara.
VIII. Interaksi
Jika kamu suka melihat animasi UI yang komponen-nya sampai terbang-terbang, berputar-putar, hingga mengawang-ngawang. Mungkin mencari referensi bagian ini akan menjadi favoritmu!
Dalam mencari referensi interaksi, kita dapat mencarinya pada desainer yang menjadikan desainnya ke bentuk GIF atau video — khususnya yang memperlihatkan interaksi.
Interaksi itu yang mana sih? Misalnya kamu men-tap 2 kali foto di instagram, lalu setelah men-tap, tiba-tiba muncul icon “heart” besar yang memenuhi foto. Itulah interaksi yang dimaksudkan. Gimana? Sudah terbayang?
Contoh interaksi jika task telah diselesaikan:
Mencari referensi, dimana?
Banyak tempat untuk mencari referensi desain. Mulai dari Google (Keyword: UI Design, UX Design), Portfolio online (Dribbble, behance, dsb), hingga aplikasi yang sudah mengudara di app store atau pun play store.
Anjay sekian.
Sekian artikel ini. Semoga membantu!
