Yayıncı Web Sitelerine Tasarım Yaklaşımları

"Dijital yayıncı web sitesi" nedir? Günlük olarak çok sayıda makale yayınlamaya odaklanan bir web sitesidir. Bu, "blog" un üzerinde bir düzeydir. Temelde bir haber sitesi veya BuzzFeed gibi viral bir yayın platformudur.

Böyle bir web sitesinin tasarım yaklaşımında ürün satışı, işletme, kişisel blog veya diğer herhangi bir web sitesine kıyasla bir fark vardır. Düzeni, genellikle tema pazarlarında oldukça doygun bir kategori olan "Magazine" stili olarak bilinir.

Bir Yayıncı Web Sitesini Farklı Kılan Nedir?

Bir yayıncı web sitesi ile daha düzenli olan arasında iki büyük fark vardır.

Bunlardan ilki, içerik miktarıdır. Şimdi, tabii ki, büyük web siteleri var, özellikle Amazon veya eBay gibi e-ticaret siteleri, büyük olasılıkla çok daha fazla içeriğe sahip, ancak bunlar site kullanıcılarından içerik alan platformlar. Yayıncılar, bir programa göre içerik üretmek için tam zamanlı çalışan editör ekiplerine sahiptir. Tıpkı bir gazetenin yaptığı gibi.

Diğer büyük fark gelir kaynağıdır. Coca Cola gibi bir şirket web sitesi gelirini siteden değil, ürünlerinden elde etmektedir. Çoğu şirket web sitesi, yalnızca dijital bir varlık olma amacına hizmet eder.

Bunu bilmek, muhtemelen bir yayıncının web sitesi gelirinin sitenin kendisinden geldiği açıktır. Nasıl? Reklamlar! Bu, Google veya Facebook'un gelirlerinin çoğunu nasıl elde ettiği.

Reklamlar, en kesin olarak, web'i yayınlar ve birçok web sitesinin ana önceliğidir. İçerikleri, reklamları düzenlerinde görebilmeleri için olabildiğince çok okuyucu getirmeye odaklanmıştır.

Tasarım açısından bakıldığında, bu, yayıncı ve dergi web sitelerinin ana önceliğidir.

Çok İçerikli Web Siteleri Tasarlamak

Variety gibi bazı büyük yayıncılara bir göz atalım:

İlk gördüğünüz şey en üstte büyük bir reklamdır. Bunu bir saniye içinde daha ayrıntılı olarak inceleyeceğiz - içerik düzeni. Birçok bağlantıya sahip büyük bir başlık - üstte hamburger, arama, harekete geçirme çağrısı ve hatta daha fazla menü öğesi. Amaç, tüm içerik kategorilerine kolay erişim sağlamaktır. Bu, 10 sayfadan daha az sayfaya sahip (blog sayfaları hariç) birçok iş sitesiyle tam bir tezat oluşturuyor.

Bundan sonra - ana makale için büyük bir kutu. Bu iyi bir tasarım kararı. Ziyaretçilerinizin ne yapacaklarına karar vermelerini kolaylaştırır. Eşit derecede önemli 10 unsur varsa, birini diğerine tercih etmenin zihinsel zorlaması, bazı kullanıcıların sayfadan çıkmasına neden olabilir. Bir tasarımcı, önemli veya daha az önemli öğelerin net bir görsel hiyerarşisiyle, kullanıcıların bir web sayfasında daha uzun süre kalmasını sağlayabilir.

Sağda - başka bir reklam ve çoğu kullanıcının görmek istediği bir "En Popüler" widget. Variety, bu kadar çok içeriğe sığması için onu kaydırılabilir bir alana dönüştürmeye karar verdi.

Bu, daha büyük yayıncılarda çoğunlukla peşinde olacağınız düzen türüdür.

