İçerik
Bu makale ilk olarak web tasarımcıları ve geliştiricileri için dünyanın en çok satan dergisi olan .net dergisinin 229. sayısında yayınlandı.
HTML / CSS'de bir sayfa düzenlemek söz konusu olduğunda odaklanabileceğiniz en önemli şeylerden biri dikey ritmdir - sayfayı aşağı tararken yazı bloklarının veya yazı satırlarının içine girdiği görsel desen.
Başlıklar, liste öğeleri, resimler vb. Gibi başka şeyler de bu ritmi etkileyebilir. İyi bir dikey ritme sahip olmak çok önemlidir çünkü sayfalarınızın okunabilirliğine ve taranabilirliğine yardımcı olur.
Web'de satır yüksekliğiniz için ems kullanarak ve tipinizi 'eşzamanlı' tutmanın ne olduğunu öğrenerek teknik olarak doğru dikey ritmi nasıl elde edeceğinizi bulabileceğiniz epeyce harika öğretici (örneğin buraya ve buraya bakın) var. anlamına geliyor.
Hiyerarşi
Dikkat edilmesi gereken temel şeyler, öğeler arasındaki satır yüksekliği ve sayfadaki genel görsel hiyerarşidir. Doğru çizgi yüksekliği oranlarını ayarlamak, ilgili bir tasarım alıştırması olabilir, ancak ustalaşmak önemlidir. Hiyerarşi de önemlidir, çünkü görüntüler ve metin öğeleri görsel olarak birbirleriyle uyumlu olmalıdır - en önemli şeyler genellikle daha büyüktür ve sayfada ilk sırada yer alır.
Baskı tasarımcıları uzun yıllardır dikey ritim fikrini ele aldılar ve web tasarımcılarının bu konuya gerçekten girmesi ancak yakın geçmişte kaldı. Izgara düzenlerini kullanarak web siteleri oluşturma ve birden çok ekran genişliğini barındıracak duyarlı uygulamalara dikkat etme ihtiyacının artmasıyla birlikte, görsel tasarım açısından her zamankinden daha önemli, muhtemelen sadece teknik bir bakış açısıyla.
Kontrol edilecek beş örnek
1. Tipografik Stilin Unsurları Robert Bringhurst tarafından yazılan bu kitap, tipografi çalışması için standarttır. Okuyun, tüketin, elinizden geldiğince beyninize dökün.
2. Frank Chimero Genel olarak kesinlikle şaşırtıcı olmasının yanı sıra, tasarımcı Frank Chimero'nun kişisel web sitesinin yakın zamanda yeniden tasarımı mükemmel bir dikey ritim sergiliyor. Siz de sayfayı aşağı kaydırırken ritmi eve götürmeye yardımcı olmak için bir paralaks efekti kullanıyor.
3. Dan Cederholm Tipografik dikey ritmin harika bir örneği için Dan Cederholm'un bloguna bir göz atın. Metin ve başlıkların satır yüksekliği mükemmel orantılıdır.
4. Focus Lab Web tasarım ve marka bilinci oluşturma şirketi Focus Lab, ziyaretçi için en önemli olanı iletmeye yardımcı olmak için hiyerarşiyi ustaca kullanır.
5. Tipofonderie Typography Studio Typofonderie'nin web sitesi, görüntüleri ve metinleriyle harika bir dikey ritme sahiptir. Öğeler arasındaki boşluk, web sitesi genelinde orantılıdır ve ana görüntü ile ikincil görüntüler / bölümler arasındaki hiyerarşi mükemmeldir.
Creative Bloq'ta 10 harika deneysel tasarım örneğini keşfedin.
