Tanınmış Özellik Mesajları Widget'ları için Mükemmel Fikirler ve Trendler

Başarılı bir çevrimiçi dergi yayınlamak için sağlam bir izleyici kitlesi ve çok sayıda kaliteli yazı gerekir. Ancak derginin düzeni aynı zamanda ziyaretçi katılımında önemli bir faktördür. Bir teknik bir oluşturmaktır öne çıkan yayınlar eklendi Ana sayfanın en üstünde. Bu, okuyucuları siteyi daha da ileri götürmek için en popüler makaleleri gösterir..

Bu gönderide başarılı bir özellikli yazı widget'ı oluşturmak için kullanılabilecek tasarım tekniklerini ele almak istiyorum. Bu widget genellikle dergi tarzı bir düzende en iyi şekilde çalışsa da, bunu daha küçük bloglara veya dinamik içerikli web sitelerine de uygulayabilirsiniz..

Tipografik Kontrast

Çoğu özellikli yazı, dikkat çekmek için küçük resimlere güvenir. Bu, genellikle her bir makalenin başlığına bağlı bir arka plan resmi biçimini alır..

Bu teknik harika görünüyor ama tipografi ve dinamik arka plan resimleri arasında fark edilebilir bir kontrast oluşturmak zor. Diğer dergileri inceleyerek okunabilirliği artırmak için ince teknikler seçebilirsin.

Next Web, ana sayfada öne çıkan bir yayın widget'ına sahip büyük bir çevrimiçi dergidir. Her küçük resim boyutu değişir ancak hepsi kullanır Gelişmiş kontrast için karanlık degradeler.

Makale başlıkları, karanlık degradelerin tepesindeki küçük resim bloklarının altına yerleştirilmiştir. açık metin koyu arka plan üzerinde tüketmek kolaydır, Yine de tüm görüntüyü kapsamaz..

CSS3'teki modern gelişmeler, geliştiricilerin bu etkileri kolaylıkla yeniden yaratmalarına izin verir. Sabit gradyanlar onları alabilirseniz mükemmeldir Her küçük resmin üzerine doğal olarak akın ve hala görüntünün yeterince gösteriş dikkat çekmek.

Digital Trends ana sayfasında biraz farklı bir teknik kullanılıyor. Bu gönderi widget'ını kullanır yüksek kontrastlı sağlam arka planlar her başlığı net ve canlı hale getirmek için metnin arkasında.

Buradaki fark, her bir arka plan renginin% 100 katı olmasıdır. Küçük resmin tamamını göremezsiniz küçük porsiyonlar görünümden kayboluyor. Ancak metin açıkça okunaklı ve dijital Trendler ana sayfasına ilk giren ziyaretçilere hitap edebilecek.

Doğru miktarda kontrast bulmak zordur. TechCrunch gibi bazı web siteleri bu sorunu tamamen gidermek için küçük resimlerin yanına metin yerleştirmeye çalışır.

Ancak, başlık metninin tasarım stilini bir minik resmin üzerine seviyorsanız, Kontrastın denklem içine nasıl etki ettiğini düşünün.

Sporadik Görüntü Boyutları

Öne çıkan bir gönderi widget'ının değeri özellik içeriği Sayfanın üst kısmında Asimetri, bir şeye dikkat çekmek için harika bir yoldur ve bu durumda asimetrik küçük resim boyutları harika çalışır.

Örneğin ZDNet'in ana sayfasını alın. Öne çıkan widget'larında sol taraftaki en büyük makale, daha fazla yer kaplamak ve umarım daha fazla dikkat çekmek için en küçük küçük resmi kullanır. Diğer özellikli küçük resimler, daha küçük başlıkları olan daha küçük boyutlara düşer.

Bu ızgara yapısının doğal olarak gözünüzü sayfa etrafında yönlendirdiğine dikkat edin. Her ziyaretçinin bakışları belirli bir alana düşme eğilimindedir, daha sonra bir şey atlayana kadar her küçük resim arasında hareket eder.

Ayrıca ZDNet bir karanlık degrade her küçük resim görüntüsünün üstüne tipografik kontrast oluşturmak daha fazla okunabilir metin için. Temel olarak şimdiye kadar gördüğüm en iyi özellikli yazı widget tasarımlarından biri.

CNET'in ana sayfasında çok benzer bir tasarım stili bulunabilir. Ziyaretçilerin çoğu soldan sağa okuduğundan, en küçük resim sol taraftaki yerini alır..

Kendi özellikli yazı widget'inizi tasarlarken, bu aynı tekniği uygulamak zorunda hissetmeyin. Yapışkan bir şekilde bir araya geldiklerinde ve birleşik ızgara düzeni oluşturdukları sürece herhangi bir küçük resimle gidebilirsiniz.

