Bagaimana meningkatkan tipografi digital Anda

Pengarang: Peter Berry
Tanggal Pembuatan: 14 Juli 2021
Tanggal Pembaruan: 6 Boleh 2024
Anonim
Bagaimana Menggunakan Tipografi dalam Desain UI Anda
Video: Bagaimana Menggunakan Tipografi dalam Desain UI Anda

Isi

Beralih dari cetak ke digital, ada satu perbedaan yang jelas dan penting untuk dipertimbangkan dalam hal tipografi. Berbeda dengan cetak, dalam desain digital, tipe Anda tidak akan tetap statis.

"Jenis cetakan dapat dikontrol dengan ketat, dengan hasil yang persis seperti yang diinginkan perancang," kata Jack Statham, perancang kelas menengah di Ragged Edge. "Tapi tipografi di layar dapat ditampilkan dengan berbagai tingkat detail untuk pengguna yang berbeda, bergantung pada perangkat mereka."

Itu tidak berarti tipografi kehilangan arti pentingnya; justru sebaliknya. "Dalam beberapa tahun terakhir, desain web dan aplikasi telah melepaskan diri dari dekorasi yang berlebihan dan sekarang memberikan lebih banyak ruang untuk konten, dan oleh karena itu untuk teks," jelas Massimiliano Frangi, direktur desain senior di CBA Italia. "Jadi, pilihan font yang bagus sekarang menjadi elemen kunci untuk kesuksesan proyek web."


Dalam beberapa tahun terakhir, desain web dan aplikasi telah melepaskan diri dari dekorasi yang berlebihan

Saat ini, font web spesialis dioptimalkan untuk ditampilkan sebersih dan sekonsisten mungkin di berbagai perangkat dan resolusi layar. "Seringkali, tipografi yang dirancang untuk cetakan memiliki perangkap tinta dan kontras tinggi pada lebar goresan," kata Statham. "Jenis huruf yang dirancang untuk web biasanya menampilkan bobot guratan yang lebih konsisten, tinggi x yang lebih tinggi, serta mangkuk dan penghitung yang lebih terbuka."

Semua ini berarti bahwa jika desain Anda akan berfungsi, terlihat bagus, dan dapat dibaca di beberapa perangkat, ukuran dan orientasi layar, maka memilih font yang tepat dengan hati-hati dan menampilkannya dengan benar sangatlah penting.

Keterbacaan adalah kuncinya

"Hanya karena jenis huruf itu indah tidak berarti dapat dibaca dalam semua ukuran," kata Martha Lisboa, desainer digital di CBA Paris. "Jadi hindari tipografi gila, gaya padat dan bentuk huruf dengan goresan tipis. Dan ketahuilah bahwa efek jenis seperti bayangan atau kemiringan mungkin terlihat bagus pada ukuran yang lebih besar tetapi tidak akan berfungsi pada layar kecil.


"Singkatnya, gunakan sesuatu yang sederhana dan berbobot standar untuk memastikan keterbacaan di semua perangkat, terutama untuk paragraf teks yang panjang."

Dalam hal penyusunan huruf, hierarki selalu penting, tetapi menjadi sangat penting ketika orang menggunakan desain interaktif Anda untuk mencapai tujuan, kata Statham.

"Anda memiliki area terbatas untuk mengatur jenis dan mengurangi navigasi dan elemen pencarian jalan," jelasnya. "Jadi, tipe hierarki yang jelas membantu pengguna menemukan jalan mereka di sekitar layar dengan cepat, dan bertindak sebagai cara singkat bagi pengguna untuk mencerna informasi di layar."

Alexandra Lofthouse, desainer senior UX di Fifteen, setuju, dan mengingatkan kita bahwa orang pada umumnya tidak menggunakan aplikasi untuk membaca paragraf teks yang masif. "Jadi teks harus mudah dibaca dan dicerna," tegasnya. "Ini tergantung pada nada suara yang digunakan di seluruh salinan, dan gaya tipografi menyatu dengan cara yang menarik dan menarik."


Dan tentu saja, keterbacaan sangat penting dalam dunia digital. "Terutama di bagian teks yang panjang, tujuannya adalah untuk membuat tipografi 'tidak terlihat', sehingga pengguna dapat melewati paragraf dengan cepat, tanpa harus terlalu fokus pada setiap bentuk huruf," kata Statham.

Dia menyarankan Anda "perhatikan ukuran paragraf; pertahankan antara 45-75 karakter. Berikan jarak antar baris yang luas: bidik tinggi garis minimum 1,5 untuk body copy. Bertujuan untuk sedikit meningkatkan pelacakan, untuk memberi ruang tipe untuk bernafas. Dan pilih ukuran titik yang wajar: ukuran karakter sebenarnya bervariasi antar font, tetapi 16 piksel adalah minimum yang baik. "

Tipografi yang dapat diakses

Warna juga menjadi pertimbangan penting dalam hal keterbacaan, catatnya. "Layar dengan cahaya latar dapat meningkatkan kontras antara hitam dan putih murni, yang dapat melelahkan mata, jadi menggunakan warna hitam yang lebih lembut untuk teks atau latar belakang abu-abu pucat dapat membuat teks lebih mudah dibaca. Juga ada beberapa aplikasi, seperti Kontras, yang yang sering kami gunakan untuk membantu memastikan kombinasi warna apa pun dalam badan teks sesuai dengan standar aksesibilitas saat ini. "

Lee Carroll, desainer interaksi di Seymourpowell, menawarkan saran serupa. "Hati-hati terhadap kurangnya kontras antara teks dan warna latar belakang," katanya. "Gunakan pemeriksa kontras warna Snook.ca untuk memastikan rasionya cukup tinggi untuk standar aksesibilitas double-A atau triple-A." Dia juga menyarankan untuk mengingat bahwa mungkin bukan hanya warnanya yang perlu diubah untuk menyelesaikan beberapa masalah ini, terkadang teks yang lebih tebal atau teks yang lebih besar diperlukan untuk meningkatkan kontras.

Dan semua itu hanya sebagai permulaan: pada tahun 2018, lapangan berkembang dengan sangat cepat. "Teknologi yang kami gunakan untuk melihat jenis terus berubah, sehingga persyaratan jenis di layar juga berubah," kata Statham. "Prototypo, misalnya, memiliki beberapa fitur luar biasa dalam tipografi yang memungkinkan Anda menggunakan satu file font untuk beberapa contoh. Anda mungkin memiliki serif yang lebih baik pada tajuk utama Anda daripada pada teks Anda pada ukuran yang lebih kecil, katakanlah, atau kurangi lebar karakter pada area pandang yang lebih sempit. Dukungan browser meningkat setiap saat, jadi kami berharap dapat segera memanfaatkannya. "

Dan tetap di depan kurva ini juga berarti berhubungan baik dengan kolega Anda yang lebih berpikiran teknis, kata Dan Bradshaw, direktur desain di TH_NK.

"Salah satu perbedaan utama dengan tipografi digital dibandingkan dengan cetak adalah bahwa setelah Anda mendesainnya, itu perlu dibangun," jelasnya. "Jadi, bertemanlah dengan pengembang jika Anda tidak terlalu memahami sisi kode dari berbagai hal, untuk memastikan desain Anda dapat dihidupkan seperti yang telah Anda tata."

Artikel ini awalnya diterbitkan di Computer Arts, majalah desain terlaris di dunia. Beli edisi 277 di sini atau berlangganan Seni Komputer di sini.

Direkomendasikan Untuk Anda
Jadikan aplikasi JavaScript Anda lebih lancar
Menemukan

Jadikan aplikasi JavaScript Anda lebih lancar

Artikel ini pertama kali muncul di edi i 231 majalah .net - majalah terlari di dunia untuk de ainer dan pengembang web.Aplika i web modern ering kali melibatkan anima i dan interaktivita waktu nyata -...
Kampanye ikonik diabadikan dalam seri poster baru
Menemukan

Kampanye ikonik diabadikan dalam seri poster baru

Ada beberapa iklan, kampanye, dan video mu ik yang tetap ber ama Anda, bertahun-tahun etelah dirili . F / Nazca aatchi & aatchi mengambil beberapa dari kenangan ikonik ini dan mengubahnya menjadi ...
Laptop terbaik untuk mengedit foto pada tahun 2021
Menemukan

Laptop terbaik untuk mengedit foto pada tahun 2021

Laptop terbaik untuk pengeditan video: 5 terata 1. MacBook Pro 13 inci (M1, 2020) 2. Dell XP 15 (2020) 3. Gigabyte Aero 17 (2021) 4. MacBook Pro (16 inci, 2019) 5. Dell XP 17 (2020)Baca teru untuk me...