Tentang Ukuran Pada Desain UI

1. Menentukan jarak dengan menggunakan kelipatan

Untuk membantu dalam menentukan jarak, bisa menggunakan cara kelipatan. Caranya…. pilih angka dasar, sebagai contoh 5. Maka untuk semua jarak gunakan 5px, 10px, 15px, dst.

Berikut adalah contoh penggunaan jarak, dengan menggunakan kelipatan.

Jika dirasa 15px terlalu jauh maka gunakan 10px, jika 10px terlalu dekat maka kalian bisa mempertimbangkan untuk mengubah angka dasarnya. Ya asal jangan kelipatan 1 aja sih… :))

Konsistensi dalam jarak akan membantu developer untuk menata layoutnya.

2. Ukuran icon

Icon bisa kita bedakan menjadi dua. Icon yang tujuan utama nya untuk diklik dan icon yang tujuan utamanya bukan untuk diklik, tapi hanya untuk memperjelas informasi. Berikut adalah contohnya:

Pada design app, untuk icon yang dapat diklik minimal ukurannya adalah 24px. Kenapa? karena itu adalah ukuran minimal agar jempol nyaman saat mengkliknya.

Kalau untuk website, ukuran icon yang bisa diklik boleh lebih kecil daripada app, karena pada website, user menggunakan mouse. Tapi saya biasanya juga menggunakan ukuran 24px untuk icon yang bisa diklik pada website.

Dan untuk angka 24px itu sendiri adalah lebar keseluruhan icon dengan area kliknya. Berikut penjelasannya:

Jadi bisa kita katakan, bahwa 24px itu adalah lebar canvas nya. Untuk icon nya sendiri kalian bisa bikin benar benar mengisi seluruh canvas tersebut atau lebih kecil. Dengan menggunakan canvas icon, akan membuat hasil export icon nya tetap memiliki ukuran presisi 24px.

Lalu, untuk icon yang tujuan utamanya bukan untuk diklik, tapi hanya untuk memperjelas informasi, ukurannya bisa lebih kecil dari icon yang dapat diklik.

Kenapa? karena fungsi icon ini untuk memperjelas informasi disebelahnya. Selama icon nya terlihat jelas maka tidak ada masalah. untuk ukuran ini biasanya saya menggunakan 16px

Untuk jarak icon dengan teks, Anda bisa menggunakan jarak kelipatan tadi.

3. Ukuran Teks

Pemilihan ukuran teks pada dasarnya adalah memilih ukuran yang nyaman untuk dibaca dan membuat jelas hirarkinya.

Berikut adalah tips untuk mempermudah dalam menentukan ukuran teks yang digunakan:

Pertama, selesaikan 1 halaman dulu. Saat mengerjakan satu halaman tersebut kalian bisa mencoba semua ukuran teks hingga dirasa menemukan ukuran yang cocok. Pastikan semua teks nyaman dibaca dan juga hirarkinya terlihat jelas.

Kedua, ambil setiap ukuran teks yang ada di halaman tersebut, lalu beri nama.

Ketiga, coba implementasikan ukuran-ukuran tadi pada halaman berikutnya.

Keempat, Jika dirasa di halaman berikutnya perlu penambahan ukuran maka tambahkanlah di dokumen tadi. Tapi untuk menghindari ukuran font yang terlalu banyak, sebelumnya cobalah untuk mencoba dengan ukuran font yang ada. Jika dirasa memang tidak bisa, maka baru ditambahkan ukuran baru tersebut.

Kelima, Jika sudah mengerjakan lebih dari 8–9 halaman dan dirasa acuan untuk ukuran teks yang digunakan sudah nyaman. Maka selamat, Anda telah menemukan guideline untuk teks pada project yang sedang Anda kerjakan ini.

4. Jarak antar huruf dan baris pada teks

Hal ini lumayan memegang peranan penting. Coba kalian amati tulisan di medium ini. Setiap hurufnya hampir tidak ada yang menempel, setiap hurufnya memiliki jarak yang cukup dengan huruf di depan atau dibelakangnya. Dan juga memiliki jarak yang cukup dengan baris di atas ataupun dibawahnya

Untuk membuat design yang enak dilihat dan digunakan. Saat mendesain sebuah teks, usahakan agar setiap hurufnya tidak menempel. Dan juga setiap barisnya tidak terlalu dekat.

Saya biasanya menggunakan ukuran 0.5 untuk jarak antar hurufnya. Dan untuk jarak antar barisnya biasanya saya menggunakan rumus (ukuran font+10px)

Prinsipnya adalah…. Huruf jangan terlalu menempel, tapi jangan terlalu jauh juga.