Özel Küçük Resim Stilleri

Tasarım seçenekleri mizanpajdan mizanpaja kadar çeşitlilik gösterir, bu nedenle mükemmel bir çözüm yoktur. Öne çıkan mesaj widget'ları tasarımı için kesinlikle daha karmaşıktır, bu nedenle özel bir düzene uyması için çalışma ve sabır gerektirirler.

Her minik resmin stili, tüm widget'in hedef kitlenize nasıl göründüğünü etkiler. Örneğin Verge’de bulunan özellikli widget stilini alın.

Her küçük resim, fotoğrafın üstünde renkli bir degradeye sahiptir. Bu, kontrastı artırır ve okunabilirliği artırır, ancak aynı zamanda web sitesine belirli bir yetenek katar.

Bazı insanlar bu tarzı sevmiyorlar çünkü onu şahane buluyorlar ya da çekici değiller. Ancak, Verge okuyucular arasında oldukça popüler olan ve diğer tasarımcıların da bu stili taklit ettiği.

Ancak renkler ve süslü teknikler dikkate alınması gereken tek faktör değildir. Ayrıca, genel özellikli yayınlar widget stilini tanımlamaya yardımcı olduklarından, ızgaralar ve küçük resimler de dikkatlice seçilmelidir.

Belki de en iyi örneklerden biri, Mashable'nin yıllar boyunca birçok aşamadan geçen tasarımıdır. Artık haberler için ana kaynak olarak kabul edilen Mashable, kolay gezinmek için ana sayfaya çok sayıda mesaj göndermeye çalışıyor.

Bazı yazılar küçük kare küçük resimler kullanır, ana büyük afiş de makaleye büyük bir tam boyutlu küçük resim başlığı koyar. Bu, tüm yazıların uygun fotoğraflarının doğru boyutlarda olmasını sağlamak için editörden ek çalışma gerektirmelidir..

Ancak siteye indikten hemen sonra bunu fark edeceksiniz. güvenilirlik duygusu verir. Bu tarz oldukça yaygındır ve okuyucu kitlesine güven oluşturmak için hemen hemen her tür çevrimiçi dergi tarafından kullanılabilir. Tek sorun, sayfayı doldurmak için yeterli içerik yazmak.!

Çoklu Gönderi Widgetları

Bazı öne çıkan yazı gereçleri, statik ızgara. Bu genellikle en popüler seçimdir, çünkü olabilir. duyarlı ve güzel karışımlar herhangi bir düzen içine.

Diğer widget'lar, slayt gösterisi gibi dinamik etkileşimlere dayanır. Örneğin, Vanity Fair ana sayfasını sayfanın üst kısmında bulunan özellikli yazı bloğuyla alın. Bir seferde yalnızca bir yayın gösterilir, ancak belirli bir başlığın üzerine geldiğinde yeni makaleler görüntülenir.

Hem küçük resim hem de başlık otomatik gezinme etkileşimi ile otomatik güncelleme. Unutulmaması gereken bir şey, bu dinamik vurgulu tekniğine aşina olmayan İnternet kullanıcıları için oldukça kafa karıştırıcı olabilir..

Ancak olumlu tarafta bu teknik yer aç Sayfada fazla içeriği gizleyerek.

Öne çıkan posta widget'larını siyah beyaz olarak düşünmemeye çalışın. Bunlar sadece en ilginç veya popüler makalelerin yer aldığı sayfa bölümleridir. Bu görevi yerine getirdiğiniz teknik (ler) her zaman tartışmaya açık olabilir.

Karmaşık dergi özellikli widget için tam bir slayt gösterisi ekranı kullanır. Her yayın tipografik kontrast için alt degrade ile birlikte özel bir küçük resme sahiptir.

Ancak her bir küçük resmi yan yana koymak yerine, makaleler dinamik olarak akış Slayt gösterisi kutusundan Navigasyon otomatik olarak ayarlanabilir veya ok bağlantıları ile kontrol edilebilir. Bu tasarım çok fazla alan kazandırır ve kullanıcıyı sayfa ile etkileşime daha istekli tutar.

Sarmak

Öne çıkan yazı ekranlarına gelince doğru ya da yanlış tasarım yoktur. Hepsi benzer özellikleri paylaşıyor, ancak her dergi öne çıkan içeriği düzenlemek için kendi stilini kullanıyor.

Umarım bu gönderi kendi öne çıkan gönderi widget'ınızı tasarlarken kullanacağınız pratik ipuçları sunar. Kendinizi sıkışmış hissederseniz, ilham almak için diğer dergilere bakın. Beğendiğiniz özellikleri bulun ve kendi dergi tasarımınıza harmanlayacaklarını nasıl çoğaltacağınıza karar verin..