Warning: getimagesize(): http:// wrapper is disabled in the server configuration by allow_url_fopen=0 in /home/yfzbjhce/indonesiamendesain.com/wp-content/plugins/td-cloud-library/shortcodes/header/tdb_header_logo.php on line 792

Warning: getimagesize(http://indonesiamendesain.com/wp-content/uploads/2020/09/Screen-Shot-2020-07-16-at-13.07.54-300x136.png): failed to open stream: no suitable wrapper could be found in /home/yfzbjhce/indonesiamendesain.com/wp-content/plugins/td-cloud-library/shortcodes/header/tdb_header_logo.php on line 792

Warning: getimagesize(): http:// wrapper is disabled in the server configuration by allow_url_fopen=0 in /home/yfzbjhce/indonesiamendesain.com/wp-content/plugins/td-cloud-library/shortcodes/header/tdb_header_logo.php on line 792

Warning: getimagesize(http://indonesiamendesain.com/wp-content/uploads/2020/09/Screen-Shot-2020-07-16-at-13.07.54-300x136.png): failed to open stream: no suitable wrapper could be found in /home/yfzbjhce/indonesiamendesain.com/wp-content/plugins/td-cloud-library/shortcodes/header/tdb_header_logo.php on line 792

6 Tips Untuk Hirarki Tipografi yang Lebih Baik Dalam Desain Web

- Advertisement -
- Advertisement -
- Advertisement -

Pernahkah Anda melihat sebuah desain dan berpikir, “sesuatu ada yang tidak terasa benar”? Jika Anda tidak dapat menempatkan jari Anda pada apa itu, kemungkinan baik itu adalah masalah dengan hirarki visual atau tipografi.

Ketika Anda menajam konten ke halaman dengan massa berlumik garis istirahat, huruf tebal dan miring-Anda yakin untuk hasil yang buruk. Halaman yang baik mencari perlu cinta yang serius, dan selama bertahun-tahun saya telah menemukan enam tips yang sangat berguna untuk hal desain yang orang benar-benar ingin membaca.

1. Ketahui Kontenmu!

Untuk membuat hirarki tipografi yang berhasil, penting bagi Anda untuk memahami kedua elemen yang dibutuhkan pada halaman-dan mereka yang relatif penting.

Secara tradisional, buku dibagi menjadi beberapa bagian, bab, Bagian dan paragraf-masing-masing dengan aturan Typesetting mereka sendiri. Dalam dunia yang berpusat pada web saat ini, kita masih berpegang pada banyak dari prinsip yang membimbing. Bab sekarang tinggal di halaman individu, daftar isi diatur di bar navigasi, dan paragraf dan bagian tetap seperti yang telah mereka selalu.

typographic hierarchy example
Pendekatan Apple Music terhadap hirarki tipografi sangat ideal — minimal dan mudah dibaca.

Jika Anda melihat halaman biasa dari situs web Apple Music di atas, Anda akan melihat mereka membayar perhatian khusus pada hierarki tipografi mereka. Ada perbedaan yang jelas antara judul halaman, paragraf memimpin dan bagian konten individu, termasuk judul bagian tersebut.

Pengalaman membaca seperti sempurna dibuat Halaman tampak mulus dan mudah, tetapi diperlukan perancang untuk berpikir keras tentang isi, elemen individu dan relatif penting.

Jadi, sebelum Anda menyalin/menempelkan sepotong teks klien Anda, luangkan waktu untuk membaca dengan benar. Anda akan segera mendapatkan ide yang lebih baik tentang bagaimana Anda perlu untuk struktur itu.

2. Pisahkan Bagian dari Paragraf

paragraphs vs sections
Sebuah paragraf adalah sepotong kecil tulisan yang dipisahkan oleh garis baru atau indentasi. Sebuah bagian adalah kelompok paragraf berurusan dengan tema tertentu, biasanya dengan judul.

Mari kita lihat contoh di atas. Untuk mata yang tidak terlatih, kedua Halaman ini terlihat mirip, tetapi pengalaman membacanya sangat berbeda. Mengapa? Karena halaman kiri tidak membuat perbedaan antara masing-masing bagian dan paragraf. Spasi baris identik, membuat halaman terasa seperti maraton tanpa henti kepada pembaca. Ini adalah kerusakan dalam hirarki tipografi.

Namun pada halaman yang tepat, kita dapat melihat bagaimana ruang pernapasan sedikit antara bagian (alias bagian istirahat) memberikan konten yang sangat dibutuhkan struktur dan mudah dibaca. Jarak antara paragraf juga telah disesuaikan menjadi kurang intrusif, tapi masih terlihat. Semua ini menghasilkan desain halaman yang lebih harmonis dan pengalaman membaca yang lebih baik.

Jadi lain kali, jangan lupa untuk memberikan bagian Anda istirahat.

3. Bereksperimen Dengan Berbagai Jenis Kombinasi

typographic hierarchy in new yorker magazine
The New Yorker menciptakan hirarki tipografi melalui berbagai ukuran font, tipografi, warna dan tata letak.

Ukuran, warna, posisi, typeface. Ini hanya beberapa atribut yang dapat Anda eksperimenkan dalam membuat hirarki tipografi. Kombinasi yang tepat akan memberikan konten Anda tampilan yang sama sekali baru, membuat judul bagian pop dan membantu membimbing mata pembaca Anda melalui halaman.

Sebagai aturan praktis, selalu Pilih gaya tajuk Anda sebelum menetapkan pada tipe tubuh — jika tidak, Anda mungkin mendapati diri Anda menggunakan versi warna yang lebih besar atau berbeda dari jenis huruf yang sama. Sebaliknya, Anda harus mencari kombinasi yang luar biasa untuk membawa rasa yang tepat untuk proyek Anda. Terkadang, itu semua yang Anda butuhkan untuk membuat pekerjaan Anda terlihat cantik.

4. Gunakan Jenis yang Lebih Besar Untuk Teks Tubuh

large body copy
Ini adalah ukuran aktual body copy pada Forbes. Apa pun pendapat Anda tentang hal itu, itu pasti membuat untuk membaca mudah.

Jika Anda benci melihat jenis-jenis yang besar di layar, inilah yang ahli kegunaan Oliver Reichstein katakan tentang hal itu:

“16 piksel tidak besar. Ini adalah ukuran teks browser tampilan secara default. Ini adalah ukuran teks browser yang dimaksudkan untuk menampilkan… Kelihatannya besar pada awalnya tetapi sekali Anda menggunakannya Anda dengan cepat menyadari mengapa semua pembuat browser memilih ini sebagai ukuran teks default .”

Jika Anda masih belum yakin, cobalah membaca artikel panjang dengan font 12px-Anda mungkin tidak akan berhasil sampai akhir. Penggunaan jenis kecil berasal dari usia ketika layar komputer yang memalukan kecil, sehingga perlu untuk menunjukkan konten sebanyak mungkin. Tidak ada yang berpikir tentang desain atau keterbacaan kembali kemudian.

Waktu telah berubah dan demikian harus Anda. Gunakan jenis yang lebih besar!

5. Tempatkan Gambar di Atas Konten Terkait

typographic hierarchy
Halaman di sebelah kiri lebih sulit untuk dicerna daripada yang ada di sebelah kanan. Anda tidak bisa mengetahui apakah gambar itu milik teks di atas atau di bawahnya.

Arah pembacaan alami kita adalah kiri ke kanan, atas ke bawah. Tapi ada tangkapan. Otak kita merasakan dan memproses gambar jauh lebih cepat daripada teks, yang berarti kita melihat gambar terlebih dahulu, kemudian secara alami Lanjutkan untuk membaca apa pun yang kita temukan di bawah mereka.

Ketika Anda menempatkan deskripsi di atas gambar, otak Anda tidak dapat memproses informasi tanpa pengangkatan ekstra berat, yang menghasilkan pengalaman membaca yang buruk.

Untuk alasan ini, konten yang berjalan dengan gambar harus selalu berada di bawah gambar.

6. Mock Up Teks Untuk Proyek Kaya Konten

setting up typographic hierarchy

Untuk sebagian besar proyek, Anda dapat bereksperimen dengan jenis saat bekerja dengan elemen lain dalam tata letak Anda. Kemungkinannya adalah Anda tidak akan memerlukan lebih dari sekadar judul halaman, judul bagian, dan teks paragraf.

Tetapi jika proyek Anda melibatkan hirarki tipografi yang lebih kompleks (seperti koran atau majalah online), yang terbaik adalah melakukan mockup cepat terlebih dahulu. Cara mudah untuk melakukan ini adalah dengan menyiapkan file seperti di atas untuk menguji potongan konten tipografi untuk melihat apakah mereka terlihat baik bersama-sama.

Hal ini memungkinkan Anda untuk dengan mudah bereksperimen dengan jenis kombinasi tanpa terganggu oleh elemen desain lainnya. Setelah menemukan sesuatu yang Anda inginkan, Anda dapat mulai menyiapkan desain Anda dengan baik.

Hirarki Tipografi Lebih Penting Dari Sebelumnya

Menurut penelitian yang dilakukan oleh Dr Martin Hilbert dari University of Southern California, orang rata hari ini menerima dosis harian informasi yang sama dengan 174 Surat Kabar. Itu bukan kesalahan. Kami sedang memproses ribuan halaman informasi setiap hari, melalui membaca, mendengarkan dan menonton.

Sebagai perancang profesional, Anda tidak akan pernah mendapatkan kesempatan untuk memainkan peran yang lebih besar dalam cerita ini daripada dengan mengatur informasi visual dengan cara yang paling mudah dicerna dan komprehensif.

Membawa perintah untuk kekacauan adalah apa yang hirarki tipografi bahas semua. Dari perspektif desain, tidak ada tugas yang lebih besar atau lebih penting dari itu.

sumber: 99designs.com

- Advertisement -

Latest articles

7,350 Followers
Follow

Related articles