Bagian desain UI yang bisa dijadikan referensi

Rhasyab
Rhasyab
Oct 10 · 4 min read
Anjay banyak. UI toolkit from “Reimagining Codecademy.com” by @mslima

Mencari referensi merupakan hal yang paling wajib dilakukan ketika ingin mendesain atau sudah dalam proses mendesain. Namun, terkadang kita bingung — bagian apa saja sih yang dapat dijadikan referensi?

Dengan adanya artikel ini, saya akan coba membantu kamu — terutama yang mempertanyakan hal diatas, untuk mengetahui bagian-bagian UI mana, yang bisa dijadikan referensi.

Biasanya, dalam mencari referensi, saya akan mulai dengan:

I. Layout

Bahasa gampangnya, layout adalah bentuk rangka dari susunan-susunan informasi dan komponen yang diatur sesuai keinginan/goals.

Contoh:

Dari di gambar kiri, mempunyai layout seperti gambar kanan.

II. Warna

Menurut saya, warna itu sendiri 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.

Anjay surfing. Photo by Nicole Honeywill on Unsplash

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 untuk mencari paduan warna atau bahasa kerennya color palette, untuk dijadikan referensi.

Color generator. https://coolors.co/

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

Anjay sabi. https://ionicframework.com/resources/articles/what-is-a-ui-component-library

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!

Gini, biasanya hal yang jarang kita perhatikan, kadang diperhatikan oleh pengguna. Kalau kita bisa memberikan “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 “kembali ” yang sesuai — yang tentunya tanpa kita sadari dapat memudahkan user untuk menekannya.

V. Shadow

Anjay shadow. Photo by Benjaima Kamel on Unsplash

Biasanya, yang baru mulai mendesain UI, kadang 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.

Anjay rumit. https://themify.me/docs/styling

5 Bagian ini biasanya paling sering ditemukan di desain berbasis web. 5 Bagian ini pun, sangat bisa untuk dijadikan referensi.

VII. Copy

Anjay copy. Photo by Jakub Dziubak on Unsplash

Copy bukanlah hal yang bisa kita anggap remeh. Kadang perubahan sedikit pada copy dapat ber-impact besar 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, biasanya hanya dapat dilihat dari desainer yang menjadikan desainnya menjadi animasi – 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 memenuhi foto. Itulah interaksi yang dimaksudkan. Gimana? sudah terbayang?

Contoh interaksi ketika to do list-nya telah diselesaikan:

Anjay alus. https://visualhierarchy.co/blog/prototyping-and-its-pitfalls/

Mencari referensi, dimana?

Banyak tempat untuk mencari referensi desain. Mulai dari Google (Keyword: UI 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!


Ingin bertanya atau mempunyai masukan serta tambahan terkait tulisan ini?

Silahkan ketik pertanyaan, masukan dan tambahan tersebut di Bagian Response di bawah.

Terima kasih telah meluangkan waktu untuk membaca! 😊

Tertarik untuk melihat Portfolio saya?

Dan Hei!

Jika kamu mempunyai proyek yang luar biasa dalam bidang UI/UX, Silahkan hubungi saya ke rhasyab@gmail.com

Rhasyab

Written by

Rhasyab

Love to share about UI & X, tech, life etc based my experience. LinkedIn, Rhasya Bintang Rizqi.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade