Bingung Cara Memilih dan Memasangkan Font untuk UX? Ini Wajib Kamu Tau

on

|

views

and

comments

Dengan lebih dari 1.000 font untuk dipilih dalam Adobe Font , menemukan kombinasi sempurna tipografi untuk membuat desain yang unggul dapat menjadi tantangan. Apa yang perlu Anda ingat untuk memilih font yang keduanya tampak hebat dan menumbuhkan pengalaman pengguna yang baik di berbagai ukuran layar dan perangkat? Bagaimana dengan pemilihan font yang tepat untuk pengalaman pengguna yang mulus, dari ujung ke ujung? Dan apa pendekatan terbaik untuk memasangkan kombinasi font yang kongruen?

Veerle Pieters adalah desainer dan penulis grafis berbakat yang mengetahui satu atau dua hal tentang memilih jenis huruf yang tepat. Kami berbicara dengannya di studio desainnya di Belgia untuk mencari tahu bagaimana dia memilih font untuk paket Adobe Font -nya , dan memintanya untuk berbagi beberapa tips dan teknik untuk memilih font, membuat karakter merek melalui tipe, dan membayangkan kembali bagaimana kita melihat bentuk huruf. Anda dapat mengunduh file desain dan paket font Adobe XD gratis dan menjelajahi langsung bagaimana teknik ini terwujud dalam proses desainnya, kemudian memanfaatkan desainnya yang indah dalam pekerjaan Anda sendiri.

Render of Veerle Pieters, aplikasi fiksi HERBi yang mendemonstrasikan pembuatan prototipe font untuk tampilan pengguna yang berbeda.
Memprototipe aplikasi HERBi di Adobe XD.

Memilih kombinasi font yang cocok bersama

Veerle hampir selalu memilih setidaknya satu jenis huruf serif dan sans-serif untuk proyek apa pun. Menggunakan berbagai font dalam desain Anda dapat membuat penanda visual yang jelas untuk pengguna sehingga mereka tahu jenis konten apa yang mereka alami. Font sans-serif tebal semua huruf tebal dapat mengkomunikasikan header, terutama ketika itu disandingkan dengan serif yang lebih gesit.

Namun, Pieters memperingatkan untuk memilih font yang terlalu ringan ketika mendesain untuk beberapa layar. Dia percaya, “Harus ada kontras. Seringkali desainer membuat kesalahan dengan menjaga hal-hal terlalu ringan. Saya biasanya memilih sans-serif yang sangat tebal dan serif yang ringan. ” Untuk menghindari membuat serif terlalu ringan, Pieters mengatakan, “Adobe XD sangat berguna untuk melihat pratinjau blok teks Anda untuk melihat seberapa mudah dibaca pada layar yang berbeda.”

Pieters perusahaan fiksi yang dibuat, HERBi, menampilkan font berbeda dalam paket Adobe Font-nya.
Pieters perusahaan fiksi yang dibuat, HERBi, menampilkan font berbeda dalam paket Adobe Font-nya.

Menemukan karakter yang tepat untuk proyek Anda

Membuat paket Adobe Font-nya membutuhkan sedikit rekayasa terbalik untuk Pieters. Biasanya, dia akan mulai membuat keputusan font berdasarkan kebutuhan klien. Dia akan memilih font yang cocok dengan tampilan dan nuansa merek yang dia rancang. Jadi, untuk desain buku, dia akan memilih font yang abadi dan sangat mudah dibaca. Namun, dalam praktik sehari-hari, ia lebih suka font yang edgy dengan banyak karakter untuk desain paket, seperti yang terlihat dalam kemasan HERBi-nya.

Untuk logo HERBi ia mulai dengan font tampilan dimensi yang unik, Continuo, dan menyesuaikan setiap bentuk huruf dengan potongan diagonal kecil, membuat segmentasi bagian-bagian untuk aplikasi warna yang mudah. Pieters memuji logo yang mencolok ini dengan sans-serif Bree yang aneh dan Basic Sans Bold yang sangat fungsional.

Desain kemasan untuk HERBi menampilkan font yang termasuk dalam kit.
Desain kemasan untuk HERBi.

