Simak Panduan Pemula Menggunakan Tipografi dalam Desain UI

Tipografi jauh lebih banyak daripada memilih font yang bagus untuk situs web atau aplikasi Anda; itu adalah seni menggunakan tipografi untuk menghidupkan antarmuka Anda. Dengan begitu banyak pertimbangan ketika bekerja dengan tipografi, termasuk keterbacaan, aksesibilitas, dan hierarki, penggunaan tipografi Anda dapat menandai perbedaan antara antarmuka yang baik dan yang bagus.

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

  1. Apa itu tipografi, dan mengapa itu penting?
  2. Apa peran tipografi dalam desain UI?
  3. Apa saja elemen tipografi yang berbeda?
  4. Cara menggunakan tipografi dalam desain UI
  5. Pikiran terakhir 

Mari kita langsung masuk!

1. Apa itu tipografi, dan mengapa itu penting?

Sebelum masuk ke detail, mari kita mulai dengan penyegaran cepat pada apa tipografi sebenarnya — dan mengapa itu sangat penting .

Berasal dari abad ke-11, tipografi adalah tentang menggunakan tipografi dan font dengan cara yang membuat salinan dapat dibaca, jelas, dan menyenangkan untuk dibaca. Tipografi melibatkan gaya font, penampilan, dan struktur, yang bertujuan untuk memperoleh emosi tertentu dan menyampaikan pesan tertentu kepada pengguna akhir. Selain memastikan tipografi sesuai dengan keseimbangan visual situs web atau aplikasi, itu tugas desainer UI untuk mengoptimalkan aksesibilitas situs web dengan menjaga tipografi tetap mudah dibaca.

Selain menghidupkan antarmuka pengguna, tipografi yang baik juga akan:

  • Bangun 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 memahami informasi yang disampaikan oleh teks, dan
  • Pegang perhatian pembaca dengan menjadi berdampak dan berkesan.

Dalam video di bawah ini, mentor desain CareerFoundry UI, Olga mengemukakan alasan mengapa tipografi itu penting — dan apa bedanya bagi pengguna Anda.

2. Apa peran tipografi dalam desain UI?

Tipografi jauh melampaui memilih font yang bagus untuk situs web Anda. Tipografi yang baik dan dipikirkan dengan matang adalah yang terpenting untuk pengalaman pengguna yang baik — dan mengabaikan pentingnya bisa merugikan.

Ketika 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 akhirnya, membuatnya tetap pada halaman.

Setelah Anda menarik perhatian pengguna Anda, tantangan berikutnya adalah tentang menyampaikan informasi. Karena orang-orang terbiasa menerima informasi dalam bentuk teks, itu adalah tanggung jawab desainer UI untuk memastikan tipografi membantu menyampaikan pesan daripada mengalihkannya.

Akhirnya, tipografi harus berbaur dengan elemen-elemen lain di antarmuka dan bertindak sebagai perekat yang menyatukan semuanya. Ini harus mengatur nada keseluruhan produk, bekerja selaras dengan gambar-gambar lainnya untuk menciptakan keseimbangan visual keseluruhan yang estetis.

Banyak yang bisa disulap!

