Digital Marketing

5 Kesalahan yang Sering Dilakukan Dalam Desain UI

Avatar photo
Written by Techfor Id

Tugas mendesain seringkali dianggap hal yang sepele karena hanya butuh kreatifitas dan kombinasi warna yang pas untuk menghasilkan desain yang menarik secara visual.

Tapi tahukah kamu bahwa ilmu desain grafis tidak sedangkal itu ? banyak sekali ilmu desain seperti hirarki visual atau sejenisnya yang harus dipelajari terlebih dahulu.

Penggunaan warna yang saling cocok satu sama lain, tata letak yang sesuai, sampai kolom white space (spasi kosong putih) pun jadi poin penting yang harus dipelajari.

Supaya menghasilkan desain yang optimal, ada 5 kesalahan yang sering dilakukan desainer yang harus dihindari.Dan diantaranya ada yang sangat vital jika dilakukan :

Typography

Dalam desain, Typography membahas tentang tata letak desain baik itu pada gambar ataupun teks yang terdapat di gambar.

Kalau untuk gambar menyangkut pada lokasi dimana gambar tersebut tepatnya diletakan, sedangkan untuk teks umumnya meliputi ukuran teks (Font) antar headline dengan isinya.

Baca Juga : Cara Menghubungkan Python Ke Path Windows

Sebagai contoh, berikut adalah contoh desain jadi yang akan dijadikan perbandingan :

Dan berikut desain original yang topografi teksnya sudah diedit tidak dengan optimal :

Pada contoh penulisan typografi yang salah, tidak menggunakan Bold (menebalkan huruf) pada bagian judul atau kunci manfaat penting lainya akan sangat mempengaruhi pesan yang terkandung dalam desain itu sendiri.

Scale / Ukuran

Scale atau skala ukuran sangat bermain peran dalam hirarki visual. Mirip dengan typografi ia sangat penting karena menentukan ukuran suatu teks atau gambar dimana ukuran yang paling besar ialah pesan yang paling ingin dibaca atau gambar yang paling ingin dilihat

Sepele namun seringkali diabaikan desainer karena mereka hanya asal menentukan ukuran saja. Sebagai tips, usahakan untuk menggunakan ukuran yang sedikit lebih besar untuk headline, gambar, atau poin penting lainnya dan sisanya berukuran lebih kecil.

Alignment

Alignment dalam desain grafis bisa berupa baris, garis arah, deretan, atau penjajaran teks maupun gambar. Ia mampu membuat suatu desain tampak lebih indah dan terlihat seimbang antar elemen didalamnya.

Ada dua cara mendasar untuk membantu kamu mengatur aligment dalam desain UI :

  • Menggunakan 12 column Grid
  • Dan Baseline Grid

Tenang saja, keduanya tidak terlihat pada hasil desain akhir tetapi sangat penting untuk memiliki alignment desain UI yang seimang.

Baca Artikel Menarik Lainnya :

Sedikit Tips, jangan sejajarkan item terkait ke sisi yang berbeda. Selalu coba menyelaraskan elemen terkait ke sisi yang sama karena menghubungkannya secara visual.

White Space (Ruang Kosong)

Whitespace adalah area di antara elemen desain. Ini juga merupakan ruang dalam elemen desain individu, termasuk ruang antara tipografi.

Meski bernama demikian, ia tidak harus berwarna putih, dan bisa warna, tekstur, bentuk, bahkan gambar background apa saja.

White Space atau ruang kosong dapat menyebabkan masalah antara desainer dan klien. Teori desain mempromosikan penggunaan ruang putih untuk keanggunan dan memastikan pengalaman pengguna yang berkualitas.

Sayangnya, banyak klien dan manajer menganggap white space membuang-buang ruang saja. Mereka pikir itu bisa digunakan untuk menampung lebih banyak informasi atau elemen visual lainnya.

Padahal Whitespace adalah elemen penting untuk menyeimbangkan desain dan mengatur konten dengan lebih baik untuk meningkatkan pengalaman komunikasi visual.

Contrast

Kontras adalah segalanya dalam komposisi visual. Membahas tentang kontras pada desain UI, ikuti tips ini :

  • Gunakan kontras tinggi untuk memandu perhatian pengguna melalui antarmuka desain. Misalnya : menggunakan warna kontras tinggi pada tombol Call-to-Action (CTA).
  • Gunakan kontras untuk memisahkan dengan jelas berbagai bagian. Misalnya: gunakan warna latar belakang yang berbeda untuk memperlihatkan perbedaan yang jelas antara header, isi konten, dan footer.
  • Gunakan kontras untuk memisahkan elemen dari latar belakang. Contoh: Foto dengan teks di atasnya mungkin akan sulit dibaca, jadi pastikan teks kamu dapat terbaca dengan memiliki kontras yang tinggi antara foto dan teksnya.

Baca Selanjutnya

6 Tips Jago Membuat Desain Dark Mode

About the author

Avatar photo

Techfor Id

Leave a Comment

Click to ask
Hai, Tanya-Tanya Aja
Hi ini Windy, dari techfor

Windy bisa membantu kamu memahami layanan Techfor
Seperti

1. Kursus Online By Expert
2. Partnership Event dan Konten
3. Layanan liputan multimedia
4. Dan hal lain yg ingin kamu tau

Kirim saja pesan ini serta berikan salah satu nomor diatas atau beritahukan windy lebih jelas agar dapat membantu Kamu