Di semua label kemasan dan ditaburkan di seluruh UI, font serif kecil namun perkasa Yrsa membawa janji merek “segar & murni.” Jika ini adalah perusahaan anggur, Pieters mengatakan dia akan memilih naskah canggih yang mewah dengan ekor dan keturunan yang penuh hiasan. Jadi, bagaimana dia memutuskan? “Saya mengetik teks ke dalam Adobe Font dan menganalisis surat-surat, melihat bagaimana mereka terlihat bersama.” Memanfaatkan font dari Adobe Fonts juga memastikan bahwa pemilihan fontnya akan selalu dimuat secara otomatis ketika dia membuat pembaruan ke versi baru, membuka file desain mesin yang berbeda, atau berbagi file dengan komunitas kolaborator online.

Memecah bentuk huruf dengan alat Pathfinder untuk menambahkan warna dalam Adobe Illustrator.
Memecah bentuk huruf dengan alat Pathfinder untuk menambahkan warna dalam Adobe Illustrator.

Melihat huruf sebagai gambar

Surat adalah gambar dan bentuk yang memiliki kekuatan berbeda untuk mengkomunikasikan ide-ide kompleks kepada pengguna. Kunci untuk desain UX yang hebat di berbagai platform adalah memperhatikan ruang positif dan negatif antara huruf dan garis teks. Ketika blok teks terlalu ketat, pembaca tidak dapat menerobos bata huruf, atau ketika kain terlalu tebal itu terlihat seperti kerak pie terjepit dan pembaca akan menelusuri di akhir baris. Jadi, bagaimana kita memastikan bahwa kita mengkomunikasikan ide-ide terbaik kita kepada pengguna akhir? Pieters memiliki beberapa trik yang dia gunakan di akhir proses desainnya untuk memastikan jarak antara huruf dan garis dapat dibaca dan terukur.Fitur animasi otomatis dalam Adobe XD.

Untuk menguji stres tata letak keseluruhan dan pilihan desainnya, ia menggunakan Adobe XD untuk melihat semua UI di layar dan membuat perubahan global. Untuk mengelabui mata untuk melihat huruf-huruf dari sudut lain, dia akan membalikkan logo dan desainnya secara terbalik dan melihat layarnya dari kejauhan.

“Saya pergi sekitar dua meter dari layar saya untuk memeriksa apakah struktur keseluruhan desain berfungsi atau tidak.” Jauh dari layarnya, dia dapat melihat apakah font-nya terlalu terang, karakter desainnya yang menyeluruh, dan bagaimana fontnya akan berskala di berbagai platform yang berbeda.

Ketika desainnya terbalik, di sisi lain, “Kadang-kadang ini mengungkapkan hal-hal yang tidak Anda lihat,” katanya, “misalnya, saya akan melihat A terlalu dekat dengan D.” Ia mengandalkan mata dan intuisinya yang terlatih untuk menambah jarak, atau melacak, di antara huruf-huruf. Setelah dia merasa semuanya sudah siap, dia dapat membagikan desainnya dengan komunitas mengetahui bahwa pilihan fontnya tidak akan hilang dan bahwa integritas desainnya aman di Adobe XD.

Memilih font yang tepat adalah suatu perasaan

Veerle akan memberi tahu Anda bahwa memilih font yang tepat untuk proyek Anda bukanlah ilmu, itu perasaan. Jadi, bagaimana Anda melatih mata Anda untuk melihat huruf secara intuitif? Balik dan skala logo dan desain Anda, pasangkan huruf tebal dan gesit, dan lihat huruf sebagai gambar.

Dia mulai menggunakan teknik ini dalam proses desainnya hampir tiga dekade lalu dan dia masih menggunakannya sampai sekarang. Lihat file desain Adobe XD gratisnya dan mulailah melihat bentuk huruf berbeda hari ini.

sumber: xd.adobe.com

Share this
Tags

Must-read

Mantaflow Creating Fire

Menciptakan efek api? Mudah dengan Mantaflow! https://www.youtube.com/watch?v=lR9vjaYzeYQ
spot_img

Recent articles

More like this