Mengapa Desainer Harus Menguasai Teknik Typography

Daftar Isi & Table Content

Tipografi dalam Desain: Setiap Desainer Harus Menguasai Fonts dan Styles

Mengapa Desainer Harus Menguasai Teknik Typography – Apa yang menghubungkan 3400 SM Irak, 3200 SM Mesir, 1300 SM Cina, dan 600 SM Mesoamerika? Menulis. Ribuan tahun yang lalu, manusia mulai menulis tanda-tanda bergambar di empat bagian dunia ini, yang perlahan-lahan berkembang melalui cuneiform, hieroglif, simbol, dan kodeks ke alfabet yang kita gunakan saat ini. Dari sekedar catatan, surat-surat ini berkembang untuk melayani berbagai tujuan.

Misalnya, gaya hiasan digunakan dalam surat-surat yang dikirim oleh raja, mewakili kekuasaan dan kekayaan. Gaya yang jelas dan lugas digunakan untuk rambu-rambu jalan dan pesan publik lainnya agar lebih mudah dibaca. Teknologi awal menggunakan font minimal yang dapat direplikasi pada perangkat digital.

Di dunia modern yang didukung internet saat ini, jenis huruf—kumpulan abjad, angka, dan tanda baca—telah menjadi jauh lebih penting. Lebih dari 90% dari semua informasi online adalah teks. Bahkan dalam representasi visual seperti presentasi, infografis, dan meme, teks memainkan peran kunci.

Mengapa Setiap Desainer Harus Menguasai Teknik Typography
Mengapa Setiap Desainer Harus Menguasai Teknik Typography

Oleh karena itu, dalam desain pengalaman pengguna digital (UX), tipografi adalah desain.

Tipografi, seni mengatur elemen tekstual seperti jenis huruf, ukuran relatif, spasi, dll., secara dramatis mempengaruhi kemampuan desain untuk menarik perhatian dan mengkomunikasikan pesan yang diinginkan. Kemampuan desainer antarmuka pengguna (UI) untuk memilih tipografi yang tepat untuk setiap layar yang mereka desain adalah perbedaan antara seseorang yang berhenti untuk membaca atau membaca sekilas tanpa berpikir.

Dalam posting blog ini, kami mengeksplorasi peran tipografi dalam desain UI/UX.

  1. Apa itu tipografi Dalam Design?
  2. Mengapa tipografi penting dalam desain UX?
  3. Bagaimana menggunakan tipografi dalam desain UI?

Apa itu Tipografi?

Tipografi adalah seni mengatur tipografi dalam kombinasi yang tepat dari bentuk, ukuran, dan spasi.

Tujuan utama tipografi adalah keterbacaan, aksesibilitas, dan hierarki. Tugas desainer UI adalah memastikan bahwa teksnya adalah :

  • Jelas dan dapat dibaca. Abjad perlu dibedakan satu sama lain. Jarak antar huruf, kata, dan kalimat harus konsisten.
  • Dapat diakses. Teks harus dapat dibaca oleh pengguna dengan kebutaan, kehilangan penglihatan, dan gangguan membaca.
  • Pengguna harus dapat membedakan informasi dari berbagai kepentingan.

Mari kita lihat contoh untuk menunjukkan ini. Di bawah ini adalah tangkapan layar halaman beranda Apple.

design web apple
sumber apple

Pada skala kejelasan dan keterbacaan, halaman mendapat skor tinggi. Judulnya berwarna abu-abu gelap dan font besar, memperjelas apa yang kita baca. Tautan berwarna biru menunjukkan bahwa tautan tersebut dapat diklik. Panah kecil di sebelah tautan menunjukkan bahwa mereka membawa Anda ke halaman lain.

Untuk beberapa pengguna, teks deskripsi abu-abu terang mungkin terlalu terang, sehingga memengaruhi aksesibilitas. Namun, mengingat itu adalah informasi yang paling tidak penting pada halaman, itu dapat dilewati dengan nyaman.

Hirarki visual informasi sangat jelas. Produk ini diperkenalkan dalam font judul besar. Nilai inti dari kecepatan—“Blast past fast”—ditulis dalam font heading-level untuk menarik perhatian. Meskipun mereka muncul dalam urutan pengaturan, tautan adalah item terpenting ketiga dalam hierarki. Mereka ditulis dengan warna biru untuk menegaskan kembali pentingnya mereka.

Seperti yang Anda lihat di sini, ukuran font, berat font, warna, dan lokasi relatif memainkan peran penting dalam desain tipografi.

Mengapa Tipografi Penting dalam Desain?

Mengingat bahwa sebagian besar informasi online disajikan sebagai teks, pentingnya tipografi tidak dapat diremehkan. Sementara gambar dan elemen desain bisa mencolok, tekslah yang sering mengomunikasikan pesannya. Untuk memastikan bahwa pesan dikomunikasikan dengan jelas, dalam urutan yang tepat, dalam rentang waktu yang singkat, tipografi sangat penting. Inilah yang dapat dilakukan tipografi yang baik untuk desain visual.

  1. Berkomunikasi dengan jelas

Apakah pengguna membaca sekilas atau membaca dengan seksama, tipografi membuat perjalanan mereka lebih mudah bagi mereka. Ini memungkinkan mereka untuk :

  • Pegang informasi secepat mungkin, tanpa harus memberi perhatian lebih dari yang diperlukan
  • Telusuri semua konten yang tersedia untuk kemudian menyelami apa yang ingin mereka baca lebih lanjut, meningkatkan kemampuan navigasi
  • Identifikasi item berulang dengan mudah. Misalnya, pada halaman di atas, ketika pengguna melihat teks biru dengan panah di sebelahnya, mereka memahami bahwa itu adalah tautan.
  1. Berpenampilan menarik

Mengingat banyaknya konten dan situs web di internet, pengguna dimanjakan dengan banyak pilihan. Mereka lebih cenderung mendapatkan berita/informasi dari tempat-tempat yang menawarkan pengalaman visual yang lebih menyenangkan. Tipografi yang baik memungkinkan ini :

  1. Menarik perhatian melalui ukuran, berat, atau bahkan warna
  2. Mengatur suasana hati. Misalnya, font tulisan tangan dapat menawarkan rasa keakraban dan keramahan kepada pengguna
  3. Membangkitkan koneksi. Font Coca Cola atau font Disney membangkitkan nostalgia dan hubungan emosional bahkan ketika disajikan dalam warna hitam dan putih polos

 

  1. Bangun Branding

Ada alasan mengapa Brand memilih font tertentu dan tetap menggunakannya, tidak hanya di logo mereka tetapi juga di seluruh kolateral komunikasi mereka—pengenalan merek. Menggunakan set font yang sama membangun pengenalan, konsistensi, dan rasa harmoni di seluruh desain visual. Hasilnya, pengguna mendapatkan pengalaman merek yang sama ke mana pun mereka pergi.

Misalnya, font Irvin The New Yorker langsung dikenali dengan huruf ‘o’ bulat besar dan huruf ‘s’ miring. Demikian juga, Apple diketahui menggunakan font terbaru San Francisco tidak hanya di situs web mereka tetapi di seluruh UI semua perangkat Apple untuk memberikan pengalaman yang konsisten bagi pelanggan dan prospek.

the new yorker design typogrphy
sumber the new yorker
  1. Mempengaruhi keputusan

Situs web dan aplikasi seluler membutuhkan orang untuk mengambil tindakan, mendaftar ke buletin, membagikan artikel, atau bahkan membeli produk. Tipografi memainkan peran penting dalam mempengaruhi keputusan tersebut. Misalnya, menggunakan sorotan untuk menunjukkan penawaran waktu terbatas menyampaikan urgensi, memengaruhi pengguna untuk mengambil tindakan. Font/latar belakang merah digunakan untuk memperingatkan orang tentang mengambil tindakan yang tidak diinginkan.

Cara Menggunakan Elemen Tipografi dalam Desain UX

Saat ini, sebagian besar desainer memahami bahwa font berperan dalam desain pengalaman pengguna. Namun, tipografi lebih dari sekadar memilih font. Ini adalah kombinasi kompleks tentang bagaimana teks diatur dalam kaitannya dengan desain. Ini berasal dari berbagai faktor.

  1. Tipografi dan font

Jenis huruf atau font adalah kumpulan huruf, angka, dan tanda baca yang konsisten dengan satu desain. Tiga jenis tipografi dasar adalah font serif, sans-serif, dan dekoratif :

  1. Serif mengacu pada tipografi dengan garis kecil atau goresan di akhir goresan yang lebih besar dalam huruf atau simbol. Mereka digunakan dalam teks isi dan terlihat lebih mudah dibaca, terutama di media cetak. Jenis huruf serif yang populer adalah Times New Roman, Caslon, Garamond, dll.
  2. Sans-serif—secara harfiah berarti tidak adanya serif—mengacu pada font yang tidak memiliki goresan ekstra. Mereka lebih populer di antarmuka digital. Font sans-serif yang umum digunakan termasuk Arial, Helvetica, Roboto, dll.
  3. Font dekoratif adalah font yang rumit dan kreatif, biasanya digunakan dalam judul, logo, spanduk, dll. Engravers’ Old English dan font logo Harry Potter adalah contoh yang bagus.

Desainer UI saat ini menggunakan kombinasi 2-3 font, masing-masing memiliki tujuan yang berbeda. Misalnya, mereka mungkin menggunakan serif atau font dekoratif untuk judul, font sans-serif biasa untuk teks isi, dan variasi yang lebih berani untuk ajakan bertindak seperti tombol.

Mari kita ambil contoh situs The Washington Post untuk memahami tipografi secara detail. Untuk memulainya, situs web menggunakan font serif dan sans-serif, yang pertama untuk judul dan yang terakhir untuk salinan lainnya. Itu juga menggunakan berbagai ukuran font yang sama untuk menunjukkan kepentingan. Misalnya, teks deskripsi dan nama penulis menggunakan font yang sama, meskipun dalam ukuran yang berbeda.

  1. Berat, lebar, dan gaya

Jika Anda pernah menulis dokumen atau membuat presentasi, Anda pasti tahu huruf tebal, miring, dan garis bawah. Banyak font menawarkan lebih banyak bobot dan gaya.

Bukan hal yang aneh saat ini untuk melihat beberapa varian dari setiap font dalam situs web yang sama. Beberapa juga mengubah lebar font untuk membentuk gayanya, membuatnya lebih sempit (dipadatkan) atau lebih lebar (diperluas) agar sesuai dengan desain.

Misalnya, judul bagian dicetak tebal seperti pada tangkapan layar di atas, di mana kata ‘pendapat’ memiliki bobot lebih tinggi daripada teks lain untuk memastikan pembaca tidak bingung menjadi berita.

  1. Jarak karakter

Spasi karakter mengacu pada spasi antara huruf, kata, dan garis. Dalam hal spasi, ada dua jenis font — Proporsional dan Monospace. Font proporsional hanya menempati ruang sebanyak yang dibutuhkan huruf, biasanya diyakini lebih enak dipandang. Font monospace memiliki lebar tetap, diyakini lebih mudah dibaca; mereka adalah antarmuka pengkodean dan editor teks yang populer.

Desainer menggunakan spasi karakter dengan berbagai cara :
  1. Mereka meningkatkan spasi karakter dalam judul agar terlihat lebih besar tanpa menambah ukuran font
  2. Mereka meningkatkan spasi baris dari baris pertama di paragraf mana pun untuk membuat teks lebih mudah dibaca
  3. Mereka mengurangi spasi baris untuk menunjukkan hubungan yang lebih dekat antara dua elemen desain tanpa membuat hubungan fisik apa pun di antara mereka
  4. Trik bagus yang digunakan dalam desain web adalah kerning, proses menyesuaikan spasi antar karakter dalam font proporsional untuk membuatnya lebih menyenangkan.

 

  1. Warna

Dalam desain visual, warna ditentukan oleh tiga komponen—hue, saturation, dan value. Hue mengacu pada bayangan warna, saturasi dengan intensitas warna, dan nilai menunjukkan seberapa terang atau gelap warnanya. Desainer menggunakan kombinasi ketiga komponen ini untuk membuat teks menarik dan dapat dibaca.

Misalnya, di beranda The Washington Post, satu-satunya judul yang berwarna merah adalah bagian liputan langsung. Dalam lautan berita, ini menunjukkan kedekatan dan sifat pembaruan yang terus berkembang. Di sisi lain, ketika Anda mengarahkan kursor ke item berita apa pun, itu akan berubah menjadi warna biru muda untuk menunjukkan kepada pengguna apa yang akan mereka klik.

  1. Kontras

Kontras adalah teknik menggunakan dua metode yang berbeda untuk penekanan. Hal ini dapat dicapai dengan kontras ukuran, warna, bobot, dll. Praktik terbaik desain UI adalah memastikan kontras 4:5:1 antara semua teks dan latar belakang.

Masthead Washington Post adalah contoh klasik penggunaan beberapa elemen desain untuk kontras. Seperti yang Anda lihat di sini, tagline berwarna abu-abu lebih terang, ukuran lebih kecil, font berbeda, dan miring, membuatnya melengkapi judul, tetapi sama sekali tidak menghilangkan perhatian darinya.

  1. Ruang putih

Ruang putih mengacu pada jarak antar elemen dalam sebuah desain. Meskipun sering tidak diperhatikan, ruang putih sangat penting dalam membuat teks dapat dibaca. Meskipun terlalu sedikit ruang putih dapat membuat antarmuka Anda tampak berantakan, terlalu banyak dapat mengurangi dinamisme layar Anda.

  1. Alignment

Alignment adalah apa yang menentukan posisi setiap elemen pada halaman dalam hubungannya satu sama lain. Ini memainkan peran penting dalam membuat desain terlihat terorganisir. Ada empat jenis perataan teks horizontal: Kanan, kiri, tengah, dan rata. Dan tiga jenis perataan vertikal: Atas, tengah, dan bawah. Perataan kiri paling baik untuk teks mengalir karena lebih mudah dibaca. Namun, jika konten Anda dalam bahasa Arab atau bahasa lain yang dibaca dari kanan ke kiri, perataan kanan lebih baik.

Tipografi Adalah Desain

Seringkali, desainer visual melihat tipografi sebagai renungan. Sementara berfokus pada desain grafis, ilustrasi, warna, ikon, dll., banyak yang lupa bahwa tipografi yang baik dapat melakukan banyak hal untuk antarmuka pengguna Anda, jika tidak lebih. Desainer antarmuka pengguna yang baik memperlakukan tipografi sebagai desain. Mereka memahami bahwa ini adalah bagian integral dari UI. Mereka membangun toolkit dan proses yang memanfaatkan tipografi untuk dampak visual.

Tools Gratis Menggunakan Teknologi Artificial Intelligence

Buat kamu yang masih bingung mencari tools yang mempermudah dalam pembuatan tulisan atau artikel kami menyarankan untuk mencoba tools yang sangan powerfull ini :

Tools Instant Article Using Artificial Intelligence

Buat Artikel (SECEPAT KILAT) Kurang dari 1 menit 100% Unik dan Fresh, Dijamin LOLOS Plagiat/Copyscape Aman untuk Blog Adsense atau konten artikel apapun sesuai kebutuhan anda.

Tools Rewriter / Paraphrasing Using Artificial Intelligence

Dengan AGP Bikin Artikel Pilar 3.000 Kata+ Cuma 5 Menit. Rewrite Artikel Panjang Sekaligus Langsung Fresh dan Unik Lolos Copyscape Aman untuk Blog Adsense Cobain Sekarang.

Leave a Reply

Your email address will not be published.

Facebook
Twitter
LinkedIn
Telegram
WhatsApp
Categories

Free Tools To Use

Instant Article

Create Articles (as quick as lightning) In less than 1 minute 100% Unique and Fresh, Guaranteed to pass Plagiarism / Copyscape Safe for Adsense Blogs or any article content

Rewrite Article

With AGP Make 3,000 Words Pillar Articles + Only 5 Minutes. Rewrite Long Articles Immediately Fresh and Unique Pass Copyscape Safe for Adsense Blog