Isi
Artikel ini pertama kali muncul di edisi 229 majalah .net - majalah terlaris di dunia untuk desainer dan pengembang web.
Salah satu hal terpenting yang dapat Anda fokuskan saat mengatur tata letak halaman dalam HTML / CSS adalah ritme vertikal - pola visual tempat blok jenis atau garis bentuk saat Anda memindai halaman.
Hal-hal lain dapat mempengaruhi ritme ini seperti judul, item daftar, gambar, dan sebagainya. Memiliki ritme vertikal yang baik adalah yang terpenting karena membantu keterbacaan dan kemampuan pindai halaman Anda.
Ada beberapa tutorial bagus (Lihat di sini dan di sini, misalnya) di web di mana Anda dapat menemukan tentang bagaimana secara teknis mencapai ritme vertikal yang tepat dengan menggunakan ems untuk tinggi baris Anda dan mempelajari tentang apa yang menjaga tipe Anda 'dalam fase' cara.
Hirarki
Hal dasar yang harus diperhatikan adalah ketinggian garis antara elemen dan hierarki visual keseluruhan pada halaman. Menetapkan proporsi ketinggian garis yang tepat bisa menjadi latihan desain yang melibatkan tetapi penting untuk dikuasai. Hierarki juga penting, karena gambar dan elemen teks harus selaras satu sama lain secara visual - hal yang paling penting biasanya lebih besar dan menjadi yang pertama di halaman.
Desainer cetak telah berurusan dengan gagasan ritme vertikal selama bertahun-tahun dan hanya di masa lalu desainer web harus benar-benar masuk ke dalam hal ini. Dengan kebutuhan yang terus meningkat untuk membangun situs web menggunakan tata letak kisi dan memperhatikan penerapan responsif untuk mengakomodasi berbagai lebar layar, kini lebih penting daripada sebelumnya dari perspektif desain visual, mungkin lebih dari sekadar teknis.
Lima contoh untuk dicoba
1. Elemen Gaya Tipografi Buku oleh Robert Bringhurst ini adalah standar untuk studi tipografi. Bacalah, konsumsilah, tuangkan ke dalam otak Anda sebisa Anda.
2. Frank Chimero Selain benar-benar luar biasa secara umum, desain ulang situs web pribadi desainer Frank Chimero baru-baru ini menunjukkan ritme vertikal yang luar biasa. Dia menggunakan efek paralaks untuk membantu mengarahkan ritme ke rumah saat Anda menggulir halaman ke bawah juga.
3. Dan Cederholm Untuk contoh bagus dari ritme vertikal tipografi yang bagus, lihat blog Dan Cederholm. Tinggi baris salinan dan tajuk berita memiliki proporsi yang sempurna.
4. Lab Fokus Perusahaan desain web dan branding Focus Lab menggunakan hierarki dengan cekatan untuk membantu mengkomunikasikan apa yang paling penting bagi pengunjung.
5. Typofonderie Situs web untuk Typography Studio Typofonderie memiliki ritme vertikal yang bagus dengan gambar dan teksnya. Jarak antar elemen proporsional di seluruh situs web dan hierarki antara gambar utama dan gambar / bagian sekunder sempurna.
Temukan 10 contoh desain eksperimental yang menakjubkan di Creative Bloq.
