Modern Web Siteleri İçin Tipografiye Bir Bakış

Dijital metin pek çok lezzetle biçimlendirilebilir. Web fontlarının ve tarayıcı komut dosyalarının daha da gelişmesiyle birlikte, geliştiricilerin kullanması için yeni proje kodu gördük. Web tasarımcıları da, web sitelerini kodlamak ve tüm sayfaları arasında tek tip bir tipografik stil oluşturmak için en iyi stratejiyi arıyor.

Birçok profesyonel web tasarımcısı, güncellenmiş özellikler ve hizmetler dahil olmak üzere bu konuda yazmışlardır. Her web sayfasını, kök düzen tasarımınızı bozan tekil bir belge olarak düşünmelisiniz. Bu görüş altında, tipografinin sayfadan sayfaya nasıl aktığını görmek ve yaratıcılık için benzersiz bir çıkış yolu sunmak kolaydır. Ve bu özellikle paragraflarınız ve başlıklarınız için benzersiz sınıflar oluştururken belirginleşir.

Aşağıda, web için binaya ilgi duyan tipografi tasarımcılarını hedeflemek için bazı fantastik fikirlere gireceğim. Bloglar, sosyal ağlar ve işletmeler her zaman mevcut web sitelerini güncellemek istiyor. Web tipografi için CSS stilleri, sayfalarınızı yenilemeye başlamak için mükemmel bir kaynak sağlar.

Günümüz İnternetinde Farklılıklar

Modern web 2000'lerin başından beri çarpıcı bir şekilde ilerlemiştir. Web tasarımcılarının grafik tasarım, logolar, afişler ve pratikte başka her şey için harika eserler yaratmaları için birçok yeni özellik vardır. HTML5 ve CSS3 teknik özelliklerinin piyasaya sürülmesi, web fontları oluşturmanın eski şeklini de etkiledi.

Artık kendi fontlarınızı CSS'ye eklemek artık tamamen mümkün. @ Font-face özelliği. Herhangi birini kullanabilirsiniz TrueType(.ttf) veya OpenType(.otf) dosyasını kopyalayın ve yerel olarak sunucunuzda saklayın. Daha sonra bazı CSS3 sihirleriyle, web sayfanızda herhangi bir yerdeki aileyi ekleyin!

Tek başına bu teknik altında modern internetimizin ne kadar geliştiğini görmek mümkündür..

Ve her geçen gün popülaritesinin artması jQuery ile, özel fontlarla birleştiğinde şaşırtıcı animasyon efektleri geliştirmemiz şaşırtıcı değil. JQuery için TTFGen eklentisi üzerindeki yönteme alternatif olarak, web sayfanıza herhangi bir TrueType yazı tipi eklemenizi sağlar.

Bu yöntem biraz daha güvenilirdir, çünkü çalışması için CSS3 standartlarını destekleyen modern bir tarayıcıya ihtiyacınız yoktur. Ancak, tabii ki Internet Explorer 6 gibi eski tarayıcılar düzgün bir şekilde işlemeyi zorlaştıracak.

Fakat şükürler olsun ki, çoğu kullanıcı bu standartları destekleyen daha yeni bir tarama yazılımına geçti! Ve web için geliştirirken, pazarınızın tam olarak kim olduğunu düşünmelisiniz. Her zaman herkesi memnun edemezsin, ama yeterince yakın olmaya çalışabileceğinden emin olabilirsin..

Dijital Tipografinin Amacı

Dikkate alınması gereken garip bir fikir dijital metnin asıl amacı nedir? Bilgi aktarmak, kaynakları paylaşmak ve İnternet kullanıcılarının dünyasına fikrinizi sunmak için. Metin, düşünceleri ve fikirleri paylaşmak için en basit medya biçimidir.. Ancak bu aynı zamanda çok karmaşık ve fotoğrafların / videoların kullanamadığı önemli detaylar içeriyor.

Ziyaretçilerinizin web sitenizi metninizdeki veya başlıklarınızdaki anahtar kelimelere göre bulma olasılığı yüksektir - web kopyanıza dikkat etmeniz için başka bir neden. Ve bir kez web sitenize biraz dikkat edindikten sonra, bunların yoğunlaşmasını sağlamalısınız. Bu en kolay, koyu başlıklar ve çift aralıklı sayfa metni ile yapılır..

Bir makale veya eğitim yazıyorsanız, net dili kullanmanız gerekir. Onun Sayfa metninizin nasıl göründüğü ve içeriğinizin kalitesi aynı derecede önemlidir. Metniniz ne kadar büyük olursa, anahtar kelimeleri okumak ve taramak o kadar kolay olur. Paragraflar içeriğinizin çoğunu içereceğinden, doğru uyum için çok fazla zaman harcamanız gerekir. Paragraflar mesajınızı cümle haline getirilmiş bit büyüklüğünde parçalar halinde iletmek için kullanılır. Uygun bir sayfa düzeni elde etmek için nasıl yazdığınızı ve önceden planladığınızı öğrenin.

Ek olarak, sayfa metninizle birlikte medya ve ikincil içerik gelir. Paragraflarınız birincil bilgiler içeriyorsa, belki sayfayı hareketlendirmek için grafikleriniz veya resimleriniz olabilir. Bu aksan, kullanıcıları sitenizde dolaşmaya devam ettirmek için doğru dokunuştur.

Videolar ve görüntüler içeriğinizi bozabilir ve okuyucular makaleniz boyunca daha hızlı hareket ediyor gibi görünmesini sağlar. Ancak bu öğeleri dikkatli kullanın ve hiçbir şeyin temel mesajınızı boğmasına izin vermeyin. Kullanıcılar (çoğunlukla) sitenize bilgi almak için geliyorlar ve çok fazla dikkat dağıtmak istemiyorlar.

Diğer tüm biçimlendirme seçeneklerinde işlevsellik veya amaç belirtmek için kullanılır. Örneğin, köprü metni genellikle geri kalanından öne çıkandan farklı bir renktir. “tıklanabilir”. Cümlelerinize önem katan koyu veya italik sözcüklerle çalışabilirsiniz. Blok blokların veya önceden biçimlendirilmiş metnin kullanılması, sırasıyla temel ifadelerin veya web kodunun tanımlanmasına yardımcı olabilir.

Web Sayfası Başlıkları

Web tipografi için en önemli varlıklardan biri başlık etiketleridir. HTML başlıklarını bilmiyorsanız,

için

önceki holding en önemlisi ve en az ikincisidir. Google, etki alanınızı ve web sayfalarınızı içerik yapısına göre sıraladığından bu işaretlemeyi anlamakta fayda var. Böylece, hangi anahtar kelimeleri kullanacağınızı ve hangi başlık başlıklarına ihtiyaç duyacağınızı kontrol edebilirsiniz..

Standart HTML5 özelliği 6 farklı başlık stiline sahip olsa da, 3-4 arasında kullanmanızı tavsiye ederim. Hepsini sayfalarınıza dahil etmek gerekmez. Ayrıca 6 farklı başlık için de bir kullanım bulmamanız olası. Stillerinizi oluşturmak için ilk oturduğunuzda, nelerden hoşlandığınızı görmek için başlıklar için birkaç örnek hazırlamayı deneyin..

Photoshop bu senaryo için mükemmel. Tarayıcıda nasıl göründüklerini görmek için HTML'deki farklı başlıkları kodlamayı da deneyebilirsiniz. Önemli olan sayfa akışınızla çalışmak ve sıralamalarına göre tasarım başlıkları oluşturmak.

Örneğin,

etiketler, tüm sayfa başlıklarınız arasında en çok öne çıkması gerekir.

ve

en popüler etiketlerdir ve Google tarafından sayfa içeriğini taramak için önerilir. Kalın yazı tipi, altı çizili, çizgili kenarlık veya farklı renkler gibi tasarım efektlerini kullanmak, başlıklarınızın sayfadan atlamasına yardımcı olur.

Boşluk da önemlidir Konuya ilişkin başlıklara veya içeriğinizin herhangi bir bölümüne gelince. Başlıklarınızla ana içerik alanı arasına ek kenar boşlukları eklediğinizden emin olun. Yazı tipinizi yeterince büyük yaptıysanız, her başlık kendi çekirdek bloğu olarak göze çarpmalıdır. Okuyucularınızın dikkatini net bir mesajla almak istiyorsanız bu görünüm idealdir..

Benzersiz Köprüler Oluşturma

Sayfa bağlantıları konusunda söylenecek çok şey var. Öyle ya da böyle, kodunuzda köprüler kullanmanız gerekecek. Sitenizdeki farklı sayfalar arasındaki ana gezinme arayüzü olarak son derece önemlidir. Ayrıca daha sonraki bir tarihte başvurmak üzere diğer bloglara ve hatta arşivlenmiş blog yayınlarınıza bağlantı verebilirsiniz..

