Ukuran dan jarak dalam desain UI
Ukuran dan jarak merupakan salah satu hal yang paling berpengaruh dalam sebuah desain. Kadang kita tidak tau ukuran serta jarak yang “pas” bagi kebanyakan orang, karena tentu, “pas” itu subjektif. Ada yang menurut mereka button 50x30 terlalu kecil, ada juga yang menganggap itu terlalu besar.
Dari kebanyakan desain yang saya berikan feedback, hal yang paling sering saya berikan kritik dan saran adalah mengenai:
- Komponen terlalu kecil atau terlalu besar, atau
- Jarak antar komponen yang terlalu dekat atau terlalu jauh.
Memang 2 hal diatas tidak mempunyai ketetentuan yang pasti, namun diri kita dan orang lain dapat menilainya, apakah terlalu dekat? Kecil? Jauh? ataupun besar?
Coba bandingkan desain di bawah ini:
Menurut kamu, jarak pada gambar sebelah mana yang lebih cocok digunakan? Tentu yang kanan bukan?
Use your eye as the ruler 😉
Walaupun kamu tau ukuran atau jarak yang pas adalah sekian x sekian, tetap gunakan matamu sebagai “penggaris”, dan lihat dengan matamu, apakah ukuran atau jarak ini cocok atau tidak?
Bagian di atas adalah sebuah kutipan, namun saya lupa mendengar, melihat, atau membacanya di mana. Jika kamu tau, silahkan tulis di kolom response.
Bagaimana cara menentukan ukuran dan jarak sebelum mendesain?
Ada beberapa cara yang saya lakukan untuk menentukan kedua hal di atas, yaitu dengan:
Mencari referensi
Mencari referensi ukuran dan jarak tentu hal yang kadang dianggap tidak perlu bagi sebagian orang, namun sebenarnya hal ini lumayan membantu melatih mata kita untuk terbiasa melihat desain yang mempunyai ukuran dan jarak yang proposional atau bahasa manusianya, pas.
Bagaimana caranya? Mudah, sama seperti mencari referensi visual, kamu hanya perlu melihat desain-desain yang mempunyai komposisi ukuran dan jarak yang enak jika dipandang, lalu coba tebak berapa px jaraknya, setelah itu coba implementasikan.
Mengeksplorasi
Saat mendesain, sering-seringlah bermain dengan ukuran dan jarak, karena belum tentu ukuran dan jarak yang kamu gunakan sekarang adalah yang terbaik. Pengalaman saya saat mendesain, saya kadang sudah merasa cocok dengan ukuran dan jarak yang telah saya gunakan, namun saat sudah pada tahap high fidelity dan mencoba mengotak-ngatik lagi ukuran dan jaraknya, ternyata menambah ukuran dan jarak 4px lagi terasa lebih enak dipandang ketimbang sebelumnya.
Kasih tips dong!
Ada nih, salah satu tips yang paling sering dipakai desainer untuk membuat desain yang terlihat clean dan tentu rapih dari sisi jarak, yaitu:
Whitespace
Layaknya Naruto yang punya jurus jitu – 1000 bayangan, Desainer pun juga punya.
Whitespace’u no jutsu.
- Designer-sama.
Dengan whitespace, hal-hal yang terlihat sempit dapat berubah menjadi lega, tentu secara visual.
Tapi ingat, whitespace-nya juga jangan terlalu berlebihan!
Berlebihan bikin eneg, pas itu bikin enak. Mantap-mantap.
Typographic scale
Masih bingung dalam menentukan ukuran font? Ini tips yang sangat pas, typographic scale!
Daripada membuang-buang waktu hanya untuk memikirkan ukuran font yang pas, lebih baik menggunakan ini:
