Cara Menggunakan Tipografi Desain UI Bagi Pemula

Last Updated on April 21, 2022 by

Tipografi lebih dari sekadar memilih font yang bagus untuk situs web atau aplikasi Anda melainkan adalah seni menggunakan tipografi untuk menghidupkan antarmuka Anda.

Dengan begitu banyak hal yang harus dipertimbangkan saat bekerja dengan tipografi, termasuk keterbacaan, aksesibilitas, dan hierarki, penggunaan tipografi Anda dapat menandai perbedaan antara antarmuka yang baik dan yang hebat.

Dalam posting blog ini, kami akan memberi Anda penjelasan yang berguna untuk mengintegrasikan tipografi dengan mulus ke dalam desain Anda. Kita akan melihat peran yang dimainkan tipografi dalam meningkatkan antarmuka web atau seluler dan membawa Anda melalui beberapa prinsip inti yang akan memandu penggunaan tipografi desain UI.

Mari langsung masuk!

Apa itu tipografi dan mengapa itu penting?

Sebelum menyelami detailnya, mari kita mulai dengan penjelasan singkat tentang apa itu tipografi sebenarnya dan mengapa itu sangat penting.

Kembali ke abad ke-11, tipografi adalah tentang penggunaan tipografi dan font dengan cara yang membuat salinan dapat dibaca, jelas, dan menyenangkan untuk dilihat. Tipografi melibatkan gaya font, tampilan, dan struktur yang bertujuan untuk menimbulkan emosi tertentu dan menyampaikan pesan tertentu kepada pengguna akhir.

Selain memastikan jenis huruf cocok dengan keseimbangan visual situs web atau aplikasi, tugas perancang UI adalah mengoptimalkan aksesibilitas situs web dengan menjaga tipografinya mudah dibaca.

Selain menghidupkan antarmuka pengguna, tipografi yang baik juga akan:

• Membangun pengenalan merek dengan secara subliminal mendorong pengguna Anda untuk mengaitkan jenis huruf yang ditampilkan di situs Anda dengan merek Anda
• Mempengaruhi pengambilan keputusan dengan mengamati bagaimana pengguna mencerna dan mempersepsikan informasi yang disampaikan oleh teks, dan
• Pegang perhatian pembaca dengan menjadi berdampak dan mudah diingat.

Peran apa yang dimainkan tipografi dalam desain UI?

Tipografi desain UI yang baik dan dipikirkan dengan matang adalah yang terpenting untuk pengalaman pengguna yang baik dan mengabaikan pentingnya tipografi dapat merugikan.

Saat pengguna pertama kali tiba di halaman web atau aplikasi, mereka memindai halaman daripada membacanya. Memiliki hierarki yang jelas dan tipografi yang bersih sangat penting untuk menciptakan kesan pertama yang sangat baik dengan pengguna  dan pada akhirnya, mempertahankannya di halaman.

Setelah Anda menarik perhatian pengguna, tantangan berikutnya adalah menyampaikan informasi. Karena orang terbiasa menerima informasi dalam bentuk teks, merupakan tanggung jawab desainer UI untuk memastikan jenis huruf membantu menyampaikan pesan daripada mengalihkan perhatian darinya.

Terakhir, tipografi harus berbaur mulus dengan elemen lain di antarmuka dan bertindak sebagai perekat yang menyatukan semuanya. Ini harus mengatur nada keseluruhan produk, bekerja selaras dengan sisa grafik untuk menciptakan keseimbangan visual keseluruhan yang menyenangkan secara estetika.

Banyak yang harus disulap!

Apa saja elemen tipografi yang berbeda?

Sebelum kita masuk ke bagian praktis, mari kita ingatkan diri kita sendiri tentang berbagai elemen tipografi desain UI:

Font dan Jenis Huruf

Font mengacu pada bobot, lebar, dan gaya yang membentuk jenis huruf, dan jenis huruf adalah keluarga dari font yang terkait. Tiga jenis jenis huruf dasar adalah serif, sans-serif, dan dekoratif.

Konsistensi

Tetap menggunakan gaya font yang sama akan membantu pembaca Anda langsung memahami apa yang mereka baca, dan mulai melihat polanya.

Ruang putih

Juga dikenal sebagai ‘ruang negatif’, ruang putih adalah ruang di sekitar teks atau grafik. Ini cenderung tidak diperhatikan oleh pengguna, tetapi penggunaan ruang putih yang tepat memastikan antarmuka tidak berantakan.

Penjajaran

Penjajaran adalah proses menyatukan dan menyusun teks, grafik, dan gambar untuk memastikan ada ruang, ukuran, dan jarak yang sama antara setiap elemen.

Warna

Salah satu elemen tipografi desain UI yang paling menarik adalah warna. Warna memiliki tiga komponen utama: nilai, corak, dan saturasi. Seorang desainer yang baik akan tahu bagaimana menyeimbangkan ketiga komponen ini untuk membuat teks menarik perhatian dan terbaca dengan jelas, bahkan bagi mereka yang memiliki gangguan penglihatan.

Hirarki

Menetapkan hierarki adalah salah satu prinsip tipografi yang paling penting. Hierarki tipografi bertujuan untuk membuat perbedaan yang jelas antara salinan penting yang harus diperhatikan dan dibaca terlebih dahulu, dan salinan teks standar.

Kontras

Seperti hierarki, kontras membantu menyampaikan ide atau pesan yang ingin ditekankan kepada pembaca.

Bagaimana menggunakan tipografi dalam desain UI?

Di bawah ini, kami telah menjabarkan tiga langkah utama untuk digunakan sebagai referensi panduan saat Anda mulai memasukkan tipografi desain UI ke dalam antarmuka Anda. Kami akan mulai dengan memandu Anda melalui proses memilih font, sebelum melihat dua prinsip utama tipografi dalam desain UI: keterbacaan dan skalabilitas.

Memilih font

Saat memilih font, ada banyak hal yang perlu dipertimbangkan; yang terpenting, kepribadian merek, produk atau layanan yang ditawarkan, dan audiens. Dengan desain font yang tidak terbatas yang ditawarkan, masing-masing membawa suasana hati dan gayanya sendiri, memilih font yang tepat bukanlah keputusan yang cepat.

Meskipun tergoda untuk menggunakan banyak tipografi dalam satu desain, itu bisa membuat pengguna kewalahan. Jika Anda baru mengenal pasangan font dan tipografi, mulailah dengan menggunakan font dari keluarga yang sama atau, dengan kata lain, satu jenis huruf.

Karena font dari jenis huruf yang sama dibuat untuk bekerja sama secara harmonis, menempel pada satu jenis huruf akan secara otomatis memberikan tampilan yang lebih kohesif pada antarmuka Anda.

Banyak tipografi masih memiliki jangkauan yang cukup untuk memastikan bahwa Anda memiliki variasi font yang cukup untuk tujuan yang berbeda. Misalnya, beberapa tipografi desain UI menyertakan fitur seperti miring, diperpanjang, tebal, dan opsi ringkas.

Tidak semua font dibuat sama (dapat terbaca), dan dalam hal keterbacaan, selalu lebih baik untuk bermain aman. Sementara font serif, pilihan masuk untuk mencetak, secara tradisional dipuji karena lebih terbaca font sans-serif lebih cocok untuk antarmuka digital.

Terakhir, saat memilih jenis huruf, penting untuk memastikan font Anda ramah browser web. Pustaka font yang umum digunakan seperti font Google menawarkan file font berbasis web yang dapat ditampilkan di browser dengan masalah minimal. Kiat pro: saat mengunduh font web, jangan pernah mengunduh lebih banyak set karakter daripada yang Anda butuhkan.

Keterbacaan mengacu pada kualitas pengalaman membaca secara keseluruhan. Desainer UI mencapai keterbacaan dengan mengelola kontras, ukuran, komposisi, dan warna jenis secara hati-hati.

Teks pada antarmuka Anda harus mengalir secara intuitif untuk pengguna Anda, menjaga agar beban kognitif tetap minimum dan tetap dapat diakses oleh mereka yang mungkin memiliki gangguan penglihatan.

Untuk memfasilitasi pengalaman membaca yang memperkaya bagi pengguna Anda, berikut beberapa praktik untuk diterapkan saat Anda melanjutkan:

Pemformatan

Di banyak bagian dunia, pengguna biasanya membaca dari kiri ke kanan, dari atas ke bawah  jadi menjaga teks Anda tetap di kiri adalah langkah pertama untuk memastikan keterbacaan. Tepi kiri yang konsisten juga menyediakan tempat bagi mata untuk kembali ke setelah menyelesaikan setiap kalimat, yang membuat pembacaan sekumpulan teks lebih cepat dan mudah.

Skalabilitas

Skalabilitas, seni tipografi responsif. Beberapa tipografi mudah terlihat ketika dilewatkan pada ukuran yang lebih besar, sementara di sisi lain, tipografi dengan bentuk huruf yang sangat halus atau desain yang terlalu banyak hiasan dapat retak pada pengaturan yang lebih kecil.

Memastikan tipografi Anda dapat diskalakan adalah langkah penting saat memasukkan tipografi ke antarmuka pengguna Anda.

Font yang dapat diskalakan, juga dikenal sebagai font outlier atau font vektor, adalah font yang dapat diperbesar atau diperkecil tanpa mengakibatkan distorsi apa pun. Garis besar setiap karakter disimpan sebagai rumus matematika.

Selain menawarkan ukuran font yang tak terhitung banyaknya, font yang dapat diskalakan memiliki keuntungan tambahan karena mereka memaksimalkan resolusi perangkat keluaran. Semakin banyak resolusi yang dimiliki monitor, semakin baik font yang dapat diskalakan akan terlihat.

Jika sistem font Anda (keluarga font yang digunakan di seluruh produk Anda) menyertakan font yang ditujukan untuk multi guna, dari label kecil hingga judul yang lebih besar dan konten massal, pilih jenis huruf yang kompatibel dengan berbagai ukuran dan mendorong keterbacaan dan kegunaan dalam setiap ukuran. Ini termasuk Lato, Univers, dan Avenir.

Saat menguji skalabilitas teks Anda di antarmuka Anda, pastikan untuk melakukannya dengan teks asli. Placeholder Lorem Ipsum tidak diragukan lagi berguna dalam beberapa kasus, tetapi menguji skalabilitas dengan huruf dari kata dan kalimat yang penting untuk antarmuka akan memberi Anda gambaran yang jauh lebih realistis tentang seberapa baik skalanya.

Final

Meskipun mungkin tampak seperti penjelasan terakhir di atas, tipografi desain UI akan mengatur desain antarmuka Anda  jadi penting untuk melakukannya dengan benar. Jika Anda tidak yakin harus mulai dari mana, luangkan waktu untuk melihat apa yang sedang dilakukan orang lain.

Bahkan mengikuti tagar tipografi di media sosial atau mencari tipografi di Pinterest akan memberi Anda beberapa ide bagus tentang apa yang ada di luar sana. Jika Anda tertarik untuk tahu lebih banyak tentang cara membuat desain UI, kunjungi Appkey di https://appkey.id/.