Kalo kamu lagi buka user interface design website skilvul.com/courses terdapat berbagai kelas online GRATIS yang ditampilkan dalam kotak-kotak katalog. Nah, kotak-kotak katalog tersebut disebut dengan UI Card. Sederhananya, UI Card adalah elemen grafis yang berisi informasi singkat tentang sesuatu, bisa berupa produk, artikel, atau apapun yang ingin kamu tampilkan.

Kalau kita lagi ngomongin desain UI Card yang ramah pengguna, biasanya identik dengan cara membuat UI Design yang sederhana. Padahal, tahapan desain yang sederhana belum tentu gampang digunakan. User interface design yang ramah pengguna itu harus jelas, mudah ditebak, dan bermanfaat buat pengguna. Selain sederhana, desain UI Card juga harus bisa membantu pengguna menyelesaikan masalahnya dengan cepat dan mudah.

Lalu gimana sih membuat yang desain UI Card sederhana namun tetap dapat menyelesaikan permasalahan pengguna? Yuk, cari tahu lebih dalam melalui artikel berikut ini!

Elemen Pada Desain UI Card

Elemen-elemen yang terdapat pada desain UI Card ibarat bagian-bagian dari sebuah rumah. Pada perancangan user interface terdapat bagian atap atau header yang menunjukkan judul sebuah produk, bagian dinding atau content yang berisi deskripsi produk, dan bagian lantai atau footer yang biasanya terdapat tombol untuk mendorong pengguna melakukan suatu tindakan, misalnya "Lihat Selengkapnya" atau "Beli Sekarang".

Menentukan Kontras Warna Pada Desain UI Card

Kontras warna adalah perbedaan antara warna terang dan gelap dalam sebuah user interface design. Hal ini sangat penting dalam desain UI Card, karena tahapan desain kontras yang baik akan membuat teks dan elemen lainnya mudah dibaca dan dibedakan.

Pemberian kontras warna yang jelas pada perancangan user interface memungkinkan pengguna dengan mudah mengidentifikasi card UI sebagai elemen utama yang perlu diperhatikan di antara elemen-elemen lain dalam halaman. Hal ini membantu pengguna fokus pada informasi yang ingin disampaikan.

Gimana Cara Menentukan Ukuran Desain UI Card yang Pas?

Pilihan ukuran desain UI card sangatlah krusial dalam perancangan user interface design yang menarik dan fungsional. Ukuran card UI Design yang tepat akan sangat dipengaruhi oleh beberapa faktor penting.

• Jenis perangkat yang digunakan, seperti ponsel, tablet, atau komputer desktop, akan menentukan ukuran layar dan resolusi yang berbeda-beda.

• Layout desain yang dipilih, seperti grid system atau responsive design, akan mempengaruhi cara card disusun dan beradaptasi dengan berbagai ukuran layar.

• Fungsi dari UI Card itu sendiri, apakah untuk menampilkan informasi, memicu aksi, atau sebagai navigasi, juga akan memengaruhi ukuran yang ideal.

• Style desain yang diterapkan, baik itu minimalis, modern, atau klasik, akan memberikan karakteristik visual yang berbeda pada UI Card.

Ukuran card UI Design yang tepat tidak hanya akan membuat tampilan lebih estetis, tetapi juga akan meningkatkan efektivitas dalam menyampaikan informasi dan memudahkan pengguna untuk berinteraksi dengan aplikasi atau website.

Desain UI Card yang berukuran pas akan membuat desain terlihat lebih teratur, profesional, dan memberikan pengalaman pengguna yang lebih baik.

Tips Menentukan Ukuran Font Desain UI Card

Buat judul utama (Headline), kamu bisa menggunakan ukuran font antara 20 sampai 96, atau bisa lebih besar, tergantung dari ukuran desain UI Card yang akan kamu buat. Judul tambahan (Subheadline) harus lebih kecil dari judul utama sekitar 2 sampai 10 ukuran. Jadi, pengguna dapat lebih mudah membedakan mana judul utama dan mana judul tambahan.

Tulisan isi (Body text), kamu bisa gunakan ukuran font paling kecil 14-16. Tapi, jika menggunakan jenis font tertentu yang style font-nya lebih besar, kamu bisa gunakan ukuran lebih kecil.