Bağlantınız için tutma metnini çok dikkatli seçmelisiniz. Bu, bir bağlantı stili tarafından vurgulanacak belirli bir içeriktir. Örneğin, "buraya tıklayın" çok popülerdir ve çoğu zaman doğrudan indirmeler için kullanılır. Bu sistematik yaklaşımdan kaçınmaya çalışın ve bunun yerine köprü metninizle biraz yaratıcı olun. İçeriğinizi tanıyabilirlerse ve belki de yeni sayfanın ne içerdiğini bulabilirlerse, ziyaretçileriniz bir bağlantıyı tıklatma ihtimalleri çok daha yüksektir.

Bağlantılarınızı şekillendirirken aşağıdakileri göz önünde bulundurmalısınız. - sayfa kurulumunuzdaki değişiklikler nasıl görünür, ne tür bir arka plan rengi üzerinde çalışıyorsunuz, ve metin kontrastı ne renk?

Bağlantılar sayfadan açıkça tıklanabilir öğeler olarak görünmelidir - sonuçta bu onların işlevidir. Bu nedenle, altı çizili metin efektli eski mavi çok iyi çalışıyor. Ancak alternatif bir rengin daha iyi çalıştığını görürseniz denemelisiniz. Bağlantı tasarımları için tek bedene uygun bir çözüm yoktur. Sadece web’e biraz göz atın ve olağanüstü bir şeyler bir araya getirin.

İlgi çeken noktalardan biri, denemeniz gereken birkaç özellik. kaçınma. Metin font ailesini veya font boyutunu değiştirmek gibi şeyler çok can sıkıcı olabilir. Bu, metnin bozulmasına ve hareket etmesine neden olur; bu, fare imlecini bağlantı alanının dışına yerleştirebilir. Benzer şekilde, bağlantılarınıza veya vurgulu efektlerinize ekstra kenar boşlukları / dolgu eklemekten kaçınmalısınız. Basit kaldığınızda bunlar daha iyi çalışır. Renk değişimi veya alt çizgi eklenmesi, kullanıcı deneyiminde çok yol kat ediyor.

Tarzlı Listeler Oluşturma

Şanslar iyidir, ayrıca bir noktada listelerde çalışmak zorunda kalacaksınız. Dahil HTML'de hem sıralı hem de sıralanmamış listeler bulunur. Bunlar çok küçük bir alanda küçük bir fikir koleksiyonu, ürünler, insanlar veya çevrimiçi bağlantılar sunmak için mükemmeldir. Stil, paragraflardan veya başlıklardan farklı değildir..

Ziyaretçileriniz bir öğe listesine baktığını hemen anlamalıdır. Her bir liste öğesini ayrı tutun ve sayfanızdaki yeni bir satırda bulunsun. Mümkünse, aralarında biraz boşluk ekleyin. Bu, bir miktar nefes alma odası sağlayacaktır ve makale metni için güzel bir ayrılık olarak görünecektir. İsterseniz fontu kalın ya da girintili listeleri standart mizanpaj marjlarından uzak durmak için biraz daraltabilirsiniz..

Listenizin öne çıkmasına yardımcı olacak ek özellikler eklemek bir zorunluluk değildir. Ancak blok düzeni stilinden hoşlanıyorsanız, listelerinize gerçekten odaklanın. Açık renkli bir arka plan veya simge eklemeyi deneyebilirsiniz. Bir Liste Apart'ın, bazı çok güçlü bilgi başlıklarını içerdiğini düşündüğüm evcilleştirme listelerinde harika bir yazı vardır. Ancak sayfa içeriğini doğrusal tutuyorsanız ve yalnızca gerektiğinde liste bloklarını kullanıyorsanız, herhangi bir tasarım engeline girmemelisiniz.

Sayfa İçi Fiyat Teklifleri Nasıl Oluşturulur

Alıntılar ve alıntıların ortaya çıkışı bugünlerde çok sınırlıdır. İlk ağda, kullanımda bu elementlerin çoğunu göremezsiniz. Belki başyazılarda, denemelerde veya eğitim yazılarında. Ancak HTML5 kesinlikle kuralları biraz güncellemiş, bu da alıntı alıntılarını çok daha kolay hale getirmiştir..

HTML5 Doctor web sitesi, bu konuyu tartışmak için etkileyici bir kaynak içerir. Blockquotes içindeki içeriğin, belge yapısında göründüğü şekilde kullanımını tartışırlar. Böylece başlıklar, paragraflar ve hatta listeler ve altbilgiler de ekleyebilirsiniz. Bir ana kullanımı