Başlıklar içeriği tanıtır.
Okuyucuların okumaya devam etmesini, tonu ayarlamayı veya bir başrolü bir arada tutmasını sağlamak için grafik temelli başlıklara birçok efekt ve püf noktası uygulayabiliriz.
Ancak bazen görsel ağırlık ve düzeni değiştirmek gibi en belirgin teknikler çok daha iyi çalışır.
Çakışan başlıklar küçük bir miktar büyük metin kullanır ve düz bir başlıktan daha fazlasını iletmek için büyük miktarda küçük bir metin kendi başına yapabilir. Sesler çelişkili mi? Sadece iyi noktaları görmezden gelirseniz.
Çakışan metinle nasıl unutulmaz başlıklar oluşturmayı öğrenmek için okumaya devam edin.
Yukarıdaki garip şekiller “WDD” ve ““ isimleriyle ne yapmak zorundadır? ” {$lang_domain} “? Bunlar, yerleştirme veya ayrıntıya bakılmaksızın bir metnin üzerinde bir metin koymasından talihsiz eserler. İşte rahatsız edici görüntü:
Bir bakışta, yukarıdaki grafik bir blog isminin ve kısaltmasının basit bir sunumudur. Yazı, blog tarafından kullanılan resmi bir yazıdır; parlak turuncu doğrudan web sitesinin temasından geliyor; ve her iki metin satırı da neredeyse mükemmel bir şekilde ortalanır.
Blogun tarzına göre bile yazılmakta ve büyük harfle yazılmaktadır. Ancak, üst üste gelen tekniği uzun bir metnin üzerine kısa bir çizgi ekleyerek taklit etmek amatör bir girişimdir. (Bu örnekteki zayıflıklar abartılı olmamakla birlikte abartılıdır.)
Yukarıdaki gölgeleme, iki metin parçasının yarattığı yeni şekilleri ortaya çıkarmaktadır. İki çizginin her biri ile nasıl bir ilişkisi vardır ve okundukları sıra, nasıl oluşturulduklarına bağlıdır. Üst üste binen metni diğerinin üzerine koymaktan daha fazlası var.
Elbette üst üste binme, her zaman kısa bir başlık ve uzun alt başlık düzenlemenin en iyi yolu değildir.
Aşağıdaki örnekler, bir tasarım normalden daha yaratıcı bir şey istediğinde bazı olası tedavileri göstermektedir. h1
ve h2
elementler.
Çakışan metin, HTML ile kolayca çoğaltılamayan bir zarafete sahiptir (henüz). İki metin satırı, genellikle her birinin ayrı ayrı toplamından daha fazladır.
Çakışan metin, birbirine karşı iki satır türünü karşılaştırır. Büyük metin, genellikle daha fazla kelime içeren küçük metnin arkasına yaslanır. Zor bölümler, her iki hattın da eşit olarak okunabilir olmasını sağlayarak, her ikisinin de birbirine karşı değil, birlikte çalışmasını ve tüm paketi konu üzerinde tutmasını sağlıyor.
Farklı teknikler çakışan metnin etkisini değiştirir.
Çakışan metni etkileyen dört ana faktör şunlardır:
Ziyaretçilerin yazı okumasını istediğiniz sıra, yazı dizilerinin nasıl düzenleneceğini belirlemede en önemli faktördür. İngilizce, soldan sağa bir dildir, soldaki küçük metin sağdaki küçük metinden önemli ölçüde farklıdır.
Sol üst köşedeki küçük metinle, yukarıdaki grafik şöyle okur: “Onları veba gibi önlemek. Klişeler. ”Yine de,“ klişeler ”o kadar büyük yazılıyor ki insanlar önce onu okuyabiliyorlar. Boyut ve yerleştirme arasındaki denge, iki çizgiyi eşit olarak atar.
Yukarıdaki sürüm daha az belirsizdir. Küçük metni sağ alt köşeye yerleştirmek, büyük metne açık bir öncelik verir. Şimdi şöyle yazıyor: “Klişeler: Onları veba gibi kaçının”.
Yukarıdaki başlıklar birbiriyle değiştirilebilir, çünkü her satır az çok bağımsızdır. Çizgiler birbirine bağlı olduğunda, yerleştirme daha önemlidir. İşte fakir bir işe bir örnek:
Sağ alttaki küçük metni koymak okuyucuyu asılı bırakır. “Veba: gibi klişelerden kaçının…”? Çoğu insan bunu anlamaya çalışsa da, tereddüt anı bir vasat ve iyi bir sunum arasındaki farktır.
Yukarıdaki düzenleme en iyisidir çünkü küçük metin cümlenin ilk kısmıdır. Küçük metni sağa koymak istiyorsak, büyük metnin cümlenin ilk bölümünü oluşturması gerekecektir. Ama yine, bir aksama var.
Metne bağlı olarak, büyük metnin ilk kelimesini kullanmak yeterli değildir, çünkü metnin satırları tek tek ve birlikte çalışmalıdır. Yukarıdaki metin ifadeyi yanlış ayırır. “Kaçınma” emrindeki fiil, bağımsızlığı garanti altına almak için kendi başına yeterli anlama sahip değildir. Ve “veba gibi klişeler”, her ikisinden de kaçınmaktan ziyade, fazla kullanılan cümleleri hastalıkla karşılaştırdığımıza benziyor. Tüm grafik değişikliklerin anlamı.
Büyük metinleri sığacak şekilde küçültmek zorunda kalsak bile, büyük metin için iki kelimeyi (tam bir ifade) kullanarak her iki satır da daha iyi okunur.
Çakışan metinle, düz yazı ile doğru ifadeyi almak, renk ve yazı tipi seçimi kadar önemlidir.
Büyük metnin amacı baskın olmakla birlikte, küçük metinleri de kolayca boğabilir. Ama bu her zaman kötü değil. İyi bir denge, büyük metnin küçük metne hakim olmasını engellemekten ziyade, göreceli önemlerini göstermekle ilgilidir.
Büyük metnin büyüklüğü onu doğal olarak ifade eder. Küçük metnin sadece büyük metni desteklemesi gerekiyorsa bu harikadır. Örneğin:
“WWW” önce atlar. “Dijital çağa hoş geldiniz” fikri üç W'yi destekleyen fikir üzerinde duruluyor. Ama eğer küçük metin ana mesajı taşıyacaksa?
Yukarıda, ana metin “Dijital çağa hoş geldiniz” dır. Peki bu ne anlama geliyor? Ardından, “WWW”, bir ipucu verir.
Büyük metin arka plana ne kadar çok karışırsa, daha az önemi vardır. Büyük metin zorlukla göründüğünde, küçük metin ana öğe olur.
Bir yazı biçiminin şekli, farklı görünümünün anahtarıdır. İki metin satırı çakıştığında, cepler, garip şekiller ve diğer ince dikkat dağıtıcıları oluştururlar.
Yukarıda, büyük turuncu ve küçük beyaz metin, sayaçlara gereksiz bir karışıklık katar (yani harflerin içindeki delikler). Yalnız, her ekstra bit okunabilirliği fazla engellemez. Ama bu sorunun bir parçası: çünkü metni okunaksız hale getirmek için yeterince kötü olmadıkları için, önemsiz oldukları için kolayca kovulabilirler.
Azami okunaklılık için, küçük metnin harflerini korumalıyız.
Yukarıda gösterildiği gibi, hafif ayarlamalar girişimi temizledi:
Amaç, okuyucular fark etmese bile küçük harflerin şekillerini korumaktır.
Her yazı tipi büyük ve küçük boyutlar için uygun değildir. Yeterince küçük bir boyutta, bir yazının ayrıntıları kaybolabilir. Büyük boyutta büyütülmüş detaylar bazen sıra dışı sorunlar yaratabilir.
Yukarıdaki dört yazı tipi kombinasyonu farklı nedenlerle başarısız oluyor:
Çakışan metin, büyük yazı tipini hem metin hem de arka plan olarak düşünün. Harfler ne kadar karmaşıksa, o kadar dokuya dönüşürler. Yani, küçük metindeki mektup formlarını gizleme olasılıkları daha yüksektir.
Sorunlardan kaçınmak için şişman veya zayıf olun. Ekstra kalın ve ekstra hafif şekiller, aynı yüzün normal ağırlığından daha iyi çalışır. Her ikisi de daha az karışır çünkü küçük metin bir kenara daha az vurma şansına sahiptir.
Örneğin, yukarıdaki Açık ve Siyah varyasyonlardaki büyük metin daha az küçük harfe çarptı. Tabii ki, her yüz - ve her kelime dizisi - farklıdır. Ancak genel olarak, orta ağırlıklar, ince ve kalın ağırlıklardan daha fazla soruna neden olur.
Bu daha muhtemel metinlerle nasıl çalışır? İşte çakışan metnin birkaç örneği.
Neden çalışıyor: Arka plana doğru soluklaşan büyük metin, küçük metne açık bir öncelik veriyor. Museo'nun geometrik şekilleri çok az dikkat dağıtıcıdır.
Potansiyel problemler: Eğer bu küçük metin daha kısa olursa, bu çakışma pek işe yaramaz. Mesajı taşımak için, küçük metnin büyük metnin altı harfinin üst üste gelmesi gerekir.
Neden çalışıyor: Küçük metin yalnızca üç kalın ve iki ince renk vuruşundan geçer. Sıcak renk paleti için bile bol bol kontrast.
Potansiyel problemler: Büyük metnin enerjik kenarları küçük metnin zarif çizgilerine karşı çalışıyor gibi görünüyor.
Neden çalışıyor: Her iki metin satırı keskin geometrik şekillere sahip ve hassas bir şekilde hizalanmış.
Potansiyel problemler: Küçük metin biraz kayıp mı görünüyor? Yazı tipleri gerçekten “ruhu yansıtır mı?” steampunk ?”
Neden çalışıyor: Her iki metinde de büyük harflerle ve temiz satırlarda cömert izleme, her karakteri netleştirir.
Potansiyel problemler: Arkaplan dokusu okumayı çok zorlaştırıyor mu?
Neden işe yarıyor: Kalın büyük metin kendi başına okunabilir, küçük bir metin ise okumaya davet ediyor. Birkaç ilave dolgu, “S” harflerinin renk derinliğini korur.
Potansiyel problemler:
Bu dersleri orijinal kompozisyonumuza uygulayalım.
Neden çalışır:
Ben Gremillion tarafından Webdesigner Deposu için özel olarak yazılmıştır . Ben, iletişim sorunlarını daha iyi tasarımla çözen bir web tasarımcısı.
Son örneğin potansiyel problemlerinden bazıları nelerdir? Lütfen düşüncelerinizi aşağıdaki yorumlarda paylaşın.