Tulisan di tombol, ukuran hurufnya jangan lebih kecil dari tulisan isi. Kalau ada banyak pilihan tombol, buat tombol utama pakai huruf yang lebih tebal (Semi-bold atau Bold), dan buat tombol tambahan pakai huruf biasa (Regular atau Medium).

Cara membuat UI Design yang proposional usahakan untuk tidak banyak menggunakan variasi ukuran font pada user interface design. Kamu bisa memakai alat bantu seperti plugin Type scale di Figma atau plugin lainnya untuk membantumu menentukan ukuran huruf yang pas.

Sistem Spasi antar Elemen UI?

Jarak atau spasi antara tombol, gambar, dan tulisan itu penting untuk membuat tampilan desain UI Card rapi dan jelas. Jarak tersebut dapat bantumu dalam membuat kelompok elemen yang berhubungan dan menunjukkan elemen user interface design mana yang lebih penting.

Pilihlah ukuran dasar card UI Design (base unit) yang akan kamu gunakan untuk mengatur jarak antar elemen di tampilan user interface design. Biasanya, ukuran dasar yang dipilih adalah 4 pixel (atau setara dengan 0.25 rem). Jangan pilih angka ganjil seperti 5 pixel karena pada perangkat dengan kepadatan piksel 1.5 kali (DPI), jarak tersebut akan membesar menjadi 7.5 pixel dan hasilnya akan terlihat buram.

Setelah menentukan ukuran dasar card UI Design, buatlah beberapa pilihan jarak yang berbeda dengan menggunakan ukuran dasar sebagai patokan. Misalnya, kalau ukuran dasar kita 4 pixel, maka kita bisa punya pilihan jarak 4 pixel, 8 pixel, 16 pixel, dan seterusnya.

Jika menggunakan Figma, kamu bisa mengubah pengaturan "Big Nudge" dari 10 pixel menjadi 8 pixel. Dengan begitu, kamu bisa memindahkan elemen desain dengan jarak 8 pixel (2 kali ukuran dasar) hanya dengan menekan tombol Shift dan panah di keyboard.

Membuat Skeleton Loading Buat User Gak Boring

Buat tampilan loading yang mirip dengan tampilan konten sebenarnya. Tampilan UI Desain Card sementara yang mirip dengan desain aplikasi kamu bisa bantu pengguna tahu apa yang akan muncul nanti. Adanya skeleton loading pada user interface design, bisa memberikan kesan responsif dan meningkatkan pengalaman pengguna. Berikut hal penting yang perlu kamu perhatikan:

• Identifikasi tata letak elemen utama: Tentukan elemen utama seperti judul, gambar, deskripsi, dan tombol. Kemudian, pertimbangkan bagaimana elemen-elemen tersebut akan diatur dalam desain UI Card.

• Gunakan warna yang sesuai: Pastikan warna skeleton kontras dengan latar belakang utama, warna abu-abu terang atau putih biasa digunakan untuk memberikan tampilan desain UI Card yang lebih jelas.

• Simulasikan bentuk konten: Buat bentuk-bentuk placeholder yang menyerupai konten pada desain UI Card sebenarnya dan sesuaikan proporsinya. Misalnya untuk gambar, gunakan persegi panjang abu-abu.

• **Buat animasi yang halus:**Gunakan animasi pada desain UI Card yang halus untuk memberikan kesan loading yang progresif.

Gunakan Grid Biar Susunan Desain UI Card Tetap Konsisten

Grid adalah fondasi yang kuat untuk membangun tata letak user interface design yang rapi dan fleksibel. Melalui sistem grid, kamu bisa mengatur posisi dan ukuran desain UI Card dengan lebih presisi. Grid juga membantu menjaga konsistensi tampilan Card UI Design, sehingga desain terlihat lebih profesional.

Selain itu, grid sangat berguna untuk membuat user interface design yang responsif, yaitu desain yang bisa menyesuaikan diri dengan berbagai ukuran layar. Dengan mengatur ulang tata letak kartu berdasarkan grid, kita bisa memastikan tampilan tetap menarik di semua perangkat.