BuzzFeed, daha büyük miktarlarda metinle çalışmak üzere yapılmış başka bir düzen örneğidir. Burada tasarım, canlı renkler ve dikkat çekici şekillerle (sağ üst köşedeki üç düğme gibi) daha eğlenceli.

Sağdaki Trendler'de 1, 2, 3, "Son Dakika" haberleri için parlak kırmızı etiket vb. Gibi daha fazla "sıralama" vardır. Benzer bir tasarımdaki önemli bir eğilim, kullanıcının dikkatini çekmektir. Bu dikkat iyi yönlendirilmelidir, çünkü onu eşit derecede önemli iki öğe arasında bölmek istemezsiniz.

İşte her şeyin zirvede olmaya çalıştığı yanlış yaklaşımın bir örneği:

Amacın tamamen farklı olduğunun ve yukarıdaki sitenin aslında iyi bir kazanç sağlayabileceğinin farkındayız, ancak "dikkatinizi çekmeye çalışan her şey" ilkesini çok iyi gösteriyor.

Dijital Yayıncılar ve Reklam

Reklam etrafında tasarım yapmak, yayıncılar için bir başka önemli konudur. Ana gelir kaynağı olduğu düşünüldüğünde, aynı zamanda birinci önceliktir. Bir tasarımcının burada dikkate alması gereken birkaç şey vardır, bunlardan ilki, bu reklamların gereksinimlerini ve işlevselliğini iyi anlayan AdOps ekibinden geri bildirim veya iyi bilgiler almaktır.

Bunun örnekleri, reklam boyutlarıdır. 300 × 250, 300 × 600, 728 × 90 ve 300 × 50 vardır.

• Bazıları, farklı noktaları kaydırabileceğiniz ekranın bir tarafına yapışabilir
• Bazıları kendi küçük köşelerinde kalabilir, bazıları her zaman sayfanın üstüne yapışabilir.
• Diğerleri iki 300 × 250 veya bir 720x90 piksellik çiftler halinde görünür.

Tüm bunları nasıl biliyorsunuz ve gereksinimler nelerdir?

Yani evet, birinci adım tüm bu bilgileri toplamak olacaktır. Buna bakmanın daha kolay bir yolu, Yerleşimler açısından. Tek bir gönderi, yayıncının hedeflerine bağlı olarak birden çok düzene sahip olabilir. Bazen daha az reklam vardır, bazen daha fazlası vardır. Bazen reklamların boyutu farklı yüklemeler için değişir, diğer zamanlarda sabit kalır. Yeni trendler ve kurallar ortaya çıktıkça her şey hızla değişebilir. Genellikle günlük olarak!

Akılda tutulması gereken önemli şeylerden bazıları şunlar olabilir:

• Yüksekliğe sahip reklamlar yüklenebilir. Bu, içeriğin aşağı itileceği ve belirli bir parçacığın üst kısmına sığacak şekilde yapılan tasarımın başarısız olacağı anlamına gelir.
• Reklamların arka plana ihtiyacı olabilir. Bu, reklamı çevreleyen ve ekranın köşelerine dokunan açık gri bir arka plan olabilir.
• Yanlışlıkla dokunmaları önlemek için reklamların çevresinde genellikle boşluk bırakılması gerekir. 20-30 piksel, reklamlar arasında iyi bir mesafedir.
• Reklam sağlayıcılara daha fazla hitap etmek için öncesine / sonrasına bir "Reklam" etiketi eklemek istersiniz.
• Çok fazla reklam olmamalı! Bunun en güzel yanı, bir AdOps ekibinin belirli bir yayıncıyı, belirli bir sayfayı ve hatta belirli trafiği (Facebook, Snapchat vb.) Bulmak için çalışacağı şeydir.

Yayıncı Web Sitesinin Performansı

