Desain Interfaces Hebat Terbuat Dari Tipografi Yang Baik

Antarmuka digital membuat dampak besar dalam kehidupan kita. Kami sering menggunakan situs web atau aplikasi digital untuk mencapai tujuan tertentu. Memang, ketika berinteraksi dengan antarmuka, kita dikelilingi oleh tipografi dan pengalaman kita didorong oleh kata-kata dan pesan yang kita baca dan pahami. Dalam salah satu artikelnya , Oliver Reichenstein menegaskan pentingnya tipografi di semua situs web dengan pernyataan berikut:

“Desain Web adalah Tipografi 95%.”

Selama beberapa tahun terakhir, saya memutuskan untuk mempelajari cara kerja tipografi, karena ini merupakan salah satu aset terpenting yang kita miliki sebagai desainer untuk mengkomunikasikan pesan yang jelas dan efisien, melibatkan orang secara emosional dan menyampaikan karakteristik merek yang sesuai ke antarmuka yang kita desain. Sayangnya, saya perhatikan bahwa beberapa situs web menampilkan tampilan dan emosi yang terputus-putus, karena banyak desainer dan pengembang mengabaikan pentingnya tipografi.

Akibatnya, situs web tersebut berkomunikasi secara tidak efektif dan memengaruhi pengalaman pengguna dan persepsi merek.

Tujuan artikel ini adalah untuk membantu desainer dan pengembang memahami cara bekerja dengan tipografi, untuk membuat antarmuka yang hebat.

Tipografi, merek, dan pengguna

Ketika pengguna berinteraksi dengan antarmuka, ia juga berinteraksi dan terhubung dengan merek. Untuk mengoptimalkan pengalaman pengguna, tipografi harus konsisten dengan nada dan suara merek situs web tersebut. Menurut pendapat saya, MailChimp adalah salah satu contoh terbaik yang menggambarkan konsep ini. Mereka telah melakukan ini secara luar biasa di situs web mereka dengan memilih untuk berita utama mereka, jenis huruf yang disebut “cahaya Cooper”. Jenis huruf ini memiliki kepribadian dan menyampaikan gaya ramah dan mudah didekati yang diklaim oleh merek.

Cuplikan layar situs web MailChimp

Karena orang tidak datang ke situs web untuk menikmati desain tetapi untuk membaca konten, penting ketika memilih jenis huruf untuk memahami bagaimana kita ingin mereka merasakannya saat membacanya. Misalnya, apakah kita ingin mereka merasa santai, bahagia atau gelisah? Ini harus diselaraskan dengan atribut merek dan arah seni situs web.

Yang perlu diperhatikan di sini adalah kapan pun Anda memilih jenis huruf, mulailah dengan membuat daftar kata yang mengingatkan nada dan suara merek Anda. Ini akan membantu Anda menggambarkan perasaan dan suasana hati yang ingin Anda saring dengan font untuk teks di seluruh desain Anda.

Dengan memahami hubungan antara tipografi, pengguna dan merek, Anda akan dapat memilih jenis huruf terbaik dengan percaya diri yang akan membantu desain Anda mencapai tujuannya.

Memilih jenis huruf yang tepat

Untuk memilih jenis huruf yang tepat, penting untuk mempertimbangkan konteks penggunaan dan tujuan font ke dalam antarmuka. Anda harus selalu bertanya pada diri sendiri: Apakah font yang saya pilih akan diterapkan pada tajuk utama, salinan tubuh, tautan, ajakan bertindak atau navigasi? Pertanyaan-pertanyaan ini akan membantu Anda untuk menerapkan jenis huruf dengan benar ke dalam desain Anda.

Memilih jenis huruf yang tepat juga berarti mempertimbangkan serangkaian font yang dioptimalkan untuk teks yang diperluas, karena bagi pengguna yang membaca di layar mungkin akan melelahkan di beberapa titik, terutama jika situs web isinya berat.

Untuk mencari tipografi, saya biasanya suka menjelajahi font di Google Font atau Adobe Fonts (Typekit) . Keduanya menyediakan pilihan tipografi berkualitas tinggi yang dioptimalkan untuk web. Saya menghindari penggunaan jenis huruf apa pun yang berasal dari situs web gratis atau sumber daya yang tidak dikenal, karena seringkali mereka tidak memberikan tipografi yang bagus dan teruji. Juga, sebagai aturan praktis, disarankan untuk memilih dua tipografi maksimum agar desain antarmuka tetap konsisten.

Saat bekerja dengan tipografi untuk web, ada dua prinsip utama yang harus Anda ketahui sebagai perancang agar konten dapat diakses dan terbaca: Keterbacaan dan Keterbacaan.

Keterbacaan

Keterbacaan adalah kemampuan pembaca untuk membedakan bentuk huruf saat membaca. Berikut adalah faktor-faktor yang berkontribusi pada keterbacaan jenis huruf:

Tipe tampilan tampilan

Kami menyebutnya “display typeface” yang dirancang untuk digunakan pada ukuran besar. Itu sempurna untuk tajuk berita karena jelas, dapat dilihat, dan menonjol. Namun, tipografi ini kurang dapat dibaca pada ukuran yang lebih kecil dan tidak boleh digunakan untuk salinan tubuh. Salah satu jenis huruf favorit saya untuk judul adalah “BEBAS NEUE”.

Serif dan Sans Serif tipografi

Di web terutama ada dua kelompok tipografi yang kami kerjakan, Serif dan Sans Serif. Secara tradisional, tipografi Serif selalu lebih mudah dibaca dan sering digunakan dalam cetakan untuk teks yang panjang. Seiring tren web dan desain yang berkembang, kami dapat menemukan lebih banyak situs web menggunakan font Serif untuk beberapa salinan tubuh. Ketika dipilih dengan baik ini bekerja dengan baik.

Namun, font Sans-serif lebih umum digunakan untuk teks isi karena bentuk hurufnya yang sederhana. Sangat bagus untuk memilih font dengan sedikit “sentuhan kepribadian”, tetapi tidak dekoratif karena dapat meningkatkan beban kognitif pengguna dan mempengaruhi pengalaman membaca mereka.

Berdasarkan pengalaman saya dengan tipografi, saya lebih suka menggunakan font Sans-serif untuk teks tubuh dan font Serif untuk judul, jika perlu. Pada akhirnya, coba beberapa kombinasi dan nilai mana yang berhasil dan rasakan yang terbaik untuk desain Anda.

X-tinggi

Ketinggian X adalah karakteristik penting yang harus dipertimbangkan ketika mengevaluasi font. Font yang paling cocok digunakan untuk menyalin tubuh adalah font dengan tinggi x lebih besar. Semakin tinggi x-tinggi, jenis huruf cenderung terbaca. Ini adalah aturan penting untuk diingat ketika memilih font untuk teks isi.

Keterbacaan

Hanya karena font dapat terbaca tidak berarti font tersebut dapat dibaca. Bahkan, keterbacaan adalah tingkat pemahaman dan kenyamanan visual ketika seseorang membaca teks. Jika Anda mendapati diri Anda berhenti untuk mengagumi font alih-alih membaca teks, kemungkinan font tersebut tidak dapat dibaca. Berikut adalah dua contoh untuk memvisualisasikan penjelasan di atas:

Tinggi garis

Tinggi garis juga dikenal sebagai garis depan yang mendefinisikan ruang antara garis dasar dalam satu blok teks. Ketinggian garis ideal sejati tidak ada, karena setiap jenis huruf berbeda. Namun, titik awal yang baik dengan tinggi garis adalah antara 1,2 dan 1,8. Ketinggian garis kecil dapat membuat teks sulit dibaca karena garis dekat satu sama lain. Secara umum, jika pengguna mengalami kesulitan membaca font yang diterapkan pada teks pada situs web, mereka akan menganggap konten itu sulit dibaca dan dimengerti.

Penspasian garis

Penspasian garis adalah jarak antar paragraf. Selalu pertahankan jarak paragraf dalam kisaran antara 0,75x dan 1,25x dari ukuran tipe.

Ukuran

Ukuran penting ketika bekerja dengan tipografi. Kami perlu menganggap konten kami dapat dibaca oleh orang-orang dari segala usia. Untuk ukuran font, ada baiknya tetap di 16px atau 1em di terkecil. Font harus cukup besar agar nyaman dibaca. Saat meramban situs web, orang-orang sibuk dan terburu-buru, karena itu penting untuk membuat kontennya jelas dan cepat dibaca.

Panjang garis

Praktik umum lainnya yang meningkatkan keterbacaan adalah mencegah garis paragraf horizontal terlalu lebar. Memang, jika sebuah garis terlalu panjang, itu meregangkan mata pengguna dan menyebabkan kelelahan. Aturan praktis di sini adalah untuk mengatur panjang garis hingga 40 hingga 70 karakter.

Hirarki dan kontras

Kontras jenis yang baik sangat penting untuk keterbacaan. Ini adalah prinsip penting untuk dipahami sambil menciptakan hierarki yang baik dan konsisten pada konten situs web. Hirarki yang sukses mengatur konten di bagian yang dapat dicerna, mudah dipindai dan dapat diakses oleh pengguna.

Kesimpulan

Dalam pengalaman saya, saya perhatikan bahwa sekali Anda memahami prinsip-prinsip ini dan menguasai tipografi untuk web, desain Anda akan menjadi lebih kuat dan lebih menarik karena tipografi adalah konten dan konten adalah UX.

Harus diingat bahwa Anda tidak mendesain situs web agar cantik, tetapi untuk membantu pengguna mencapai tujuan tertentu. Berikut adalah beberapa sumber yang dapat Anda telusuri dan jelajahi, yang membantu saya setiap hari untuk meningkatkan keterampilan saya dalam tipografi:

Situs web:

Buku:

  • Di Tipografi Web oleh Jason Santa Maria
  • Tipografi Web oleh Richard Rutter

 

 

 

 

 

sumber:Medium Jerome marvelapp.com 

 

Latest articles

12.6k Followers
Follow

Related articles