Bu haftanın başlarında , web siteniz için nasıl yazılacağını konuştuk , böylece insanlar onu okumak isteyecekti. Peki metninizin sayfada gerçekte görünme şekli ne olacak? Kelimeler bir yana, metin, tıpkı resimleriniz, renkleriniz ve şablonunuz gibi web sitenizdeki başka bir görsel öğedir. Ve diğer görsel öğeler gibi, metnin de web sitenizi ziyaret eden kişiler tarafından anlaşılır ve erişilebilir olmasını sağlayacak şekilde düzenlenmesi ve stillendirilmesi gerekir. Web sitesi metni için mantranız “okunabilirlik, okunabilirlik, okunabilirlik” olmalıdır. Metin okunabilirliğine odaklanma “Okunabilirlik” temel olarak insanların kelimeleri, cümleleri ve paragrafları tanımasının ne kadar kolay olduğunun bir ölçüsüdür. Kullanıcıların web sitenize ne kadar hızlı baktıklarını göz önünde bulundurarak, okunabilirlik sayfanızda ne kadar süre harcayacakları ve söyleyeceklerinizi bile okumaya çalışıp çalışmayacakları konusunda önemli bir faktör haline gelir . Ekranlarda okumak zor. Farklı çalışmalar , insanların bir ekranda sunulduğunda daha yavaş, daha az doğru okuduklarını ve okuduklarını daha az hatırladıklarını bulmuştur . Bazı tahminlere göre, web sitesi ziyaretçileri sitenizdeki metnin yalnızca% 25'ini okur . Okunabilirliğin önündeki herhangi bir engel (çok küçük metin, okunması zor bir yazı tipi rengi veya düzensiz satır uzunlukları) bu yüzdeyi daha da azaltacaktır. Dolayısıyla, metninizi okunabilir tutmak için ne kadar çok şey yapabilirsiniz, ziyaretçileriniz o kadar mutlu olacak ve bir süre daha fazla yapışmak isteyeceklerdir. Okuyucuların dikkatini çekecek ve tutacak metinleri nasıl tasarlarsınız? İşte bakmak için bazı faktörler: 1. Hat uzunluğu 8,5 x 11 yaprak kağıttan okumayı büyütmüş olabiliriz, ancak ekran okumaya gelince, çizgi uzunluğunun çok daha kısa olması gerekir. Uzun metin satırlarıyla, insanların gözleri tüm kelimeleri almak için yan yana hareket etmelidir. Kaybolmak daha zor ve bir satırdan diğerine geçerken yerinizi korumak daha zordur. Bu iki web sitesini aynı metin ve yazı tipiyle karşılaştırın (16 pt Noto Sans): Çok uzun olan çizgi uzunluğu örneği Sütunlara ayrılmış metin örneği Web sitenizi oluşturun İlk örnekte satır uzunluğu 140 karakterdir. İkinci örnekte, bir Sütun öğesi ekledim ve metni bir tarafa, fotoğrafı başka bir tarafa koydum. Bu satır uzunluğunu 67 karaktere kısaltır. Okuyucular daha uzun bir metin satırını okumak için daha fazla yatırım olarak görürler, bu yüzden bu metni atlamaları daha olasıdır. Daha kısa satırlardaki aynı miktarda metin daha sindirilebilir ve davetkar görünür. Temel açılış sayfası metni için, doğru satır uzunluğu için birçok tahmin vardır , ancak çoğu kullandığınız yazı tipi boyutuna bağlı olarak 40-70 karakter uzunluğunda bir yere düşer . Bloglarda satırlar daha uzun olabilir, çünkü insanlar içeriğe daha derinlemesine dalarlar. Örneğin, bu blogun satır uzunluğu yaklaşık 115 karakterdir. Kendi metin satırlarınızın uzunluğunu anlamak için, metni kopyalayıp lettercount.com gibi bir araca yapıştırın . Not: Birçok Jimdo şablonu, geniş görüntüleri veya fotoğraf galerilerini göstermek için ideal kılan tam genişlikte içerik alanlarına (yukarıdaki örnekte Zürih şablonu gibi) sahiptir. Bununla birlikte, açılış sayfası metni söz konusu olduğunda, satırlarınızın tüm genişlikte yayınlanmasına izin vermemek en iyisidir. Metni bölmek ve daha kısa satırlar oluşturmak için Sütun öğelerini ve Fotoğraf öğelerini kullanmayı deneyin . 2. Kontrast Arka plan ve metin arasındaki renk kontrastı ne kadar iyi olursa, okunabilirlik de o kadar iyi olur. Web siteniz için, metnin kristal berraklığında olması için arka plan renginiz ve metin renginiz arasında yeterli fark olduğundan emin olun . Çok farklı renkler bile bir araya getirildiğinde kötü bir şekilde çatışabilir (aşağıdaki kırmızı ve mavi örnek gibi). Doğru renkleri seçme Jimdo'nun Stil Editörü ile, yazı tipleriniz ve arka planlarınız için renk seçme konusunda gökyüzü gerçekten sınırdır. Yaratıcılık için okunabilirliği feda etmediğinizden emin olun. Jimdo'nun web tasarımcılarından birinin söylediği gibi , “O zamandan beri beyaz kağıda siyah mürekkeple kitaplar basılmasının bir nedeni var.” Siyah ve beyaz sizin için çok heyecan verici görünüyorsa, her zaman gri, lacivert, kahverengi veya başka bir koyu renk deneyebilirsiniz. Farklı kontrast örnekleri Arka planınız ve metniniz arasındaki kontrastın, metnin okunması kolay olacak kadar güçlü olduğundan emin olun. Kırmızı ve mavi gibi bazı renk kombinasyonlarını okumak özellikle zordur. Koyu arka planlar üzerinde açık renkli metin Diğer yöne gidebilir ve açık renkli koyu bir arka plan seçebilirsiniz , ancak bu en iyi küçük dozlarda kullanılır. Yeterli kontrastla bile, okunacak çok fazla metniniz varsa bu kombinasyon gözler üzerinde yorucu olabilir. Bu rotaya gidiyorsanız, açık bir arka plan üzerinde koyu renkli bir yazı tipinin aynı okunabilirliğini elde etmek için yazı tipini büyütmeniz gerekir. Koyu arka plan üzerinde beyaz metin örneği Koyu bir arka plandaki açık metinler küçük dozlarda güzel görünebilir, ancak çok fazla metin varsa veya metin çok küçükse kombinasyon gözü zorlayabilir. Bağlantı renkleri Stil Düzenleyiciyi kullanarak bağlantılarınızın rengini de ayarlayabilirsiniz . Metninizi tamamlayan ancak yine de göze çarpan bir renk seçin, böylece insanlar bir bağlantıyı gördüklerinde tanıyabilir. Renk kombinasyonlarınızdan emin değil misiniz? Her zaman ikinci bir görüş almanıza yardımcı olur. Bir renk şeması seçmek için Jimdo'nun Stil Düzenleyicisi'ni kullanırsanız, iyi çalışan bir renk kombinasyonuyla başlayacağınız güvenli bir bahistir. Sizin için kontrastı ölçen ve kabul edilebilir bir aralıkta olup olmadığınızı söyleyen çevrimiçi web erişilebilirlik araçlarını da kullanabilirsiniz . 3. Beyaz boşluk Satır yüksekliği problemi örneği Bunun gibi ezilmiş çizgi yüksekliği okumak zor. Web sitenizde kalabalık olmaya gerek yok. Metninize rahat bir miktarda “beyaz boşluk” (boş alan) verin , okunması ve taranması çok daha kolay olacaktır . Bir düşünün; bir web sayfası açar ve sadece büyük bir metin bloğu görürseniz, muhtemelen hiçbirini okumaya bile uğramazsınız. Ancak metnin daha küçük, daha yönetilebilir parçalara ayrılmış olduğunu görürseniz, muhtemelen en azından bir bakışta olacaksınız. Boşluk ekleyin ve paragrafları ayırın Sitenizde daha fazla beyaz alan oluşturmak için Metin öğeleri arasına daha fazla yastıklama eklemek için Boşluk öğesini ve Yatay Çizgi öğesini kullanmayı deneyin. Ayrıca metni daha küçük paragraflara bölebilir veya madde işaretli / numaralı listeler ekleyebilirsiniz. Çizgi yüksekliğinizi ayarlayın Gövde metninizin satır yüksekliğini artırmak için Stil Düzenleyici'yi kullanın (bu, metin satırları arasındaki beyaz boşluk miktarını ayarlar). Satır yüksekliğinizin ne olması gerektiğine ilişkin tek bir kural yoktur; kullandığınız yazı tipi ve yazı tipi boyutuyla en iyi görünen şeye göre bunu ayarlamanız gerekir. Çizgi yüksekliği nasıl ayarlanır Düzenleme Modunda paragraf metninizin satır yüksekliğini ayarlayabilirsiniz. Aşağıdaki örnek web sitesinde, hem resimlerin hem de metnin çevresinde çok miktarda boş alan var. Bu bir uyum ve görsel hiyerarşi duygusu yaratır (önce neye bakacağınızı ve okuyacağınızı biliyorsunuz). Tasarımcının sağ taraftaki metindeki satır yüksekliğini nasıl artırdığına dikkat edin, bu da daha küçük yazı tipinin daha kolay okunmasını sağlar. Beyaz boşluk kullanan web sitesi örneği Bu tam örnek web sitesini görüntüleyin. 4. Hizalama ve “pürüzlü kenarlar” Metin öğelerinde, metni sola, sağa, ortaya veya iki yana yaslama yapma seçeneğiniz olduğunu görürsünüz. Doğru hizalamayı seçin Sola hizalanmış metin hemen hemen altın standarttır. Gövde metni için orta veya sağ hizadan uzak durun. Ortalanmış metin, başlıklar ve başlıklar için iyi çalışabilirken, birkaç satırdan fazlasını okumak zor . Çünkü her metin satırının başlangıç yeri her satırla değişir, yani okuyucuların her satırın başlangıcını bulmak için arama yapmaları gerekir. Sola hizalanmış ile ortaya hizalanmış metin karşılaştırması Sola hizalanmış metni, ortalanmış hizalanmış metinden okumak daha kolaydır, çünkü her satır aynı yerde başlar. Ortaya hizalama ile okuyucu her satırın başlangıcını aramalıdır. Metninizi yaslamak çok düzgün, tekdüze paragraflar oluşturabilir. Ancak metninize bağlı olarak, kelimeler bazen uzatılmış veya doğal olmayan görünebilir. Sağ kenarınızı düzenleyin Bir Metin öğesinin stillerini ve yazı tipi boyutlarını ayarlıyorsanız, sola hizalansa bile, sağ tarafın biraz düzensizleştiğini görebilirsiniz. Normalde bu, metin kopyalanıp yapıştırıldığı ve metinde gerçekten göremediğiniz "sabit dönüşler" veya sekmeler içerdiği için olur. Bu size oluyorsa, bu fazladan boşlukları silerek manuel olarak düzeltebilirsiniz: Metin öğelerinizde hizalama doğru değilse (kırmızı oklara bakın), genellikle yalnızca fazladan boşlukları silerek manuel olarak düzeltebilirsiniz. Metin öğelerinizde hizalama doğru değilse (kırmızı oklara bakın), genellikle yalnızca fazladan boşlukları silerek manuel olarak düzeltebilirsiniz. Not: Metin öğelerinize metin kopyalayıp yapıştırıyorsanız ve bunların tümü farklı görünüyorsa, biçimlendirmeyi kaldırmanız gerekir. 5. Yazı tipi boyutu Gerçekten iyi bir görme yeteneğiniz varsa, kendinizi arkaya vurmak için bir dakikanızı ayırın ve hemen web sitenizdeki yazı tipi boyutlarını kontrol edin. Tamamen normal görünen bir şey, birçok okuyucunun başlarını kısarak ve çizerek olabilir. Web'de göreceğiniz tipik bir kural, gövde metninizi en az 16pt tutmaktır. Bu, başlamak için iyi bir yer, ancak bu sayının tamamen kullandığınız yazı tipine bağlı olduğunu unutmayın . Yazı tipi boyutları arasındaki farklara örnek Yazı tipleri BenchNine, solda ve Ubuntu, her ikisi de 16pt'de gösteriliyor, ancak çok farklı sonuçlar veriyor. Yukarıdaki örneklerin gösterdiği gibi, kendi metninize dikkatle bakmanın ve kendiniz yargılamanızın yerini tutamaz. Daha da iyisi, bazı kullanıcı testlerinde size yardımcı olacak birkaç arkadaş edinin . Web sitenizi oluşturun 6. Yazı Tipi Stili Seçebileceğiniz 600'den fazla Google Web Yazı Tipi ile doğru yazı tipini nasıl seçersiniz? İşte temel bir tarif: Başlıklar: stilize edilmiş bir “eğlenceli” yazı tipi seçin. Başlıklar büyük, kısa ve az kullanılmış olduğu için, okunması biraz daha zor olan, ancak görsel ilgi uyandıran bir yazı tipinden kurtulabilirsiniz. Paragraf / Gövde Metni: düz bir vanilya sans serif yazı tipi seçin. Bunlar ekranda okunacak şekilde tasarlanmıştır, böylece paragraflarda ve daha küçük boyutlarda sorunsuz ve kolay bir okuma deneyimi sağlarlar. İyi seçenekler Open Sans, Roboto, Ubuntu, Lato ve Noto Sans (bu örneklerde kullanılan yazı tipi). Gezinme Menüsü: İlk iki yazı tipinizden birini burada kullanabilir veya diğer ikisini tamamlayan bir üçüncüyü seçebilirsiniz. Gezinme menülerinin okunması kolay olmalıdır, bu nedenle kişiliğe sahip bir şey seçin, ancak el yazısı veya dekoratif yazı tiplerinden uzak durun. Birkaç kelimeden daha fazlasını yazıyorsanız, tüm büyük harflerden uzak durun. Büyük harfler gezinme çubukları ve kısa başlıklar için mükemmeldir, ancak cümleler içinde okunması zordur. Daha fazla öneri için Google web yazı tiplerindeki blog yayınımıza göz atın . Sonuç: okunabilirlik kontrol listeniz Web sitenizin metnine çok fazla düşünce eklediniz ve içeriği yazmayı tamamladıktan sonraki adım, metni mümkün olan en net şekilde sunduğunuzdan emin olmaktır. İncelemek için, web sitenizi oluştururken göz önünde bulundurmanız gereken okunabilirlik faktörlerinin bir kontrol listesi : Satır uzunluğu: Açılış sayfalarınızdaki metin satırlarınızı 70 karakterden daha kısa tutmak için sütunları ve resimleri kullanın. Blog yayını metni biraz daha uzun olabilir. Kontrast: Arka planınız ve metin renginiz arasında yeterli fark olduğundan emin olun. Beyaz boşluk: Kullanın! Kısa paragraflar, madde işaretli listeler ve Aralık öğeleri başlamak için iyi bir yerdir. Hizalama: Sola hizalanmış metni kullanın ve paragraflarınızın sağ kenarını düzgünleştirmek için zaman ayırın. Yazı tipi boyutu: Tüm yazı tipleri aynı boyutta değildir, bu nedenle paragraf metniniz için 16pt kullansanız bile, çok küçük olabilir. Okumanın rahat olduğundan emin olmak için 20/20 vizyonu olmayan biriyle görüşün. Yazı tipi stili: Şüphe duyduğunuzda paragraf metniniz için bir Sans Serif yazı tipi kullanın. Ekranda iyi çalışacak şekilde tasarlanmıştır. Siyah kullanmak istemiyorsanız, lacivert, kahverengi, gri veya başka bir koyu renk deneyin. Bu ipuçlarını izleyin ve kısa sürede çekici, davetkar ve okunması kolay bir web sitesi oluşturabilirsiniz, bu da gerçek mesajınızın parlamasını sağlar.
