UI/UX sekarang itu seperti jodoh impian, harus pas dan memikat! Didalam proses pembuatan UI/UX ada namanya komponen UI itu apaan sih? Komponen UI artinya bahan-bahan dasar untuk bikin tampilan produk atau aplikasi menjadi lebih keren dan interaksinya mudah dipahami oleh pengguna. Sebagai Para UI/UX designer ataupun pemula perlu memahami komponen pembentuk UI sendiri mengapa? Agar para designer dapat menciptakan tampilan sesuai kebutuhan dan juga mudah di fahami. Didalam komponen pembentuk UI sendiri memliki beberapa pengelompokkan, diantaranya adalah :
Input controls
Input controls merupakan elemen interaktif yang memberikan kesempatan kepada user untuk memasukkan data menuju web atau aplikasi memakai teks maupun angka.
https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTJLl10EThRuckwjCIyogHCexh0AhuIWRL4WhAVvK5tBA&s
Navigational Components
Ini merupakan komponen yang membantu user dalam menjelajahi dan berpindah antara halaman atau bagian-bagian penting pada produk.
https://i.ytimg.com/vi/Qe_6OmmFaR8/maxresdefault.jpg
Informational Components
jenis komponen yang menyediakan konten atau informasi penting kepada user. Desain komponen informasional harus memperhatikan kejelasan dan keterbacaan.
https://miro.medium.com/v2/resize:fit:1400/0*4Iu51QFmGzJKNloz
Containers
komponen yang berfungsi sebagai wadah untuk mengelompokkan komponen lain dan menciptakan tata letak yang terorganisir. Adapun beberpa komponen yang perlu kamu ketahui, diantaranya adalah
https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcThMIGM9qGn60H_2BN1oxPb-_r-yVp-u9s03g&s
Button
Component design sebagai action utama oleh user untuk fungsi tertentu dengan menampilkan bentuk-bentuk disertai label tertentu. contohnya mengirimkan form yang sudah diisi lengkap.
https://i.pinimg.com/736x/83/9c/8f/839c8f28dfdfcac36c78d46c1702350e.jpg
Card
Component design yang berisi lebih dari 1 component design yang berbeda, diantarnya terdapat berbagai informasi dalam bentuk button, teks, media, dan sebagainya
https://miro.medium.com/v2/resize:fit:1400/1*a2tAChY8UgAZvBYh5Kqwkw.jpeg
Carousel
Component design dimana element didalamnya berbentuk overflow memungkinkan user untuk menelusuri sekumpulan konten, seperti gambar atau card.
https://images.wondershare.com/mockitt/tips/carousel-01.jpg
Checkbox
Component Berupa kotak persegi kecil yang biasa digunakan untuk menyetujui pernyataan, contohnya ketika user untuk memilih lebih dari satu opsi yang tersedia dalam daftar.
https://buildwithangga.com/storage/photos/shares/Checkbox.png
Radio Button
Component yang memungkinkan pengguna untuk memilih hanya satu dari serangkaian opsi yang telah ditentukan sebelumnya. Berbeda dari Checkbox, pengguna dapat memilih dan membatalkan pilihan sejumlah item.
https://assets.justinmind.com/wp-content/uploads/2020/05/radio-button-animation-example.png
Form
Elemen ini dapat mendukung user dalam memasukkan berbagai informasi terkait ke dalam sistem kemudian mengirimkannya ke sumber penyedia web atau aplikasi.
https://miro.medium.com/v2/resize:fit:1400/1*0HUF9ms6X5jhODd3u5z3WA.png
Dropdown
Components design yang tergambar dari dunia nyata dimana memungkinkan user untuk memilih salah satu dari beberapa daftar item setelah mengkliknya.
Modal Window
Kotak berukuran kecil yang berisi suatu konten atau pesan. Elemen ini mengharuskan user untuk melakukan interaksi sebelum menutupnya dan kembali ke tampilan sesungguhnya.
https://miro.medium.com/v2/resize:fit:1400/1*VCl3Dz_jwsKOXUjLeD19VA.png
Loader
Component dimana menunjukkan suatu proses, dengan component ini akan memberitahukan kepada user bahwa sistem sedang menyelesaikan suatu tindakan dan mereka harus menunggu selama beberapa saat.
https://cdn-images-1.medium.com/max/640/1*cLnEqhplleWcQ1kyq9Xc-g.gif
Notification
Component yang memberikan informasi mengenai sesuatu yang baru kepada user untuk dibuka dan diperiksa.
Pagination
Component dimana menunjukkan posisi user berada di halaman berapa dan menuju ke halaman mana.
https://miro.medium.com/v2/resize:fit:800/1*Tk0DldorcoyL923BhnOs9A.png
Progress bar
Component dimana menandakan progress dari sesuatu oleh user.
Slider controls
Component dimana user memilih value yang diinginkan. Menggunakan slider dapat memberikan pengalaman untuk menyesuaikan sebuah nilai secara smooth dan bertahap.
https://assets.justinmind.com/wp-content/uploads/2020/11/what-is-slider-design.png
Tag
Component untuk menandai dan mengkategorikan konten tertentu. yang berisikan keyword yang akan membantu menemukan apa yang dituju.
https://i.pinimg.com/736x/fc/cb/42/fccb42ae8af242942c77af5ef75d61cf.jpg