Contoh font antarmuka aplikasi
(Sumber https://www.sfcd.com)

3. Apa saja elemen tipografi yang berbeda?

Sebelum kita sampai pada bagian praktis, mari kita mengingatkan diri kita sendiri tentang berbagai elemen tipografi:

Font dan Typefaces

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

Konsistensi

Menjaga tipografi Anda konsisten adalah kunci untuk menghindari kebingungan. Menempel pada gaya font yang sama akan membantu pembaca Anda langsung memahami apa yang sedang mereka baca, dan mulai memperhatikan suatu pola.

Ruang putih

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

Penjajaran

Alignment 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 yang paling menarik adalah warna. Warna memiliki tiga komponen utama: nilai, rona, dan saturasi. Seorang perancang yang baik akan tahu bagaimana menyeimbangkan ketiga komponen ini untuk membuat teksnya menarik dan jelas terbaca, bahkan bagi mereka yang memiliki keterbatasan penglihatan.

Hirarki

Menetapkan hierarki adalah salah satu prinsip tipografi yang paling vital. Hirarki tipografi bertujuan untuk membuat perbedaan yang jelas antara bagian-bagian salinan yang menonjol yang harus diperhatikan dan dibaca terlebih dahulu, dan salinan teks standar.

Kontras

Seperti hierarki, kontras membantu untuk menyampaikan ide atau pesan mana yang ingin Anda tekankan kepada pembaca Anda.

4. Cara menggunakan tipografi dalam desain UI

Saatnya mempraktikkan apa yang telah kita pelajari tentang tipografi! Di bawah ini, kami telah menetapkan tiga langkah utama untuk digunakan sebagai referensi panduan saat Anda mulai memasukkan tipografi ke antarmuka Anda. Kami akan memulai dengan membawa Anda melalui proses memilih font Anda, sebelum melihat dua prinsip utama tipografi dalam desain UI: keterbacaan dan skalabilitas.

Memilih font Anda 

Ketika datang untuk memilih font Anda, ada banyak yang harus dipertimbangkan; yang paling penting, kepribadian merek, produk atau layanan yang ditawarkan, dan audiens. Dengan desain font berbeda tanpa batas yang ditawarkan, masing-masing menghadirkan suasana dan gaya tersendiri, memilih font yang tepat seharusnya tidak menjadi keputusan cepat.

Meskipun tergoda untuk menggunakan beberapa jenis huruf dalam satu desain, itu bisa sangat besar bagi pengguna. Jika Anda baru mengenal pemasangan huruf dan tipografi, mulailah dengan menggunakan fonta dari keluarga yang sama — atau, dengan kata lain, jenis huruf tunggal. Karena font dari jenis huruf yang sama diciptakan untuk bekerja bersama secara harmonis, menempel pada satu jenis huruf akan secara otomatis memberikan tampilan yang lebih kohesif bagi antarmuka Anda.

Banyak tipografi masih datang dengan jangkauan yang cukup untuk memastikan bahwa Anda memiliki variasi font yang cukup untuk tujuan yang berbeda. Misalnya, beberapa tipografi menyertakan fitur seperti huruf miring, diperluas, tebal, dan opsi kental. Meskipun ini memungkinkan pengaturan yang lebih kreatif, terlalu banyak bermain-main dengan gaya font harus dihindari.

Tidak semua font dibuat sama (dapat terbaca), dan dalam hal keterbacaan, selalu lebih baik untuk memainkannya dengan aman. Sementara font serif, pilihan masuk untuk cetak, secara tradisional dipuji sebagai font yang lebih terbaca — font sans-serif cocok untuk antarmuka digital. Kami akan berbicara lebih banyak tentang keterbacaan di bagian selanjutnya.

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

Untuk mempelajari lebih lanjut tentang apa yang tidak boleh dilakukan dalam desain UI, lihat panduan praktis kami tentang kesalahan umum desain UI — dan cara menghindarinya .

Font serif via Google

Keterbacaan mengacu pada kualitas pengalaman membaca secara keseluruhan. Desainer UI mencapai keterbacaan dengan mengelola dengan hati-hati kontras, ukuran, komposisi, dan warna jenis. Teks pada antarmuka Anda harus mengalir secara intuitif untuk pengguna Anda, menjaga agar muatan kognitif tetap minimum dan tetap dapat diakses oleh mereka yang mungkin memiliki gangguan penglihatan. Untuk memfasilitasi pengalaman membaca yang memperkaya bagi pengguna Anda, berikut adalah beberapa praktik untuk dimasukkan saat Anda mengikuti:

Memformat 

Di banyak bagian dunia, pengguna biasanya membaca dari kiri ke kanan, atas ke bawah — jadi menjaga teks Anda ke kiri adalah langkah pertama dalam memastikan keterbacaan. Tepi kiri yang konsisten juga menyediakan tempat bagi mata untuk kembali setelah menyelesaikan setiap kalimat, yang membuat pembacaan satu blok teks menjadi lebih cepat dan mudah. Saat memformat, adalah praktik yang baik untuk menghindari memiliki “janda”, yang merupakan satu kata di baris terakhir paragraf.

Ruang Putih

Ruang putih adalah cara utama untuk mengurangi jumlah teks yang harus diserap pembaca sekali jalan. Penggunaan ruang putih yang baik akan mengarahkan mata pengguna Anda, memberi tahu mereka apa yang harus dibaca — dan bagaimana cara membacanya. Gunakan dengan penuh perhatian dan sengaja; berhemat pada ruang putih mungkin berarti pengguna Anda kesulitan untuk membedakan kata-kata yang ditempatkan terlalu berdekatan. Di sisi lain, terlalu banyak ruang putih akan membingungkan bagi pengguna.

Hirarki 

Hirarki yang baik dapat dicapai dengan menggunakan penggunaan kontras, paddings, ukuran teks bergantian, dan margin.

Tinggi garis

Ketinggian garis, juga dikenal sebagai awalan, mengacu pada bagaimana teks diberi spasi secara vertikal dalam garis. Sementara tinggi garis ideal tergantung pada ukuran font itu sendiri, jika Anda menggunakan ukuran font standar 16, tinggi garis 1,5x secara luas dianggap sebagai titik awal yang baik. Anda dapat menyesuaikan tinggi garis sesuai jika ukuran font dasar Anda lebih kecil atau lebih besar.

Penempatan Huruf

Jarak huruf adalah jarak antara setiap huruf. Penskalaan huruf sering diabaikan oleh desainer, tetapi bisa membuat semua perbedaan pada keterbacaan teks Anda. Beberapa pedoman dasar untuk dipertimbangkan saat menggunakan spasi huruf adalah:

  • Tambah spasi huruf dengan teks huruf besar
  • Kurangi spasi huruf saat menambah ukuran font
  • Kurangi spasi huruf saat menambah bobot font

Panjang garis

Panjang garis mengacu pada lebar blok teks. Baris pendek lebih disukai, karena lebih nyaman dibaca. Berdasarkan ukuran layar 1440px dan ukuran font dasar 16, panjang garis yang disarankan untuk teks di layar berada dalam kisaran 60 hingga 80 karakter. Rentang ini dapat disesuaikan hingga 35 hingga 45 karakter per baris untuk layar seluler.

Hirarki tipografis
(Sumber https://www.wonderlandindustry.com/careers/)

Skalabilitas 

Fiuh — itu sangat menarik! Terakhir adalah skalabilitas, seni tipografi responsif. Pada artikel sebelumnya, kita sudah bicara tentang desain responsif, yang mengacu pada antarmuka pengguna yang beradaptasi dan menyesuaikan kembali tergantung pada ukuran layar. Beberapa tipografi mudah terlihat ketika dilewatkan pada ukuran yang lebih besar, sementara di sisi lain, tipografi dengan bentuk huruf sangat halus atau desain yang terlalu banyak dihiasi mungkin retak pada pengaturan yang lebih kecil. Memastikan tipografi Anda dapat diskalakan adalah langkah penting saat memasukkan tipografi ke antarmuka pengguna Anda.

Font yang dapat diukur, juga dikenal sebagai font outlier atau font vektor, adalah font yang dapat diperbesar atau dikurangi tanpa mengakibatkan distorsi. Garis besar setiap karakter disimpan sebagai rumus matematika. Selain menawarkan ukuran yang tak terhitung dari setiap font, font yang dapat diskalakan memiliki keuntungan tambahan karena mereka memanfaatkan resolusi perangkat output secara maksimal. Semakin banyak resolusi yang dimiliki monitor, font yang lebih baik akan terlihat.

Jika sistem font Anda (keluarga font yang digunakan di seluruh produk Anda) mencakup font yang ditujukan untuk multi guna, dari label kecil hingga berita utama dan konten massal, pilih jenis huruf yang kompatibel dengan beberapa ukuran dan mempromosikan 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. Pengganti Lorem Ipsum tidak diragukan lagi berguna dalam beberapa kasus, tetapi menguji skalabilitas dengan huruf-huruf kata dan kalimat yang penting bagi antarmuka akan memberi Anda ide yang jauh lebih realistis tentang seberapa baik skala mereka.

Sumber ( https://codepen.io/matejlatin/full/oRLaXy )

Pikiran terakhir 

Meskipun mungkin tampak seperti ceri terakhir di atas, tipografi akan mengatur desain UI Anda — jadi penting untuk memperbaikinya. Jika Anda tidak yakin harus mulai dari mana, luangkan waktu untuk melihat apa yang 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. Ingat saja: seperti elemen UI lainnya, fungsionalitas harus berada di garis depan!

sumber: careerfoundry.com

Latest articles

12.6k Followers
Follow

Related articles