Kötü performansa en büyük katkıda bulunanlardan biri, etrafında tonlarca başka komut dosyasıyla yüklenmeye çalışan 8'den fazla reklamın bulunduğu kurulumlardır. Her şey kodda varken bu neden bir tasarımcının endişesi? Geliştiriciler bunu sadece optimize edemez mi? Evet, ama bu neredeyse tek başına tam zamanlı bir iş ve tasarımcı yardımcı olabilir. Tüm bunları anlamak için önce tarayıcılar hakkında biraz bilgi sahibi olmanız gerekir.

Kaynak

Tarayıcılar, bir ön uç geliştiriciden belirli bir öğenin kodlanma şekline bağlı olarak bir makinenin CPU'sunu veya GPU'sunu kullanabilir. Bazen, üzerine gelindiğinde animasyonlar ve etkileşimler gibi eylemler, basın CPU veya GPU'yu kullanır. Örneğin bir animasyon CPU kullanıyorsa gecikme olması oldukça muhtemeldir, eğer GPU ise, o zaman daha iyi performans elde etmek mümkündür. Tasarımcının gereksinimleri, ikisi arasındaki fark olabilir.

İşte birkaç genel ipucu:

• Çok az gölge kullanın veya hiç kullanmayın. Gölgelerin özellikle düşük kaliteli mobil cihazlarda ve dizüstü bilgisayarlarda oluşturulması çok pahalıdır.
• Çok pahalı oldukları için arka plan filtreleri veya bulanıklaştırma (veya herhangi bir filtre) kullanmayın.
• Ek bilgi işlem kullanımını azaltmak için şekilleri olabildiğince basit tutun.
• Düzeni etkileyen öğelerin (diğer öğeler) animasyonlarını talep etmeyin. Mümkün olduğunca bunun etrafında tasarlayın. Üst üste gelen veya açılır pencere olan her şey daha iyi bir seçimdir.
• Resimleri nispeten küçük tutun. Bu, geliştiricilerin siteye ağırlık kazandıracak daha küçük boyutlu görüntüler yüklemelerine olanak tanır.
• Genel olarak animasyonları minimumda tutun, özellikle site yüklenirken. Aynısı yerleşim değişiklikleri için de geçerlidir. İlk yükleme, tüm JavaScript uygulandığında bir web sitesi için en yoğun CPU zamanıdır.

Kaynak

Tasarımın Önceliği

Yayıncı sitelerindeki trafiğin çoğunluğu Mobil'den geliyor. Bu nedenle, tüm ayrıntıları cilalamak için en çok harcanan zaman oraya gitmelidir. Mobil cihazlarda da optimizasyonların çoğunun gerekli olduğu yer, çünkü cihazların çoğu üst düzey amiral gemileri değil, 200-300 dolarlık akıllı telefonlar.

Mobil cihazlarda odak noktanız, reklamları net bir şekilde sunarken içeriği okunabilir tutmaktır. Reklamlara yanlışlıkla yapılan tıklamaları kaldırmak için tıklanabilir öğeler ile reklamlar arasındaki mesafeyi büyük tutun. Mümkünse, siteyi daha az hızlı hale getirebilecek tüm animasyonları ve katmanları azaltın.

Özet

Yayıncılar çok sayıda içeriğe ve çok sayıda reklama odaklanır. Genel olarak, trafik genellikle doğrudan diğer reklamlardan makalelere geldiğinden açılış sayfaları ve arşivler tekli görünümlerden daha az önceliklidir. Bir tasarımcı olarak odak noktanız, reklamları yaymanın en uygun yolunu bulmak, uygun boşlukları eklemek ve her şeyi okunabilir ve kullanılabilir durumda tutmak için bunları ana içerikten iyice ayırmaktır.

Hız performansını artırmak için karmaşık UI öğelerini minimumda tutun ve mümkün olduğunca az animasyon isteyin. Her şeyi iyi bir şekilde özetlemek için, yayıncıların genellikle AdOps ile iyi bir deneyime sahip geliştirme ajanslarıyla çalışması, en son trendleri takip etmesi ve DevriX gibi sektördeki teknoloji yığınları ile çalışması gerekir.